카테고리: Javascript

Javascript Mobile Browser Event

JavaScript 모바일 브라우저 이벤트모바일 환경의 사용자 인터페이스는 데스크톱 환경의 사용자 인터페이스와 다르다. 예를 들어, 모바일 기기에서는 데스크톱 PC의 키보드와 마우스 대신 소프트 키보드와 터치 액션을 제공한다. 그뿐만 아니라 데스크톱에서 지원하지 못하는 다양한 기기 정보를 제공한다. 이러한 차이점으로 모바일 브라우저는 데스크톱과 다른 별도의

Javascript Event Bubbling 및 capture

JavaScript 이벤트 버블링과 이벤트 캡처링 차이컵에 들어 있는 탄산음료(사이다 같은)의 기포가 아래에서 위로 올라가는 것과 같이 DOM의 자식 요소로부터 부모 요소로 올라오며 이벤트 핸들러가 실행되는 것을 이벤트 버블링이라고 한다.반대로 DOM의 부모 요소에서 발생한 이벤트가 자식 요소로 내려가며 이벤트 핸들러가 실행되는 것을 이벤트 캡처링이라 한다

Javascript Hoisting

JavaScript Hoisting(호이스팅) 이란?호이스팅은 끌어올리다라는 뜻인데, 풀이하자면 후선언된 변수나 함수들이 해당 Scope에서 최상위로 끌어 올려지는 걸 말한다.자바스크립트엔진은 해당 실행 문맥(Execution Context)의 생성시, 즉 Runtime 시점에서 변수 선언문이나 함수 선언문을 읽기 전에 선언된 변수와 함수들을 다른 무엇보다

EcmaScript

EcmaScript(ES)란?넷스케이프 사는 웹 페이지 동작을 향상시키는 자바스크립트를 지원하기 시작하고 자바스크립트가 사용자 층에서 성공을 거두자 MS에서도 IE3에 Jscript를 개발하여 탑재 하였다.이 때부터 브라우저 전쟁(1990년대 후반에 MS의 인터넷 IE와 넷스케이프 두 브라우저간 경쟁)이라고 불리는 시기가 시작된다.같은 기능이지만 둘의 기능

Javascript Scope Chain

JavaScript 스코프(Scope)란?Scope는 영역 범위라는 뜻으로 자바스크립트의 영역 범위는 어느 범위까지 참조하는지 즉, 변수와 매개변수(parameter)의 접근성과 생존기간을 뜻하며 유효범위는 크게 두 가지로 나뉘게 되는데 아래 스코프 체인에서 설명하는 활성화객체(Active Object)와 전역객체(Global Object) 이다.참고로 E

Javascript Video Custom Controls

JavaScript를 활용한 HTML5 Video 네이티브 커스텀 컨트롤 만들기커스텀 컨트롤을 만들기 위해서는 우선 브라우저에서 자체 제공하는 네이티브 컨트롤을 감춰야 한다.Video 엘리먼트의 속성중 controls에 false 값을 주면 브라우저가 알아서 네이티브 컨트롤을 숨길수 있다.(controls 속성은 default 값이 false이기 때문에 아

Javascript Bookmark

JavaScript 즐겨찾기(Bookmark) 기능 구현하기북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기를 하는 기능이다.필요에 따라 수동으로 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 자바스크립트로 제어하는 방법을 정리한다. 브라우저 지원사항 IE: 모든 브라우저 지원 Chrome: 단축키 알림을 띄움 Firefox

EcmaScript2015 Syntax

ECMAScript2015(ES6) 기초 문법ECMAScript 2015에는 많은 기능들이 추가 되었는데 그 중에 몇가지 기본적인 문법들을 정리해 본다. let/const에 의한 블록 스코프 Map/Set/WeakMap/WeakSet에 의한 컬렉션 형을 정의하는 클래스 제너레이터/for..of Promises

Javascript Module Pattern

JavaScript 모듈 패턴을 이용한 window 객체의 프로퍼티로 추가각각의 자바스크립트 파일을 모듈화 하여, 즉시 실행 함수로 실행하고, 실행하여 생성된 생성자 함수를 전역 객체인 window 객체의 프로퍼티로 추가하여 접근하는 방법이다.export를 통해 프로퍼티를 추가할수 있다. 12345678(function(exports) { expo

Javascript include

JavaScript 외부 소스 코드 삽입eval() eval() 는 전역 객체의 함수 프로퍼티 이다.eval() 함수를 실행하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.하지만 eval 함수로는 보안상 위험이 존재하기 때문에 안티패턴에 속한다.그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행 할 수 있는 방법이 많이 존