🗒️ Programming/JavaScript (14)

1. 2022.06.16 [JavaScript] 키 코드(Key Code) 정리 (키보드 이벤트)

   키 코드(Key Code) 정리 (키보드 이벤트) 들어가며 자바스크립트에서 사용할 수 있는 키 코드(Key Code)를 정리해본다. 키 코드(Key Codes) Key Code Key Code Unicode Description 0 Unidentified These keys do not have a key code 3 Cancel Pause break 8 Backspace Backspace ⌫ backspace / delete 9 Tab Tab ↹ tab 12 Clear NumLock ⌧ clear 13 Enter Enter ↵ Enter / Return 16 Shift ShiftLeft ⇧ shift 17 Control ControlLeft 18 Alt AltLeft ⎇ / ⌥ Alt / Option ..
2. 2017.05.21 이벤트 객체 (Event Object)

   * 이벤트 객체 생성하기 - 이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할 수 있음. - 이렇게 생성된 이벤트 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있음. - 이벤트 객체 생성은 IE 8 이하 버전의 브라우저와 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE(9 이상) 등)에서 각각 방법이 다름. [파이어폭스, 크롬, 사파리, 오페라, IE 9 이상에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(e); } cs [IE 8 이하 브라우저에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(window.event); } cs - IE..
3. 2017.05.21 이벤트 (Event)

   * 이벤트란? - 브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 함. - 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 함. - 즉, 이벤트 발생 시 자바스크립트 코드가 실행됨. - 이벤트 종류 종류 설명 마우스 이벤트 onmouseover 마우스가 지정한 요소에 올라갔을 때 발생함. onmouseout 마우스가 지정한 요소에서 벗어났을 때 발생함. onmousemove 마우스가 지정한 요소 영역에서 움직일 때 발생함. onclick 마우스가 지정한 요소를 클릭했을 때 발생함. ondblclick 마우스가 지정한 요소를 연속 두 번 클릭했을 때 발생함. 키보드 이벤트 onkeypress 지정한 요소에서 키보드가 눌렸을 때 발생함. onkeydown 지정한 요소에서 키보드..
4. 2017.05.20 함수 (Function)

   * 기본 함수 정의문 - 함수를 사용하여 실행문을 저장한 것을 함수 정의문이라고 함. - 함수 정의문의 기본형 function 함수명() { 일련의 실행문; } 참조 변수 = function() { 일련의 실행문; } - 정의되어 있는 함수를 호출하는 기본형 함수명(); 또는 참조 변수(); * 매개 변수가 있는 함수 정의문 - 기본형 function 함수명(매개 변수 1, 매개 변수 2, ... , 매개 변수 n) { 스크립트 실행문; } 함수명(데이터 1, 데이터 2, ..., 데이터 n); * 내장 함수 - 내장 함수는 자바스크립트 엔진에 내장된 함수 정의문을 말함. - 내장 함수는 함수 정의문의 선언 없이 단지 함수 호출만으로 자바스크립트에 이미 내장된 함수를 사용할 수 있음. - 내장 함수의 종..
5. 2017.05.20 문서 객체 모델(DOM)

   * 문서 객체 모델(DOM) - (X)HTML 문서의 구조를 가리켜 문서 객체 모델(DOM: Document Object Model)이라고 함. - (X)HTML 각 태그마다 기능과 속성이 있음. - (X)HTML 태그는 각각의 기능(Method)과 속성(Properties)을 갖고 있는 문서 객체임. - 자바스크립트의 문서 객체 모델(DOM)은 IE 8 이하 버전과 그 외 파이어폭스, 크롬, 사파리 등의 브라우저 간에 호환성이 떨어진다는 단점이 있음. - 하지만 제이쿼리는 이런 호환성이 떨어지는 단점들을 모두 해결함. [선택자] - (X)HTML에서 사용하는 스타일(CSS)과 자바스크립트 내에서 사용하는 스타일은 모두 (X)HTML의 선택한 요소에 디자인 속성을 바꿀 때 사용함. - 하지만 (X)HTM..
