CategoryJavaScript (27)

[ES6] ES6을 쉽게 익혀보자 - tower of babel

ES6을 쉽게 익혀보자 - tower of babel일본 Node.js 유저 그룹 대표인 후루카와 요스케(Yosuke Furukawa)님이 만든 ES6 학습 도구입니다.Babel Setup부터 시작해서 ES6의 핵심기능들을 배우고 연습할 수 있습니다.바로 가기 - tower-of-babelReadMe 문서를 보시면 아시겠지만 아래와같이 설치 및 실행할 수 있습니다.$ npm install tower-of-babel..

20. 자바스크립트 - 관리하기 쉬운코드 작성하기

관리하기 쉬운코드 작성하기 최근의 웹앱은 수천 줄의 자바스크립트로 이루어져 있습니다. 다른사람의 코드를 관리하는데도 많은 시간을 보내므로 관리하기 쉬운 코드를 만들어야 합니다. 이번포스트에서는 그런 주제를 다룹니다. 관리하기 쉬운 코드란? 이해하기 쉬움 직관적임 적용하기 쉬움 확장하기 쉬움 디버그하기 쉬움 코드 표기법 코드 표기법을 정하는 것입니다. 자바스크립트는 특히 느슨한 데이터타입을 채택했기 때문에 다른 언어보다 이런점이 중요하게 작용합니다..

19. 자바스크립트 - 함수 바인딩

함수 바인딩 함수 바인딩이란 특정한 this값과 특정한 매개변수를 넘기면서 다른 함수를 호출하는 함수입니다. 많은 자바스크립트 라이브러리들은 함수를 특정한 컨텍스트에 묶는 함수를 만들었습니다. 일반적으로 이런 함수를 bind()라고 부릅니다. 기본 구조는 아래와 같습니다. function bind(fn, context){ return function(){ return fn.apply(context, arguments); ..

18. 자바스크립트 - JSON 직렬화, 파싱(JSON Serialize, JSON Parse)

JSON 간단하게 JSON이 무엇인지와 JSON파싱, 직렬화에 대해서 알아보겠습니다. JSON 문법 http basic카테고리에서 설명한 JSON 포스트링크를 참조 부탁드리겠습니다.JSON이란? 바로가기 JSON은 세가지 타입을 사용합니다. 단순한 값 객체 : 키-값 쌍으로 표현 배열 : 값, 객체, 다른 배열등을 담는 배열 JSON은 프로그래밍 언어가 아니고 데이터 형식입니다!!다른 언어에서도 JSON의 파싱등을 지원하며 저희는 주제에..

17. 자바스크립트 - 에러처리와 디버깅

에러처리와 디버깅 에러처리 try-catch, finally문 자바의 try-catch와 비슷합니다. try{ //에러 발생예상 코드 }catch(error){ //에러 시 코드 } finally { //에러 발생, 미발생과 상관없이 위에서 실행 후 마지막으로 실행되는 코드 } finally문은 아예 생략해도 상관없습니다. catch문의 error에는 에러 타입에 따른 처리를 할 수 있습니다. 에러타입 Error : 다른 에..

16. 자바스크립트 - HTML5 스크립트

HTML5 스크립트 문서간 메시징 서로 다른 소스의 페이지 사이에서 정보를 교환하는 것입니다. XDM이라고 부르기도 합니다(Xcross Document Messaging) www.wrox.com페이지에 아이프레임으로 p2p.wrox.com페이지를 열어서 통신하기에는 보안을 유지하기가 어려운 일이었으나 이제는 보안은 그대로 유지하면서 사용하기 쉽게 XDM으로 표준화 했습니다. postMessage() 메서드를 통해서 사용합니다. 전달 var ifram..

15. 캔버스와 그래픽

canvas HTML5에 추가된 요소입니다.이 요소는 페이지 일부를 그래픽 생성 가능한 영역으로 지정하고 자바스크립트로 즉석에서 그림을 그립니다.현재는 기본적인 그림 기능이 있는 2D 컨텍스트가 있고 WebGL이라는 3D 컨텍스트가 제안된 상태입니다. WebGL의 경우는 자체가 실험적이기도 하며 윈도 xp같은 오래된 운영체제에는 WebGL 구현에 필요한 그래픽 드라이버가 없는 문제도 존재합니다. 기본사용법 <canvas>요소는 width와..

14. 자바스크립트 - 폼 스크립트

폼 스크립트 자바스크립트로 폼관련 필드의 유효성 검사 및 표준 폼 컨트롤러의 기본 동작을 확장하기 시작했습니다. 폼 기본 <form>요소는 아래와 같은 기본 프로퍼티와 메서드를 가집니다. acceptCharset : 서버가 처리할 수 있는 문자셋, HTML의 accept-charset속성과 같다. action : 요청을 보낼 URL elements : 폼에 있는 컨트롤 전체의 HTML Collection enctype : 요청의 인코딩 ..

13.2 이벤트 - 이벤트 객체

event 객체DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장됩니다.이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 저장됩니다.ex) 마우스 이벤트 -> 마우스의 위치정보 포함 등키보드 이벤트 -> 누른 키의 키코드 등모든 브라우저가 event 객체를 지원하지만, 세부 사항까지 같지는 않으니 주의하시기 바랍니다.DOM event객체event객체 예제를 봅시다.var btn = document.getEleme..

13.1 이벤트 - 이벤트 흐름, 이벤트 핸들러

이벤트이벤트 시스템은 상당히 복잡합니다.BOM도 이벤트를 지원하지만 정의할 문서가 없었기 때문에 혼란스럽습니다.이벤트는 상황에따라서 단순할 수도, 매우 복잡할 수도 있습니다.우선 핵심 개념부터 알아봅시다.이벤트 흐름이벤트 흐름이란 페이지에 이벤트가 전달되는 순서를 설명합니다.생각해보십시오.화면의 버튼을 클릭하면 버튼도 클릭하고 버튼의 컨테이너도 클릭하는 것이고 페이지 전체도 클릭하는 것입니다.이와같은 문제로 인해 개발자들은 이벤트 흐름을 생각하게 됐..

12. DOM 레벨 2와 레벨 3

DOM 레벨2, DOM 레벨3 DOM레벨1은 HTML, XML문서 구조를 정의하는데 초점이 맞춰져있습니다. 레벨2와 레벨3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML기능을 지원합니다. 서로 관련있는 아래와 같은 모듈로 구성되어있습니다. DOM 코어 : 레벨 1 코어를 바탕으로 노드에 메서드와 프로퍼티를 추가. DOM 뷰 : 스타일 정보를 바탕으로 여러가지 문서 뷰 정의 DOM 이벤트 : 이벤트에 기반한 DOM 문서 상호작용 방법 정의 D..

11. DOM 확장

※ 이 포스트는 이전 10. DOM - Document Object Model - API 포스트와 이어집니다.DOM 확장 브라우저 별로 DOM확장을 지원했습니다.이후 W3C에서 사실상 표준이 된 각종 전용 확장을 명세로 표준화 하기 시작했습니다.이번 포스트에서는 확장된 DOM 및 각 브라우저 별 전용 확장에 대해 알아봅시다. 선택자 API jquery는 getElementsById()같은 메서드를 쓰지 않습니다.완전히 CSS선택자에 기초하여 DOM문..