자바스크립트 코드 레시피 278

12월 1일부터 자바스크립트 코드 레시피 순수 자바스크립트를 학습했지만, 이해가 얕아서 응용할 때 잘 못하는 부분이 있어서 실습 예제를 만들어가면서 학습한 내용을 정리하고 습득합니다. 위에 이미지로 게시한 책은 추천 받아서 구매했어요~😊 책으로 학습하기✍ 응용하기

데이터 값에 이름을 지정하여 사용하고 싶을 때데이터 값을 반복 사용하고 싶을 때값 변경이 가능한 변수를 사용하고 싶을 때데이터값을 변수명에 저장한다.자바스크립트 파일에 코드를 작성하여 콘솔창에서 확인해봅시다.변수는 임의 값의 대입이 가능하며, 다음과 같이 문자열이나 날

프로그램이 복잡해지고 개발하는 인원이 많아지면 다른 개발자의 코드를 이해하고 분석하는데도 시간이 많이 걸리므로, 코드 내부에 의도와 용도에 맞는 적절한 주석을 넣어 주는 것이 좋습니다.자바스크립트에는 두 가지로 주석을 작성할 수 있습니다.여러 줄의 주석 처리한 줄의 주

let a = 7;a/=5;// a/=5; 풀어서 나타내면 a = a / 5;// a = a / 5; 수학으로 나타내면 5 나누기 a 는 ?// 그림으로 나타내면console.log(a); // 1.4;

4일차에 함수 코드를 알아봤으니, 실습으로 훈련해봅시다.실습

함수를 간략히 만들고 싶을 때this를 지정하고 싶을 때

4일차에 함수 코드를 알아봤으니, 실습으로 훈련해봅시다.실습 예제 만드는 중

조건을 만족하는 데이터를 처리하고 싶을 때조건에 따른 처리가 이루어지는 코딩이 많습니다. 자바스크립트는 if/else 를 사용하여 조건에 따른 처리가 가능합니다.실제 코드에 적용해보겠습니다.

조건을 만족하는 다수의 데이터를 처리하고 싶을 때

반복 처리 작업을 하고 싶을 때for 문은 반복 작업을 처리하며, 대량의 데이터를 처리하거나 배열을 다룰 때 유용합니다.0 ~ 9까지 출력하는 코드를 실습하면서 실행 순서를 알아보겠습니다.간단하고 쉽게 설명해보겠습니다.let i = 0;0 < 10;console.

반복문 실습 더 하기 ( for ) for 문 사용하기 이중 for 문 사용하기 이중의 for 문 사용하기 이중의 이중 for 문 사용하기

반복문 사용하기 ( while ) 일정 조건을 충족할 때까지 반복 처리를 사용하고 싶을 때 구문 ( ) 참(true)일 때까지 { } 안에 있는 코드를 실행합니다. 실습 0 ~ 9까지 콘솔창에 출력해보겠습니다.

일정 조건을 충족할 때까지 반복 처리를 사용하고 싶을 때( ) 참(true)일 때까지 { } 안에 있는 코드를 실행합니다.0 ~ 9까지 콘솔창에 출력해보겠습니다.반복 처리 중 특정 조건에 대해 스킵하고 싶을 때for문 루프 중 처리를 스킵하고 싶을 때continue 문

브라우저 버전에 따라 알침창을 띄우고 싶을 때입력 항목에 따라 확인 버튼을 무효화하고 싶을 때실습

자바스크립트에서 수를 계산하고 싶을 때

소수점을 버리는 계산을 할 때화면 크기를 정수로 조절할 때하나씩 하나씩 실습을 통해서 알아보겠습니다.Math.round(); 의미는 반올림 할 때 사용됩니다.Math.floor(); 의미는 버림 할 때 사용하고 값보다 작고 제일 가까운 정수 반환합니다.

임의의 확률을 사용해 작업을 처리하고 싶을 때애니메이션에 임의의 값을 부여하고 싶을 때콘솔창에 출력하고 새로고침하면 값이 임의로 반환됩니다.버튼을 누를 때마다 색상을 임의로 바꾸는 코드를 통해 Math.random() 을 알아봅시다.index.htmlstyle.cssu

절댓값을 구하고 싶을 때제곱을 구하고 싶을 때대수를 구하고 싶을 때간단하게 코드를 알아보겠습니다.Math.abs(); 절댓값을 계산합니다.Math.pow(); 2의 10승을 계산합니다.Math.sign(); 값의 부호로 계산합니다. 양수 이므로 결과는 1 입니다.Mat

삼각 함수 계산을 사용하고 싶을 때좌표에서 각도를 구하고 싶을 때호를 그리는 애니메이션 효과를 주고 싶을 때

원을 그리는 애니메이션을 만들기

문자열 길이를 확인하고 싶을 때문자열을 검색하고 싶을 때문자열을 추출하고 싶을 때문자열을 변환하고 싶을 때문자열을 나누고 싶을 때문자열을 결합하고 싶을 때문자열 은 자바스크립트의 기본 데이터 타입 중 하나입니다. '' "" ｀｀ 으로 감싸며 문자열이 됩니다. 타입 St

입력폼에서 문자열의 길이를 확인하고 싶을 때2가지 방법이 있지만, '자바스크립트'.length; 사용합니다.텍스트 영역에 입력 중인 문자의 수를 카운팅하는 코드를 만들어봅니다.index.htmlscript.js

문자열 양단의 공백을 제거하고 싶을 때문자열 양 끝의 공백을 제거합니다. 콘솔창에서 문자열 드래그해서 확인해보면 공백 제거된 값이 나옵니다.줄바꿈 문자가 삽입되어 있는 경우 공백을 제거합니다.문자열 사이의 공백은 제거되지 않습니다.원하는 문자열의 위치를 확인하고 싶을

지정 문자열의 포함 여부를 확인하고 싶을 때입력폼의 부적절한 문자를 체크하고 싶을 때

지정한 위치의 문자를 추출하고 싶을 때문자열에서 원하는 부분만 가져올 수 있습니다. 인덱스를 입력하지 않으면 0 으로 위치합니다. 기본값이 0 입니다.

검색창에 입력한 글자와 일치하는 검색 결과를 나타내는 것을 만들어봅니다.index.htmlstyle.cssscript.js

지정 범위 내의 문자열을 추출하여 사용하고 싶을 때지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때지정한 문자열의 일부를 추출하고 싶을 때 slice() substring() 사용합니다. 종료인덱스 생략 가능합니다.

문자열을 다른 문자열로 바꾸고 싶을 때문자열 내 불필요한 줄바꿈 코드를 &- 빈칸을 제거하고 싶을 때문자열을 다른 문자열로 바꾸고 싶을 때 사용합니다.

입력한 값을 가져와서 \_ 하이픈을 제거합니다.index.htmlstyle.cssscript.js

URL의 해시(Hash) 데이터를 가져올 때공백을 기준으로 문자열을 나누고 싶을 때

결합하여 문자열을 만들고 싶을 때 (성과 이름을 결합하기)폴더명과 파일명을 결합하여 파일 주소를 문자열로 만들고 싶을 때\+ 로 결합하여 만들거나 ${ } 로 만듭니다. ${ } 는 + 사용하지 않고 붙여서 사용합니다.

소문자를 대문자로 변환하고 싶을 때서버에서 반환된 대문자 데이터를 소문자로 변환하고 싶을 때

숫자 3.14159265를 문자열 3.14로 변환하고 싶을 때숫자 10을 문자열 10.00로 변환하고 싶을 때

5초간 카운트다운 만들어봅니다.

10미만의 숫자 앞에 0을 붙여 두 자리 형식을 만들고 싶을 때padStart() 문자열 시작하는 부분에 추가합니다.추가하지 않으면 공백이 생깁니다.padEnd() 문자열 끝나는 부분에 추가합니다.padStart() 똑같이 추가하지 않으면 공백이 생깁니다.

배열을 정의하고 싶을 때배열 데이터의 값을 가져오고 싶을 때배열은 자바스크립트의 기본 데이터 타입 중 하나로, 다수의 문자열과 유저 데이터 등 복수의 데이터를 다룰 때 사용합니다.\[] 빈 배열로 표기합니다.\[] 배열 안에 숫자, 문자열 등 표기할 수 있습니다.\[]

