[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기1 문서 객체 모델 (DOM)2 DOM 요소에 접근, 속성 가져오기3> DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기3 DOM 에서 이벤트 처리하기DOM 요소에 함수 직접 연결하기  이벤트 처리기 함수가 간단하면 DOM 요소에 직접 연결할 수 있다.  (ex. 이미지를 클릭하면 알림 창 표시하기) ... ...... 함수 이름을 사용해 연결하기  이벤트가 발생했을 때 실행 함수를 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음 괄호(( )) 를 추가하지 않는다. (ex. 이미지를 클릭하면 함수 실행하기) ... ...... DOM 의 event 객체  DOM 에는 이벤트 정보를 저장하는 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 25.
• textsms

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기1> 문서 객체 모델 (DOM)2> DOM 요소에 접근, 속성 가져오기3 DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기1 문서 객체 모델 (DOM)문서 객체 모델이란?  문서 객체 모델이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.  DOM 은 웹 문서를 하나의 객체로 정의하고, 모든 요소도 각각 객체로 정의한다. DOM 트리  DOM 은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하는데, 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.  부모와 자식 구조로 표시하는 것을 DOM 트리라고 하며, 트리에서 가지가 갈라져..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 24.
• textsms

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리객체 알아보기객체(object) : 프로그램에서 인식할 수 있는 모든 대상프로퍼티(property) : 객체의 특징이나 속성메서드(method) : 객체에서 할 수 있는 동작- 객체 인스턴스 만들기new 객체명- 객체의 프로퍼티와 메서드 사용하기객체명.프로퍼티객체명.메서드자바스크립트의 내장 객체종류설명window브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중 최상위document웹 페이지마다 하나씩 있으며, 태그 만나면 만들어짐. HTML 문서의 정보가 담겨있음navigator현재 사용하는 브라우저 정보가 담겨있음history현재 창에서 사용자의 방문 기록을 저장location현재 페이지의 URL 정보가 담겨있음screen현재 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체1 객체2 자바스크립트의 내장 객체3> 브라우저와 관련된 객체3 브라우저와 관련된 객체 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 그 하위 요소에 해당하는 객체들이 나타난다.   window       ㅣ        ㅏㅡㅡㅣ  document  ㅡㅡㅜㅡㅡㅣarea         「  ¯¯ ¯¯ㅣtextareaㅣ        ㅏㅡㅡㅣnavigatorㅣ        ㅏㅡㅡㅣimageㅣ        ㅏㅡㅡㅣbuttonㅣ        ㅏㅡㅡㅣhistoryㅣ        ㅏㅡㅡㅣ  form  ㅣㅡㅡㅣㅡㅡㅣtextㅣ        ㅏㅡㅡㅣlocationㅣ          ㄴㅡㅡanchorㅣ        ㅏㅡㅡㅣcheckbox   ㅣ   ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체1> 객체2> 자바스크립트의 내장 객체3 브라우저와 관련된 객체1 객체객체란? 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 것 모두 객체. document, image, link 객체 등 브라우저 관련 객체 웹 브라우저에서 사용하는 정보. navigator, history, location, screen 객체 등 내장 객체 웹 프로그래밍할 때 자주 사용하는 요소는 자바스크립트 안에 미리 정의. Data 객체 등 객체의 인스턴스 만들기 기본형new 객체명  자바스크립트에서 객체는 참조 형태로 사용해야 한다. 인스턴스의 형태로 사용해야 하는데 new라는 예약어 뒤에 만드려고 하는 객체 이름을 써주면 된다. (ex. D..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 17.
• textsms

[정리] 1 | 함수 선언 & 호출과 표현식, var let const, 이벤트와 이벤트 처리기 정리

[정리] 1 | 함수 선언과 호출, var let const, 함수 표현식, 이벤트와 이벤트 처리기 정리함수 선언하고 호출하기- 함수 선언하기function 함수명() { 명령}- 함수 호출하기함수명() 또는 함수명(변수)var, let, const로 선언한 변수 비교구분varletconst스코프함수 레벨블록 레벨블록 레벨재할당가능가능불가능재선언가능불가능불가능함수 표현식익명함수 : 이름 없이 선언한 함수function(매개변수) { 명령 }즉시 실행 함수 : 함수를 정의하는 것과 동시에 실행(function() { 명령 }());(function(매개변수) { 명령 }(인수));화살표 함수 : ES6부터 화살표 기호(=>) 왼쪽 매개변수, 오른쪽 함수 작성. 익명 함수일 경우에만 사용(매개변수) => ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 11.
• textsms

[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기

[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기1 함수 선언 및 호출2 var, let, const3 함수 표현식4 이벤트와 이벤트 처리기5 DOM을 이용한 이벤트 처리기4 이벤트와 이벤트 처리기이벤트란? 이벤트란 웹 브라우저나 사용자가 행하는 동작을 말하는데, 웹 문서 영역 안에서 이뤄지는 동작만을 말한다. 예를 들어 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 마우스 이벤트 종류설명click사용자가 HTML 요소를 클릭할 때 이벤트 발생dbclick사용자가 HTML 요소를 더블클릭할 때 이벤트 발생 mousedown사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생mousemove사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 11.
• textsms

[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식

[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식1 함수 선언 및 호출2 var, let, const3 함수 표현식4 이벤트와 이벤트 처리기5 DOM을 이용한 이벤트 처리기1 함수 선언 및 호출기본형function 함수명( ) {    명령} 기본형함수명( ) 또는 함수명(변수)  함수 선언 위치는 프로그램의 흐름에 영향을 주지 않는다. 따라서 보통 한 파일 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아놓고 필요할 때마다 함수를 호출해 사용한다.2 var, let, constvar  var 는 지역 변수로 함수 안에서 선언하고 함수 안에서만 사용한다. 이때 var 예약어를 사용하지 않으면 전역 변수가 된다.  자바스크립..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 10.
• textsms