본문 바로가기
728x90

분류 전체보기427

[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.
[JS] array 와 object 자료형 & 데이터바인딩 (1) 자료형변수등 여러가지 자료를 한곳에 저장하고 싶을 때 사용array 자료형- 대괄호 []- [숫자] = 인덱스 var car = "소나타";var carPrice = 50000;var carColor = "white";이와 같은 변수들을var car = ['소나타', 50000, 'white'];다음과 같이 한 곳에 저장자료 꺼내기 - 숫자var car = ['소나타', 50000, 'white'];console.log(car[1]);50000만 꺼내고 싶은 경우인덱스를 사용해 꺼낼 수 있음.인덱스 - 0부터 시작 자료 수정var car = ['소나타', 50000, 'white'];car[1] = 8000;자료 수정도 인덱스로 함.자료 추가var car = ['소나타', 50000, 'white'];c.. 2024. 4. 1.
728x90

티스토리툴바