javascript

[33-js-concepts] 7. 식(expression) vs 문(statement) | Expression vs Statement

[ Expression] : 하나의 값을 결과로 가지는 javascript code snippet primary expression this, indenitifier, literal this : evaluates to this value of the execution context - p36 literal - NullLiteral(null), BooleanLiteral(false, true), NumbericLiteral, StringLiteral 2. new expression ex) new newExpression - 1. evaluate newexpression - 2. call getValue(Result(1)) - 3. if type(result2) is not object, generater ..

[33-js-concepts] 6. 함수 범위, 블록 범위, 렉시컬 범위 (Function Scope, Block Scope and Lexical Scope)

스코프란? 바스크립트는 var 문법을 통해 변수를 선언할 수 있습니다. 또한 es2015부터 let과 const라는 문법으로도 선언할 수 있게 되었습니다. 모질라 문서에 따르면 var은 함수 스코프(function-level scoped), let과 const는 블록 스코프(block-level scoped)를 갖는다고 합니다. 스코프의 범위 전역스코프? 변수가 함수나 블록에 속해 있지 않음 함수 내부에 속해 있더라도 var로 지정자를 설정하지 않음 const,let 등으로 선언을 했는데 그 어떤 블록 안에도 들어가있지 않음 지역스코프? 변수가 함수에 속해 있고 var로 선언되어 있음 변수가 블록에 속해 있고 const나 let으로 선언되어 있다. 스코프 레벨 함수 스코프? 함수 내부에서 (var)로 변..

[33-js-concepts] 5. == vs. === vs. typeof

Falsy, Truthy 강제변환하면 false로 변하는 값입니다. JS에 있는 모든 값들은 Falsy 혹은 Truthy 한 값입니다. Falsy 값은 얼마 되지 않아서 외워두면 되고, 나머지는 Truthy한 값이라고 생각하면 됩니다. Falsy : undefined null false +0, -0, NaN "" Equality ( == , 동등 연산자 ) 느슨한 동등 비교로, 비교 대상의 타입이 다를 경우 강제 변환을 실시하여 타입 비교 후 결과를 반환한다. 추상 비교 알고리즘(Abstract Equality Comparison Algorithm)을 사용하며, 비교 후 같은지 결과를 true 혹은 false로 반환한다. 작동 알고리즘 먼저 비교대상이 되는 x와 y는 true와 false로 표현될 수 있..

[33-js-concepts] 4. 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑 (Implicit, Explicit, Nominal, Structuring and Duck Typing)

