JavaScript

클로저(Closure): 함수가 선언될 때의 스코프를 기억하여, 함수가 생성될 때의 외부 변수들에 접근할 수 있는 기능. 호이스팅(Hoisting): 변수와 함수 선언이 코드의 최상위로 끌어올려지는 자바스크립트 동작 방식. 프로토타입(Prototype): 자바스크립트

1. JavaScript의 기초 1.1. 자바스크립트란? HTML, CSS를 프로그래밍적으로 제어 데이터를 처리 데이터 저장 : 다양한 형태의 값을 저장하고 사용 연산을 통해 값을 계산하여 처리 사용자와 상호작용 이벤트 감지: 사용자의 동작을 감지 브라우저에서 제

💡 네이밍 규칙💡 어떤 네이밍 규칙을 쓰나요?let valueC = 10;let valueC = 20; // 재선언 오류 발생💡 어떤 키워드를 사용해서 선언해야 할까?valueA = 10;console.log(valueA);

💡 매니지드 언어💡 가비지 컬렉터function funcScope() { console.log("----- Function Scope ------"); console.log("전역변수: ", a, b, c); var fA = 40; let fB = 50;

호이스팅 코드에서 변수를 선언하기 전에 해당 변수를 사용할 수 있는 것처럼 보이는 현상console.log(a); var a = 10<span class="token punctuation"

str1 = 'world';console.log(str2); // str2에 할당된 값은 여전히 'hello' 입니다.

console.log(typeof str1, typeof str2, typeof str3);💡 이스케이프 문자console.log(a + " + " + b + " = " + (a + b));// 템플릿 리터럴을 사용하여 표현식 삽입console.log(&lt;/spa

숫자 (Number) 정수와 실수를 표현하기 위해 사용되는 자료형 숫자형 특징 정수와 실수의 구분은 없으며, 모두 number 타입으로 분류 여러 연산이 가능함 정수, 실수 외에도 특수 값들이 존재함 Infinity: 무한대를 나타내는 값으로, 아주 큰 수를

Number.isInteger(0.1); //false (소수)Number.isNaN(undefined); // falseNumber.isNaN({}); // falseNumber.isNaN("hello"); // falseconsole.log(p

객체타입 객체타입의 특징 객체는 속성으로 값과 메서드를 가지며, 상태와 동작을 나타냄. 변수에 값을 저장할 값 자체가 아닌 값의 위치가 저장됨. 객체값을 다른 변수에 할당될 떄에도, 값의 참조(위치)가 저장됨. 배열 데이터를 순서대로 저장하는 객체 원시타입과

arr2.shift();console.log(arr2); // '배', '사과', '바나나', '수박'arr3.splice(2, 1, 5, 6); //인덱스 2부터 시작하여 1개의 요소를 제거하고, 숫자 5와 6을 추가console.log(arr3); // 1, 4,

console.log(weniv.hasOwnProperty('number')); // falseconsole.log(weniv.hasOwnProperty('location')); // truefor (let key in person) { console.log(&lt;

console.log(x + y);console.log(x - y);console.log(x \* y);console.log(x / y);console.log(x % y);console.log(x \*\* y);let a = 30;let b = '20';console.

// toString() 메서드 사용(3).toString(); // "3"(15).toString(16); // 숫자형 변환 시 진법을 지정할 수 있음NaN.toString(); // "NaN"true.toString(); // "true"null.toString()

let score = 95;if (score > 80) { console.log("참 잘했습니다!");}if(x == y){ console.log('if문으로 실행되었습니다.');} else{ console.log('else문으로 실행되었습니다.');}if (sc

// console.log(text);document.body.innerHTML = text;const weniv_friends = "licat", "binky", "gary", "soulgom", "mura";let text = '&lt;ul>'for (let i =

함수이름(argument1, argument2...) // 함수의 호출let arg = 10;doubleNum(arg); // arg는 인자 (함수와 메서드에 실제 입력되는 값)console.log(sum(10, 20, 30)); // 60console.log(sum(

console.log(food); console.log(weniv3);console.log(newMe);foo(1, 2);

var bruce = { name : 'Bruce Wayne',}peter.sayName.call(bruce);// Bruce Waynevar bruce = { name : 'Bruce Wayne',}peter.sayName.apply(bruce, 'batman',

const me = { name: '재현', age: 25, email: 'jaehyun@something.com'};printMe(me);함수2('hello', 'world', 10, 20, 30, 40)function 함수2(a, b, ...c){ con

function documentWriter(s){ document.write('콜백함수', s);}sum(10, 20, documentWriter);// map 의 사용을 통한 콜백함수let arr = 1, 2, 3, 4, 5;arr.map(제곱)function 제곱

// Map에 값을 넣기// set메서드는 m에 값을 넣은 결과를 반환해준다.m.set('하나', '1');m.set(1, '하나');m.set(true, 1);m.set(false, 0);// Map의 값에 접근하기console.log(m.get('하나'));cons

let l = 10, 20, 30;let a = JSON.parse(JSON.stringify(l));a0 = 1000;console.log(l);// 객체를 문자열화 했다가 다시 객체로 변환하기 때문에 새로운 객체를 생성하는것과 동일

// 해당하는 모든 요소에 접근document.getElementsByTagName();// 해당하는 클래스를 가진 모든 요소에 접근document.getElementsByClassName();// css 선택자로 단일 요소에 접근document.querySelecto

&lt;head> &lt;meta charset="UTF-8"> &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt;meta name="viewport" content="width=device-w

const requestObj = new XMLHttpRequest(); requestObj.open('GET', 'orderCoffee.txt'); requestObj.onreadystatechange = () => { if (requestObj.re

객체지향 프로그래밍 객체지향 프로그래밍이란? 객체와 객체가 메시지 전달을 통해 상호작용하게 하는 것 생성자 사용이유 생성자의 장점: 생성자를 통해 생성된 각 객체들은 독립적인 상태를 유지할 수 있으며, 각 객체마다 다른 속성을 가질 수 있 커스텀 생성자 만들기

onkeyup는 HTML 태그에 직접 이벤트 핸들러를 지정하는 방법. 이 방식은 사용자가 키보드를 눌렀다가 떼었을 때 발생하는 키업(KeyUp) 이벤트를 처리할 수 있게 해줌.간단한 이벤트 처리: 이벤트 핸들러를 HTML 태그 내에서 바로 정의할 수 있어 빠르고 간단하