호다닥

ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info capturing 과 bubbling 을 컨트롤하기 위한 꿀팁!! if ( event.target !== event.currentTarget ) { return; } /* 위 코드를 각각의 eventListner 에 삽입해준다. */ cf) event.stopPropagation(); event.stopImmediatePropagation(); stopPropagation 이나 stopImmediatePropagation 은 부모 컨테이너에서 작동하는 event의 동작에 영향을 미칠 수 있기 때문에 사용을 권장하지 않는다.

프로그래밍 언어 약속된 구문 (문법, Syntax)로 구성된 프로그래밍 언어를 사용하여 기계어를 대신 전달한 후, 컴파일러 (Compiler) 혹은 인터프리터(Interpreter)를 통해 기계어로 반환한다. *** 구문(Syntax) & 의미(Semantics) Javascript 자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등을 아우르는 개념이다. 특징 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다...

dataset 을 사용하기에 앞서 HTML에 data attribute를 customize 해줘야한다. Home About Skills My Work Testmonials Contact dataset attribute를 customize 하기 위해서는 data-(변수명) 으로 작성하고 value를 주면 된다. 그럼 dataset 에 -link라는 변수에 값들을 할당한 것이다. const navbarMenu = document.querySelector(".navbar__menu"); navbarMenu.addEventListener("click", (event) => { console.log(event.target.dataset.link); });

box-sizing : ( content-box (defualt) / border-box ) --subject-font: 32px;font-size: var(subject-font); border-box 는 box size를 결정할 때 border까지 합한다. 즉, padding 과 border를 모두 포함한다. 기본값인 content-box는 컨텐츠만 지정한다. position : ( static / absolute (default) / relative ) static은 기본값으로 아무런 효과 없다. relative 는 원래 있던 자리를 기준으로 이동한다. absolute 는 근접한 부모 중에 기본값인 static이 아닌 부모의 기준에서 움직인다. 중간에 position: relative 인 부모가 없..

function에서 console.log 와 return의 차이 5번째 줄 코드에서 greetNicolas 는 sayHello 함수의 리턴값이다. 다시 말해 greetNicolas는 sayHello의 실행된 결과값이다. 하지만 sayHello 함수는 아무것도 반환하지 않았다. greetNicolas에 반환값을 주고 싶으면 아래와 같이 sayHello 함수에 return , 반환값을 부여하면 된다. return 값을 주어 나만의 function 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const calculator = { plus: function (a, b) { return a + b; }, minus: function (a, b) { ret..

Event (이벤트) HTML 요소들에게 일어날 수 있는 일들 사용자가 요소를 클릭한다 마우스가 요소 위로 올라온다. 마우스가 요소 밖으로 나간다. 페이지 로딩이 끝난다. 사용자가 키보드를 누른다. 이런 이벤트가 일어났을 때 어떤 동작들이 일어나도록 할 수 있는데, 이런 동작을 가능하게 하는 것이 Event Handling 이다. 사용예시1 사용예시2 HTML 부분에는 Javascript 코드를 최대한 적게 넣어야 코드가 깔끔해보인다. 사용예시의 코드들을 아래처럼 작성하면 좀 더 깔끔해보인다. jQuery vs 순수 자바스크립트 이벤트를 등록하는 jQuery 코드의 예시는 아래와 같다. $('#home').on('click', clickHome); $('#seoul').on('click', clickSe..

일반적으로 반복 횟수가 예측 가능할 때는 for 문을 사용하는 것이 가독성이 더 좋고, 반복 횟수를 예측할 수 없으면 while 문을 사용하는 것이 더 적합한 경우가 많다. 로그인 모듈 사용자에게 아이디와 비밀번호를 입력받아서 '로그인' 시키는 모듈을 아래 두 가지 방법으로 만들어보자. 1. 다섯 번의 기회만 주는 모듈 2. 성공할 때까지 기회를 무제한으로 주는 모듈 횟수제한 ( for문 ) // 로그인 성공 여부를 보관하는 변수 var login = false; // 최대 다섯 번의 기회를 준다 for (var i = 0; i < 5; i++) { // 아이디와 비밀번호를 입력 받는다 var id = window.prompt("아이디를 입력하세요"); var password = window.prompt..

break 문 만약 while 문의 조건부분과 상관없이 반복문에서 나오고 싶으면 break문을 쓰면 된다. var i = 100; while (true) { // i가 23의 배수면 반복문을 끝냄 if (i % 23 == 0) { break; } i = i + 1; } console.log(i); 115 continue 문 만약 현재 진행되고 있는 수행부분을 중단시키고 바로 조건부분을 다시 확인하고 싶으면 continue 문을 쓰면 된다. var i = 0; while (i < 15) { i = i + 1; // i가 홀수면 console.log(i) 안하고 바로 조건부분으로 돌아감 if (i % 2 == 1) { continue; } console.log(i); } 2 4 6 8 10 12 14

Array 배열의 길이 length 속성은 배열의 길이를 담고 있다. var brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.length); 3 배열에서 특정 값 찾기 문자열에서 썻던 indexOf가 배열에서도 똑같이 동작한다. array.indexOf(item) 을 하면 array 배열에 item이 포함되어 있는지 확인 할 수 있다. 만약 포함되어 있다면 item이 있는 인덱스가 리턴된다. 포함되어 있지 않다면 -1이 리턴된다. 여러번 포함되어 있으면 처음 발견된 인덱스가 리턴된다. var brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.indexOf('Starbuck..

Math 절대값 (Absolute Number) console.log(Math.abs(-10)); console.log(Math.abs(10)); 10 10 최댓값 (Maximum) console.log(Math.max(2, -1, 4, 5, 0)); 5 최솟값 (Minimum) console.log(Math.min(2, -1, 4, 5, 0)); -1 거듭제곱 (Exponentiation) console.log(Math.pow(2, 3)); console.log(Math.pow(5, 2)); 8 25 제곱근 (Square Root) console.log(Math.sqrt(25)); console.log(Math.sqrt(49)); 5 7 반올림 (Round) console.log(Math.round(2..