본문 바로가기

IT/자바스크립트14

[javascript] 자바스크립트 구현 자바스크립트의 구현은 ECMAScript, DOM, BOM 으로 나누어 진다. 자바스크립트 1.1이 ECMA(유럽 컴퓨터 제작자 협회 : European Computer Manufacturers Association)에 제안되었다. ECMAScript는 자바스크립트의 문법과 의미를 표준화하여 만든 것이다. 크롬이나 익스플로러 등 다양한 웹 브라우저에서 중립적으로 사용할 수 있다. ECMAScript ECMAScript 언어는 웹 브라우저에 종속되지 않는다. 입력이나 출력이 존재하지 않는 대신 DOM 이나 BOM 같은 것을 제공한다. ECMAScript의 구성 요소 문법타입선언문키워드예약어연산자객체 ECMAScript의 버전 ECMA 1판 : 자바스크립트 1.1 과 거의 같지만 브라우저 종속적인 코드를 삭.. 2018. 8. 20.
[javascript] element select 함수 사용하기 HTMLElement.select(); element select 함수는 input text 나 textarea 요소를 드래그한 듯이 선택하기 위해 사용하는 함수다. 다음 예시를 통해 실행해보자 contents 당연히 선택을 하면 해당 요소에 focus가 적용된다. 코드를 보자 contents html을 보면 이벤트 쉽게 추가하기 위해 id속성을 추가했다. 스크립트 코드를 보자 document.getElementById('forText').addEventListener('click', function () { document.getElementById('text').select(); }); document.getElementById('forTextArea').addEventListener('click',.. 2018. 8. 18.
[javascript] promise 객체 소개 Promise란? promise는 비동기 동작이 완료된 이후 그 성공, 실패한 결과를 처리하기 위한 handler이다. 현재는 값이 존재하지 않으니까 가져오게 되면 어떻게 처리를 해준다는 일종의 약속이다. callback 요청에 callback 함수를 실행하는 대신에 객체로 사용하는 것이다. 동기 : 순차적으로 일을 스스로 끝내 가는 방식(서버 요청이 끝날때까지 기다려주고 결과물을 가져옴) 비동기 : 해야할 일을 맡기고 다음 코드를 실행하는 방식.(서버 요청이 끝나지 않아도 다음을 실행, 나중에 완료되면 가져옴) Promise 상태 대기 (pending) : 작업을 요청하였으나 아직 성공, 실패의 결과도 받지 못한 대기 상태 이행 (fulfilled) : 작업 요청 후, 처리에 성공한 상태 거부 (rej.. 2018. 8. 14.
[javsscript] es6 dynamic import 이전 포스팅에서 import와 export 사용법을 설명했다. 하지만 import를 선언하면서 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어질 수 밖에 없다. es6에서는 이점을 보완하기 위해 필요한 스크립트만 가져와서 사용하도록 dynamic import를 정의했다. 사용법은 간단하다. import('./ImportClass.js'); 위와 같이 import안에 import할 module명을 넣어 주면 된다. 그러면 return 값으로 Promise 객체를 받는다. 이제 class 객체를 생성하여 사용해보자. export default class ImportClass { constructor() { console.log('import!'); } }import('./ImportClass').then.. 2018. 8. 12.