728x90 반응형 > 메모68 [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. [JS] 셀렉터에 대한 글 셀렉터 document -> 문서인데 여기선 html 웹문서 마침표 -> ~의 getElementById('어쩌구') -> 아이디가 '어쩌구'인 html 요소 (일명 element) 를 찾으라는 의미 html 요소를 찾아주는 셀렉터 = getElementById() getElementsByClassName() querySelector document.querySelector => $ (제이쿼리) 2024. 4. 1. [JS] 까먹은 이벤트 버블링과 이벤트 함수들 이벤트 버블링 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상 이벤트리스너 안에서 쓰는 이벤트 함수들 이벤트 버블링 막거나 이벤트가 이상하게 동작하는걸 막을 수 있다 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; e.currentTarget; e.preventDefault(); e.stopPropagation(); }) 이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면 이벤트관련 유용한 함수들을 사용가능 e.target e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳) - 유저가 실제로 누른거 그 클릭한 요소를 알려 줌. e.currentTarge.. 2024. 3. 31. [JS] for문 관련 메모 (2) for 반복문 for (횟수){ 복붙할 코드 } 3회 반복 // 횟수 3회 반복 for (var i = 0; i < 3; i++) { console.log("안녕"); } // i를 0부터 시작해서 / i에 1씩 더해가면서 복붙해라 / 근데 i < 3 까지 0, 1, 2 이렇게 3회 반복 3 - 0 = 3 으로 계산해도 됨. 3 되기 전에 끝내기 for 반복문으로 탭기능 코드 줄여보기 $(".tab-button") .eq(0) .on("click", function () { $(".tab-button").removeClass("orange"); $(".tab-button").eq(0).addClass("orange"); $("tab-content").removeClass("show"); $("tab-co.. 2024. 3. 31. [JS] for문 관련 메모 (1) 준비물 HTML Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping CSS .navbar { position: fixed; width: 100%; z-index: 5; } .navbar-brand { font-size: 30px; transition: all 1s; } /* detail.html */ ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ""; display: block; clear: both; } .tab-button { display:.. 2024. 3. 31. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형
