Javascript Attributes
꼼꼼히 살펴보는 SCRIPT 엘리먼트아마도 <script>는 자바스크립트를 공부할 때 가장 먼저 배우는 HTML 엘리먼트일 것이다. 속성이 많지도 않고 심지어 아무런 속성을 입력하지 않아도 유효하고 잘 동작하는 엘리먼트라서 지나치기 쉽다. 하지만 자바스크립트 실행에 있어서는 어쩌면 가장 중요한 엘리먼트이기에 한 번쯤은 제대로 꼼꼼히 살펴보는 게
태그: js
[Chrome] Ajax로 로컬파일 테스트
크롬 브라우저에서 Ajax로 로컬파일 사용하기웹 개발을 하다보면 WAS나 웹서버 없이 그냥 로컬에서 파일만 가지고 개발하는 경우가 생기게 됩니다.html 파일을 서버에 올리지 않고 로컬의 파일을 바로 크롬 브라우저에서 테스트 하는 경우 1Cross origin requests are only supported for protocol schemes: http
EcmaScript This Binding
ECMAScript this자바스크립트에서는 매번 함수의 호출마다 새로운 실행 구문(Execution Context)가 생성된다. Execution Context는 Lexical Environment, Variable Environment, 그리고 ThisBinding에 대한 정보를 가지고 있는데, 바로 this 키워드가 이 이 thisbinding이라고
Javascript Animation Performance2
JavaScript 애니메이션 성능을 높이는 방법 2편최신 웹, 모바일 디바이스 브라우저에서 모션을 구현하고자 한다면 자바스크립트 애니메이션 성능 높이는 방법 1편 에서 설명한 구현 방법 보다는 CSS will-change 프로퍼티 속성이란 것을 활용해볼 수 있다. 웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할
Javascript Animation Performance
JavaScript 애니메이션 성능을 높이는 방법애니메이션이 많은 화면에서는 성능과 관련된 문제가 일어나기 쉽다. 특히, 하드웨어 성능이 PC에 비해 열악한 모바일 환경에서는 성능이 문제가 되는 경우가 더욱 많다. 브라우저 렌더링 과정 웹 브라우저의 애니메이션 성능을 이야기하기 전에 이해해야 할 것이 브라우저의 렌더링 과정이다. 애니메이션도 브라우저 렌더링
Javascript Effective Animation
JavaScript 효과적인 애니메이션 구현하기애니메이션은 하나 이상의 이미지(frame)을 일정한 시간(second) 간격으로 순차적으로 호출해 이미지가 움직이는 것처럼 보이도록 착시 현상을 유도하는 기술이다. 이때 보이는 이미지의 개수와 시간 간격의 비를 FPS(frames per cecond)라고 하며, FPS 값이 클수록 더 자연스러운 애니메이션을
Javascript PagesShow PagesHide Event
JavaScript pageshow 이벤트, pagehide 이벤트네트워크 연결 속도가 느리고 연결 비용이 높은 모바일 환경에서는 pageshow 이벤트와 pagehide 이벤트가 중요하다. PC와는 다르게 모바일 브라우저에서는 이 이벤트가 페이지 캐시를 모두 지원하기 때문에 특별히 활용도가 높다. pageshow 이벤트와 pagehide 이벤트는 wind
Javascript Mobile Browser Different Event
JavaScript 데스크톱과 다르게 동작하는 이벤트모바일 브라우저에서도 화면이 스크롤되면 scroll 이벤트가 발생하고, 키보드와 마우스 관련 이벤트도 발생한다. 그러나 모바일 브라우저에서 발생하는 이런 이벤트는 데스크톱 브라우저에서 발생할 때와는 발생 순서나 발생 횟수 등이 다르다. scroll 이벤트 scroll 이벤트는 브라우저의 스크롤 막대가 움직
Javascript Mobile Browser Event API
JavaScript 모바일 브라우저 전용 이벤트모바일 브라우저 환경에서 특화되어 사용되는 이벤트 API를 살펴보자. 터치 이벤트 PC에서는 마우스나 키보드로 애플리케이션을 사용하는 데 필요한 동작과 정보를 입력한다면 모바일 환경에서는 사용자 터치로 필요한 동작과 정보를 입력한다. 동작과 정보를 입력하기 위해 기기의 화면에 손가락을 댔을 때 발생하는 이벤트가
Javascript Mobile Event Step
JavaScript 모바일 이벤트 발생 순서프론트엔드 개발에서 이벤트 발생 순서를 이해하고 개발하는 것은 굉장히 중요하다. 특히 운영체제와 제조사별로 조금씩 다르게 처리되는 모바일에서는 더욱 중요하다. 여기서는 일반적인 이벤트 발생 순서를 알아본다. 선택이벤트(touch, scroll, mouse, click) touch 이벤트와 scroll 이벤트, mo