-

기명 함수 (Named Function) 이름이 있는 함수function() 뒤에 이름이 있는 함수 ⇒ function 함수명()함수 선언식은 기본적으로 기명함수 디버깅할 때 스택 트레이스에 함수 이름이 찍히고, 함수 내부에서 재귀 호출도 가능해서 오류 찾기와 복잡한 로직 작성에 유리특징특징설명디버깅하기 쉬움에러 스택 트레이스에 함수 이름이 명확히 표시됨재귀 호출 가능함수 내부에서 자기 이름으로 자신을 호출할 수 있음명확한 의도 표현 가능함수가 무엇을 하는지 이름만 보고 알 수 있음 function greet() { console.log("Hello!");}익명 함수 (Anonymous Function) 이름이 없는 함수, function() 뒤에 이름이 없는 함수 ⇒ function()보통 함수 ..

엄격 모드정의 : "use strict" 지시어를 사용하여 코드 실행을 더 엄격하게 만드는 자바스크립트 기능실수를 더 빠르게 잡아냄구문 오류를 강하게 체크암묵적인 동작 금지 → 개발자가 의도하지 않은 버그 예방엄격모드 사용 방법"use strict"는 반드시 파일 또는 함수의 맨 앞에 와야 함!전체 스크립트에 적용"use strict";x = 10; // ❌ ReferenceError: x is not defined함수 단위로 적용function myFunc() { "use strict"; y = 5; // ❌ ReferenceError: y is not defined} 엄격 모드에서 달라지는 주요 동작 비교상황느슨한 모드(기본)엄격 모드선언 없이 변수 사용x = 3 가능❌ ReferenceError..

함수의 종류함수의 종류는 함수가 어떤 역할을 하거나, 어떤 방식으로 동작하는지에 따라 분류일반 함수가장 기본적인 함수로, 특정 작업을 수행하기 위해 선언하는 함수.function 키워드로 선언함.호출될 때마다 함수 내부 코드가 실행됨매개변수를 받고, 값을 반환할 수 있음this 바인딩은 호출하는 방식에 따라 달라짐 (객체 메서드로 호출하면 객체, 일반 호출 시 전역 객체 또는 undefined).// [문법]function 함수명(매개변수1, 매개변수2) { // 실행할 코드 return 값; // 선택적}// 호출 예시함수명(값1, 값2);function greet() { console.log('안녕!');}greet(); // 함수 호출즉시 실행 함수선언하자마자 바로 실행되는 함수.주로 변수의..

함수의 선언 방식함수를 어떻게 정의하는지, 즉 문법적인 형태에 따라 분류됨1. 함수 선언식 (기본방법)가장 기본적인 함수 선언 방식이름이 있고, function() 형태로 선언호이스팅(Hoisting)이 됨 → 선언 전에 호출 가능✓ 코드에서 가장 먼저 선언되고, 어디서든 사용할 수 있다!// [문법]function 함수이름(매개변수1, 매개변수2, ...) { // 실행할 코드 return 반환값;}sayHello(); // 가능! (호이스팅 때문)function sayHello() { console.log("안녕!");}2. 함수 표현식변수에 익명 함수(이름 없는 함수) 또는 이름 있는 함수를 담는 방식호이스팅 X → 선언 전에 호출하면 에러 발생조건문 안에서 선언할 경우 반드시 함수 표현식으로..

input 속성 제어input 관련 속성input의 속성을 조회/설정 가능// [문법 - 조회]해당input.value // [문법 - 설정]해당input.value = "변경하려는 값" 속성명설명예value현재 입력된 값을 읽거나 설정input.value = "Hello"type인풋 타입 변경 (text, password 등)input.type = "password"checkedcheckbox, radio가 체크되었는지 확인checkbox.checked = truedisabled비활성화 여부input.disabled = truereadOnly읽기 전용 여부input.readOnly = trueplaceholder힌트 텍스트 설정input.placeholder = "이름 입력"maxLength최대 글자 ..

해당form.elementsform 안에 있는 모든 폼 컨트롤 요소(input, select, textarea, button 등)를 HTMLFormControlsCollection 형태로 제공하는 유사배열 객체* HTMLFormControlsCollection : 태그 내부에 있는 모든 폼 컨트롤 요소들 (, , , 등)을 배열처럼 접근 가능한 컬렉션 형태로 제공하는 읽기 전용 객체입니다 인덱스 또는 name 속성으로 접근 가능접근 방법1. 인덱스로 접근인덱스를 사용하여 폼 안의 요소를 가져옴// [문법]해당form.elements[인덱스]const form = document.querySelector('form');console.log(form.elements[0].value);2. name 속성..

요소 생성createElement('태그')지정한 태그 이름을 가진 새로운 HTML 요소를 생성동작 방식:DOM에 바로 추가되지 않고, 메모리 상에 존재이 메소드로 생성한 노드는 appendChild, append 등을 통해 DOM에 삽입해야 화면에 표시됨사용 시기:자바스크립트로 동적으로 요소를 만들고 싶을 때이벤트 리스너나 속성 등을 설정하고 DOM에 넣고 싶을 때// [문법]document.createElement('태그명')document.createElement('div');div.textContent = 'new div';createTextNode('텍스트')순수 텍스트 노드를 생성동작 방식:안녕 중에서 "안녕" 같은 텍스트만 따로 만들 때 사용사용 시기:HTML 태그 없이 텍스트만 삽입하고 싶..

property 방식의 요소 속성명 확인요소.속성명 (확인)HTML 요소의 속성을 자바스크립트 객체의 속성처럼 접근함DOM 객체의 속성(property)에 접근HTML과 약간 다르게 동작할 수 있음input.value, img.src, checkbox.checked 등실제 화면에서 바뀐 현재 상태값을 반영함자바스크립트에서 가장 자주 쓰임클래스 속성을 확인하는 경우 className 사용// [문법]요소.속성명const input = document.querySelector('input');console.log(input.value); // input에 입력된 값을 확인요소.속성명 (수정)// [문법]요소.속성명 = "변경할 속성값"const input = document.querySelecto..

CSS 스타일 확인 및 수정특정요소의 css 스타일 정보에 접근하고 수정하려면 style을 사용스타일 확인요소.style요소에 직접 설정된 인라인 스타일만 확인 가능// [문법]요소.style.스타일 속성const el = document.querySelector('div');console.log(el.style.color); // 인라인 스타일로 지정된 color만 나옴window.getComputedStyle(요소)해당 요소에 최종적으로 적용된 모든 CSS 스타일을 가져옴외부 CSS, 클래스, 상속 등까지 포함해서 확인 가능.읽기 전용window는 브라우저 전역 객체로 생략가능하여 getComputedStyle(el)로 사용 가능✓ "브라우저가 계산한 결과를 가져오는 느낌 → "브라우저야, 지금 이..

클래스명을 활용한 요소 제어HTML 요소의 클래스(class)를 확인하거나, 추가하거나, 제거하거나, 토글 하는 등의 작업은 주로 Element.classList를 통해 수행classListDOM 요소의 class 속성을 조작할 수 있도록 제공되는 내장 객체 (DOMTokenList)classList 객체를 통해 클래스의 추가, 제거, 확인 등 다양한 메서드를 활용해 조작 가능유새 배열 객체로 실제 Array 메서드는 사용 불가)const box = document.querySelector('.box');console.log(box.classList); // 결과: DOMTokenList ["box", "active"]classList 메서드// [문법]const element = document.que..