Study/JavaScript

[JavaScript_study] 숫자, 문자, 불리언 타입 (데이터 타입)

* 데이터 타입 > 원시(primitive) : 단일 데이터 : number, string, boolean, null, undefined, Symbol > 객체(object) : 복합 데이터 // 원시 타입을 제외한 나머지 전부 : object, array, function * 숫자 타입 예시 : 숫자 아무거나 할당할 수 있다. > let integer = 123; // 정수 > let negative = -123 // 음수 > let double = 1.23; // 실수 > let binary = 0b1111011; // 2진수 > let octal = 0o173 // 8진수 > let hex = 0x7b; // 16진수 * 숫자를 나누었을때 발생할 수 있는 데이터 값 > console.log(0 / ..

[JavaScript_study] 변수 선언 및 할당

변수(Variable) * 이름짓기 (Naming) > 저장된 값을 잘 나타낼 수 있는 의미있는(구체적인 수록 좋다) 이름 > 이 변수에는 어떤 값이 들어있는가? 에 대한 생각을 항상 하기 * 변수의 이름으로는 예약어는 사용하면 안된다. (아래는 예약어 리스트 링크) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords * 어플 처리 과정 > 입력(input) -> 처리(process) -> 출력(output) -> 저장(storage) * 처리(process)를 위해서는 데이터(data)를 임시저장할 공간이 필요하다. > 변수(Variables) : 값을 저장하는 공간, 자료를 저장할 수 있는 ..

[JavaScript_study] 자바스크립트 정의

JavaScript is lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many-non browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. => 가볍고 인터프리터 언어이며 필요할때 실시간으로 런타임시 컴파일을 하는 언어이다. 일급함수를 가진 프로그래밍 언어이다. 브라우저가 아닌 환경에서도 사용가능하다. ex) Node.js, Apache 등등 자바스크립트..

[JavaScript_study] ECMAScript란?

* 브라우저별 JavaScript엔진 - 인터넷 익스플로어 : Chakra - 크롬 : V8 - 사파리 : JavaScript Core - 파이어 폭스 : SpiderMonkey - 엣지 : V8 - Nodejs : V8 * 브라우저들이 JavaScript들을 이해하고 실행하기 위한 공통된 규격 (JavaScript 문법의 규격사항, 표준사항) : ECMAScript * Babel을 이용해서 버전에 상관없이 코드를 사용이 가능하다. WIKI ECMAScript: https://en.wikipedia.org/wiki/ECMAScript 버전별 문법 지원 현황 확인: https://kangax.github.io/compat-table/es5/

[JavaScript_study] DOM & EVENT 이벤트 버블링, 이벤트 위임

- 동작은 동일하지만 버블링에서 차이가 나는 경우 * 버블링 X focus blur mouseenter mouseleave * 버블링 o focusin focusout mouseover mouseout ​* event.stopPropagation() > 이벤트 버블링을 인위적으로 막아준다. > 버블링을 막을 일이 없어서 자주사용되지는 않는다. * 이벤트 위임 > 해당코드로 li에 link를 추가하게되면 클릭시 a tag안에 class="on"이 추가하게되어 이상하게 동작한다.. > 수정방법은 아래에 추가한 코드를 참고하도록하자. * 위의 코드에서 link까지 추가하는 방법 Red Blue Green Pink

[JavaScript_study] DOM & EVENT 이벤트 핸들러(Event Handler)

* 자주 사용하는 이벤트 - click, key 1. dblclick : 더블클릭시 실행 2. keyup : 키를 놓을 때 이벤트가 발생합니다. - input text에 사용되는 이벤트 1. focus : input창에 focus되었을때 2. blur : focus를 잃을때 - mouse 이벤트 1. mousemove : mouse가 움직일떄 마다 실행된다 clientX, clientY를 통해 마우스 포인트의 위치를 알 수 있다. - window resize 1. resize : 창의 크기가 변할때마다 실행된다. https://developer.mozilla.org/ko/docs/Web/Events