백엔드 과정/JavaScript

[JS] Event / 버블링 / 캡쳐링

이벤트 마우스 이벤트(click, mouseover, mouseout, mousemove ...) 폼 요소 이벤트(submit, focus) 키보드 이벤트(keydown, keyup) 문서 이벤트 등의 DOM 이벤트 들이 있는데 이러한 이벤트가 발생했을 경우 실행되는 함수를 이벤트 핸들러라고 하며 핸들러를 할당하는 방법은 다양하다. 1. HTML 속성 HTML 안의 onevent 속성에 이벤트 핸들러 할당하는 방법 Ex. 등 간단한 코드는 그냥 작성하기도 하지만 코드가 길다면 별도의 함수를 만들고 이를 호출한다. 클릭해보세요 마우스를 올려보세요 2. DOM 프로퍼티 요소 객체가 가지고 있는 onevent 속성에 이벤트 핸들러를 연결 하는 방법 Ex. element.onclick = 이벤트핸들러(함수); ..

[JS] 문서 수정하기

문서 수정 노드 생성 document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다. document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입 node.replaceWith(노드나..

[JS] DOM / 요소검색 / 주요 노드 프로퍼티

DOM (Document Object Model) HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다. HTML에 있는 태그를 구조화(트리) 했을 때 각각의 태그가 노드이다. 문서객체 - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 - 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공 노드 - HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드 elements node와 textnode - 요소노드 : 태그 그 자체를 의미 - 텍스트노드 : 태그에 기록되어 있는 문자 -> 텍스트 노드를 가지는 태그(h?,p 등)와 가지지않는 태그(img등)가 있다. DOM 탐색하기 1. 자식 노드 ..

[JS] 객체

객체 선언/ 호출 객체는 키 값을 사용하여 속성(멤버 변수) 식별 객체 생성자 혹은 중괄호를 사용하여 객체 생성 ‘[ ](대괄호)’ 또는 ‘.’(점)으로 요소의 값에 접근 속성에 모든 자료형이 올 수 있다. 그 중 함수 자료형인 요소:메소드 객체 내에서 자신의 속성을 호출 할 때 반드시 this키워드를 사용 객체의 모든 속성을 출력하려면 for in문을 사용해야 한다. -> 단순 for문이나 while문으로 출력 불가 -> 식별자로 사용할 수 없는 문자(띄어쓰기, 특수문자)를 속성으로 사용할 경우 ‘ ‘로 묶어서 선언하고, 접근 시에는 [ ]만 가능 객체 선언하는 방법 let 변수명(객체명) = { 속성(키값) : 값, 속성(키값) : 값, 속성(키값) : 값 }; 속성값 접근 변수명(객체명)[‘요소명(..

[JS] JavaScript 개요

JavaScript 란? 자바스크립트(JavaScript)는 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다. HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면 자바스크립트는 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고, 스크립트는 웹 페이지의 HTML안에 작성 가능하며 웹페이지 로드 시 자동으로 실행 된다. 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있다. JavaScript의 실행 방식 엔진이 스크립트를 읽고 (파싱) 읽어들인 스크립트를 기계어로 전환(컴파일)하면 기게어로 전환 된 코드가 실행된다. 전체를 해석해놓은 컴파일 언어와는 차이가 있다. Jav..