Programming/JavaScript (9) 썸네일형 리스트형 문서 로드 이전, 이후에 따른 함수 정의 - onload, DOMContentLoaded 문서의 로드 시점, 즉 해당 페이지를 구성하는 모든 리소스가 로드된 이후/이전 상태를 인식하여 특정 함수를 호출하고 싶은 사람들을 위해 onload와 DOMContentLoaded를 제공한다. onload onload는 css, image와 같은 페이지를 구성하는 각종 리소스가 모든 로드된 이후 실행된다. onload 사용법 window.addEventListener('load', (event) => { - 내용 - }); window.onload = (event) => { - 내용 - }; DOMContentLoaded HTML 문서가 로드되자마자 바로 실행된다. css, image와 같은 서브 리소스들의 로드가 완료될 때까지 기다리지 않는다. DOMContentLoaded 사용법 document.ad.. const 키워드로 변수 선언 일반적으로 자바스크립트에서 const는 상수(constant)를 선언하기 위해 사용한다. const의 주요 특징은 다음과 같다. 선언과 동시에 반드시 초기화 작업을 해야 한다. 그렇지 않으면 아래와 같은 문법 에러가 발생한다. 블록 레벨 스코프를 가진다. 한 번 선언한 변수는 재할당이 불가능하다. 출처 http://www.yes24.com/Product/Goods/92742567 var 키워드로 선언된 변수는 함수 레벨 스코프만 인정한다 var 키워드로 선언된 변수는 함수 레벨 스코프만 인정한다. 아래 코드는 var 키워드로 선언된 변수 x 가 함수가 아닌 코드 블록 내부에서 선언된 모습이다. 함수 내부에 선언되지 않았으므로 변수 x는 전역 변수로 인식된다. 따라서 상위에 선언된 변수 x의 값에 또 다른 값이 재할당 되는 상황이 발생한다. var x = '원래 값'; if (true) { var x = '의도치 않게 변경될 수 있는 값'; } console.log(x); // 의도치 않게 변경될 수 있는 값 따라서 if, for, while, try/catch와 같은 코드 블록 내부에 선언되는 변수를 선언 시 var 키워드를 사용해야 한다면 주의해야 한다. 출처 http://www.yes24.com/Product/Goods/92742567 [JavaScript] JSON 기본 개념 JSON은 쉽게 데이터를 주고받을 수 있도록 설계된 경량 데이터 포맷이다. JSON 데이터는 순수 문자로만 구성되어 있다. JSON 데이터는 key-value 쌍으로 작성되고, 큰따옴표("")로 감싸서 표현한다. 그리고 key-value 사이에 콜론(:)을 삽입해서 구분한다. "key" : "value" JSON 데이터 구성에서 key는 반드시 문자열 형태로 작성한다. value에는 다양한 데이터 타입이 올 수 있다. 만약 value 값으로 문자열이 사용될 시 반드시 큰따옴표("")를 사용해서 표현한다. 만약 value를 숫자로 표현하고 싶다면 정수(Integer) 또는 부동소수점(float) 형태만 가능하다. - a string - a number - an object - an array - a boo.. [JavaScript] 시:분:초 두 자릿수로 표기하기 Date 객체에서 제공하는 메서드 getHours(), getMinutes(), getSeconds() 메서드로 시간을 표현하면 다음과 같다. 초(Second) 부분이 한 자리일 때 한 자리로 표현되기 때문에 보기 좋지 않다. 초 뿐만이 아니라 분(minute) 또한 한 자리로 표기된다. 코드를 보려면 화면의 연필 버튼을 누른다. padStart() 메서드를 사용해서 표기 방식을 교체한다. padStart() 메서드는 문자열의 표기 방식을 교체하는 메서드이다. 숫자를 가지고 와서 왜 padStart() 메서드가 활성화 되지 않는지 당황하지 말자. padStart() 메서드의 기본 형식은 다음과 같다. 문자열.padStart(목표 문자열 길이, 문자열에 채워넣을 다른 문자열); Date 객체로 시간을 표기.. [JavaScript] 객체(Object)에 대한 정리 기본 개념 자바스크립트는 객체기반 패러다임에 의해 만들어졌다. 여기서 객체(Object)는 프로퍼티(Properties)로 구성되어 있는데, 프로퍼티는 이름(Key)과 값(Value)로 구성되어 있다. 자바스크립트의 객체는 아래 이미지와 같이 현실세계에 빗대어 이해할 수 있다. 자바스크립트에서 객체는 단독으로 존재하는 개체(Entity)이며, 프로퍼티와 타입(Type)을 가진다. 사람(Human)이라는 객체가 있다고 가정하자. 그렇다면 아래 이미지와 같은 고유한 특성을 가진 프로퍼티를 생성할 수 있다. 객체 생성 방법 객체 생성 방법은 new Object(), Object.create(), 객체 초기자(Object Initializer)를 통한 리터럴 표기법이 있다. 객체 초기자를 사용한 객체 생성 방법.. [JavaScript] Template Literals ES6에서 소개된 Template Literal은 여러 줄로 이루어진 문자열과 문자 보간기능(특정 값으로부터 다른 값을 추정하는 것)을 지원한다. 가장 큰 특징은 이중 따옴표(" ")나 작은 따옴표(' ') 대신 백틱(backtick)문자(` `)_키보드 숫자 1 왼쪽에 위치 를 사용한다는 것이다. 세부 특징은 다음과 같다. Multi-line strings 일반 문자열 사용 시 개행(改行)을 위해서 문자 사이에 '\n' 를 사용해야 한다. 하지만 template literal을 활용하면 문자열이 있는 그대로 적용된다. 일반 문서 작성 하듯이 작성해도 그대로 적용된다. 일반 문자열 console.log( "There Is A Light \nThat Never Goes Out" ); // There Is .. [JavaScript] 값 입력 후 엔터(Enter)키 눌렀을 때 이벤트 실행 로그인 시 ID/PW 입력 후 굳이 마우스로 로그인 버튼을 클릭하지 않고 엔터만 눌러도 로그인 이벤트가 실행된다. 이와 유사한 이벤트를 만들어 보자. 전체코드 - onkeypress는 키보드의 키를 눌렀을 때 이벤트를 발생시킨다. - 나는 show_name 이라는 함수를 실행하도록 작성했다. - 엔터키 인식을 위헤 키 코드 값을 가져오는 keyCode를 사용한다. 실행 결과는 아래와 같다. 그런데 MDN 웹 문서를 참고하니 다음과 같은 내용이 나온다. KeyBoardEvent.keyCode의 사용이 지양되고 있으며, KeyBoardEvent.code 형식으로 사용하는 것을 권장하고 있다. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ke.. 이전 1 2 다음
