본문 바로가기

JavaScript30

[JavaScript] 자바스크립트 문서 객체 모델(DOM) - DOM Tree, DOM API, DOM 노드 접근, DOM 노드 탐색, DOM 노드 조작, DOM 이벤트 처리 문서 객체 모델 DOM (Document Object Model)DOM 이란 Document Object Model의 약자입니다. 번역하자면 문서 객체 모델인데요.여기서의 문서는 HTML 문서를 말한다. 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이 때 필요한 것이 DOM API이다.DOM Tree 구성요소문서 노드(Document Node)  ➡️  최상위 트리이자 접근의 시작점이다.요소 노드(Element Node)  ➡️  HTML 요소를 표현한다.속성 노드(Attribute Node)  ➡️  .. 2024. 6. 16.
[JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다.  .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13.
[JavaScript] 자바스크립트 제어문(조건문, 반복문, 보조 제어문) ✍️ Summary유형설명구조조건문조건에 따라 다음 문장을 선택적으로 실행한다.if문if/else if/else문if/else문switch~case문반복문동일한 명령을 여러번 처리하거나특정 연산을 반복적으로 처리한다.for문while문do~while문보조 제어문조건문을 만나면건너뛰거나 반복수행을 종료한다.반복문 내에서 사용한다.continue문break문 제어문제어문은 특정 문장을 수행하거나 수행하지 않도록 선택하거나,특정 문장을 여러 번 반복 수행하게 만드는 것입니다. 제어문의 종류에는 조건문, 반복문, 보조 제어문이 있습니다.📝 제어문 종류조건문 : if, switch반복문 : for, while, do while보조 제어문 : continue, break조건문조건 여부에 따라 제어 (if, els.. 2024. 6. 13.
[JavaScript] 자바스크립트 다양한 데이터 출력 JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다.다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()innerHTMLDOM 조작console.log()alert(), prompt(), confirm()addEventListener()AJAX와 서버와의 통신 ( XMLHttpRequest / fetch )JSON 데이터 처리 ( JSON.parse() / JSON.stringify() )템플릿 리터럴 `${variable}`모듈화 ( import / export )예외처리 ( try / catch )1. document.write() 사용document.write() 메서드는 HTML 페이지가 로.. 2024. 6. 7.
[JavaScript] 자바스크립트 연산자(Operator) - 단항, 산술, 비교, 논리, 대입(복합대입), 조건(삼항), 문자열, 비트 연산자 종류연산자(Operators)란 데이터를 원하는 형태로 변경 및 판단하기 위한 코드를 의미한다. 단항 연산자 (++, --, +, -)산술 연산자 (+, -, *, /, %)비교 연산자 (>, >=, 논리 연산자 (||, &&, !)대입(복합대입) 연산자 (=, +=, -=, *=, /=, %=)조건(삼항) 연산자 (조건식 ? ture반환값1 : false반환값2)문자열 연산자 (+)비트 연산자 (&, |, ^, ~, >, >>>)연산자 우선순위괄호()가 가장 높은 우선 순위를 갖고단항, 산술, 비교, 논리, 대입, 비트 순서로 우선순위를 갖습니다. 1. () 2. 단항 연산자 (++, --, !)3. 산술 연산자 (*, /, %, +, -) 4. 비교 연산자 (>, >=, 5. 논리 연산자 (.. 2024. 6. 5.
[JavaScript] 자바스크립트 형변환(Type Casting) - 자동, 강제 형변환 형 변환 (타입 변환 : Type Conversion)JavaScript는 자동으로 자료형 변환 기능을 제공합니다.숫자를 문자로 변환하거나, 문자를 숫자로 변환하는 것을 의미합니다.자바스크립트는 타입 검사가 매우 유연한 언어입니다.자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다.형 변환 종류형 변환은 암시적 형변환과 명시적 형변환이 있습니다.암시적 형변환 (자동 형변환 - Type Promotion)명시적 형변환 (강제 형변환 - Type Casting)👉 자동 형변환- 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용 - 자바스크립트는 자동 형변환이 자주 이용- 작은 크기의 데이터 타입을 큰 크기의 데이터 타입으로 변환하는 행위를 말한다.. 2024. 6. 5.
[JavaScript] 자바스크립트 특수문자 이스케이프(Escape) 표현 이스케이프 시퀀스 (Escape Sequence)일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 출력할 수 있습니다.백 슬래시(\) 뒤에 한 문자나 숫자 조합이 오는 문자 조합을 말한다. 코드의미\t탭(Tab) 삽입 \b백 스페이스 삽입 \n개행(줄바꿈) 삽입\r캐리지 리턴(행 앞으로 커서 이동) 삽입엔터( ↵ )\f폼 피드 삽입\0널 문자 삽입\v수직 탭 삽입\'작은 따옴표 삽입\"큰 따옴표 삽입\\백 슬래시 삽입 2024. 6. 5.
[JavaScript] 자바스크립트 템플릿 리터럴(Template Literal) - 백틱(`), ${ }을 이용한 문자열 표기법 템플릿 리터럴 (Template literal)템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다.📝 템플릿 리터럴 형태이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다.변수나 표현식은 $와 중괄호를 통해 표기한다.${var}  ${a + b}여러 줄 표현 (multi-line string)- 기존 따옴표를 사용하여 문자열에서 개행을 표현하려면, \n 과 같은 개행문자를 사용했었다. - 템플릿 리터럴을 사용할 경우,    개행을 코드상에서 수행하면 별도의 개행문자 없이 개행을 표현할 수 있다.// 기존c.. 2024. 6. 4.
[JavaScript] 자바스크립트 데이터 타입(Data Type) - 자료형/Array/Object ✍️ Summary자료형설명기본형number (숫자)따옴표 없이 표기한 숫자를 나타냅니다.string (문자열)작은따옴표(')나 큰따옴표(")로 묶어 나타낸 문자의 집합입니다.boolean (논리형)참(true)과 거짓(false)으로 표현할 수 있는 유형입니다.undefined자료형을 지정하지 않았을 때의 유형입니다.변수를 선언하고 값을 정의하지 않으면 undifined가 됩니다.null값이 유효하지 않을 때의 유형입니다.복합형array (배열)하나의 변수에 여러 값을 저장하는 유형입니다.object (객체)함수와 속성이 함께 포함된 유형입니다.기본형Number - 숫자 자료형입니다. - 자바스크립트에서는 정수, 실수를 구분하지 않습니다.   (정확히는 정수만을 위한 자료형이 없습니다.) 📝 Numb.. 2024. 6. 4.
728x90
반응형