배열 요소 다루기 I array.forEach((value, index) => {} 배열 요소의 데이터를 처리하고 싶을 때 구문 실습 인덱스랑 인덱스의 값을 출력해봅니다. 배열 요소 다루기 II for (const index of array) {} 배열의 각 요소

HTML에 출력하는 실습

배열 요소 추가하기 배열에 요소를 추가하고 싶을 때 요소를 배열의 처음 혹은 마지막 부분에 추가하고 싶을 때 구문 실습 unshift() 배열 첫 위치에 추가 push() 배열 마지막에 추가 배열 요소 삭제하기 배열의 요소를 삭제하고 싶을 때 요소를 배열의 처음 혹은 마지막 부분에 삭제하고 싶을 때 구문 실습 shift() 배열 첫 위치에 삭제 ...

배열 내 요소를 다른 요소로 변환하고 싶을 때

배열 내 요소의 문자 데이터를 결합하고 싶을 때문자열로 반환되며, join() 는 배열이 아닌 문자열로 나옵니다.문자열로 반환되며, join('') 는 , 생략됩니다.배열 데이터의 특정 요소를 확인하고 싶을 때indexOf() 요소를 찾아서 배열 인덱스로 반환해줍니다.

여러 엘리먼트 요소를 가져와서 배열로 활용다른 엘리먼트 요소를 배열에 넣어서 제어합니다.

조건을 만족하는 배열 요소 가져오기 유저 정보가 담긴 배열에서 ID를 기준으로 정보를 가져오고 싶을 때 구문 실습 find() 배열에서 요소를 하나씩 하나씩 확인 후 맞으면 그(첫번 째) 요소를 반환해줍니다. findIndex() 배열에서 요소를 하나씩 하나씩 확인 후 맞으면 그(첫번 째) 요소를 반환해줍니다. 입력한 ID의 이름 표시 index.h...

배열 요소 역순 정렬하기 배열 요소를 역순으로 정렬하고 싶을 때 구문 실습 reverse() 거꾸로 된 순서로 반환합니다. 배열 요소 정렬 방법 지정하기 배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때 구문 sort() 는 비교 함수로 배열을 정렬한다. 비교 함수는 두 인수의 크기를 비교하여 정렬 순서를 결정한다. 두 인수(a, b)를 가지는 비...

객체를 포함하는 배열 정렬하기 배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때 실습 index.html script.js

배열 요소 알파벳순 정렬하기 대소문자 구분 없이 알파벳순으로 정렬하고 싶을 때 구문 실습 sort() 대문자 먼저 정렬하고 소문자 정렬합니다. localeCompare() 배열의 인덱스값 같으면 소문자 먼저 정렬하고 그 다음으로 대문자로 정렬합니다.

요소를 추출하여 새로운 배열을 만들고 싶을 때배열 요소 전체에 대한 처리 작업을 하고 싶을 때ID와 이름을 가지는 객체 배열에서 ID만 가지는 배열을 새로 만들고 싶을 때배열의 인덱스값을 훑어서 새로운 배열을 만들어주는 실습해봅니다.

유저 정보 배열에서 18세 이상인 유저의 정보만을 가져와 배열을 생성하고 싶을 때filter() 배열의 인덱스 값이 일치하면 새 배열로 반환합니다.배열에 있는 문자열 훑어서 문자열 '미나' 라는 값이 일치하면 새 배열로 담아서 반환합니다.

배열 요소 하나로 정리하기 배열의 요소를 계산하여 하나의 값으로 만들고 싶을 때 구문 reduce 왼쪽에서 오른쪽으로 처리하고 reduceRight 오른쪽에서 왼쪽으로 처리합니다. 실습

문자열과 유사 배열(ArrayLike)을 배열로 변환하고 싶을 때반복 가능iterable한 객체를 배열로 변환하고 싶을 때\[...ElementList]; 스프레드 연산자를 사용하면 유사 배열 객체를 배열로 변환할 수 있습니다. 유사 배열 특징은 length 속성으로

배열의 요소를 변경하고 싶을 때왼쪽 배열 각 변수에 오른쪽 배열의 값을 할당(대입)합니다. 분할 할당 분할 대입 이라고 말합니다.

배열을 빠르면서도 고르게 섞기 위해서는 피셔 예이츠 알고리즘 사용합니다.게임에서 요소의 값을 섞을 때피셔 예이츠 알고리즘

다양한 데이터를 하나의 객체로 만들고 싶을 때연관 배열을 사용하고 싶을 때객체(Object : 오브젝트) 는 자바스크립트의 기본 데이터 타입 중 하나로 여러 가지 속성(Property : 프로퍼티) 을 가질 수 있으며, 속성은 키와 값의 조합으로 만들어진다. 3개의 속

객체의 속성을 변경하고 싶을 때{ } → 객체를 초기화{키: 값, 키; 값, ...} → 객체를 초기화객체\[] → 값을 가져오기객체.키 → 값을 가져오기객체\[키] = 값 → 값을 변경하기객체.키 = 값 → 값을 변경하기넣고 싶은 데이터를 {} 로 감싸서 객체를 정의

데이터를 복사하고 싶을 때복사하고 싶은 객체 작성해줍니다.스프레드 연산자 '...' 를 사용할 수도 있습니다.Object.assign() 과 스프레드 연산자를 사용하면 얕은 복사(Shallow Copy가 이루어진다. 얕은 복사란, 복사 전 데이터와 복사 후의 데이터가

API response의 특정 데이터를 확인하고 싶을 때지정한 데이터가 객체에 존재하지 않아서 처리 작업을 취소하고 싶을 때객체가 있는지 없는지 확인합니다. 데이터의 유무 여부 반환undefinde null 확인하는 방법도 있습니다.

객체 요소 값 확인하기 API response의 특정 데이터를 확인하고 싶을 때 구문 실습

객체의 데이터를 정리하여 대입하고 싶을 때객체의 일부 데이터를 추출하여 사용하고 싶을 때value 값 다른 방법으로 알아봅니다. Object(객체).key(속성) 사용합니다. 그리고 value 없으면 undefined 가 나옵니다.

객체의 깊은 계층까지 수정을 제한하고 싶을 때객체 const 도 속성의 추가, 삭제, 변경이 가능합니다.속성의 추가, 삭제, 변경의 제한은 Object.freeze() 를 사용합니다.오류 검사 설정은 'use strict' 를 사용합니다.배열의 수정도 제한이 가능합니다

데이터 타입 이해하기 자바스크립트의 데이터 타입을 이해하고 싶을 때 문자열과 숫자 등의 서식을 이해하고 싶을 때 구문 원시(Primitive) 타입(기본) - 원형 데이터 객체(Object) 타입(복합) - 참조 데이터 설명 자바스크립트는 숫자 문자열 진릿값 객체 데이터를 타입으로 분류하며, 원형 데이터와 참조 데이터가 있습니다. 원시 타입 원시 타입...

가변성과 불가변성 이해하기 데이터의 속성을 이해하고 싶을 때 구문 원시(Primitive) 타입 불가변성 객체(Object) 타입 가변성 설명 원시 타입과 객체 타입의 차이는 데이터 값의 변환 가능 여부입니다. 원시 타입의 데이터는 변할 수 없으므로 불가변성이며, 객체 타입은 변할 수 있으므로 가변성입니다. 가변성 객체 타입 중 하나인 배열의 데이터를...

데이터 타입 확인하기 데이터 타입을 확인하고 싶을 때 데이터 타입에 따라 처리 작업을 지정하고 싶을 때 구문 설명 typeof 로 각 데이터의 타입을 확인해봅니다. console.log() 로 결과 확인해봅니다.

데이터 종류에 따라 처리를 구분하고 싶을 때instanceof 는 데이터가 객체의 인스턴스인지를 확인하는 연산자입니다. 함수를 정의할 때 특정 인스턴스만 구분하여 처리하도록 할 수 있습니다.Date 인스턴스가 전달되면 날짜를 출력하는 함수를 확인해봅니다. instanc

원시 타입과 객체 타입의 처리를 이해하고 싶을 때원시(Primitive) 타입 값의 전달객체(Object) 타입 참조의 전달원시 타입1\. 변수 a에 100을 대입한다.2\. 변수 b에 변수 a를 대입한다. 변수 a에 대입한 값 100을 복사하여 변수 b에 전달한다.

숫자를 문자열로 변환하고 싶을 때문자열을 숫자로 변환하고 싶을 때Boolean(데이터) 데이터를 진릿값 타입으로 변환String(데이터) 데이터를 문자열 타입으로 변환Number(데이터) 데이터를 숫자 타입으로 변환parselnt(문자열) 문자열을 숫자(정수) 타입으로

정의되지 않은 데이터의 처리를 이해하고 싶을 때값이 없는 변수의 처리를 이해하고 싶을 때undefined 데이터가 정의되지 않음

빈 데이터 Null 이해하기 빈 데이터를 나타내고 싶을 때 구문 null 데이터가 존재하지 않음 실습 응용하기 빈 데이터 나타내는 실습 undefined 경우 null 반환하도록 빈 데이터를 나타낼 수 있습니다. Array, Object undefined 실습

올해를 불러오고 싶을 때Date 객체의 getFullYear() 는 당해 연도 네 자릿수를 반환됩니다. new Date() 로 인스턴스화하여 연도를 불러올 수 있다.

현재 날짜를 화면에 표시하고 싶을 때날짜를 기준으로 처리를 구분하고 싶을 때Date 객체의 getMonth() 는 월 getDate() 는 일 정보를 가져옵니다. getMonth() 의 반환값은 0부터 시작합니다. 0은 1월을 나타내므로 +1 처리 후 정확한 결과를 얻

현재 시각을 불러오고 싶을 때시간을 디지털 형식으로 표시하고 싶을 때현재 시간을 반환해봅니다.date.getHours(); 오후 시간을 넣고 싶으면 반환해주는 값에서 -12 뺏셈하여 추출합니다.

요일을 표시하고 싶을 때날짜 정보에서 요일을 확인하고 싶을 때Date 객체 getDay() 는 요일 정보를 가져온다. 날짜 정보를 가져오는 getDate() 와 비슷해 헷갈리기 쉽습니다. 반환값이 숫자이므로 변환이 필요하며, 0은 일요일 6은 토요일 을 나타냅니다.다음

간단히 날짜 정보를 출력하고 싶을 때언어별 날짜 표시 형식으로 출력하고 싶을 때getDate() 와 getHours() 를 사용하면 정보를 세부적으로 가져올 수 있으나, 코드가 복잡해지기 쉽습니다. toLocaleTimeString() 을 사용하면 간결한 표현이 가능하

날짜 문자열의 타임스탬프 확인하기 타임스탬프로 날짜와 시간을 계산하고 싶을 때 구문 설명 Date.parse() 는 인수를 타임스탬프로 변환한다. 타임스탬프는 1970년 1월 1일 00:00:00부터 현재까지의 경과 시간을 나타내는 것으로 단위는 밀리초(1/1000

날짜와 시간을 설정하고 싶을 때Date 인스턴스에 날짜를 설정할 수 있습니다. 임의의 날짜를 설정하여 확인해봅니다. 날짜와 시간 정보를 생성자의 인수로 전달합니다. 전달된 정보는 자동적으로 타입에 맞춰지며, 문자열로 날짜와 시간을 설정할 수 있습니다.숫자로도 지정이 가

하루 뒤의 날짜를 알고 싶을 때달을 넘겨 계산하고 싶을 때날짜를 가져오거나 설정하는 메소드에서 지정한 날짜로부터 몇 개월 전이나 몇일 후의 날짜를 구할 수 있습니다. 계산 결과가 날짜의 유효 범위를 넘어서는 경우에는 Date 객체가 환산 작업을 합니다. 12월에서 2개

두 날짜의 차이를 구하고 싶을 때비교하고 싶은 날짜와 시간을 Date 인스턴스에 넣고 getTime() 을 사용하여 밀리초를 구합니다. 밀리초는 자바스크립트에서 가장 간단한 시간 단위로 두 날짜의 밀리초를 계산하여 차이를 구합니다. 계산 후 알아보기 쉬운 단위로 변환이

데이터 통신 시간을 확인하고 싶을 때자바스크립트의 처리 시간을 확인하고 싶을 때Date 객체로 시간의 차이를 계산할 수 있습니다. 측정 시작 시점에 Date.now() 를 사용해 절대 시간을 구할 수 있습니다. 측정이 끝나는 시점에 다시 Date.now() 를 사용하여

제한 시간을 지정하여 카운트 다운하고 싶을 때시간의 차이를 계산하여 카운트 다운을 만들어 봅니다. setInterval() 은 지정한 밀리초마다 함수를 실행합니다. 목표 시간과 경과 시간의 차를 구하여 카운트 다운을 처리해봅니다.index.htmlscript.js

아날로그 형식의 시계를 표시하고 싶을 때index.htmlstyle.cssscript.js

알림창을 표시하고 싶을 때동기 형식으로 유저에게 메시지를 표시하고 싶을 때alert() 은 메시지 내용과 OK 버튼으로 이루어진 알림(경고)창을 표시합니다. 창이 닫히기 전까지 자바스크립트가 실행 중인 상태로 유지되므로 OK 버튼을 눌러 창을 닫기 전까지는 다른 작업이

선택 창을 표시하고 싶을 때동기 형식으로 확인창을 표시하고 싶을 때confirm() 은 확인과 취소 버튼을 가진 확인창을 표시합니다. 확인 버튼은 true 취소는 false 를 반환합니다. 확인창을 닫기 전까지 자바스크립트가 실행 중인 상태로 유지되며, 다른 작업이나

유저로부터 문자를 입력받고 싶을 때동기 형식의 작업을 하고 싶을 때

화면을 브라우저 크기에 맞춰 표시하고 싶을 때화면 폭에 맞춰 처리 작업과 레이아웃을 변경하고 싶을 때브라우저의 표시 영역 크기를 윈도우 사이즈라고 하며, 윈도우 창이 표시되는 사이즈는 innerWidth 와 innerHeight 를 사용해 가져올 수 있습니다. 사이즈

디바이스 화소 비율에 따라 제어 방식을 구분하고 싶을 때고해상도 디바이스에서 큰 이미지를 사용하고 싶을 때고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말합니다. 고해상도에 맞춰 처리

캔버스 요소를 고해상도 디스플레이로 표시하고 싶을 때캔버스 요소는 화소의 비율 계산에 사용할 수 있습니다. 캔버스에 표시하고 싶은 사이즈에 화소 비율을 곱해서 값을 설정합니다. 표시 사이즈를 지정하는 스타일 시트를 확인합니다.

a 태그 이외의 방법으로 페이지를 이동하고 싶을 때location.href 속성에 URL을 문자열로 대입합니다. 대입한 타이밍에 맞춰 페이지 이동이 이루어집니다. 상대 경로는 현재 페이지의 URL 주소가 기준점이 됩니다. a 태그의 href 속성과 비슷하다고 생각 하면

게시판 등의 화면을 새로고침하고 싶을 때화면을 새로고침하고 싶을 때 사용하는 메소드입니다. 게시판에서 새 글을 확인할 때 사용하는 새로고침 버튼 등에 사용하거나 웹 게임 등의 콘텐츠에서 게임이 종료 되었을 때 시작 화면으로 전환하는 기능으로도 사용할 수 있습니다. 샘플

브라우저의 '뒤로 가기' 버튼과 같은 동작을 구현하고 싶을 때history.back(); 뒤로 가기로 화면 이동history.forward(); 앞으로 가기로 화면 이동history.go(number); 임의의 수만큼 화면 이동브라우저의 '뒤로 가기' 버튼과 같이 히스

딥 링크(Deep Link)를 구현하고 싶을 때해시값에 따라 처리를 구분하고 싶을 때location.hash 앵커 달기location.hash 속성으로 앵커 기능을 사용할 수 있습니다. 앵커는 페이지 내부의 링크 기능을 하며, 읽기와 쓰기 모두 가능합니다.단일 페이지

해시값이 변경될 때마다 작업을 처리하고 싶을 때hashchange URL의 해시가 변경되었을 때URL의 페이지 내 앵커 링크를 클릭할 때브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 눌렀을 때유저가 URL의 해시를 변경할 때페이지 내 앵커 링크를 만들어 각각 '현재

현재 페이지를 그대로 둔 채로 새로운 윈도우 창을 열고 싶을 때새로운 윈도우 창을 열기 위해서는 window.open() 을 사용합니다. 인수에 URL을 전달하며, 새로운 창이 기존 창보다 뒤에서 열리지 않도록 focus()를 사용해 액티브 처리를 지정합니다. focu

스크롤 크기에 따라 작업을 처리하고 싶을 때페이지의 스크롤 크기를 확인하는 데는 수평 방향의 경우 scrollX 수직 방향의 경우는 scrollY 를 사용합니다.

페이지의 원하는 부분에 스크롤을 넣고 싶을 때상단으로 가기 버튼을 사용하고 싶을 때지정한 위치에 스크롤 기능을 사용하기 위해서 scrollTo() 를 사용합니다. 첫 번째 인수는 수평 두 번째 인수는 수직의 값을 지정index.htmlstyle.cssscript.js

타이틀을 동적으로 변환하고 싶을 때읽지 않은 메시지 건수를 타이틀 바에 표시하고 싶을 때document.title 속성으로 페이지의 타이틀 정보를 가져올 수 있으며, 읽기와 쓰기가 모두 가능합니다.페이지의 타이틀은 속성에 문자열을 대입하면 변경이 가능하며, 동적으로 변

페이지의 포커스 유무를 확인하고 싶을 때페이지의 포커스가 맞춰져 있을 때만 음악을 재생하고 싶을 때해당 페이지의 포커스 상태 여부는 이벤트를 통해 확인할 수 있습니다. focus 이벤트는 포커스가 맞춰졌을 때 발생하는 이벤트이며, blur 는 그 반대의 이벤트입니다.

전체 화면으로 콘텐츠를 표시하고 싶을 때동영상을 전체 화면으로 재생하고 싶을 때이어지는 콘텐츠를 표시하고 싶을 때전체 화면 전환은 requestFullscreen() 을 사용합니다. 동영상이나 프레젠테이션 콘텐츠를 전체 화면으로 표시할 때 유용합니다. 브라우저에서 해당

오프라인 화면에 네트워크의 연결 상태를 표시하고 싶을 때navigator.onLine 속성을 사용하여 네트워크 상태를 확인할 수 있습니다. 반환값이 true 인 경우 네트워크 온라인 상태를 나타내며, 해당 속성은 읽기만 가능합니다. 브라우저의 네트워크 상황을 감시하여

유저의 조작에 따라 이벤트를 실행하고 싶을 때웹 사이트는 클릭, 탭, 스크롤, 화면 불러오기, JSON 읽어 오기 등 다양한 이벤트가 존재하며, 자바스크립트는 클릭, 탭 등의 동작에 따른 이벤트 처리가 가능합니다. 이벤트 처리는 addEventListener() 를 사

이벤트의 함수 지정하고 싶을 때addEventListener() 를 사용해 이벤트의 함수를 지정할 수 있습니다. 이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같이 다양한 방법으로 기술이 가능합니다.화살표 함수는 this 를 고정할 수 있다는 장점을 가졌습니다. 이

이벤트를 1회만 실행하고 싶을 때capture 이벤트 캡쳐 여부once 리스너 1회 실행 여부passive 패시브 이벤트 여부addEventListener() 의 세 번째 인수에 옵션을 지정할 수 있습니다. 반드시 모든 옵션을 설정할 필요는 없으며, 필요에 따라 설정이

이벤트 처리를 삭제하고 싶을 때removeEventListener() 를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있습니다.removeEventListener() 는 주의가 필요합니다. 함수명을 지정하여 사용합니다. (화살표 함수 사용 불가

DOM 요소 액세스 타이밍에 맞춰 작업을 처리하고 싶을 때이미지 로딩이 완료된 후 작업을 처리하고 싶을 때DOMContentLoaded HTML 문서 로딩 완료 시점load 모든 리소스 로딩 완료 시점자바스크립트에서 DOM 요소의 조작 가능 시점은 HTML 문서의 로딩

버튼 클릭 시 작업을 처리하고 싶을 때click 요소 클릭하면 발생 (요소 클릭 시점)click 이벤트는 요소를 탭하거나 클릭 시 발생합니다. 다음과 같이 버튼 요소에 click 이벤트를 설정합니다. 이 click 이벤트는 버튼 외에도 div 요소, a 요소 등 임의의

마우스 움직임에 따라 이미지에 애니메이션 효과를 주고 싶을 때마우스 움직임에 따라 작업을 처리하고 싶을 때mousedown 마우스 버튼을 누르는 시점mouseup 마우스 버튼을 떼는 시점mousemove 마우스를 움직이는 시점마우스의 움직임과 관련된 세세한 조작은 클릭

마우스 오버 작업을 처리하고 싶을 때mouseenter 포인팅 디바이스가 요소의 위치에 있을 때mouseleave 포인팅 디바이스가 요소를 벗어날 때mouseenter 와 mouseleave 이벤트는 포인팅 디바이스(마우스, 터치 패드 등)가 요소 위에 있거나 요소를

마우스의 클릭 위치를 확인하고 싶을 때마우스 움직임에 따라 요소를 반응시키고 싶을 때event.clientX // 브라우저 좌측 상단 기준 X 좌표event.clientY // 브라우저 좌측 상단 기준 Y 좌표event.offsetX // 요소 좌측 상단 기준 X 좌표

스크롤 분량에 따라 요소의 표시를 지연시키고 싶을 때scroll 대상 요소의 스크롤 작업scroll 이벤트는 대상 요소의 스크롤 작업 실행 시 발생하며, 주로 window 객체에서 사용됩니다. 세로는 scrollY 가로는 scrollX로 확인 가능합니다. 스크롤 분량에

텍스트 선택 시점에 작업을 처리하고 싶을 때텍스트 선택 시점의 작업을 무효화하고 싶을 때selectstart 텍스트 선택 시점selectstart 이벤트는 텍스트의 선택 시점에 발생합니다.index.htmlscript.js

스마트폰에서 화면 터치에 반응하는 처리를 하고 싶을 때touchstart 터치 시작 시점touchmove 터치 포인트를 움직이는 시점touchend 터치 종료 시점터치 가능 디바이스는 시작, 이동, 종료의 터치 이벤트가 발생합니다. 터치 이벤트를 감지하여 로그로 출력하

문자를 입력할 때 마다 작업을 실행하고 싶을 때keydown 키를 누르는 시점keyup 누른 키를 떼는 시점keypress 문자 키가 눌려진 시점keydown keyup keypress 는 키 입력을 감시하는 이벤트로, 각각의 이벤트가 발생하는 시점이 다릅니다. 다음

브라우저 탭 비활성화(백그라운드화)시 시스템에 부하를 주는 작업을 멈추고 싶을 때스마트폰 슬립 모드에서 브라우저 복귀 시점의 작업을 처리하고 싶을 때visibilitychange 브라우저의 탭 상태가 변경되는 시점visibilitychange 이벤트는 브라우저 탭의 콘

윈도우 창의 크기에 따라 처리를 분류하고 싶을 때레이아웃의 크기를 조정하고 싶을 때resize 브라우저 윈도우 창의 사이즈 변환 시점resize 이벤트는 브라우저 윈도우 창의 크기가 변경될 때마다 발생합니다.index.htmlscript.js

사이즈를 벗어난 화면을 처리하고 싶을 때스마트폰의 가로, 세로 화면 전환 시 작업을 처리하고 싶을 때matchMedia(미디어쿼리) 미디어 쿼리 정보matchMedia(미디어쿼리).addListener(처리) 미디어 쿼리 일치 시 처리matchMedia(미디어쿼리).m

비동기 처리 타이밍을 표시하고 싶을 때이벤트타깃.dispatchEvent(이벤트) 이벤트 발생 처리new Event(이벤트, \[{detail}]) 이벤트 생성 처리dispatchEvent() 는 이벤트 타깃에 임의의 이벤트를 발생시킵니다. 이벤트의 생성은 new Ev

마우스 휠의 기능을 무효화하고 싶을 때터치 기능을 무효화하고 싶을 때이벤트.preventDefault()preventDefault() 를 사용해 기본 이벤트의 작동을 해지할 수 있습니다.index.htmlstyle.cssscript.css

드래그 앤 드롭 기능을 사용해 파일을 처리하고 싶을 때다양하게 응용해보고 습득합니다.드래그 이벤트 정보event.dataTransfer.files드래그 완료 후 요소에서 발생하는 이벤트dragenterdragoverdragleavedrop드래그 요소에서 발생하는 이벤트

index.htmlstyle.cssscript.js

자바스크립트에서 HTML 요소를 다루고 싶을 때자바스크립트는 웹 페이지의 텍스트나 스타일을 변경할 수 있습니다. 이와 같이 HTML 각 요소에 접근하는 방식은 DOM(Document Object Model) 인터페이스로 정의되어 있습니다. DOM은 트리 구조를 사용하여

셀렉터 사용하기 셀렉터를 사용해 지정 요소를 가져오고 싶을 때 구문 document.querySelector('셀렉터명'); 실습 셀렉터 요소를 가져옵니다. index.html script.js 셀렉터 조건 만족하는 요소 읽어오기 셀렉터명과 일치하는 요소를 정

html 요소를 가져오고 싶을 때body 요소에서 클래스 작업을 하고 싶을 때document.documentElementdocument.headdocument.body개발자 모드에서 확인하면 반환이 되면서 객체를 확인할 수 있습니다.

특정 요소와 관련된 요소를 가져오고 싶을 때부모노드.children 자식 노드부모노드.firstElementChild 첫 번째 자식 노드부모노드.lastElementChild 마지막 자식 노드노드.nextElementChild 다음 노드노드.previousElement

동적 표시 요소를 추가하고 싶을 때모달(modal) 윈도우 창을 화면에 추가하고 싶을 때부모노드.appendChild(자식노드) 부모 노드에 자식 노드 추가appendChild() 는 부모의 노드 끝에 자식 노드를 추가합니다. \*\*페이지를 열어 3초 후 .conta

동적 표시 요소를 추가하고 싶을 때모달(modal) 윈도우 창을 화면에 추가하고 싶을 때부모노드.insertBefore(자식노드, 희망위치의노드)insertBefore() 는 부모 요소 내 지정 요소의 앞에 노드를 삽입합니다. \*\*다음 샘플을 통해 3초 후 .con

HTML 요소의 삽입 위치를 상세히 지정하고 싶을 때노드.before(노드2) 노드1 앞에 노드2 추가노드.after(노드2) 노드1 뒤에 노드2 추가부모노드.hasChild(자식노드) 부모 노드에 자식 노드 존재 여부 확인before() 와 after() 는 지정한

동적 표시 요소를 추가하고 싶을 때모달 윈도우 창을 화면에 추가하고 싶을 때부모요소.insertAdjacentHTML(삽입위치, 문자열)beforebegin 부모 요소 바로 앞afterbegin 부모 요소 제일 앞beforeend 부모 요소 제일 뒤afterend 부모

요소를 동적으로 삭제하고 싶을 때부모노드.removeChild(자식노드) 부모 요소에서 자식 요소 제거removeChild() 는 부모 요소에서 자식 요소를 제거합니다. index.html\`script.js

요소를 동적으로 삭제하고 싶을 때노드.remove() 요소를 제거remove() 는 요소 자신을 제거하므로 부모 요소를 통해 요소를 제거하는 removeChild() 와 다릅니다.index.htmlscript.js

HTML 요소를 동적으로 생성하고 싶을 때모달 윈도우 창을 생성하고 싶을 때document.createElement('태그명', 옵션)createElement() 는 인수에 전달된 태그명으로 요소를 생성합니다.개발자 모드 열어서 생성된 요소를 확인할 수 있습니다.scr

유저와 클릭에 따라 요소를 추가하고 싶을 때노드.cloneNode(\[진릿값]); 노드 복제cloneNode() 는 요소를 복제합니다. 인수에 true를 전달하면 자식 노드도 복제합니다. 복제한 노드를 화면에 표시할 때는 appendChild() 를 사용합니다. 화면

요소 교체하기 부모 요소에서 자식 요소를 교체하고 싶을 때 구문 replaceChild(새노드, 교체대상노드); 설명 replaceChild() 는 부모 노드 내 자식 노드를 새로운 노드로 교체합니다. 두 번째 인수를 첫 번째 인수로 변경하며, 변경된 노드는 DOM 트리에서 제거되고, replaceChild() 의 반환값이 됩니다. 대상 노드가 존재하지...

노드 교체하기 요소를 다른 요소로 교체하고 싶을 때 구문 변경대상노드.replaceWith(새노드) 설명 replaceWith() 는 변경 대상 노드를 새로운 노드로 교체합니다. 교체된 노드가 DOM 트리에서 제거되는 것은 replaceChild() 와 같지만, 반환값이 없다는 점이 다릅니다. 화면 표시 3초 뒤 새로운 노드로 교체하는 샘플을 확인합니다...

HTML 텍스트를 변경하고 싶을 때노드.textContent 노드 내 텍스트textContent 는 요소 내 텍스트를 가져오거나 변경합니다. 텍스트를 가져올 때 HTML 태그는 무시합니다. textContent에 HTML 태그를 포함해도 태그가 아닌 문자열로 인식됩니다

HTML 텍스트와 이미지의 태그를 변경하고 싶을 때요소.innerHTML 요소 내부 HTML 문자열innerHTML 속성으로 요소의 HTML을 변경하거나 속성을 가져올 수 있습니다. innerHTML 은 Node 객체인 노드 .textContent와 다르게 Elemen

자신을 포함한 HTML 텍스트와 이미지의 태그를 변경하고 싶을 때요소.outerHTML 요소 HTMLouterHTML 속성은 innerHTML과 달리 자신도 대상이 될 수 있으며, 자신의 HTML을 가져오거나 변경할 수 있습니다.index.htmlscript.js

요소 속성 다루기 속성의 값을 변경하고 싶을 때 구문 요소.setAttribute(속성, 값) 요소 속성 설정 요소.getAttribute(속성) 요소 속성 가져오기 요소.hasAttribute(속성) 요소 속성 존재 여부 확인 설명 해당 메소드로 요소 속성을 다룰

안전하게 \_blank 속성을 사용하고 싶을 때target="\_blank"target="\_blank" 속성을 가진 a 태그로 윈도우 창을 열었을 때, 해당 창에서 window.opener 를 사용해 부모창의 제어가 가능합니다. 하지만 어느 정도의 위험성을 내포하므로

클래스를 추가하고 싶을 때클래스를 제거하고 싶을 때클래스의 존재 여부를 확인하고 싶을 때요소.classList.add('클래스') 클래스 추가요소.classList.remove('클래스') 클래스 제거요소.classList.contains('클래스') 존재 여부 확인이

요소 클래스 유/무효화하기 요소의 클래스를 동적으로 다루고 싶을 때 구문 요소.classList.toggle(클래스) 클래스 전환 실습 1 classList.toggle() 은 설정된 클래스를 추가하거나 제거할 수 있습니다. 1초마다 클래스를 전환하는 샘플을 확인합니다. 실습 2 버튼 클릭으로 표시 내용을 전환하는 샘플을 확인해 봅니다. .button...

자바스크립트 처리 결과에 따라 스타일을 변경하고 싶을 때요소.style.속성자바스크립트로 요소의 스타일 변경이 가능하며, 원하는 요소만을 지정하여 스타일에 변경을 주고 싶을 때 유용합니다. CSS 코드의 스타일을 지정할 때의 속성 표기법은 하이픈으로 단어를 연결하는 케

요소에 적용한 스타일을 확인하고 싶을 때getComputedStyle(요소).속성getComputedStyle() 을 사용해 스타일 정보를 가져올 수 있습니다. 각 스타일 설정에 따라 최종적으로 계산된 값을 가져옵니다.index.htmlstyle.cssscript.js

HTML 폼의 데이터 값을 가져오고 싶을 때텍스트 입력 폼의 데이터를 변경하고 싶을 때input.요소.valueinput 요소의 type 속성을 text로 설정하면 텍스트 입력 폼이 표시됩니다. 텍스트 입력 폼은 유저로부터 임의의 텍스트를 입력받습니다. 자바스크립트는

텍스트 입력 폼의 변경을 감시하고 싶을 때change input 요소 변경 시 이벤트input input 요소 키 입력 시 이벤트텍스트 입력 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능합니다. addEventListener() 를 사용해 이벤

텍스트 영역의 문자열을 확인하고 싶을 때텍스트 영역의 문자열을 변환하고 싶을 때텍스트영역요소.value 입력 폼의 문자열textarea 요소는 여러 줄 입력이 가능한 텍스트 폼을 표시합니다. 텍스트 영역은 줄바꿈을 포함해 자유로운 문자의 입력이 가능합니다. 자바스크립트

텍스트 영역 변경 시 작업을 처리하고 싶을 때change 텍스트 영역 요소 변경 시 이벤트input 텍스트 영역 요소 키 입력 시 이벤트텍스트 영역 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능합니다. addEventListener()를 사용해

체크박스 상태를 확인하고 싶을 때체크박스 상태를 변경하고 싶을 때요소.checked 선택 상태 확인input 요소의 type 속성을 checkbox로 설정하면 체크박스가 표시됩니다. 체크박스는 유저가 on/off 상태를 전환할 수 있습니다. 자바스크립트에서 checke

체크박스 변경 시 작업을 처리하고 싶을 때change체크박스 상태의 변경은 change 이벤트로 감시가 가능합니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 체크박스 상태 읽어 오기 방법을 사용합니다

파일 선택 기능을 표시하고 싶을 때요소.filesinput 요소의 type 속성을 file로 설정하면 파일 선택 폼이 표시됩니다. 파일 선택 폼을 사용하여 파일을 임의로 선택할 수 있습니다. 자바스크립트는 change 이벤트가 발생하면 event.target.files

유저가 선택한 파일을 텍스트 형식으로 읽어 오고 싶을 때readAsText(파일) 텍스트로 읽어 오기FileReader 객체를 사용해 input 요소로 선택한 파일 데이터에 접근할 수 있습니다. FileReader 객체의 readAsText()를 사용해 파일을 텍스트

DataURL을 가져오고 싶을 때readAsDataURL(질문) DataURL = 읽어 오기FileReader 객체를 사용해서 input 요소로 선택한 파일 데이터에 접근할 수 있습니다. FileReader 객체의 readAsDataURL()를 사용해 파일을 DataU

라디오 버튼의 상태를 확인하고 싶을 때폼요소\[키]라디오 버튼은 여러 선택 항목 중 하나의 데이터를 선택하는 폼입니다. 자바스크립트로 라디오 버튼을 다루는 것은 다른 폼 요소보다 조금 더 복잡합니다. input 요소의 type 속성을 radio로 설정하고, name 속

라디오 버튼 상태 변경 시 작업을 처리하고 싶을 때change라디오 버튼 상태의 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 라디오 버튼 상태 읽어 오기

드롭다운 메뉴의 선택된 항목을 확인하고 싶을 때select요소.value 선택된 항목의 값select 요소와 option 요소를 사용해 드롭다운 메뉴를 생성합니다. 드롭다운 메뉴의 선택된 항목을 확인하기 위해서는 select 요소에 id 값을 할당하고 자바스크립트로 요

드롭다운 메뉴 값 변경 확인하기 드롭다운 메뉴 상태 변경 시점에 작업을 처리하고 싶을 때 구문 change select 요소 변경 시 이벤트 설명 select 박스 요소의 상태 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사

슬라이더의 값을 확인하고 싶을 때슬라이더의 값을 변경하고 싶을 때input.요소.value 슬라이더의 현재 값input 요소의 type 속성을 range로 설정하면 슬라이더가 표시됩니다. 슬라이더는 최솟값 (min 속성)과 최댓값(max 속성) 범위 내에서 값을 자유롭

슬라이더 상태 변경 시 작업을 처리하고 싶을 때input input 요소 변경 시 이벤트change input 요소 변경 시 이벤트폼 요소 값의 변경은 input, change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설

컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때컬러 피커의 선택된 색을 변경하고 싶을 때input.요소.valueinput 요소의 type 속성을 color로 설정하면 컬러 피커 폼이 표시됩니다. 컬러 피커 폼은 유저로부터 임의의 색상을 입력받습니다

컬러 피커 상태 변경 시 작업을 처리하고 싶을 때change input 요소 변경 시 이벤트컬러 피커 요소의 상태 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서

시도별 행정 구역 입력 폼을 만들고 싶을 때풀다운 메뉴를 동적으로 처리하고 싶을 때지역마다 부여된 행정 표준 코드의 일부를 가져와 풀다운 입력 폼을 만들어 봅니다. 스크립트로 select 요소 내 option 요소를 동적으로 생성합니다.index.htmlscript.j

폼 전송 전 추가 작업을 처리하고 싶을 때폼 전송 전 확인 작업을 하고 싶을 때submit 폼 전송 시 이벤트폼 요소의 submit 이벤트를 감시하여 폼 전송 전 추가 작업을 처리할 수 있습니다. 해당 이벤트로 폼 전송 전의 데이터를 가공하거나 데이터 전송 여부를 확인

CSS 애니메이션 타이밍에 맞춰 작업을 처리하고 싶을 때버튼을 클릭하면 요소의 state-show 클래스 포함 여부를 확인합니다. false의 경우 해당 클래스를 추가합니다. true의 경우 해당 클래스를 제거함으로써 요소의 상태를 전환합니다.index.htmlstyl

모션 실행 후 처리를 추가하고 싶을 때transitionend transition 완료 시 이벤트요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있습니다. transitionend 이벤트는 CSS Transitions를 감시하며, 해당 이벤트가 완료되면 tr

모션 실행 후 처리를 추가하고 싶을 때animationstart 애니메이션 시작 시 이벤트animationiteration 애니메이션 반복 발생 시 이벤트animationend 애니메이션 종료 시 이벤트요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있습니다

자유도가 높은 모션을 생성하고 싶을 때자바스크립트를 메인으로 모션을 생성하고 싶을 때요소.animate(객체, 객체) 애니메이션 처리Web Animations API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단입니다. CSS Transitions와 CSS

버튼에 마우스 반응을 설정하고 싶을 때특정 요소에 눈에 띄는 효과를 주고 싶을 때요소의 크기 변경은 CSS의 transform 속성과 scale() 메소드를 사용합니다. scale()의 인수가 1이면 원래 상태의 크기를 나타내며, 인수가 1보다 크면 확대, 작으면 축소

요소 이동하기 요소의 이동 모션으로 주의를 환기하고 싶을 때 164일차의 실습 코드 확인 후 응용해보기

요소 투명도 조절하기 비표시 상태가 되는 요소 효과를 주고 싶을 때 164일차의 실습 코드 확인 후 응용해보기

요소 밝기 조절하기 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 포커스 상태 효과를 주고 싶을 때 164일차의 실습 코드 확인 후 응용해보기

요소 채도 조절하기 요소에 모노크롬 효과를 주고 싶을 때 164일차의 실습 코드 확인 후 응용해보기

WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때요소에 3D 효과를 주고 싶을 때requestAnimationFrame(함수) 시간 경과에 따른 실행 함수 등록requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명

requestAnimationFrame 응용하기 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때 설명 requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌습니다. HTML 요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절합니다. 앞서 사용한 tick 함수를 다시 사용하여 확인해봅니다....

이미지를 로딩하여 사용하고 싶을 때src 리소스 지정스크립트의 이미지 표시는 HTML 내 img 요소를 배치하고 src 속성에 문자열을 대입합니다. document.querySelector() 로 요소를 참조하기 위해서는 해당 요소에 id 속성을 할당합니다. HTML

이미지 로딩을 지연시키고 싶을 때onload 로딩 완료 시점의 처리 작업 지정onload 이벤트를 사용해 이미지 로딩 완료 시점의 처리 작업을 지정할 수 있습니다. 예를 들어, 로딩 중인 상황에서는 '로딩 중' 을 표시하고 로딩이 완료되면 완료 표시로 변경하는 작업이

이미지 로딩 중인 상태를 표시하고 싶을 때이미지 로딩 후 이미지 데이터에 엑세스하고 싶을 때웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DOMContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성값을 비운다. s

프로그램으로 생성한 이미지 데이터를 표시하고 싶을 때JPEG와 PNG 파일은 바이너리Binary 파일이므로 텍스트 에디터로 열 수 없지만, Base64를 사용하면 이미지를 문자열 상태로 관리할 수 있다. 자바스크립트는 Base64 문자열을 사용해 src 속성에 해당 문

동적으로 이미지를 배치하고 싶을 때대량의 이미지를 효율적으로 배치하고 싶을 때img 요소의 인스턴스는 Image 객체를 사용해 생성하며, new Image() 대신 document.createElement('img')를 사용할 수도 있습니다. 작성한 요소는 DOM 트리

사운드를 HTML 태그로 조절하고 싶을 때사운드를 반복 재생하고 싶을 때사운드 컨트롤 UI를 표시하고 싶을 때audio 태그는 사운드 파일 재생 멀티미디어 관련 태그입니다. HTML 내 audio 요소를 배치하고 src 속성에 사운드 파일을 지정합니다.controls

스크립트로 사운드 재생 상태를 관리하고 싶을 때audio 요소의 paly() 와 pause() 를 사용해 사운드를 재생하거나 정지할 수 있습니다.index.htmlscript.js사운드 재생 시간을 조절하고 싶을 때audio 요소의 currentTime 속성을 사용해

모바일 웹 사이트에서 사운드를 동시에 재생하고 싶을 때오디오 파형으로 사운드 비주얼라이저를 만들고 싶을 때오디오 데이터를 서버에 전송하고 싶을 때Web Audio API는 사운드를 다루는 고급 기능입니다. audio 요소에 비해 기능이 많고 제약이 적습니다. 예를 들면

영상 로딩하기 웹 사이트에 영상을 넣고 싶을 때 웹 사이트에 영상으로 효과를 넣고 싶을 때 구문 src 리소스 지정 controls 컨트롤 바 표시 autoplay 자동 재생 loop 반복 preload 영상 미리 불러오기 playsinline 인라인 재생 지정 실

웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용합니다. 웹 카메라는 getUserMedia()를 사용합니다. video 요소 srcObject 속성에 웹 카메라

자바스크립트로 외부의 데이터를 참조하여 그래픽 작업을 하고 싶을 때document.createElement()가 아닌 document.createElementNS()를 사용해 SVG요소를 자바스크립트로 생성할 수 있습니다. 비슷한 메소드의 이름이지만, SVG 요소는 끝

유저 조작에 반응하는 그래픽을 넣고 싶을 때setAttribute() 요소의 속성 설정SVG 요소는 document.querySelector() 등을 사용한 참조와 setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다. SVG는 HTML의 DOM과

SVG 요소의 스타일을 변경하고 싶을 때마우스에 반응하는 SVG 요소의 생성은 DOM에 대한 이벤트 설정을 통해 가능합니다.index.htmlscript.js

시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때SVG는 DOM의 형식과 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있습니다. 예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와

SVG로 작성한 그래픽을 다운로드하고 싶을 때이미지 생성 서비스 등에 활용할 때 (다운로드 하고 싶을 때)SVG 요소는 자바스크립트 사용해 파일로 다운받을 수 있으며, 이미지 생성 서비스 등에 활용할 수 있습니다. document.querySelector()로 SVG

비트맵 기반의 도형을 스크립트에서 사용하고 싶을 때canvas.getContext('2d'); // 캔버스에서 명령 가져오기context.fillRect(x, y, 폭, 높이); // 직사각형 영역 칠하기index.htmlscript.js

캔버스에 도형을 생성하고 싶을 때context.fillStyle; // 색상과 스타일context.strokeRect(x, y, 폭, 높이); // 직사각형 영역 경계 그리기context.fillRect(x, y, 폭, 높이); // 직사각형 영역 색칠하기색칠되는 부분

외부의 이미지를 캔버스에 표시하고 싶을 때context.drawlmage(image, x, y); // 캔버스 요소에 이미지 그리기Image 객체와 drawlmage()를 사용해 캔버스 요소에 이미지를 표시합니다. Image 객체의 로딩이 완료되지 않으면 캔버스에 이미

화소 정보를 확인하고 싶을 때이미지 가공을 위한 화소의 정보를 가져오고 싶을 때context.getImageData(x, y, width, height); // 지정 영역 화소 정보 가져오기getImageData()를 사용해 캔버스 콘텍스트의 화소 정보를 가져오며, 반

마우스가 가리키는 이미지의 화소 정보를 확인하고 싶을 때이미지에 포함된 색 정보를 확인하고 싶을 때

로딩한 이미지에 효과를 넣고 싶을 때

캔버스 작업 결과를 문자열로 가져오고 싶을 때문자열 타입으로 서버에 보관하고 싶을 때캔버스의 작업 결과를 img 요소로 복제하고 싶을 때

DataURL로 PNG형식의 데이터를 가져오고 싶을 때DataURL로 JPEG형식의 데이터를 가져오고 싶을 때

브라우저에서 생성한 도형을 유저의 시스템에 다운로드하고 싶을 때브라우저에서 가공한 이미지를 유저의 시스템에 다운로드하고 싶을 때

지정 시간 후 작업 실행하기 작업의 처리를 지연시키고 싶을 때 비표시 요소를 지정 시간 경과 후 표시하고 싶을 때 구문 setTimeout(함수, 밀리초); 지정 시간에 함수 호출 설명 setTimeout()을 사용해 지정 시간(밀리초 단위) 후 함수를 실행할 수

주기적으로 작업을 처리하고 싶을 때애니메이션 관련 함수를 호출하고 싶을 때setInterval(함수, 밀리초); 지정 시간 간격으로 연속 함수 호출setInterval()을 사용해 지정 밀리초 간격으로 함수를 실행할 수 있습니다. setTimeout()은 함수를 한 번

비동기 처리를 다루고 싶을 때new Promise(함수) Promise 생성Promise인스턴스.this(함수) 성공시 콜백 함수 호출비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아집니다. fetch()를

실패할 가능성이 있는 비동기 작업을 처리하고 싶을 때Promise인스턴스.catch(함수) 실패 시 콜백 함수 호출Promise로 실패한 작업을 처리하고 싶은 경우 생성자 인수에 reject를 포함하는 함수를 지정합니다. reject는 처리의 실패를 나타내는 작업을 할

비동기 처리 일괄 시작 후 모든 처리가 끝나면 다음 작업을 시작하고 싶을 때Promise.all(배열) 다수의 Promise 병렬 실행Promise.all()을 사용하면 동시에 실행한 처리를 모두 끝내고 다음 작업을 시작하도록 지정할 수 있습니다.Promise 인스턴스

JSON의 문자열을 자바스크립트의 객체에서 사용하고 싶을 때네트워크에서 받은 JSON 문자열을 사용하고 싶을 때JSON.parse() 를 사용해 JSON 문자열을 해석하고 자바스크립트의 값과 객체로 변환합니다. JSON.parse() 로 변환한 문자열은 자바스크립트의

자바스크립트의 객체를 JSON 문자열로 변환하고 싶을 때JSON.stringify() 를 사용해 자바스크립트의 객체를 JSON 문자열로 변환할 수 있으며, 인수에는 객체를 전달합니다.

자바스크립트 객체를 JSON 문자열로 변환하고 싶을 때가독성을 위해 JSON에 들여쓰기를 적용하고 싶을 때JSON.stringify() 의 세 번째 인수는 JSON 문자열의 줄바꿈과 들여쓰기 삽입을 위해 사용합니다. 들여쓰기 삽입을 위한 문자열을 지정하거나 숫자를 전달

일부 데이터만 JSON 변환 작업을 하고 싶을 때JSON.stringify() 의 두 번째 인수는 replacer 함수를 호출하며, 이 함수는 JSON 데이터 변환 룰을 설정할 수 있습니다. 예를 들어, 숫자인 경우 작업을 무효화하고 문자열인 경우에만 변환 작업을 실행

데이터를 가져오고 싶을 때fetch() 를 사용하면 간단하게 외부 파일을 가져올 수 있습니다. 프로그램에서는 데이터 다운로드의 시간 예측이 불가능하므로 Promise의 then()을 사용해 비동기로 처리합니다. fetch()로 데이터를 가져온 뒤 then()을 호출합니

JSON 형식의 텍스트 파일을 불러오고 싶을 때JSON을 다루기 위해서는 데이터를 가져오는 fetch()와 JSON 포맷으로 해석하는 json()의 2단계 작업이 필요하며, 이렇게 하면 JSON 객체를 다룰 수 있습니다.

XML 형식의 텍스트 파일을 가져오고 싶을 때XML은 데이터를 표현하는 마크업 언어의 하나로, 주로 서버 간의 데이터 통신에 사용되며, 알기 쉬운 표기 형식이 특징입니다. HTML과 같이 시작 태그와 종료 태그로 값을 정의하고 속성값으로 추가 정보를 부여합니다. 복잡한

바이너리 파일을 읽어 오고 싶을 때텍스트 파일이 아닌 형식을 다루고 싶을 때이미지와 3D 데이터의 대부분은 텍스트 파일이 아닌 포맷을 가지고 있으며, 이를 바이너리 형식이라고 합니다. 바이너리 형식은 blob()을 사용해서 처리하며, 웹의 경우 3D 데이터와 이미지 해

구 버전의 브라우저에서 데이터를 전송하고 싶을 때new XMLHttpRequest()open('메소드', 'url)req.send()자바스크립트에서 fetch()보다 오래된 기능인 XMLHttpRequest()를 사용하면 처리가 복잡하지만 저레벨 방식의 제어가 가능하고

외부 파일의 불러오기 진행 상황을 확인하고 싶을 때진행 상태 바를 표시하고 싶을 때event.loaded 현재 로딩 진행 상태event.total 전체 데이터 크기XMLHttpRequest 객체 인스턴스의 불러오기 진행 상황은 progress 이벤트로 감시하고, 이벤트

네트워크 통신 중인 작업을 취소하고 싶을 때abort()abort() 를 사용하면 XMLHttpRequest 객체 인스턴스가 진행 중인 데이터 송수신 작업을 중단할 수 있으며, 이때 발생하는 이벤트는 load가 아닌 abort 이벤트입니다. 다음 샘플은 50%의 확률로

부하가 큰 처리를 실행하고 싶을 때new Worker(파일주소)자바스크립트는 메인 스레드로 동작하여, 부하가 큰 작업을 실행하면 처리 작업 중에는 조작이 불가능합니다. 자바스크립트 처리가 UI를 담당하는 메인 스레드를 멈추게 하기 때문입니다. 웹 워커(Web Worke

브라우저의 백그라운드에서 네트워크를 감시하고 싶을 때navigator.serviceWork.register() serviceWorker 등록서비스 워커Service Worker는 열려 있는 웹 페이지의 백그라운드에서 항상 작동하는 스크립트입니다. 웹 워커는 페이지가 열

브라우저에서 OS 고유의 알림창을 사용해 알림을 표시하고 싶을 때Notification.permission 브라우저의 알림 허가 여부 문자열로 반환Notification.requestPermission() 알림 허가 요청하기 반환 없음new Notification(알림

데이터를 브라우저에 영구 보존하고 싶을 때localStorage.setltem('myParam', data) localStorage에 저장localStorage.getltem('myParam') localStorage에서 불러오기localStorage는 브라우저에 데이

Storage 데이터를 삭제하고 싶을 때localStorage.removeItem(key) localStorage 해당 키 삭제localStorage.clear() localStorage 데이터 삭제localStorage와 sessionStorage에서 일부 데이터를

쿠키에 데이터를 저장하고 싶을 때document.cookie 쿠키 참조쿠키(cookie)는 예전부터 웹 데이터를 저장하거나 세션 관리에 사용되어 왔습니다. localStorage는 다양한 데이터 저장이 가능한 것이 특징이지만, 쿠키는 1차원의 문자열만 저장할 수 있습니

쿠키 값을 참조하고 싶을 때document.cookie 값을 불러와도 키와 값이 각각 문자열로 결합되어 있어 자바스크립트에서의 사용이 어렵습니다. 이럴 때는 문자열을 연관 배열로 분해라면 편리하게 사용할 수 있습니다. document.cookie 문자열의 ;과 =을 분

지도에 현재 위치를 표시하고 싶을 때navigator.geolocation.getCurrentPosition 위치 정보 가져오기position.coords.latitude 위도position.coords.longitude 경도position.coords.accuracy

자바스크립트의 실행 결과를 확인하고 싶을 때상태에 따라 콘솔 사용을 분류하고 싶을 때콘솔은 동작 확인을 위한 로그와 경고, 에러를 표시하는 로그 등 상태에 따라 네 종류의 명령이 있습니다. 사용 분류를 통해 로그 종류를 콘솔 패널에서 쉽게 확인할 수 있으며, 종류에 따

에러의 내용을 설정하고 싶을 때에러는 프로그램 실행 중 자동으로 발생하는 것 외에도 개발자가 의도적으로 발생시킬 수 있습니다. 이를 에러 던지기Throw Error라고 표현하며, 함수에 부정확한 값이 전달되거나 API에서 의도치 않은 값이 반환되는 경우에 사용할 수 있

API 통신 중 부정확한 값 발견 시 에러 처리를 하고 싶을 때생성한 에러는 throw를 사용해 던질 수 있습니다. 파라미터가 숫자 타입이 아닌 경우 에러를 던지고 alert()으로 내용을 표시하는 샘플을 확인해봅니다.

에러 종류를 확인하고 싶을 때에러가 발생해도 작업을 계속 진행하고 싶을 때에러 발생 시 특정 처리를 실행하고 싶을 때에러가 발생하면 이후의 작업은 중단되지만 작업 내용에 따라 에러가 발생해도 처리를 지속해야 할 경우 try와 catch를 사용합니다. try {}에서 에

에러가 발생해도 실행을 중단하고 싶지 않을 때에러 발생 시 특정 처리를 실행하고 싶을 때finally {}는 try {}의 에러 발생 여부와 상관없이 실행됩니다. 그러므로 에러 여부에 상관없이 실행하고 싶은 코드가 있다면 finally {}에 배치합니다. 다음은 50%

에러 발생 시 에러의 종류를 확인하고 싶을 때RangeError 값이 허용 범위 내에 없음ReferenceError 선언되지 않은 변수를 호출SyntaxError 언어 구문 부정확TypeError 데이터 타입 부정확URIError URI 부정확Error 객체는 몇 가지

처리를 단위로 분할하고 싶을 때변수, 상수의 유효 볌위를 좁히고 싶을 때{}let과 const로 선언된 변수와 상수는 { }로 감싸진 범위의 블록 내에서만 사용할 수 있습니다. 변수와 상수가 유효한 범위를 스코프scope라고 하며, { }로 감싸진 유효 범위를 블록 스

특정 기능을 클래스로 만들고 싶을 때자바스크립트에서 객체지향 프로그래밍을 구현하고 싶을 때키워드 class를 사용해 클래스를 선언하며, 클래스명은 카멜 케이스CamelCase(첫 글자를 대문자로 하여 단어를 연결하는 방법)를 이용하는 것이 일반적입니다.클래스에 cons

클래스를 인스턴스화하고 싶을 때생성한 클래스를 사용하고 싶을 때class 선언으로 정의한 클래스를 실제 데이터로 사용하기 위해서는 new 연산자를 사용하며, 인스턴스화가 필요하다. 인스턴스화한 데이터는 클래스 내 각 요소와 메소드에 접근 가능합니다.

클래스에 변수를 사용하고 싶을 때API 통신 결과 클래스를 생성하고 싶을 때클래스에 속하는 변수를 클래스 필드, 클래스 변수, 멤버 변수라고 합니다. 클래스에 멤버 변수를 정의하기 위해서는 다음과 같이 constructor() 내부에 'this.변수명'을 사용합니다.

클래스에 메소드를 정의하고 싶을 때클래스 내부의 함수를 클래스 메소드 멤버 함수라고 합니다. 클래스에 멤버 함수를 정의하기 위해서는 다음과 같이 기술합니다. 클래스 멤버 함수에 function은 사용하지 않도록 주의합시다. 정의할 수 있는 멤버 함수의 수는 제한이 없습

클래스 인스턴스화 없이 메소드를 호출하고 싶을 때클래스의 인스턴스화 없이 호출하는 메소드를 정적 메소드라고 합니다. static선언으로 정의하며, 호출은 '클래스명.메소드명'을 사용합니다.다양한 용도로 사용할 수 있는 범용 메소드를 정의하거나 클래스 속성에 의존하지 않

다른 클래스의 기능을 확장한 클래스를 생성하고 싶을 때빌트인 객체를 계승하고 싶을 때클래스에는 다른 클래스의 속성과 메소드를 그대로 이어받는 계승의 기능이 있습니다. MyParent 클래스를 계승하는 MyChild 클래스의 샘플을 확인합니다.

클래스의 필드처럼 동작하는 함수를 사용하고 싶을 때setter/getter는 클래스의 필드와 같은 방식으로 작동하며, set은 값을 설정하고 get은 값을 가져옵니다.클래스 내부 customField에 값을 설정하거나 가져오는 것이 가능하다. customField는 M

클래스의 멤버 변수를 메소드 내부와 이벤트 리스너에서 참조하고 싶을 때자바스크립트에서 this는 실행하는 영역에 따라 참조하는 곳이 변한다. 화살표 함수를 사용하면 실행 영역에 상관없이 this의 참조가 변하지 않으므로 코드의 가독성이 좋아집니다. 클릭 횟수를 계산하는

class 객체 지향 응용하기class 객체 지향 사용하기index.htmlstyle.cssscript.js클래스에서 메소드 사용하기index.htmlscript.js

처리에 따라 파이를 분할하고 싶을 때ES 모듈은 여러 자바스크립트의 파일을 의존 관계에 따라 불러오는 작업을 합니다. 규모가 큰 프로그램이 하나의 자바스크립트 파일만을 사용하게 되면 기능별 구조의 파악과 분류가 복잡하고 어려워 버그의 원인이 되기도 합니다.ES 모듈의

반복 작업이 가능한 객체를 사용하고 싶을 때반복자 Iterator 는 여러 값에 순서대로 접근이 가능한 구조를 가진 객체로, 단어의 원형인 iterate 는 반복한다는 의미를 가졌습니다. 반복자를 가지는 객체를 반복 가능한 객체 Iterable Object 라고 하며,

반복자를 정의하고 싶을 때제너레이터를 사용해 반복자를 간단히 사용하는 방법이 있으며, 반복자를 정의할 수도 있습니다. 정의는 다음과 같이 function 선언에 \* (애스터리스크, asterisk) 를 추가합니다.반복자는 '반복자.next()' 를 사용해 값에 차례대

중복되지 않는 데이터를 사용하고 싶을 때빌트인 객체에 독자적인 이름을 사용한 메소드를 생성하고 싶을 때심볼(Symblo)은 다른 데이터와 중복되지 않는 유일한 값을 사용합니다. 이 특성을 이용해 ID를 관리하거나 빌트인 객체에 추가하는 독자적인 메소드 생성이 가능합니다

배열에 셔플 함수를 추가하고 싶을 때객체에 JSON 변환 메소드를 추가하고 싶을 때Array, Date, Object 등 기존의 객체(빌트인 객체)에 독자적인 메소드를 추가하고 싶을 때는 다음과 같이 프로토타입과 심볼을 사용합니다.배열에 셔플용 메소드를 추가하는 샘플을