코드그라데이션

DOM에서 이벤트 처리하기 웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수 있지만, 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스 분리 가능 DOM 요소에 직접 함수 연결하기 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. ex. 이미지를 클릭하면 알림 창 표시하기 실행 결과 함수 이름을 사용해 연결하기 이벤트가 발생했을 때 실행할 함수를 따로 정의해 두었다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음에 괄호를 추가하지 않는다. 예제 - 이미지를 cup 함수로 저장한 후 click 이벤트가 발생하면 chan..

문서 객체 모델의 개념 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것. 이렇게 반응하게 하려면 웹 문 서 의 모든 요소를 따로 제어할 수 있어야 한다. 이 때 필요한 개념인데 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM 트리 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다. 노드(node) : 트리에서 가지가 갈라져 나간 항목 루트 노드 : DOM 트리 의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 붙인 이름 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다 따라서 각 노드 사이의 관계..

IP 주소(Internet Protocol Address) : 인터넷 상에서 장치 간 통신을 위해 장치를 식별하는 주소 IPv4 vs. IPv6 IPv4 현재 일반적으로 사용되는 주소로 32bit 구성 (약 43억개) [0-255]. [0-255]. [0-255]. [0-255] 와 같이 10진수 4개를 . 으로 구분하여 표기 (예, 192.168.0.2) 특정 IP는 특별용도로 예약되어 사용(예, 127.0.01 (로컬호스트(루프백) 주소)) IPv6 IPv4 에서의 IP 부족 현상을 해결하기 위한 방법으로 128bit(16byte)로 구성(43억* 43억* 43억* 43억) [0000-FFFF]:[0000-FFFF]:[0000-FFFF]:[0000-FFFF]:[0000-FFFF]:[0000-FFFF]..

브라우저와 관련된 객체 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다. 이 객체들은 계층 구조로 이루어져있다. 아래 그림은 예시 자주 사용하는 브라우저 관련 내장 객체 window 객체의 프로퍼티 window 객체는 웹 브라우저의 상태를 제어, 자바스크립트의 최상위에 위치 자바스크립트의 모든 객체는 window 객체 안에 포함된다. 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하려면 window. 를 프로퍼티명 앞에 붙인다! 종류 window 객체의 메서드 window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련되어 있다..

객체 자바스크립트에서는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 웹과 관련된 대상을 모두 객체로 인식 자바스크립트의 객체 문서 객체 모델(DOM)： 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음. 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우 저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등. 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다., 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면..

이벤트 웹 브라우저나 사용자가 행하는 어떤 동작 웹 브라우저 안에 서 이루어 지는 모든 동작이 이벤트는 아니다. 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. => 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 이벤트의 종류 이벤트 처리기 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 한다. 먼저 HTML태그 안에서 ‘on’다음에 ‘이벤트명’을 붙여서 속성 이름을 만들고, 그다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다. # 예제 마우스로 클릭했을 때의 이벤트 이름은 click입니다. 태그 안에 oncli..

익명 함수 이름이 없는 함수 익명 함수를 선언할 때는 이름을 붙이지 않는다. function(a, b) { return a+b; } 익명 함수 실행하기 실행 결과 즉시 실행 함수 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다. 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다. 즉시 실행 함수는 함수를 식 형태로 선언하므로 마지막에 세미콜론을 붙인다. 기본형 예제 실행 결과 매개변수가 있는 형태 선언 부분 끝에 함수 실행을 위한 인수를 넣어준다. 실행 결과 화살표 함수 기본형 매개변수 => { 함수 내용 } 매개변수가 없는 경우 : 괄호 안을 비워둔다. const hi = function() { return "안녕하세요?"; } 화살표 함수로 작성하면 ..

1. let 사용한 변수의 특징 var 을 빠뜨리게 되면 의도치 않게 전역변수가 되기도 하고 프로그램 길이가 길어지면 실수로 / 사용하는 변수를 재선하거나 값을 재할당해 버리는 경우가 생기기도 함. var과 let, const의 가장 큰 차이 var은 함수 영역(레벨)의 스코프를 가짐 let, const는 블록 영역의 스코프를 가진다. 1) 블록 안에서만 쓸 수 있는 변수 변수를 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없다. 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 된다. 예제 1. 블록 변수 선언하기 예제 2. 전역 변수 선언하기 2) 재할당은 가능하지만 재선언은 할 수 없는 변수 let을 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수..