본문 바로가기

javascript9

[JavaScript] 이벤트 (Event) 목차 이벤트와 이벤트 핸들러 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)입니다. 버튼을 클릭하거나 키보드를 입력하는 등 사용자가 이벤트를 발생시킬 수도 있고, 페이지가 로드되는 등 어플리케이션 스스로가 이벤트를 발생시킬 수도 있습니다. 웹 페이지 안에서 발생한 여러 가지 이벤트를 이벤트 핸들러(event handler)를 이용해 처리할 수 있습니다. 이벤트 핸들러는 이벤트에 대응해 이벤트 처리를 담당하는 함수로서, 이벤트 리스너(event listener)라고도 합니다. 이벤트 처리를 위해 이벤트 핸들러를 정의하는 것을 이벤트 핸들러를 등록(register)했다고 말합니다. 이벤트와 이벤트 핸들러 연결 이벤트와 이벤트 핸들러를 연결하기 .. 2022. 7. 3.
[JavaScript] DOM (문서 객체 모델) 목차 DOM 이란? DOM (Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스 입니다. 웹 페이지가 로드될 때, 웹 브라우저는 페이지의 DOM을 생성합니다. DOM은 nodes와 objects로 문서를 객체 지향적으로 표현합니다. DOM은 웹 페이지를 계층적인 트리구조로 정리하여, 프로그래밍 언어가 DOM 구조에 접근해서 문서 구조, 스타일, 내용 등을 변경할 수 있도록 지원합니다. 문서를 나타내는 최상위 객체는 document 객체입니다. DOM의 핵심 API 순회 childNodes, firstChild, lastChild, nextSibling, previousSibling 선택 getElementById() , getElementsByTag.. 2022. 7. 2.
[JavaScript] BOM (브라우저 객체 모델) BOM (Browser Object Model, 브라우저 객체 모델)은 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어하고자 할 때 사용할 수 있는 객체 모델입니다. 목차 Navigator 객체 브라우저와 관련된 정보를 관리하는 객체입니다. Navigator 객체 프로퍼티 프로퍼티 설명 appName 브라우저의 이름을 리턴 appVersion 브라우저의 버전을 리턴 cookieEnabled 브라우저의 쿠키 사용여부를 리턴 language 브라우저의 language를 리턴 onLine 브라우저의 online 여부를 리턴 product 브라우저의 engine명을 리턴 userAgent 서버에서 브라우저에 보내진 user-agent 헤더정보를 리턴 console.log("브라우저 이름", navig.. 2022. 6. 28.
[JavaScript] 윈도우 (Window) 객체 목차 Window 객체 Window 객체는 웹 브라우저의 창을 나타내는 객체입니다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체로서, 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 Window 객체의 프로퍼티가 됩니다. Window 객체의 메소드는 전역 함수이며, Window 객체의 프로퍼티는 전역 변수가 됩니다. Window 객체는 브라우저 창이 열릴 때마다 하나씩 생성됩니다. Window 객체의 프로퍼티 프로퍼티 설명 document window에서 보여지는 현재 문서를 의미 name window의 이름을 리턴 history window의 history객체를 의미 location window의 location객체를 의미 navigator window의 navigator객체를 의.. 2022. 6. 28.
[JavaScript] 문자열 (String) 객체 String 객체는 원시 타입인 문자열을 다룰 때 유용한 속성과 메소드를 제공하는 레퍼(wrapper) 객체입니다. 변수 또는 객체 속성이 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 속성과 메소드를 사용할 수 있습니다. 목차 문자열 생성 new 키워드 이용 var strObj = new String("hello"); 리터럴 이용 var str = "hello"; var strObj = new String("hello"); //String 객체 var str = "hello"; ////string 타입 console.log(strObj); //String {'hello'} console.log(strObj.toString()); //hello console.log(.. 2022. 6. 27.
[JavaScript] 배열 (Array) 객체 배열은 Array 생성자로 생성된 Array 타입의 객체로서, 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용합니다. 목차 배열 생성 new 키워드 이용 매개변수가 1개이고 숫자인 경우 해당 값을 length로 갖는 빈 배열을 생성하고, 그 외의 경우 매개변수로 전달된 값을 요소로 갖는 배열을 생성합니다. var arr = new Array(2); console.log(arr); //(2) [empty × 2] var arr2 = new Array(10, 20, 30); console.log(arr2); //(3) [10, 20, 30] 리터럴 이용 0개 이상의 값을 쉼표로 구분하여 대괄호([])로 묶습니다. var arr = [10, 20, 30]; console.log(arr); //(3) .. 2022. 6. 27.
[JavaScript] 자바스크립트 기초 문법 - 함수 함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록입니다. 함수를 정의한 후 호출함으로써 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있습니다. 목차 함수 정의 함수를 정의하는 방법 두 가지를 살펴보겠습니다. 함수 선언문 첫 번째는 선언적 정의 방법으로, 이름이 있는 일반적인 함수를 정의할 수 있습니다. 함수 선언문에서 함수명은 생략할 수 없습니다. 함수는 매개변수와 리턴값을 가질 수 있습니다. 인자를 전달받지 않으면 매개변수는 undefined로 초기화되며, 반환을 생략하면 함수는 undefined를 반환합니다. function 함수명( [매개변수1,매개변수2,..] ){ 문장; [return 리턴값;] } 함수 표현식 두 번째는 함수 리터럴 방식으로 함수를 .. 2022. 6. 27.
[JavaScript] 자바스크립트 기초 문법 - 제어문 제어문(Control flow statement)은 주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용합니다. 목차 조건문 조건문(conditional statement)은 주어진 조건식의 참거짓 여부에 따라 코드 블럭(블록문)의 실행을 결정합니다. 단일 if 문 if (3>2) { console.log("3>2"); } //실행 결과: 3>2 if...else 문 var gender = "여"; if (gender == "남") { console.log("남자"); } else { console.log("여자"); } //실행 결과: 여자 다중 if 문 var grade = 80; if (grade >= 90) { console.log("A 학점"); } else if (.. 2022. 6. 26.
[JavaScript] 자바스크립트 기초 문법 - 변수, 데이터 타입, 연산자 자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어로서, 웹 페이지를 동적으로 개발하기 위해 사용합니다. HTML이 웹의 구조(structure)를 담당하고, CSS가 웹의 표현(presentation)을 담당한다면, 자바스크립트는 웹의 동작(behavior)을 담당한다고 할 수 있습니다. 목차 HTML에서 자바스크립트를 포함하는 방법 (1) (2) (참고 : 페이지의 모든 HTML은 위에서부터 아래의 순서 그대로 실행됩니다. 이 때문에 특정 요소를 포함한 HTML 코드보다 JavaScript를 먼저 불러와버리면 코드가 올바르게 동작하지 못합니다. 따라서 스크립트 요소를 본문의 맨 마지막( 태그 바로 앞)에 배치하는 것이 안전합니다. 또는 외부 스크립트 파일을 참조하는 경우, def.. 2022. 6. 25.

티스토리툴바