WEB/JavaScript 78

[JavaScript][DOM 조작] 0. 전체 종류

1. 속성 (attribute) 조작 클래스 속성 조작 일반 속성 조작 'classList' property 요소의 클래스 목록을 DOMTokenList(유사 배열) 형태로 반환 element.classList.add() element.classList.remove() element.classList.toggle() Element.getAttribute() Element.setAttribute(name, value) Element.removeAttribute() 2. HTML 콘텐츠 조작 'textContent' property 요소의 텍스트 콘텐츠를 표현 3. DOM 요소 조작 document.createElement(tagName) Node.appendChild() Node.removeChild() ..

WEB/JavaScript 2024.04.16

[JavaScript] DOM 선택

▶ DOM 조작 시 기억해야할 것 웹 페이지를 동적으로 만들기 == 웹 페이지를 조작하기 조작 순서 1. 조작하고자 하는 요소를 선택 (또는 탐색) 2. 선택된 요소의 콘텐츠 또는 속성을 조작 ▶ 선택 메서드 요소 1개를 선택 요소 여러 개를 선택 제공한 선택자와 일치하는 element 1개 선택 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환한다 (없다면 null을 반환) 제공한 선택자와 일치하는 여러 element를 선택 제공한 CSS selector를 만족하는 NodeList를 반환한다 ▶ 예시 ▶ chrome에서 개발자도구로 querySelector 위치 찾기 content2 의 위치를 찾아보자 body > p:ntn-child(4) 이게 content2를 가리키고 있..

WEB/JavaScript 2024.04.16

[JavaScript] DOM (The Document Object Model)

▶ DOM (The Document Object Model) 웹 페이지 (Document)를 구조화된 객체로 제공한다 프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공한다. => 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다 ▶ DOM API 다른 프로그래밍 언어가 웹 페이지에 접근하고 조작할 수 있도록 페이지 요소들을 객체 형태로 제공한다. 이에 따른 메서드 또한 제공함 ▶ DOM의 특징 DOM에서 모든 요소, 속성, 텍스트는 하나의 객체이다. 모두 document 객체의 하위 객체로 구성된다. ▷ Document는 문서 전체를 말한다 ▶ DOM tree 브라우저는 HTML 문서를 해석하여 DOM tree라는 객체 트리로 구조화한다. (객체 간 상속 구조가 존재한다) ▶브라우저가 웹..

WEB/JavaScript 2024.04.16

[JavaScript][역사 ③] Node.js

브라우저의 현재 현재는 Chrome, FireFox, Safari, Microsoft Edge 등 다양한 웹 브라우저가 경쟁하고 있다. 예전의 JavaScript 기존의 JavaScript는 브라우저에서만 웹 페이지의 동적인 기능을 구현하는데 사용되었다. (ex 사용자의 입력에 따라 웹 페이지의 내용이 동적으로 변경됨, 애니메이션 효과) 현재 JavaScript Node.js로 인해 자바스크립트가 브라우저에서 벗어났다. 서버 쪽, 클라이언트 쪽 등 다양하게 가능

WEB/JavaScript 2024.04.16

[JavaScript][역사 ②] ECMAScript

Ecma International이 정의하고 있는 표준화된 스크립트 프로그래밍 언어 명세 => 스크립트 언어가 준수해야하는 규칙, 세부사항을 제공한다 ECMAScript와 JavaScript JavaScript는 ECMAScript 표준을 구현한 구체적인 프로그래밍 언어 ECMAScript 명세를 기반으로 하여 웹 브라우저나 Node.js와 같은 환경에서 실행된다. ECMAScript의 역사 2009 ECMAScript 5 : 안정성과 생산성을 높였다. 2015 ECMAScript 6 : 객체지향 프로그래밍 언어로써 많은 발전을 이룸 ( 객체, 배열, 메서드의 등장) 우리가 배울 건 2015년 이후 ES6+ 지원 ★ => 2015년 이후 문법을 지원한다는 뜻 ES5라고 한다면, 책 사지말기

WEB/JavaScript 2024.04.16

[JavaScript][역사 ①] 브라우저와 자바스크립트

브라우저와 자바스크립트 웹의 탄생 (1990) WWW, 하이퍼텍스트 시스템을 고안하여 개발 URL, HTTP 최초 설계 및 구현 초기의 웹은 정적인 텍스트 페이지만을 지원했다 웹 브라우저의 대중화 (1993) 최초 상용 웹 브라우저인 Netscape Navigator 출시 당시 약 90% 이상의 시장 점유율을 가짐 Netscape 사는 웹의 동적인 기능을 만들기 위한 프로젝트를 시작했다 JavaScript의 탄생 (1995) 웹의 동적인 기능을 개발하기 위해서 스크립트 언어 Mocha를 개발한다. 이 후에 이름을 LiveScript, JavaScript로 이름을 바꾸었다. JavaScript는 Netscape Navigator에 탑재되어 웹 페이지에 동적인 기능을 추가하는데 사용된다. JavaScript..

WEB/JavaScript 2024.04.16