개발 언어/Javascript
Javascript # 6 (var-let-const 차이)
var-let-const의 차이를 보기 전에 이 세 가지 변수들의 차이를 보기전에, Hoisting과 Scope을 정리한 글을 보고오길 바란다. Hoisting에 대한 글 : https://philipbox.tistory.com/42?category=867101 Scope에 대한 글 : https://philipbox.tistory.com/43?category=867101 var let const를 비교할 때 몇가지 키워드로 알아보도록 하겠다. 변수 값의 변환 변수의 유효범위 1. 변수 값의 변환 기존의 Javascript를 사용하면서 가장 문제가 있다고 느낀점은 변수 선언의 방식이였다. var를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고있다. 아래 코드를 보자 v..
Javascript #5 (Scope)
스코프(Scope) 자바스크립트에서 스코프(Scope)란 어떤 변수들에 접근할 수 있는지를 정의한다. 스코프는 전역 스코프와 지역 스코프, 두 가지로 나뉜다. 전역 스코프 전역 스코프는 변수가 함수 바깥이나{}바깥에서 선언되었다면, 전역 스코프에 정의된다. const globalVariable = 'variable' cs 위와같이 전역 변수를 선언한다면 코드 모든 곳에서globalVariable이라는 변수를 사용할 수 있다. 당연히 함수 내에서도 사용이 가능하다. 아래 코드를 보자. 1 2 3 4 5 6 const hello = 'Hello Marcus' function marcusHello () { console.log(hello) } console.log(hello) // 'Hello Marcus!'..
Javascript #4 (Hoisting)
Hoisting 자바스크립트의 변수(variable)에 대해서 조금 깊게 이해하기 위한 개념 중 하나이다. Javascript의 Hoisting 우리가 무의식적으로 사용하고 있을 것이다. 모든 변수 선언은 호이스트된다. 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 쉽게 말하면 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다. 코드로 확인해 보겠다. 1 2 3 4 5 6 7 8 9 10 const hoisting = () => { console.log("First name:", name); var name = "Marcus"; console.log("Last:", name); } hoisti..
Javascript #3 (alert, console)
- JS file은 항상 body 아래에 있어야 함. - sciprt는 이렇게 닫아줘야 함. 1 2 3 4 5 6 7 8 9 10 11 12 Hello Javascript Hello World! Colored by Color Scripter cs Javascript - alert index.js에 아래와 같이 입력 1 alert("Hello! This is Javascript!"); cs - index.html을 실행시키면 아래와 같이 alert창이 실행되는 것을 확인할 수 있음. - index.html에서 정상적으로 index.js를 읽었다는 것. Javascript - console.log index.js에 아래와 같이 입력 1 console.log("Hello! This is Javascript! ..
Javascript #2 (ECMAScript, Vanilla JS)
ECMAScript Specifiacation 같은 것. ES5는 ECMAScript5를, ES6는 ECMAScript6를 의미.(버전을 의미) Javascript는 중앙집권화 되어있어서, 업데이트를 하게 되면 모든 브라우저에서 반영이 됨. 일종의 안내책자 같은 것. Vanilla JS Javascript의 한 종류로, Library 없는 것을 의미.(Vanilla는 비격식으로 평범한, 특별할 것 없는 이라는 뜻을 가진 형용사) 브라우저를 통해 우리(사용자)에게 제공된 Javascript. 웹의 기초중의 기초. DOM에서 elementID를 select하는 속도 비교 (이미지출처 : http://vanilla-js.com/) Javascript는 언어고 ECAMScript는 Specifiacation이다..
Javascript #1 (Javascript)
Javascript? - Web에 쓰이는 하나 뿐인 프로그래밍 언어. - 객체(Object)기반의 스크립트(scrip) 언어. - HTML로는 웹의 내용을 작성하고 CSS로는 웹을 디자인한다면, 자바스크립트로는 웹의 동작을 구현. - 웹사이트를 interactive로 만든다는 것. - 컴퓨터나 스마트폰에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음.Javascript로 하는 일 HTML 페이지 변경 및 HTML element와 content의 추가/제거. CSS 및 HTML element의 스타일 변경. 사용자와의 상호작용, Form의 유효성 검증. 마우스와 키보드 event에 대한 스크립트 실행. 웹 브라우저 제어, 쿠키 등의 설정/조회. AJAX를 이용한 웹 서버와의 통신...