JavaScript
1.[JavaScript] 자바스크립트란?! ✅
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어C언어와 같은
2.[JavaScript] 변수와 호이스팅, 스코프 ✅
데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 자바스크립트에선 let 키워드를 사용해 변수를 생성let message; // 변수를 생성message = 'Hello'; // 문자열을 저장합니다.한 줄에 여러 변수를 선언let user = 'John', age =
3.[JavaScript] 자료형 ✅
자바스크립트에는 여덟 가지 기본 자료형이 있습니다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있습니다.// no errorlet message = "hello";mess
4.[JavaScript] 연산자 ✅
덧셈 연산자 +,뺄셈 연산자 -,곱셈 연산자 \*,나눗셈 연산자 /,나머지 연산자 %,거듭제곱 연산자 \*\*이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합let s = "my" + "string";alert(s); // myst
5.[JavaScript] 조건문과 반복문 ✅
조건에 따라 다른 행동을 취해야 할 때가 있습니다.이럴 땐, if문과 ‘물음표’ 연산자라고도 불리는 조건부 연산자 ?를 사용하면 됩니다.let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');if (year <
6.[JavaScript] 함수 ✅
함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있습니다function name(parameter1, parameter2, ... parameterN) { // 함수 본문}function showMessage() { alert( '
7.[JavaScript] 배열 ✅
키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메서드가 없어 그다지 편리하지 않습니다. 이럴 땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있습니다
8.[JavaScript] 배열 메소드 ✅
요소 추가·제거 메서드arr.push(...items) – 맨 끝에 요소 추가arr.pop() – 맨 끝 요소 제거arr.shift() – 맨 앞 요소 제거arr.unshift(...items) – 맨 앞에 요소 추가배열에서 요소를 하나만 지우고 싶다면 어떻게 해야 할
9.[JavaScript] 객체 ✅
자바스크립트엔 여덟 가지 자료형이 있습니다. 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다.객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 객체는 중괄호 {…}를 이용해 만들 수
10.[JavaScript] 값에 의한 복사, 참조에 의한 복사 ✅
원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠.예시:let message = "Hello!";let phrase = message;예시를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장됩니다.객체의 동작 방식
11.[Javascript] 클래스 ✅
비슷한 형태의 객체 생성을 위해서 생성자 함수를 사용해 왔다.class로도 만들수 있음 (es6에 추가된 스펙)내부에 constructor가 있음. 객체를 만들어주는 생성자 메소드로서, new를 통해 호출클래스 내 정의한 메소드는 user2의 프로토타입에 저장된다. 생
12.[JavaScript] ES6+ 문법 : 템플릿 리터럴, 구조분해할당, rest, spread ✅
함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능function 옆 별로 표시하며 yield 키워드 사용yield에서 함수의 실행 멈출 수 있음generator 함수를 실행하면 generator 객체가 반환된다.generator는 iterable(반복 가능)하므로 여
13.[JavaScript] DOM이란 ✅
1) 자바스크립트 코드의 전역 객체이다.2) '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공한다.\-> 이것이 가능한 이유는 문서객체모델 덕분이다 !문서 객체 모델은 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸 것이다.문서객
14.[JavaScript] DOM의 여러가지 노드 ✅
'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다.함수 이름의 첫 글자는 대문자로 시작합니다
15.[JavaScript] 노드에 접근하기 ✅
진입점을 통과하면 어떤 노드에도 접근할 수 있다.DOM 트리 상단의 노드(documentElement와 head, body)은 document가 제공하는 프로퍼티를 사용해 접근할 수 있다.document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 <html
16.[JavaScript] 부모, 자식, 형제 노드 접근하기 ✅
요소들이 가까이 붙어있다면 앞서 학습한 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있습니다. 그런데, 요소들이 가까이 붙어있지 않은 경우도 있기 마련입니다. 상대 위치를 이용하지 않으면서 웹 페이지 내에서 원하는 요소 노드에 접근하는 방법은 없는 걸까요
17.[JavaScript] DOM 노드 생성, 추가, 복제, 삭제 ✅
함수 내부에서 자기 자신을 호출하는 것을 나타내는 프로그래밍 용어가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수는 재귀 깊이(recursion depth) 라고 한다. pow(x, n)의 재귀 깊이는 n함수가 자신을 호출하는 단계basis라고도 불리는 재귀의 베이
18.[JavaScript] 콜백 함수, 익명 함수, 함수 표현식 vs 함수 선언문의 차이
자바스크립트는 함수를 특별한 종류의 값으로 취급합니다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않습니다.function sayHi() { //함수 선언 alert( "Hello" );}let sayHi = function() { //함수 표현
19.[JavaScript] 자바스크립트 적용
HTML 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있다.
20.[JavaScript] alert, prompt, confirm을 이용한 상호작용
브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보겠습니다.이 함수가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됩니다.alert("Hello");메시지가 있
21.[JavaScript] 메서드와 this
let user = { name: "John", age: 30};사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다.자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다.let user = { name: "Joh
22.[JavaScript] Event
click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때mouseover - 마우스 커서를 요소 위로 움직였을 때mouseout – 마우스 커서가 요소 밖으로 움직였을 때mousemove – 마우스를
23.[Javascript] setTimeout, setInterval
1. setTimeout() 사용법 🔔 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용한다. >첫번째 인자 : 실행할 코드를 담고 있는 함수 두번째 인자 : 지연 시간을 밀리초(ms) 단위 세번째 인자~ : 첫번째 인자로 넘어온 함수가 인자를
24.[JavaScript] 콜백 함수를 통한 비동기 처리
두가지 함수의 형태를 생각해 보자 !결과 : user: {id: 1, name: "User1", email: "1@test.com"}function findUserAndCallBack(id, cb) { const user = { id: id, name: "
25.[JavaScript] Promise를 이용한 비동기 처리
Promise는 현재에는 당장 얻을 수는 없지만 가까운 미래에는 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공한다. 당장 원하는 데이터를 얻을 수 없다는 것은 데이터를 얻는데까지 ❗ 지연 시간(delay, latency) ❗이 발생하는 경우를 의미한다!Prom
26.[JavaScript] async, await을 이용한 비동기 처리
원격 REST API를 호출을 하여 게시물 작성자의 이름을 리턴하는 함수를 작성하고 그 함수를 호출해 보자.✅ await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있으며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해준다. ✅ 즉,