JavaScript

브라우저 전용의 스크립트 언어이다.현재에는 Google, Chrome, FireFox, Safari, Microsoft Edge 등 주요 브라우저에 탑재되어 있다.Java 언어와 이름이 비슷하지만 전혀 다른 별개의 언어이며 호환성도 없다.1) 스크립트 언어 : 간편한

JavaScript로 기본적인 "안녕하세요, 자바스크립트!"를 작성해보기 전에 JavaScript의 문장의 규칙들이 있다.1) 문장의 맨 끝에 세미콜론(;)을 붙인다. : 생략하는 것도 가능하지만 문장의 단락이 불명확해지므로 생략하지 않는 방식으로 작성2) 문장 도중에

1. 변수 : 주고받기를 하는 과정에서 사용되는 데이터를 일시적을 보존하는 곳 2. 변수 선언 : 변수의 이름을 JavaScript에 등록하고 값을 넣어두기 위한 영역을 메모리상에 확보하는 것 하지만 JavaScript에서 변수 선언은 필수가 아니다. 명시적으로 변

JavaScript에서는 데이터형을 거의 의식하지 않는다. 이 말은 JavaScript에서의 변수는 대입되는 값에 따라서 데이터형이나 크기가 변환된다라는 뜻이다. ◼ JavaScript의 주요 데이터형 기본 형 : 변수에 값 그자체가 직접 보관 숫자형(number)

: 부여된 변수/리터럴에 대하여 미리 결정된 어떠한 처리를 행하기 위한 기호: (=), (,), (-) 등: 피연산자(Operand)는 연산자에 의해 처리되는 변수/리터럴◾ 가산 연산자(+)① '10' 문자열이기 때문에 '+'는 연결 연산자로 인식되어 101이라는 결과

: 객체 자체가 하나의 개체이며, 내부에 포함된 요소는 그 개체의 특성이나 동작을 나타내기 위해서 존재한다. 즉, 개개의 요소가 아닌 개체 그 자체이다. : 객체 = 프로퍼티(객체의 상태나 특성을 나타내기 위한 정보) + 메소드(객체를 조작하기 위한 도구): 객체지향

🔸 조건에 따라 분기 처리하는 명령 - if 명령1) else 블록을 생략해도 무방하다.2) else if 블록을 이용함으로써 복수의 분기 표시 가능➡ if 명령에서는 처음에 조건을 만족한 블록 한 개만 실행된다.3) 중첩 구조 가능: 제어 명령을 내부에서 중첩해서

: 주어진 입력에 근거하여 어떤 처리를 실시한 뒤 그 결과를 돌려주는 구조🔸 사용자 정의 함수를 정의하는 방법1) function 명령을 정의하기2) Function 생성자 경유로 정의하기3) 함수 리터럴 표현으로 정의하기4) 애로우 함수로 정의하기◽ 함수명① 식별자

: 변수가 스크립트 안의 어떤 곳에서 참조할 수 있는가를 결정하는 개념🔸 글로벌 스코프 : 스크립트 전체에서 참조할 수 있다🔸 글로벌 변수 : 글로벌 스코프를 갖는 변수, 함수의 바깥에서 선언한 변수🔸 로컬 스코프 : 정의된 함수 안에서만 참조할 수 있다🔸 로컬

: JavaScript는 부여되는 인수의 수가 함수 쪽에서 요구하는 수와 다른 경우에 이를 체크하지 않는다.➡ 인수가 버리지는게 아니라 인수 정보의 하나는 보관/유지되며 나중에라도 이용할 수 있다.❗ arguments 객체 ❗: 함수 안(함수를 정의하는 본체 부분)에서

: return 명령으로 복수의 값을 반환할 수 없기에 배열/객체로 값을 하나로 모은 후에 반환할 수 있다.: 어떤 함수가 자기 자신을 호출하는 것 또는 그러한 함수 자체: factorial 함수는 주어진 자연수 n의 계씅을 구하기 위한 사용자 정의 함수: 주어진 숫자

var y = 'Global';function outerFunc() { var y = 'Local Outer';}outerFunc(); // outerFunc 함수의 호출function closure(init) { // 고차함수 var counter = in

🔹 this생성자에 의해 생성되는 인스턴스(자기자신)을 나타내는 것this 키워드에 대해 변수를 지정함으로써 인스턴스의 프로퍼티를 설정 할 수 있다.🔹클래스는 function 생성자와 다르다.함수로서 호출할 수 없다.정의하기 전의 클래스를 호출할 수 없다.🔹프로퍼

