I'm a Fig, Not a Pig

목차 1. 화살표 함수란? 2. 기본문법 3. this 4. 화살표 함수의 this 바인딩 5. 화살표 함수를 쓰면 안되는 경우 1. 화살표 함수란? 화살표 함수는 ES6 에서 새로 등장한 함수 선언 방법이다. function 키워드를 사용해서 함수를 만든 것 보다 간단히 함수를 표현할 수 있다. // 일반 함수(함수 표현식) const sum = function(x, y) { return x + y; } sum(3, 4); //7 // 함수 선언식: function 키워드로 단독으로 함수를 선언한 것 // function sum(x,y) { // return x + y; // } 또한 화살표 함수는 익명 함수이다. // 화살표 함수 const sum = (x, y) => x + y; sum(3, 4);..

목차 1. append() 2. appendChild() 3. append() vs appendChild() 4. prepend() appen()과 appendChild()는 모두 부모 노드에 자식 노드를 추가하는 메서드이다. 1. append() const parent = document.createElement('div'); const child = document.createElement('p'); child.append('텍스트1','텍스트2'); // undefined parent.append(child); // undefined console.log(parent) // "텍스트 1" "텍스트 2" 우선 append 메소드를 살펴보면, 노드 객체뿐만 아니라 문자열 또한 추가할 수 있다. 또한 한..

목차 1. for 문 2. for...in 문 3. for...of 문 4. forEach문 1. for 문 반복문은 같은 명령문은 여러번 반복하는 구문이다. 대표적으로 for문이 있다. for (let i = 0; i < 5; ++i) { console.log(i + "번째 출력"); } // output: // 0번째 출력 // 1번째 출력 // 2번째 출력 // 3번째 출력 // 4번째 출력 for 문의 구조는 아래와 같다. let i = 0; → 초기화 (1) i < 5; → 조건식 (2) console.. → 실행문 (3) ++i → 증감문 (4) for 문의 초기화 부분에서 선언된 변수는 for문 외부에서 접근이 불가하다. 만약 접근하고 싶다면 외부에서 먼저 선언하면 된된다. let i; fo..

목차 1. querySelectorAll 2. 예제 1. querySelectorAll querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드이다. querySelector()가 한 개의 요소를 반환했다면 querySelectorAll()은 주어진 CSS 선택자와 일치하는 모든 요소를 반환한다. 사용방법은 querySelector() 와 동일하며 HTML 요소가 아닌 nodeList 형태로 값을 반환한다. 따라서 인덱스를 통해 조작이 가능하고 반복문을 이용해 작성해야 한다. - 구문 document.querySelector(selectors); 2. 예제 1) 아래 코드는 클래스 값이 abc인 모든 요소를 가져온다. document.querySelectorAll..

목차 1. Strict Mode란? 2. Strict Mode 장점 3. 사용방법 4. Strict Mode 에서 허용되지 않는 문법 1. Strict Mode 란? strict 모드는 ECMAScript 5부터 적용되는 키워드로 올바르지 않은 문법을 사전에 검출해 줍니다. 또한 안전한 코딩을 위한 하나의 가이드 라인입니다. 2. Strict Mode 장점 - 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생 시킵니다. - 상대적으로 안전하지 않은 액션이 발생하는 것을 방지합니다. - 정확하게 고려되지 않은 기능들을 비활성화 시킵니다. 3. 사용방법 Strict Mode로 설정하는 방법은 간단합니다. 코드 앞쪽에 "use strict"을 추가하면 됩니다. 4. Strict Mode 에서 허용되지 않는 문법..

오늘은 class를 추가해주는 방식 중 하나인 classList에 대해 다룰 것 이다. 'click'이라는 이벤트를 실행할 때마다 폰트 컬러를 바꾸는 예제를 통해 classList의 사용 방법에 대해 알아보자. 우선 html, javascript 파일에 다음과 같은 코드를 작성했다. -html This works - js const title = document.querySelector("#title"); 이후 각각의 css, javascript 파일에 clicked 이라는 클래스를 추가했다. - css h1 { color: blue; } .clicked { color: green; } - js const CLICKED_CLASS = "clicked" 다음으로 클릭이라는 이벤트를 실행할 때마다 색이 바뀌..

목차 1. target, currentTarget 2. target과 currentTarget의 차이 3. 퀴즈 자바스크립트에서 이벤트를 다룰 때 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 1. target, currentTarget 요약 - target: 이벤트가 발생한 바로 그 요소를 직접 가리킴 - currentTarget: 이벤트 리스너를 가진 요소를 가리킴 예제 다음과 같은 코드가 있습니다. span 실행결과 위 결과에서 검은색은 div, 핑크색은 span입니다. 코드를 보면 onClick 이벤트는 div에 설정을 했지만 검은색, 핑크색 클릭 시 둘 다 이벤트가 발생합니다. div에만 이벤트를 설정했는데 자식요소인 span..

목차 1. prompt() 2. confirm() 3. alert() 4. confirm()과 alert()의 차이 5. 퀴즈 1. prompt() 함수 - 문자열을 입력할 때 사용합니다. - 숫자를 입력해야 한다면 입력한 값을 숫자로 변환하여 사용해야 합니다. - prompt("메세지", "디폴트 값") 에서 첫번째 파라미터는 입력 창에 띄워지는 메세지이며 두번째 파라미터는 입력 부분의 기본 디폴트 값 입니다. let promptObj = prompt('값을 입력하세요', 'Default Value'); - prompt() 만 사용하는 경우 아무런 설명없이 문자열만 입력받습니다. 예제 prompt() 함수를 사용해보겠습니다. let promptObj = prompt('값을 입력하세요', 'Default..

1. return 정의MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.' 라고 되어있다. 1. 함수 중단 2. 주어진 값을 함수 호출 지점으로 반환 2. return 설명함수 본문에서 return문을 만나면 함수는 그 지점에서 중단된다. 값을 제공한 경우에는 함수를 호출한 곳에 그 값을 반환하며 값을 명시하지 않으면 undefined를 반환한다. 아래의 return 명령문은 모두 함수 실행을 중단한다.return; return true; return false; return x; return x + y / 3; break와의 차이break란? 현재 루프 즉, switch나 for, while문 등을 종료하고 루프에서 빠져나오는 것 return..

목차 1. event.stopPropagation(); 2. event.preventDefault(); 1. event.stopPropagation(); Propagation는 전파, 확산이라는 의미를 가지고 있다. 사용자가 웹페이지 내의 버튼을 누르면 대부분의 사람들은 버튼만 반응했다고 생각하지만 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그를 또한 클릭 이벤트에 반응하게 된다. Hello 위의 코드를 보면 a태그는 li, ul 두 개의 부모태그가 있다. 사용자가 a태그를 클릭하면 클릭이벤트가 li, ul 태그가 순차적으로 실행된다. 만약 a태그를 클릭했을때 li, ul 태그가 실행되지 않게 하려면 event.stopPropagation();를 사용하면 된다. 2. event.preventDefau..