-

함수의 종류함수의 종류는 함수가 어떤 역할을 하거나, 어떤 방식으로 동작하는지에 따라 분류일반 함수가장 기본적인 함수로, 특정 작업을 수행하기 위해 선언하는 함수.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)로 사용 가능✓ "브라우저가 계산한 결과를 가져오는 느낌 → "브라우저야, 지금 이..

요소의 텍스트 추출 및 수정textContent요소 내부의 모든 텍스트를 가져옴 (공백 포함, 숨겨진 요소 포함)HTML 태그는 무시되고 순수한 텍스트만 처리스타일에 상관없이 숨겨진 텍스트도 포함해서 처리됨장점 : 텍스트만 다루고 싶을 때, 보이지 않은 텍스트까지 포함하여 텍스트 추출 가능사용 목적 : 전체 텍스트 가져오기/수정// [문법]// 텍스트 추출요소.textContent;// 텍스트 수정하기요소.textContent = "텍스트값" let el = document.querySelector("div");let txt = el.textContent;console.log(txt);innerText브라우저에서 실제로 화면에 보이는 텍스트만 가져오거나 수정HTML 태그는 무시되고 순수한 텍스트만 처리스..

유사 배열배열처럼 인덱스와 length 프로퍼티를 가지고 있지만 실제 배열(Array)은 아닌 객체를 의미유사 배열의 특징인덱스가 있음 : 마치 배열처럼 0, 1, 2... 숫자 인덱스로 접근 가능 (예: obj [0], obj [1]) length 프로퍼티가 있음 :요소 개수를 나타내는 숫자 프로퍼티가 있음 (예: obj.length) 배열 메서드 없음 : 실제 배열이 아니기 때문에, push(), pop(), forEach(), map() 같은 배열 고유 메서드는 사용할 수 없음유사 배열 예arguments 객체 (함수 내부에서 사용)NodeList (예: document.querySelectorAll()의 반환값)HTMLCollection (예: document.getElementsByTagNam..

DOM(Document Object Model) 웹 페이지의 HTML을 트리 구조로 표현한 자바스크립트 객체 웹 페이지의 구조(HTML)를 자바스크립트에서 객체(트리 구조) 형태로 표현한 모델HTML, CSS로 웹사이트를 만들 때 자바스크립트로 이를 제어하기 위해 DOM이 필요함DOM은 브라우저가 자동으로 만들어줌브라우저가 HTML을 파싱 해서 만든 객체 구조이고, 자바스크립트는 이 DOM에 접근해서 내용을 읽거나 수정할 수 있음DOM의 구조 예HTML은 계층적인 구조를 DOM은 트리 형태(노드 트리)로 바꿔 표현 각 HTML 요소가 노드(Node)로 표현되고, document는 그 모든 것의 최상위 객체[HTML 텍스트] ↓ (파싱)[DOM 트리 구조] 🗺️ └─ [노드1] 🌿 └─ [노..