애플리케이션을 기능 단위로 분할/정리하나의 파일로 정의하는 것이 기본모듈 안의 멤버는 기본적으로 비공개모듈로서 외부에서 액세스할 수 있는 멤버에게 export 키워드를 부여다른 파일로 정의된 모듈을 가져 오는 것은 import 명령 1) import { name, ..

마크업 언어(HTML, XML 등)로 작성된 문서에 액세스하기 위한 표준적인 구조JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원함Web 기술의 표준화 단체인 W3C에서 표준화가 진행되어 네 개의 레벌(Level 1~4)이 있으며 레벨이 높

DOM 문서 객체 모델, HTML 단위 하나하나를 객체로 생각하는 모델 HTML 문서에 각 요소들을 트리형식으로 표현 = 트리형식 자료구조 자바스크립트를 이용해 생성하거나 수정하거나 삭제할 수 있음 NodeList : HTML 문서와 같은 순서로 문서 내의 모든 노드

: 요소 노드 속 동일한 이름의 프로퍼티로 액세스가 가능 하다.: 일부 속성명과 프로퍼티명이 일치하고 있지 않는 경우: 속성과 프로퍼티 이름의 차이를 의식하고 싶지 않다면 getAttribute(attribute), setAttribute(attribute, valu

클라이언트 측 JavaScript에서 폼(Form)은 사용자의 입력을 받는 대표적인 수단이다. 📔 웹 페이지에서 사용할 수 있는 주요 폼 요소(입력 요소) text number password range time color date datetime-local mo

📔 신규 노드 작성하기 ① 요소/텍스트 노드 작성하기 - createElement/createTextNode 메소드 : 생성된 개개의 노드는 퍼즐 조각처럼 어디에도 관련 지을 수 없이 모두 뿔뿔이 흩어져 있는 상태 = 문서 트리에 명시적으로 추가할 필요가 있다.

📔 브라우저 객체 브라우저 조작을 위한 기능을 모아둔 객체들의 총칭 🔸* 브라우저 객체의 계층 구조* window 객체 : 최상위 객체, JavaScript의 글로벌 객체 : 클라이언트 측 JavaScript가 기동하는 타이밍에 자동으로 생성되어 글로벌 변

개발자 도구의 콘솔에 로그 등을 출력할 수 있는 기능을 제공하며 간단한 디버깅을 하는데 편리한 객체이다.🔸 로그를 그룹화하기 - group/groupEnd 메소드group 메소드를 호출하고 나서부터 groupEnd 메소드를 호출할 때까지의 로그를 그룹화 할 수 있다.

📚 ES2015, ES2016 JavaScript는 브라우저 전용의 스크립트 언어이다. JavaScript도 프로그래밍 언어인 만큼 버전이 있고 매년 업그레이드 되고 있다. ECMA라는 단체에서 기존의 결점을 보완하여 표준 자바스크립트 버전을 매년 발표한다. 그 중

📚 Map 객체 : 키와 값을 서로 연결시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근 할 수 있는 객체이며 ES2015부터 새롭게 도입된 객체이다. | 멤버 | 개요| |----|----| | size | 요소 수 | | set(key, val) | 키

📚 object.keys : 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다. 즉,* 객체의 키만 담은 배열을 반환한다.* object.keys(obj) (obj) : 열거할 수 있는 속성 이름들을 반환 받을 객체

📚String.prototype.indexOf() :특정문자가 문자열의 * 어느 index에 위치하는지* 찾는 메소드이며 검색된 문자열이 '첫번째'로 나타나는 위치 index를 반환하고 찾는 문자열이 없으면 -1을 반환한다. 대소문자 구분 한다. string.ind

📚 Array.prototype.toString() : '요소,요소..'의 형식인 배열을 표현하는 문자열을 반환한다. Array.toString() 📚 Array.prototype.join() : 배열의 모든 요소를 연결해 하나의 문자열로 반환한다. Array.

배열의 모든 요소를 연결하여 지정하는 구분자를 통해 하나의 문자열로 반환join() : ','로 이어줌join('') : 다 붙임주어진 문자열을 separator마다 끊어 여러개의 문자열을 배열로 반환split(" ") : 단어별로 split("") : 글자별로배열의

💭 promise 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object 정해진 장시간에 기능을 수행하고 나서 정상적으로 기능이 수행이 되어 졌다면 성공의 메시지와 함께 처리된 결과값을 전달 해준다. 만약 기능을 수행하다가 예상치 못한 문제

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전새로운 언어 기능이 포함된 주요 업데이트const and letArrow functions(화살표 함수)Template Literals(템플릿 리터럴)Defa

코드 블록의 실행을 일시 중지 (블로킹) 했다가 필요한 시점에 재개할 수 있는 특수한 함수다.일반 함수는 하나의 값만을 반환하지만 제너레이터를 사용하면여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다.function\* 키워드를 이용제너레이터 함수를 호출

자바스크립트 엔진이 코드를 실행하기 위해서는 코드에 대한 정보들이 필요하다.코드에 선언된 변수와 함수, 스코프, this, arguments 등을 묶어, 코드가 실행되는 위치를 설명한다는 뜻의 Execution Context라고 부른다.자바스크립트 엔진은 Executi

함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합함수 outerFunc는 내부함수 innerFunc를 반환하고 생을 마감 = 콜스택에서 제거 되었지만 제거된 함수 outerFunc의 지역변수 x가 동작하고 있다.즉, 이처럼 자신을 포함하고 있는 외부함수보다 내부함수