본문 바로가기

📌 Front End/└ JavaScript52

[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] 자바스크립트 함수(Function) - 선언적 함수, 익명 함수, 즉시실행 함수, 화살표 함수, 함수 호출 this 함수(Function)프로그램에서 반복적으로 사용되는 기능을 만들기 위한 코드들의 집합함수의 호출(실행루틴)1. 함수를 호출한다. 2. 호출된 함수를 찾아 계산을 수행한다. 3. 함수 수행이 완료되면 원래의 루틴으로 돌아온다.함수 리터럴자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 객체 리터럴 방식으로 일반 객체를 생성할 수 있듯, 함수 리터럴을 사용해 함수를 생성할 수 있다. * 리터럴(literal) : 소스 코드의 고정된 값. 변수의 값이 변하지 않는 데이터로 메모리 내의 위치값을 의미// 함수 리터럴function 함수명 (매개변수 리스트) { ..로직.. //함수 몸체}유형설명function 키워드자바스크립트 함수 를 선언하기 위한 시작 키워드함수명함수를 구분하는 식별자함수 몸체.. 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] 화면출력 함수 document.write(), with(document){}, alert(), confirm(), prompt(), console.log() JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다. 다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()with(document){}alert()confirm()prompt()console.log()👉 document.write()document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다.document객체로써 document는 웹 문서를 의미한다. 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 반드시 Document 객체를 사용해야한다. 📝 document.write() 형태document.write("Hello, World!");  사.. 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.
728x90
반응형

티스토리툴바