< devHyebin/>

ES6부터 Map, Set 자료형도 추가되었다. 아직 자주 쓰이지는 않지만 미래에 우리를 생각하며 배워보자! Map : Object 자료형과 똑같이 key, value 형태로 자료를 저장할 수 있는 자료형이다. ► Map에 값을 넣는 방법 1. set 이라는 키워드를 사용 2. [ ] 대괄호로 자료를 한 번에 넣기 let m = new Map(); m.set('하나', '1'); m.set(1, '하나'); m.set(true, 1); m.set(false, 0); //-------------------- let person = new Map(); let person = new Map([ ['age', 20], ['name', 'Kim'] ]); 👉 출력해보면 기존 object와는 다르다.!! 1. 화살..

웹 페이지에 이런 탭기능이 있는 것을 진짜 많이 볼 수 있었다.! ( 이렇게 ul 안에 li 요소를 누르면 해당되는 내용까지 볼 수 있게 구현하는 것이다.) Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 1. 냅다 막 넣어보기 const tabBtn = document.querySelectorAll(".tab-button"); const tabCont = document.querySelectorAll(".tab-content"); for (let i = 0; i < tabBtn.length; i++) { for (let j = 0; j < tabBtn.length; j++) { tabBtn[i].a..

X초 후에 코드를 실행 : setTimeout setTimeout(function(){ 실행할코드~ }, 기다릴시간); 👉 5초 후에 위의 를 숨기기 const alert = document.querySelector(".alert"); setTimeout(function () { alert.style.display = "none"; }, 5000); X초 마다 코드를 실행: setInterval setInterval(function(){ 실행할코드~ }, 기다릴시간); 👉 1초마다 5라는 문자를 1씩 감소시키고, 0이 되면 를 안보이게 처리하기 const alert = document.querySelector(".alert"); const time = document.querySelector(".time..

preventDefault() 브라우저의 기본 이벤트 동작을 취소한다. (하지만 이벤트 전파는 못 막음) 브라우저는 HTML 태그를 통해 여러가지 기능들을 제공하지만, 때때로 그러한 기능이 방해가 되는 경우가 있다. 네이버 링크입니다만.. 제출 이벤트 타입: 'contextmenu' window.addEventListener('contextmenu', (event) =>{ event.preventDefault(); alert("다 보고 있어염!"); }); stopPropagation() 부모로부터의 이벤트 전파를 stop하는 것이다. 제출 답: ‘clicked’부터 찍힘. 기본값인 버블링이벤트라서 밑에서 루트까지 타고 올라가면서 이벤트 전파. 1. 이벤트 전파를 막고 싶다..

Event Flow 란 ? 브라우저 화면에 이벤트 발생!!! 브라우저는 가장 먼저 이벤트 대상을 찾기 시작한다. 이를 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다는 것을 알수 있다. 그리고 캡처링 버블링 이러한 과정에서 이벤트리스너가 차례대로 실행되는 것이 이벤트전파(Event propagation)라고 한다. 캡처링 ? 버블링 ? 요소.addEventListner(이벤트, 함수, 캡처 여부); 이벤트 리스너에 세 번째 매개변수로 이벤트를 캡쳐하는지 여부를 지정하며 기본값은 false (버블링)이다. 캡처링 (true) - DOM의 부모노드에서 자식노드로 전달되는 것, 위에서 아래로 탐색하다가 캡처링 이벤트를 발견하면 몽땅 실행시킴 버블링 (false) - D..

이벤트 삽입 대기타고 있다가 이벤트를 감지하면 발사! target.addEventListener( type, listener) 실행될 콜백 함수 = type이라는 이벤트가 작성했을때 listener를 실행해라 여러가지의 종류가 있다. 👉 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지한다. listener 함수의 인수에는 이벤트에 대한 정보가 담겨있다. const myBtn = document.querySelector("button"); myBtn.addEventListener('click', function(){ console.log("hello world"); }) 클래스 제어 : DOM api를 통해 요소의 class 속성을 제어할 수 있다. 👀 근데 왜 cla..

DOM 이란? : 자바 스크립트에서 웹 문서의 객체를 다루는 시스템을 '문서객체모델'(DOM)이라고 한다. HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다. 👀 DOM을 왜 배워야 할까? 웹에서 js를 사용하는 이유는 웹문서의 일부를 동적으로 반응하게 하는 것인데 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다. 또는 이미지가 몇개인지, 텍스트 몇개인지 , 어떤 조건만 해당할 것인지 제어할때 사용하는 것이 DOM이다. html 코드를 DOM으로 파싱하는 것? 파싱은 어떤 데이터를 다른형태로 바꿔주는 것이다. (JS객체 > JSON객체, xml > J..

for..in문 객체 안에 속성을 조회하는데 사용되는 반복문이다. 객체의 key와 value값을 뽑을 때 유용하게 사용된다. 💡 배열에 사용될 경우에는 object이기 때문에 배열의 index가 출력된다. for(변수명 in 객체명){ 실행문; } ❗️하지만 for ..in는 기본적으로 key 값만 출력한다❗️ console.log(value[변수명]) 템플릿 리터널 사용 : console.log(`${value[변수명]}`) object 메스드 이용: Object.values(객체명); let 포켓몬 = { 피카츄: 1, 라이츄: 2, 파이리: 3, 꼬부기: 4, 버터플: 5, 야도란: 6, 피죤투: 7, 또가스: 8, 메타몽: 9, }; // key 값..

👉 배열을 초기화 할때 사용하는 두가지 방법 [from / fill] from: 객체를 얕게 복사해 새로운 객체 생성 fill: 정적인 값 한가지, 요소의 위치를 지정가능 from 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다. 기존 객체를 이용해 새로운 배열을 만들어야 할 때 Array.from('js공부중'); //['j', 's', '공', '부', '중'] Array.from([1, 2, 3], x => x + x); // [2, 4, 6] 💡 유사배열 객체란? 유사 배열 객체는 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를..

join 배열 → 문자열 요소들을 연결해 하나의 값으로 만들 때 array.join(매개변수: 각 요소를 구분할 문자열) ( 매개변수를 생략하면 배열의 원소들의 쉼표로 구분한다.) const arr = ['하나', '둘', '셋']; console.log(arr.join()); // 하나,둘,셋 console.log(arr.join('')); // 하나둘셋 console.log(arr.join('-')); // 하나-둘-셋 split 문자열→ 배열 문자열을 나누거나 구분하는 방법이 필요할 때 str.split('구분의 기준이 되는 문자열') const beforeStr = "010-123-4567"; console.log(beforeStr.split('-')); //['010', '123', '4567'..