웨일의 블로그 웨일의 블로그

디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 브라우저에 UI 형태로 디버깅 툴이 있어서 쉽게 디버깅이 가능하다. 크롬->개발자모드-> Sources 코드 줄번호 클릭하면 중단점 설정 가능, 디버깅 시작하면 중단점에서 자바스크립트 실행이 중단되고 오른쪽 창에 정보가 뜸. 파란색 화살표로 디버깅 시작, Step버튼으로 다음 명령어 실행 console.log()로도 디버깅 비슷하게 할 수 있다.

화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전이다. let sum = function(a,b) { return a+b; } */ alert(sum(2,5)); // 7 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. let double = n => n * 2; alert(double(3)); // 6 인수가 하나도 없을 때는 괄호만 쓴다. 이때 괄호는 생략할 수 없다. let sayHi = () => alert('안녕하세요'); sayHi(); // '안녕하세요' 본문이 여러 줄인 화살표 함수 평가해야 할 구문이 여러 개인 함수일때는 중괄호를 사용해야 한다.이때 ..

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 함수 표현식보다는 함수 선언문을 선택하는 걸 먼저 고려한다. 함수 선언문과 함수 표현식의 차이 // 함수 선언문 sayHi('John'); // Hello, John function sayHi(name) { alert(`Hello, ${name}`); } // 함수 표현식 sayHi('John'); // error! let sayHi = function(name) { alert(`Hello, ${name}`); } 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성하기 때문에 함수 선언문이 선언되기 전에 해당 함수를 호출하는 코드를 작성해도 정상적으로 실행이 된다. 그러나 함수 표현식으로 정의한 함..

첫 번째 truthy를 찾는 OR 연산자 || result = value1 || value2 || value3; 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다. 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)에는 마지막 피연산자를 반환한다. alert(1||0); // 1 (1은 truthy임) alert(undefined || null || 0); // 0 (모두 falsy이므로, 마지막 값을 반환함) 활용법 1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기 let firstName = ''; let lastN..

나머지 연산자 % a%b: a를 b로 나눴을 때 나머지를 출력 거듭제곱 연산자 ** a**b: a를 b번 곱한 값을 출력 단항 연산자 +와 숫자형으로의 반환 alert(+true); // 1 alert(+''); // 0 let apples = '2'; let oranges = '3'; alert(+apples + +oranges); // 5 할당 연산자 let a = 1; let b = 2; let c = 3 - (a = b + 1); // a에 b+1 = 3을 반환하고 표현식에 사용된다. alert(a); // 3 alert(c); // 0 증가, 감소 연산자 전위형과 후위형의 차이 let counter1 = 1; let a = ++counter1; // counter1을 1 증가시키고 2를 반환한다..

문자형으로 변환 String() let value = true; alert(typeof value); // boolean value = String(value); // "true" 저장 alert(typeof value); // string 숫자형으로 변환 Number() let str = '123'; str = Number(str); alert(typeof str); // number 불린형으로 변환 숫자0,빈 문자열, null, undefined, NaN같이 직관적으로 비어있다고 느껴지는 값들은 false가 된다. 그 외의 값들은 true로 변환된다. alert(Boolean("Hello")); // true alert(Boolean('')); // false

자바스크립트 미니 프로젝트 클론코딩을 진행하다가 자바스크립트 개념이 부족한 느낌을 받아서 이론공부를 시작했다. https://ko.javascript.info 모던 JavaScript 튜토리얼 ko.javascript.info alert 메세지가 있는 작은 창을 모달 창(modal window)라고 부르고, 모달이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다. 확인버튼을 눌러야 상호작용이 가능하다. 모달창이 떠있는 동안은 스크립트 실행이 일시중지된다. prompt 브라우저에서 제공하는 함수로, 두 개의 인수를 받는다. result = prompt(title, [default]); title: 사용자에게 보여줄 문자열 default: 초깃값 [default]에서 대괄호의 ..

Flex Panels Image Gallery 요구사항 1. 패널을 클릭하면 패널이 확장되고 확장이 완료되면 위아래에서 문구가 들어온다. 2. 확장된 패널을 클릭하면 패널이 축소되고 문구가 위아래로 나간다. 1. HTML 구성 - 패널박스 panels 안에 패널 5개가 들어가 있고 각 패널은 p태그 3개로 이루어져 있다. Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 2. CSS 구성 - body margin: 0으로 해서 화면에 꽉 차게 한다. - panels클래스 display: flex로 가로정렬, min-height:100vh로 사용자 화면에 꽉차게, overflow:hidden으로 빠져나온..