classListclassList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체이다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있다.구문element.classList;classList의 주요 메서드add()classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가하는 메서드이다.구문element.classList.add(className1);// 여러 개의 클래스 값을 한 번에 추가할 수도 있다.element.classList.add(className1, className2);element.classList.add(className1, className2, /*...,*/ classNameN);remove()classList.r..

속성 접근 및 변경 방법. 점 표기법DOM 객체의 프로퍼티에 접근하거나 설정할 때 점 표기법을 사용한다. 이를 통해 속성을 읽고, 수정할 수 있다.이 방법은 JavaScript 객체의 프로퍼티를 직접 조작하는 방법으로, 요소의 현재 상태를 반영하게 된다.구문예제const banner = document.querySelector('#banner');// 1. 점 표기법banner.src = 'new_image.jpg';getAttribute()getAttribute() 메서드는 Element의 메서드로, 해당 Element요소에서 속성 값을 가져오는 함수이다.구문element.getAttribute(name);주어진 요소에 속성이 존재하면 그 속성의 값을 문자열로 반환한다. 존재하지 않으면 null을 반환..

텍스트 변경하기HTML 요소의 텍스트를 변경하는 방법을 알아보자.innerTexttextContentinnerTextinnerText는 Element의 속성으로, element 내에서 사용자에게 보여지는 text 값들을 가져오거나 설정할 수 있다. 이 때 해당 요소뿐만 아니라 해당 요소의 자식들 안의 텍스트도 같이 갖고 온다.구문/* 가져오기 */const renderedText = htmlElement.innerText;/* 설정하기 */htmlElement.innerText = string;textContenttextContent는 Node의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 나 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.구문/*..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM이란>DOM은 HTML과 XML 문서를 구조화하여 프로그래밍적으로 접근하고 조작할 수 있도록 만든 문서 객체 모델이다.웹 페이지의 각 요소는 JavaScript 객체로 표현되는데, DOM은 이 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 이를 변경하면 페이지에 즉시 반영된다.📌 DOM의 핵심 역할HTML 문서를 JS에서 조작할 수 있도록 변환웹 페이지의 구조, 스타일, 콘텐츠를 JS를 통해 동적으로 변경 가능DOM 요소 선택 메서드DOM에서 요소를 선택하기 위해 사용하는 다양한 메서드가 있다.getElementByIdgetElementById 메서드에 문자열을 전달하면 해당 문자열과 일치하는 ID 속성을 가진..

기본 매개변수함수를 쓸 때 매개변수가 있으면 그걸 쓰고 없으면 기본 매개변수의 값을 사용한다.디폴트 매개변수는 여러 개 사용할 수 있지만,function rollDie(numSides = 6) {}스프레드 연산자스프레드 연산자를 사용하면 배열과 같이 반복 가능한 객체를 전개구문을 사용해 확장한다.반복 가능한 객체를 펼치면 어떻게 되는가?배열 펼치기Math.max(1,3,6,15,25,4,23,99,45,101,143,21,5); //143const nums = [1,3,6,15,25,4,23,99,45,101,143,21,5];Math.max(nums); //NaN - not a numberMath.max(...nums); //143 - 배열이 펼쳐지고 인수는 따로 따로 들어가게 된 것이다!console..

forEach자바스크립트의 forEach메서드는 배열을 순회하는 여러 방법 중 하나이다. 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드이다.특징배열 안의 아이템 각각에 대해 함수의 코드를 한 번씩 실행한다.for...of가 나온 이후로는 잘 사용되지 않는다.예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없다.구문forEach(callbackFn)forEach는 매개변수로 콜백함수를 전달한다. 이 때 콜백 함수는 배열의 각 요소에 대해 실행된다.콜백 함수배열.forEach((currentValue, index, array)=>{});콜백 함수의 매개변수로는 세 개가 들어갈 수 있다.Current Value (명명된 매개변수): 배열에서 처리할..

함수의 정의함수는 다음과 같은 구조로 정의된다.function functionName(parameter1, parameter2, ...) { // 함수 본문 return result; // 선택적}function 키워드로 시작한다.functionName 자리에는 함수의 이름이 들어간다.괄호 () 안에는 매개변수(파라미터)를 정의할 수 있다.중괄호 {} 안에 함수의 본문 코드를 작성한다.return 문은 필수는 아니고, 함수의 결과값을 반환한다.함수 호출정의된 함수는 아래처럼 호출할 수 있다.functionName(argument1, argument2, ...);함수 이름 뒤에 괄호를 붙여 호출한다.괄호 안에 인수(어규먼트)를 전달할 수 있다.매개변수와 인수매개변수(Parameters): 함수 정의 시..

개요객체는 여러 데이터 조각을 구조화하여 저장할 수 있게 한다. 이 때, 데이터의 순서는 중요하지 않으며, 키-값 쌍으로 데이터를 저장한다. 이러한 키-값 쌍은 프로퍼티라고 불린다.프로퍼티는 키(key)와 값(value)으로 구성되며, 키를 사용해 데이터를 읽거나 수정할 수 있다.객체 생성하기프로퍼티가 없는 빈 객체는 다음과 같이 생성한다.let object = {};프로퍼티를 갖는 객체는 다음과 같이 key: value쌍을 콤마로 구분하여 생성한다. 이 때 key를 '나 "로 묶지 않음을 유의한다.const person = { firstName : "길동", lastName : "홍" };객체에서 만드는 모든 키는 내부적으로 모두 문자열로 변환된다.프로퍼티에 접근하기객체를 생성한 뒤에는 점 표기법 또는..

다른 프로그래밍 언어와 마찬가지로 자바스크립트에도 Array가 존재한다. 배열은 데이터를 그룹으로 묶는 방법이다. 이 때 배열은 원시 타입이 아니고 객체 타입이다.배열이란?배열은 값의 순서 있는 집합이다!배열 생성let array = [];let colors = ['red','orange', 'yellow'];let colors = [true,'hello', 1];자바스크립트의 배열의 경우, 여러 타입의 데이터들을 하나의 배열에 저장할 수 있다.배열의 인덱스Array 객체는 문자열처럼 인덱스를 사용해 배열의 각 요소에 접근할 수 있다. 이 때 인덱스의 범위는 0 ~ 배열 크기 - 1이다.let colors = ['red','orange', 'yellow'];/* read */console.log(colo..

비교 연산자프로그래밍에서 코드는 입력된 값에 따라 의사 결정을 내리고, 작업을 수행해야 한다. 이러한 의사 결정을 가능하게 하는 게 조건문이다. 조건문에서 사용되는 비교 연산자와 등호 연산자를 공부해보자.부등호 연산자비교 연산자는 비교 연산자 양 옆의 두 값(피연산자)을 비교하여 true 또는 false를 반환한다.> : 크다(greater than): 작다(less than)>= : 크거나 같다(greater than or equal to): 작거나 같다(less than or equal to)예제1 > 2 // false2 문자열 비교이 때 피연산자에는 숫자뿐만 아니라 문자열도 들어갈 수 있다. 문자열이 들어가는 경우, 문자의Unicode 값을 기준으로 판단한다.'a' a와 b는 Unicode 값으로..

Javascript의 원시타입에는 Null과 Undefined도 포함된다. 두 단어 모두 '아무것도 없다' 혹은 '문제가 있다'라는 부정적인 의미를 가진 것 같지만, 사용 목적과 의미는 명확히 구분된다.Nullnull은 어떤 값이 의도적으로 비어있음을 표현할 때 사용하며 다음과 같은 특징을 갖는다.객체로 취급: null의 자료형을 확인하면 typeof null === "object"로 출력된다. 이는 JavaScript의 오래된 설계 상의 버그로, null은 실제로 객체는 아니다.Falsy값: 불리언 연산에서는 false으로 취급되는 falsy값이다.의도적 사용: 특정 변수가 아무 객체도 가리키고 있지 않음을 명시적으로 표현하고자 할 때 사용한다.let value = null; // '값이 없다'는 것을..

문자열 다루기 - MDN문자열 제대로 다루기 -MDN문자열의 개요자바스크립트에는 문자열이라는 원시 타입이 존재한다. 문자열에는 단어, 문장등을 저장할 수 있다.문자열의 선언 방법문자열을 작성할 때에는 따옴표('), 쌍따옴표("),백틱(`)으로 문자열을 반드시 묶어줘야 한다. 이 때 따옴표는 문자열의 시작과 끝에 사용하며, 반드시 쌍을 이뤄야 하고, 같은 문자여야 한다.잘못된 예시const badString1 = This is a test;const badString2 = 'This is a test; // "종료되지 않은 문자열 리터럴" 에러가 발생함const badString3 = This is a test';const badString4 = 'This is a test";따옴표로 묶이지 않은 텍스트는..