본문 바로가기

전체 글170

[JavaScript] 자바스크립트 콜백 함수(Callback Function) - 선언적 함수, 익명 함수, forEach(), map(), filter() 콜백 함수 (Callback Function)자바스크립트에서 함수도 하나의 자료형으로 본다. 그래서 매개변수로 함수를 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수라고 한다.콜백 함수 종류1. 선언적 함수2. 익명 함수 1. 선언적 함수// ▶ 함수 선언function callThreeTimes(callback) { for(let i=0; i 2. 익명 함수// ▶ 함수 선언function callThreeTimes(callback){ for(let i=0; i콜백 함수 활용 함수1. forEach()2. map()3. filter()1. forEach()forEach 함수는 배열이 가지는 함수로써 배열 내부의 요소를 사용해서 콜백 함수를 호출해 준다. 📝 forEach() 형태// 요소 : 배.. 2024. 6. 16.
[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] 자바스크립트 배열(Array) - 배열 생성(리터럴, Array 생성자 함수), 배열 요소 접근, 배열 메서드(Array.prototype 메서드), 배열 반복문(for of 문, forEach 문) 배열(Array)자바스크립트에서 배열은 여러개의 값을 저장하고 관리하는데 사용되는 아주 기본적인 자료구조이다. 자바스크립트 배열은 타입이 고정되어 있지 않아서, 서로 다른 타입의 원소들을 적재할 수가 있다. 그리고 배열은 동적으로 크기가 변할 수 있어 자바(Java)와는 달리 크기를 지정할 필요가 없다.  📍 배열(Array) 용어배열(array) : 이름과 인덱스로 참조되는 정렬된 값의 집합배열 요소(array element) : 배열을 구성하는 각각의 값인덱스(index) : 배열에서의 위치를 가리키는 숫자배열 생성 방법1. 배열 리터럴2. Array() 생성자 함수// 배열 리터럴let 배열명 = ['요소', '요소', '요소',...];// Array() 생성자 함수let 배열명 = new Ar.. 2024. 6. 15.
[JavaScript] 자바스크립트 객체(Object) - 객체 생성(리터럴, Object 생성자 함수), 객체 접근, 객체 반복문(for in문), 객체 this 키워드 객체(Object) 자바스크립트 객체는 {} key:vlaue가 모여 있는 Map 형식이다.자바스크립트 객체 형식 : { K: V, K:V, K:V } 객체내 Value에는 String, Number, Boolean, Array, Object, null, 함수까지 다양한 자료형이 올 수 있다.객체의 key는 무조건 String으로 저장된다.자바스크립트 객체 모양의 문자열을 JSON(JavaScript Object Notation, 자바스크립트 객체 표기법) 한다.JSON의 형식 :  "{ K:V, K:V, K:V }" 📍 프로퍼티(property)란?객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.이름과 값으로 구성된 정렬되지 않은 집합프로퍼티는 함수도 저장할 수 있음 ➡️ 프로퍼티 메서드.. 2024. 6. 15.
[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.
728x90
반응형

티스토리툴바