데이터 타입 변환에는 두가지가 있다. 1.명시적 변환 : 개발자가 의도를 가지고 데이터타입을 변환시키는 것 * 타입을 변경하는 방법 -> Object(), Number(), String(), Boolean() 와 같은 함수를 이용 new 연산자가 없다면 타입을 변환하는 함수로서 사용된다. Number() != parseInt() 2.암시적 변환 : 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 *산술연산자 - 더하기 + 연산자의 우선순위 : 숫자 < 문자 console.log(4 + "coen"); 결과 : coen console.log("coen" + 4); 결과 : coen4 console.log(4 + 5 + "coen"); 결과 : 9coen console.log(4 + "coe..

[33-js-concepts] 3. 값 타입과 참조 타입 (Value Types and Reference Types)

1.값 원시타입 ( boolean, null, undefind, string,number, symbol) 원시타입은 immutable data type 이기 때문에 ,값이 변경될 경우, 새로운 값을 할당을 받음. let myNumber=23; let newVar = myNumber; myNumber = myNumber+1; 2. 참조 객체타입 ( object) 메모리상의 실제 객체의 위치를 나타내는 주소값을 할당받음. let myArray =[]; [ let vs const : 변수할당이 나온 김에 번외 let sum=0; sum = 1+2+3+4+5; let numbers=[]; numbers.push(1) numbers.push(2) numbers.push(3) numbers.push(4) let 과..

[33-js-concepts] 2. 원시 자료형 (Primitive Types)

특징 JavaScript의 모든 Type은 원시타입(Primitive Type) 6개와 객체타입(Object Type) 1개로 총 7개 입니다. 원시타입은 불변적입니다. 원시 타입은 값(value)으로 저장, 객체들은 참조(reference)로 저장 됩니다. 어떠한 메소드를 가지고 있지 않습니다. Type을 알고 싶으면 typeof 를 쓰면 됩니다. typeof null === 'object' 인 이유 null은 원시타입 인데 객체 타입이라고 나타내고 있습니다. typeof가 검사하는 방식 1. undefined인지 검사 2. 해당 값이 객체 태그를 가졌는지 검사 3. 숫자, 문자, 참/거짓 검사 ※ null에 대한 명시적인 검사는 없습니다. 1. undefined 인지 검사 2. 해당 값이 객체 태그를..

[33-js-concepts] 1. 호출 스택 (Call Stack)

1.1 JavaScript Engine 자바스크립트란? JavaScript를 접하다 보면 이런 수식 문장을 종종 접할 수 있습니다. 싱글 스레드 기반으로 동작하는 인터프리터 언어 이벤트 루프를 기반으로 하는 싱글 스레드 Node.js 초창기에는 웹 페이지의 동작을 정의하는 Client-side 언어였으나, Node.js의 등장으로 Server-side 까지도 개발을 할 수 있게 되었습니다. 중요한 키워드는 싱글 스레드 방식으로 돌아가기 때문에 작업(Task)을 수행할 때 Stack, Queue, Heap과 같은 단일 콜 스택을 가집니다. Rendering Engine vs. JavaScript Engine Rendering Engine(Layout Engine)은 HTML과 CSS로 작성된 마크업 관련 ..

[JavaScript] Mobile WEB

6. Mobile WEB 가. Native App (image)* 보편적으로 지칭하는 모바일 애플리케이션* 특정한 플랫폼에서만 작동되는 앱- ex. 아이폰 앱을 안드로이드 폰에서는 실행 불가* App Store에서 판매, 배포가 이루어짐 장점 단점 - 실행속도가 빠르고 안정적 - Mobile 기기에 최적화 - 개발 툴이 비교적 편리 - 특정 플랫폼에서 동작 - 업데이트가 느림 나. Mobile Web (image)* PC용 사이트의 구성을 모바일에 맞추어 표현한 웹* 스마트 디바이스에 최적화 된 홈페이지 장점 단점 - 일반적인 웹 프로그래밍 기법으로 개발 가능 - 네이티브 앱에 비해서 속도가 현저하게 느림 - 접근성이 낮음 다. Hybrid App - 겉으로는 Native App의 모습을 가지고 앱스토어..

[JavaScript] Ajax, XML, JSON

5. jQuery, Ajax, JSON 5.1 jQuery 자주 사용되는 자바스크립트 라이브러리 write less, do more 코딩량이 매우 절감됨 2006년 존 레식(John Resig)이 발표 https://jquery.com 에서 다운로드 5.1.1 jQuery의 버전 1.x 버전: 구버전 브라우저까지 지원되는 버전 2.x 버전: 구버전 브라우저(Internet Explorer 6, 7, 8 등)을 지원하지 않음 3.x 버전: 2014년부터 개발, 더 빠르고 풍부한 API 5.1.2 jQuery를 사용하는 방법 다운로드 받아서 사용할 경우 다운로드 받지 않고 사용할 경우 5.1.3 기본 문법 선택한 엘리먼트에 어떤 동작을 수행 /** * $: jQuery에서 정의 및 접근에 사용 * (sele..

[JavaScript] 자바스크립트 객체

2. 자바스크립트 객체 2.1 자바스크립트의 객체 1) 내장 객체 : document, window, screen, browser 등Date : 날짜와 시간 작업Number : 수치형 데이터String : 문자열 관련Math : 수학 연산Array : 배열 2) 사용자 정의 객체- 객체 상수로부터 객체 생성var myCar = { model: "520d", speed: 60, color: "red", break: function() { this.speed -= 10; } accel: function() { this.speed += 10; }};myCar.color = "yellow";myCar.break(); - 생성자 함수를 이용한 객체 생성function Car(model, speed, color) ..

[JavaScript] DOM과 이벤트 처리, 입력검증

3. DOM과 이벤트 처리, 입력검증 3.1 문서 객체 모델(DOM, Document Object Model) 3.1.1 document 객체 : 웹 문서의 최상위 객체- id로 요소 찾기 : getElementById("태그의 id");- 태그.innerHTML : 태그 내부의 사용- 태그.value : 태그의 입력 값- 태그의 속성 변경 : 태그.src = "값"document.getElementById("img2").src = "poodle.png";- 태그의 스타일 변경 : 태그.style.속성이름 = "속성 값";document.getElementById("img2").style.color = "blue"; 3.1.2 window 객체- 팝업창 열기 : window.open(url, 윈도우의 n..

[JavaScript] 자바스크립트 기초 문법

1. 자바스크립트 기초 문법 1.1 자바스크립트 - Netscape 사의 브랜든 아이크(Brendan Eich)가 개발- 동적인 웹 페이지 작성을 위해 사용되는 클라이언트 측 프로그램 언어'자바스크립트는 사용자 PC에서 돌아간다; 위치를 잘 알아야 함- 모든 웹 브라우저에 자바스크립트 해석기가 내장되어 있음- 웹 페이지의 동작을 정의하는 언어- 인터프리터 언어 (vs. compiled language)- 클라이언트에서 실행됨- 자료형이 없음(가변자료형); '우변의 값에 따라서 자료형이 바뀜var i = 0;i = "hello";i = true; '2008 Google V8 오픈 소스로 공개해 버림; 자바스크립트는 웹에서 뿐만 아니라 다른 분야에도 사용 가능하게 되었다'2009 라이언 달 Node.js 프..