JavaScript

JS 개요 style script 태그 외부 js 파일과 연결하는 태그 스크립트(script)언어 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어 별도의 소스코드를 컴파일하지 않고 인터프리터(interpreter)를 이용하여 소스코드를

자바스크립트에서의 데이터 입/출력 window : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능) document : 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대

DOM(Document Object Model) 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것 → 문서 내 특정 요소에 접근하는 방법을 제공 style 태그 script 태그 외부 js 파일과 연결하는 태그 DOM을 이용한 HTML 요소 접근하기(해당

변수 선언 위치에 따른 구분 style 태그 script 태그 외부 js 파일과 연결하는 태그 Java Javascript 변수 선언 방식 var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope let : 변수, 변수명 중복 X, 블록 레벨{} s

간이계산기 만들기 1 전체코드

간이계산기 만들기 2 전체코드

간이계산기 만들기 3 전체코드

간이계산기 만들기 4 전체코드

이벤트(Event) 이벤트(Event): 동작, 행위 → 브라우저에서의 동작, 행위 : click, keydown, keyup, mouseover, drag, submit, change, ... 이벤트 리스너(Event Listener) → 이벤트가 발생하는 것을 대

방법 1. submit 버튼을 사용 안 하는 방법방법2. onsubmit을 이용해서 form 태그 제출되는 것을 막는 방법

정규 표현식(Regular Expression) 특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어 정규 표현식을 이용하면 입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있다. style 태그 scrip

문자열, 숫자, 형변환, 연산자 script 태그 외부 js 파일과 연결하는 태그 문자열(String 내장 객체) 자바스크립트에는 문자열을 나타내는 객체(String)이 존재하며 문자열과 관련된 기본적인 함수를 제공해준다. 숫자(Math 내장 객체) 숫자(numb

배열(Array) 배열 : 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨) JS 변수 : 값이 저장되기 전까지 자료형 지정되지 않음 > JS 배열의 특징 (1) 자료형 제한이 없다. (2) 길이 제한이 없다. script 태그 외부 js 파일과 연결하는 태그

window 객체 브라우저 창 자체를 나타내는 객체 window 객체는 자바스크립트의 최상위 객체이며 DOM, BOM으로 분류된다 DOM(Document Object Model) : document - html 문서를 가리킴 BOM(Browser Object Mode

자바스크립트 객체 자바스크립트의 객체는 {} 내에 Key:Value 가 모여있는 형태로 작성된다(Map 형식) { K:V , K:V , K:V } : 자바스크립트 객체 (참고) 자바스크립트 객체 모양의 문자열 JSON(JavaScript Object Notatio

DOM(Document Object Model) HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 → HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다. style 태그

외부 js 파일과 연결하는 태그

함수 style 태그 script 태그 외부 js 파일과 연결하는 태그 기본적인 함수의 선언, 정의, 호출 익명함수(이름이 없는 함수) 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능 이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우

변수 var, let, const truthy, falsy 1️⃣ var, let, const | | 재할당 | 중복선언 | | --- | --- | --- | | var | 가능 | 가능 | | let | 가능 | 불가능 | | const | 불가능 | 불가능

ES5 vs ES6 1. let, const 키워드 추가 2. arrow function 3. default parameter 추가 > ES5 ES6 4. template literal 추가 5. multi-line string 6. 클래스(객체지향프로그래밍)

조건문 & 연산자 1️⃣ if문 vs 삼항 연산자 표현식 : 값을 평가될 수 있는 문 조건식 : 조건문을 만족하는 식 논리 표현식라고 불리고, 불리언으로 반환한다 프로그램 내에서 조건에 따라 실행이 달라지게 할 때 사용되는 문장 if문 조건식 참일 때 실행되는

연산자 1️⃣ 연산자 우선순위 표현식은 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행된다. | 우선순위 | 연산자 유형 | 결합성 | 연산자 | | --- | --- | --- | --- | | 19 | 그룹 | 없음 | ( … ) | | 18 | 멤버 접근 |

논리연산자 & 비교연산자 1️⃣ 논리연산자 논리 연산자 : 참 거짓을 반환할 때 사용하지만, 반드시 boolean 값일 필요 없다 AND 연산자는 연산자 왼쪽과 오른쪽의 값이 모두 true이면 true, 한 쪽이라도 false이면 false 를 반환한다. OR 연

문자열 1️⃣ 따옴표 문자열(””, ‘’) 문자열을 표현해주기 위해 사용한다 문자열을 작성할 때 값을 따옴표로 묶어야 한다. 감싸주지 않은 텍스트는 변수 이름, 속성 이름, 예약어 등으로 간주된다. 페이지 인코딩 방식 상관없이 항상 UTF-16 형식을 따른다 >

문자열 1️⃣ 주어진 문자열의 일부만 가져오기 (인덱스) 인덱스 : 배열 안에 담긴 데이터 위치를 가리키는 값 문자열 인덱싱 : 문자열의 각 문자는 인덱스 번호로 시작한다 유사배열 객체 : 배열이 아닌데, 배열과 유사한 객체 문자열도 마치 배열처럼 접근할 수 있기에

배열 1️⃣ 앞, 뒤, 주어진 특정 인덱스 위치에 요소 추가하기 > ✔️요소 사전적 의미 : 무엇을 이루는 데 반드시 있어야 할 중요한 성분, 조건 요소 : 웹 페이지 구성 1. 배열의 앞에 요소 추가하기 https://developer.mozilla.org/

반복문 프로그램 내에서 일정 횟수만큼 반복하면서 실행하는 명령문이다. 1️⃣ 일반 반복문(for문) 가장 많이 사용하는 반복문 빠르게 반복적인 일을 완료하는데 유용하다 초기화식(카운터 변수) : 반복문에 진입할 때 한 번 실행 카운터를 0부터 세기 때문에

반복문 1️⃣ for..of.. 반복가능한 객체(array, map, set, string, typedarray, arguments 등) > ✔️Symbol.iterator https://developer.mozilla.org/en-US/docs/Web/JavaS

객체 1️⃣ 객체 객체 : 키(key), 값(value)으로 이루어진 데이터 구조이다. 배열은 연관된 값들을 나열 객체는 키, 값으로 이루어져있음 데이터를 저장하고 조작할 수 있다. 키 : 문자형 값 : 모든 자료형 허용 빈 객체 만들기 > ✔️new 연산자

객체 1️⃣ key 값으로 사용할 수 있는 형식은 어떻게 되나요? 문자열(String), 심볼(Symbol) 객체 리터럴을 사용할 경우, 숫자도 key가 될 수 있지만 내부적으로는 문자열로 변환된다. > ✔️심볼(Symbol) 변경 불가능한 원시 값 2️⃣ 동적

함수 함수 : 프로그램을 구성하는 주요 구성 요소이다. 함수를 이용하면 중복없이 유사한 동작 코드를 여러 번 호출할 수 있다 ex) 내장함수 : alert, prompt, confirm 1️⃣ 매개변수(parameter) = 인자 데이터를 함수 안에 전달되는

함수 1️⃣ return, break, continue 함수 실행 종료하고, 주어진 값 함수 호출 지점 반환한다 return 호출하는 지점에서 즉시 실행 멈춘다. return문이 없는 함수는 undefined를 반환한다. > ✔️표현식 : 반환할 값으로 사용

함수 1️⃣ 즉시 실행 함수(IIFE: Immediately Invoked Function Expression) 즉시 실행 함수(IIFE) 는 선언과 동시에 실행되는 함수이다. 왜 사용될까? 전역 범위 오염 방지 변수를 IIFE 내부에서만 사용하여 전역

함수 1️⃣ arguments 객체 함수 내부에서 전달된 모든 인수를 배열처럼 저장하는 객체 일반 함수(function)에서 사용 가능, 화살표 함수에서는 ...rest 사용 배열이 아니라 객체이므로 map, forEach 같은 배열 메서드 사용 불가 ↑ 일반

1️⃣ 스코프 > ✔️스코프 : 변수가 접근할 수 있는 범위 전역 스코프, 지역 스코프 함수 스코프 새로운 함수가 생성될 때마다 새로운 스코프 발생한다 원래 자바스크립트 함수 스코프를 따른다 블록 스코프 블록 {}이 생성될 때마다 새로운 스코프 형성 l

요소 접근, 요소 검색 1️⃣ DOM검색에 사용 1. getElementById(id) anyNode.getElementById가 아닌 document.getElementById getElementById는 document 객체를 대상으로 해당 id를 가진 요소

addEventListener 지정된 EventTarget이벤트가 대상에 전달될 때마다 호출되는 함수를 설정 메서드 방법 일반적인 대상 : Element 자식 : Document, Window, 이벤트를 지원하는 모든 객체 : IDBRequest 핸들러를 여러

동기 vs 비동기 1️⃣ 동기 요청, 결과가 동시에 일어난다 순서에 맞춰 진행, 동시 처리 불가능 → 직관적 간단 설계 가능 2️⃣ 비동기 동시에 일어나지 않는다 동시 처리 가능, 하지만 속도 저하 → 복잡하지만 자원을 효율적으로 사용할 수 있다 콜백 함수 사용

IndexedDB API의 인터페이스비동기 데이터베이스 작업(데이터 추가, 검색, 삭제)= 모든 비동기 작업은 즉시, IDBRequest 인스턴스 반환브라우저 내장된 데이터베이스키, 여러 키 유형별로 모든 종류 값을 저장한다신뢰성 기반 거래 지원한다주요 범위 쿼리, 인

this vs event.target 1️⃣ event.target 이벤트가 실제로 발생한 요소 이벤트가 위임되거나 중첩된 요소에서 발생해도 항상 실제 클릭된 요소를 반환 2️⃣ this 이벤트 핸들러가 바인딩된 요소(=이벤트를 등록한 요소) 이때! 화살표 함수

innerHTML vs innerText vs textContent 1️⃣ innerHTML 요소 안의 HTML 문자열 형태를 가져온다 포함된 HTML, XML(확장가능한 마크업 언어) 마크업을 가져오거나 설정합니다. 요소 안 HTML 수정도 가능하다 문법

개발자 도구의 기능 활용 개발자 도구 활용하기 chrome, Firefox을 젤 많이 사용한다 chrome https://ko.javascript.info/debugging-chrome > ✔️디버깅 : 스크립트 내 에러 검출 제거하는 과정 윈도우 : F12

함수 선언문은 함수가 정의되기 전에 호출될 수 있다호이스팅 : 자바스크립트 실행될 때, 변수 함수 선언을 메모리에 <미리> 할당하는 것을 의미함수명 정의, 별도 할당 명령이 없다함수 전체를 호이스팅 된다함수 이름을 꼭 지정해줘야 한다, 힘수 이름이 있지 않으면 부

함수가 선언된 위치(문맥)에 따라 스코프가 결정된다컴파일 시(코드 작성 시) 스코프가 결정실행할 때가 아니라 코드 작성 시점에 어떤 변수를 참조할지 결정된다바깥쪽 함수의 변수에 접근 가능 (클로저의 원리)내부 함수는 자신이 정의된 위치의 스코프(상위 스코프)에서 변수를

classList의 기능 className class 속성에 대응 대입하면 클래스 문자열 전체가 바뀐다 그럼 클래스 한 개만 관리하고 싶다면? classList 사용 classList 이터러블 객체 클래스 하나만 관리하고 싶을 때 사용 읽기 전용 프로퍼티

DOM Document Object Model HTML 문서를 트리 구조로 표현하여 JavaScript가 조작 가능하게 만든다 JavaScript는 DOM을 통해 웹 요소를 변경할 수 있다 (같은 개념이 아님) > ✔️DOM? 문서 객체 모델(The Documen

1️⃣ 렉시컬 환경 (Lexical Environment) 자바스크립트 엔진이 변수와 함수 선언을 저장하는 내부 데이터 구조이다 = 렉시컬 스코프를 구현하는 방식이며, 변수와 함수 식별자가 저장되는 객체 형태의 구조이다. 각 실행 컨텍스트는 하나의 렉시컬 환경을

실행 컨텍스트(Execution Context) 자바스크립트 코드가 실행되는 환경 = 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 구조 코드가 실행될 때마다 생성된다 https://ko.javascript.info/recursion https://t

클로저 https://ko.javascript.info/closure https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures ✔️식별자(Identifier) vs 변수(Variable) 식별

1️⃣ 웹페이지 렌더링 과정 랜더링 : 서버로부터 HTML, CSS, JavaScript 작성 파일을 받아 브라우저에 보여주는 것 불러오기(서버로부터 리소스 스트림 읽는 과정) HTML 파싱 → DOM 생성 CSS 파싱 → CSSOM(css 객체 모델) 생성 렌더

프로토타입 1️⃣ constructor 함수 생성자 함수(constructor function) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constr

객체를 생성하는 방법 객체 리터럴 : 가장 간단하고 편리하다 Object 생성자 함수 생성자 함수 Object.create 클래스 프로토타입 자바스크립트는 기본적으로 프로토타입 기반 언어이다 모든 객체는 Object.getPrototypeOf(obj)를 통해