6. 2017.05.20 브라우저 객체 모델(BOM)

   * 브라우저 객체 모델(BOM) - 브라우저에 내장된 객체를 '브라우저 객체'라고 함. - window는 브라우저 객체의 최상위 객체가 됨. - window 객체에는 하위 객체를 포함하고 있음. - 즉, 계층적 구조로 이루어져 있으며, 이를 일컬어 브라우저 객체 모델(BOM: Browser Object Model)이라고 함. [window 객체] - window 객체 메서드 종류 종류 설명 open() 새 창을 열 때 사용함. alert() 경고 창을 띄움. prompt() 질의응답 창을 띄움. confirm() 확인/취소 창을 띄움. moveTo() 창의 위치를 이동시킬 때 사용함. resizeTo() 창의 크기를 변경시킬 때 사용함. setInterval() 일정 간격으로 지속적으로 실행문을 실행시킬..
7. 2017.05.20 객체 / 내장객체

   * 객체란? - 자바스크립트는 객체(Object) 기반 프로그래밍 언어. - 객체를 구성하는 요소로는 속성(Property)과 기능(Method)가 있음. - 자바스크립트 객체의 메소드와 속성을 사용하는 기본형 1. 객체.메서드() // 갹체의 매서드를 실행함. 2. 객체.속성; 또는 객체.속성=값; // 객체의 속성값을 가져옴. || 객체의 속성값을 바꿈. * 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM: Browser Object Model), 문서 객체 모델(DOM: Document Object Model)로 나눌 수 있음. 1) 내장 객체 - 내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있음. - 내장 객체로는 문자(Strin..
8. 2017.05.20 자바스크립트 기초 문법

   * 자바스크립트 선언문 - 자바스크립트 선언문은 태그 영역 또는 태그 영역에 선언하면 됨. 1 2 3 자바스크립트 실행문; cs * 자바스크립트 주석 처리 // 한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리함 */ * 내부 스크립트 외부로 분리하기 - 외부 자바스크립트 연동 코드로 파일을 연결하는 기본형 * 자바스크립트 코드 입력 시 주의할 점 1. 자바스크립트는 대·소문자를 가려서 씀 2. 실행문을 마치고 나서는 세미콜론(;)을 쓰는 것이 좋음. 세미콜론을 쓰지 않으면, 한 줄에 여러개의 실행문을 작성할 때 문제가 생김. 3. 실행문을 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋음. 4. 문자형 데이터를 작성할 때는 큰따옴표("")와 작은따옴표('')겹침 오류를 주의..
9. 2017.05.18 쿠키(Cookie)

   * Cookie(쿠키)란? - HTTP 프로토콜에서 웹 서버에 대한 요청과 응답은 그 다음 요청과 응답하는 관계가 없음. - Cookie를 발행함으로써 이러한 관계없는 요청과 응답을 세션(웹 페이지에 접속한 후 해제할 때까지의 일련의 동작)으로 취급할 수 있음. - Cookie에는 유효 기간을 설정할 수 있고, 유효 기간이 지난 Cookie는 자동으로 폐기됨. ■ PC1 1. 방문 횟수나 날짜의 초깃값을 전달함. 2. 웹 브라우저는 받은 Cookie 정보를 반환함. 3. 받은 Cookie의 내용을 반영할 수 있음. ■ PC2 4. 받은 Cookie의 방문 횟수를 증가시키고 다시 전달함. * Cookie의 송신과 회수 - 서버 측에서 쿠키를 보내는 데는 몇 가지 방법이 있음. - HTML의 메타 요소에 포..
