728x90

Language 120

[Javascript/ES6] 모던자바스크립트 변수 var, let, const 차이

var ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. 하지만 아래와 같은 var 키워드의 특징 때문에 문제가 발생했고 ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다. var 키워드 생략 허용 암묵적 전역 변수를 양산할 가능성이 크다. 함수 레벨 스코프(Function-level scope) 함수의 코드 블록만을 스코프로 인정한다. 함수 범위란 말 그대로 함수를 기준으로 범위를 구분한다는 뜻으로 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. 하지만..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 이벤트

이벤트(event)란? 이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있으므로, 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 이벤트 타입(event type) 이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로 이벤트 명이라고도 하며, 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있다. /* HTML 문서의 특정 단락을 클릭하면 발생하는 이벤트를 처리 */ 이 문자열을 클릭해 보세요! 이벤트 명세(event specification) 예전에는 onload..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - 타이머

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. 타이머(timer) window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있고, 또한 이렇게 설정된 함수의 호출을 취소할 수 있다. setTimeout() 메소드 setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출하며, 이 메소드가 성공적으로 호출되면 설..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - 대화상자

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. 대화 상자(dialog box) 사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 아래과 같은 메소드를 제공한다. alert() 메소드 window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고 그에 대한 사용자의 확인을 기다리는데, 사용..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - Navigator 객체

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. Navigator 객체란? navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체다. 이 객체의 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었다. 브라우저 스니핑(browse..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - Screen 객체

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. Screen 객체란? screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체다. Screen 메소드 사용자의 화면 크기 screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환한다. screen.width와 sc..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - History 객체

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. History 객체란? history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다. History 메소드 히스토리 목록의 개수 history 객체의 leng..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - Location 객체

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. Location 객체란? location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용할 수 있다. Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다. Location ..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 브라우저 객체 모델 - Window 객체

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. Window 객체 window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 되며, window 객체의 메소드는 전역 함수이며 window 객체의 프로퍼티는..

Language/Javascript 2023.08.04

[Javascript] 자바스크립트 문서 객체 모델 - 노드

노드(node)란? HTML 문서 객체 모델(DOM, Document Object Model)은 노드라고 불리는 계층적 단위에 정보를 저장하고 있는데, HTML DOM은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해 주는 역할을 한다. HTML 문서의 정보는 노드들의 집합이며 노드 간의 관계를 보여주는 노드 트리(node tree)라고 불리는 계층적 구조에 저장되는데, 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여준다. 노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려가는데, 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드의 종류 W3C HTML DOM 표준에 따르면, HTM..

Language/Javascript 2023.08.04
728x90