JS

    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를 이용한 웹 서버와의 통신...