10. 2017.05.18 JavaScript의 메서드

    * 문자열 관련 메서드/프로퍼티 - 모두 '문자열.메서드명(또는 문자열.프로퍼티명)'으로 작성함. 1) 문자열 길이 구하기 - length 프로퍼티로 문자열의 길이를 구할 수 있음. var s = "HTML5가 보이는 그림책"; document.writeIn("문자의 길이는 " + s.length + "글자입니다."); 2) 검색 - indexOf() 메서드는 지정한 문자가 문자열의 몇 번째에 있는지를 반환함. var s = "HTML5가 보이는 그림책"; document.writeIn("'가'는 " + (s.indexOf("가")) + "번째 문자입니다."); 3) 문자열 분할 - split() 메서드는 문자열을 지정한 문자로 분할하여 배열에 저장함. var s = "HTML5가 보이는 그림책"; va..
11. 2017.05.18 JavaScript 이벤트

    * 이벤트 - 마우스 커서를 웹상의 이미지에 올려 놓으면 그 이미지가 바뀌는 일이 있음. - 이러한 웹 페이지에서는 '마우스 커서가 위에 있다'라는 이벤트를 처리하여 이미지를 바꾸고 있는 것임. * 이벤트 핸들러 - 이벤트에 반응하여 처리를 수행하려면 이벤트 핸들러를 정의해야 함. - 예) 1 2 3 4 5 6 7 8 9 ... // 이 요소의 src 속성을 설정함. cs - 이벤트 핸들러의 내용이 안에서 false로 반환되면 (return false) 디폴트로 정의되어 있는 처리가 수행되지 않음. - 이미지에 마우스 커서를 올려 놓으면 mouseover 이벤트가 발생함. - 이에 대한 이벤트 핸들러가 onmouseover 이벤트 핸들러. - 커서를 때면 mouseout 이벤트가 발생하고 onmouseo..
12. 2017.05.17 요소의 참조

    * 참조 방법 1) id 속성 값으로 검색하는 방법 - document.getElementById() 함수(메서드)를 사용하면 요소의 id 속성을 바탕으로 요소의 오브젝트를 참조할 수 있음. - getElementById()는 document 오브젝트가 갖고 있는 메서드임. document.getElementById("ID명") 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 사과 // innerHTML 프로퍼티로 참조할 수 있는 문자열 오렌지 포도 var a = document.getElementById("apple"); document.write(a.innerHTML + "는" + a.id); Colored by Color Scripter cs - '.'(피리어드)를 붙여 작성..
13. 2017.05.17 DOM이란?

    * JavaScript의 오브젝트- JavaScript에서는 OS나 웹 브라우저의 구성 요소, HTML 문서 등과 같은 것을 오브젝트라는 단위로 취급함. (이를 '오브젝트 지향'이라고 함.)- HTML의 요소도 JavaScript에서는 오브젝트로 취급함.- 오브젝트에는 일반적으로 데이터를 나타내는 프로퍼티(property)와 행동을 나타내는 메서드(method)가 포함되어 있음. * DOM- DOM(Document Object Model)이란, HTML 문서를 태그나 속성의 계층 구조(트리 구조)로 간주하여 참조하는 개념.- 이 구조를 'DOM 트리'라고 함. * 웹 브라우저의 오브젝트- 트리 구조는 웹 브라우저에 따라 다소 다를 수 있음. 내용 출처 : HTML5가 보이는 그림책 (ANK Co., Lt..
14. 2017.05.17 JavaScript란?

    * JavaScript- JavaScript란. HTML파일에 심어 넣을 수 있는 스크립트 언어를 말함.- 웹 사이트와 통신을 하지 않아도 사용자 조작 등으로 글자색이나 배경색을 변경하거나 웹 페이지를 전환할 수 있음. (색 변경, 일정 시간 후에 페이지를 전환, 메시지 상자를 표시, 드롭다운 메뉴를 만듦 등)- Java와 JavaScript는 문법만 비슷할 뿐, 별개의 언어임에 주의! [스크립트 언어]- JavaScript 코드(스크립트)가 들어간 HTML 파일을 웹 브라우저에서 읽어 들이면 JavaScript가 해석되어 그대로 실행됨.- 모든 스크립트가 항상 화면에 실행 결과가 표시되는 것은 아님. * JavaScript의 예 123456789101112131415161718JavaScript 예제 ..