728x90 분류 전체보기530 [JS] Ajax 정리 (2) 준비물 HTML Card title 가격 : 70000 JS// -- 13-1) Ajax var products = [ { id: 0, price: 70000, title: "Blossom Dress" }, { id: 1, price: 50000, title: "Springfield Shirt" }, { id: 2, price: 60000, title: "Black Monastery" }, ]; var 템플릿 = ` ${products[0]["title"]} 가격 : ${products[0].price} `; $(".row").append(템플릿); 3개 만들거니까 반복문 사용var products 변수가 array 로 시작하니까forEach 문을 써준다.products.forEach((a) => { v.. 2024. 4. 5. [JS] Ajax 정리 (1) GET / POST 비교GET요청 - 서버에 있던 데이터를 읽고싶을 때POST요청 - 서버로 데이터를 보내고 싶을 때 GET, POST 요청을 저렇게 날리면 , 브라우저가 새로고침된다.= Ajax 사용하기 AJAX란?- 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 jQuery로 AJAX요청하기 GET 요청$.get('https://codingapple1.github.io/hello.txt');여기 경로 데이터 갖고옴$.get('https://codingapple1.github.io/hello.txt').done(function(data){ console.log(data)});데이터 확인하기= .done 아니면 .then 뒤에 붙이고 콜백함수넣.. 2024. 4. 3. [JS] forEach, for in 반복문 var pants = [28, 30, 32]; $('.form-select').eq(0).on('input', function(){ var value = $('.form-select').eq(0).val(); if (value == '셔츠') { $('.form-select').eq(1).removeClass('form-hide'); } else if (value == '바지'){ $('.form-select').eq(1).removeClass('form-hide'); $('.form-select').eq(1).html(''); for (let i = 0; i < pants.length; i++){ 생성해주세요~ } } 팬츠의 개수만큼 반복 다음과 같은 for문 코드 사용하지 않고 반복하는 방법 forE.. 2024. 4. 2. [JS] 자바스크립트로 html 태그 생성 html 생성하는 법 (1) 1) document.createElement() 함수 document.createElement('p') p 태그 생성 원하는 div 안에 p 태그 집어넣기 - appendChild var a = document.createElement('p') document.querySelector("#id").appendChild(a); div 태그의 아이디를 셀렉터로 찾은 다음, appendChild 사용 - 변수에 넣어서 사용하면 간단. 생성된 p 태그에 글자 넣기 var a = document.createElement('p'); a.innerHTML = '안녕'; html 생성하는 법 (2) 변수에 넣어서 html 에 쓰듯이 코딩 var a = '안녕'; 1) insertAdjac.. 2024. 4. 2. [JS] Select 태그 다루기 Select 태그 는 이랑 동일 선택지를 드랍다운 메뉴로 제공하는 HTML 상품선택 모자 셔츠 95 100 CSS /* 11) Select 인풋 다루기 */ .form-hide { display: none; } 미리 숨겨두기 유저가 셔츠선택하면 form-hide 제거해서 숨겨뒀던 95, 100 보이게 하기. if 문 사용 ( ~ 하면) if (유저가 선택한거 == '셔츠') { $('.form-select').eq(1).removeClass('form-hide'); } $('.form-select').eq(1) 이것 과 동일한 것 95 100 유저가 에서 뭐 선택했는지 아는 방법 document.getElementById('인풋태그찾고').value 인풋태그에서 사용했을 때, 제이쿼리셀렉트 쓰려면 $(".. 2024. 4. 2. [JS] array 와 object 자료형 & 데이터바인딩 (2) 준비물 데이터 바인딩 - 데이터와 화면을 연결 - ex) 가격표 실시간 변경 첫째 상품명(Blossom Dress)을 뽑기 - console.log 로 먼저 찍음 console.log(products); 다음과 같이 나온다 시작기호 보기 [ 시작 - array 그 다음 { - object 3개 HTML에 클래스 부여 Card title 이렇게 셀렉터가 html 요소를 찾기 쉽게 하기위해 클래스를 부여. 또는 document.querySelectorAll(".card-body h5")[0] 이렇게도 쓸 수 있다. document.querySelector(".card-title").innerHTML = products[0]["title"]; 인덱스 (array) 먼저 써주고 순차적으로 이름 (object) .. 2024. 4. 1. 이전 1 ··· 44 45 46 47 48 49 50 ··· 89 다음 728x90
