JavaScript

JavaScript는 모든 웹 개발자이 필수로 배워야 하는 3가지의 언어 중 하나이다.

HTML은 web page의 내용을 정의한다.
CSS는 web page의 레이아웃을 지정한다.
JavaScript는 web page의 동작을 프로그래밍한다.

Events

HTML event들이 있다.

Event	설명
onchange	HTML element가 바뀌게 됨
onclick	사용자가 HTML element를 클릭할 때
onmouseover	사용자가 HTML element 위로 마우스를 이동할 때
onmouseout	사용자가 HTML element로부터 마우스를 다른곳으로 이동할 때
onkeydown	사용자가 키보드 키를 눌렀을 때
onload	브라우저가 page를 로드하는것을 끝냈을 때

여기서 JavaScript의 event handlers 는 다루고, 검증하며 user input, user actions, and browser actions 에 사용된다.

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

위의 코드가 실행됬을 때, id="demo" 인 부분에 현재 시간이 표시된다.

<button onclick="this.innerHTML = Date()">The time is?</button>

위의 코드가 실행됬을 때, "The time is?" 의 버튼의 내용 대신 시간이 표시된다.

<button onclick="displayDate()">The time is?</button>

위의 코드가 실행됬을 때, 버튼 아래에 현재 시간이 표시된다.

JavaScript Date 입력방식

ISO Date ex. "2020-08-20" (The International Standard)
Short Date ex. "08/20/20"
Long Date ex. "Aug 20 2020" or "20 Aug 2020"

Strict Mode

"use strict"; 는 JavaScript code가 "strict mode" 안에서 실행되어야 한다는 것을 정의한다.

이것은 script 나 function 의 시작부분에 적어줌으로 선언된다.

왜 Strict Mode 인가?

엄격한 모드 덕분에 "secure" 자바스크립트를 더 쉽게 쓸 수 있다.

엄격한 모드는 이전에 받아들여졌던 "나쁜 구문"을 실제 오류로 바꾼다.

예를 들어, 일반 자바스크립트에서 변수 이름을 잘못 입력하면 새로운 global 변수가 생성된다. 엄격한 모드에서는 오류가 발생하여 실수로 글로벌 변수를 만들 수 없게 된다.

정상적인 자바스크립트에서 개발자는 쓰기 불가능한 속성에 값을 할당하는 오류 피드백을 받지 않는다.

엄격한 모드에서는 쓰기 불가능한 속성, 게터 전용 속성, 존재하지 않는 속성, 존재하지 않는 변수 또는 존재하지 않는 개체에 대한 모든 할당은 오류를 발생시킬 것이다.

"use strict"; Syntax

Strict mode를 선언하기 위한 구문은 이전 버전의 자바스크립트와 호환되도록 설계되었다.

자바스크립트 프로그램에서 숫자 literal(4 + 5;) 또는 문자열 literal("John Doe";)을 컴파일해도 부작용이 없다. 단순히 존재하지 않는 변수에 컴파일하여 소멸한다.

따라서 "use strict"; 는 그것의 의미를 "이해"하는 새로운 conpilers 에게만 중요하다.

'this' Keyword

this 는 JavaScript가 속한 객체를 가리킨다.

사용하는 위치에 따라 값이 다르다.

어떤 method에서 이것은 owner object를 가리킨다.

var person = {
  firstName: "John",
  lastName : "Lee",
  id       : 1234,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

단독으로, 이것은 global object를 가리킨다.

<p>In this example, <b>this</b> refers to the window Object:</p>

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

함수에서 이것은 global object를 가리킨다.
함수에서, strict mode에서는, 이것은 정의되지 않는다.

이벤트에서 이벤트를 받은 요소를 가리킨다.
call() 및 apply()과 같은 method는 이것을 어떤 물체에든 refer할 수 있다.

JavaScript Let

let 과 const 두 키워드는 Block Scope 변수들을 제공한다.

Block Scope

{
  var x = 2;
}
// x CAN be used here

var 로 정의된 변수들은 block scope를 가지지 못한다.

{
  let x = 2;
}
// x can NOT be used here

let 으로 정의된 변수들은 block scope 를 가질 수 있다.

Redeclaring Variables

var x = 10;
// Here x is 10
{
  var x = 2;
  // Here x is 2
}
// Here x is 2

var 키워드로 변수를 다시 재정의하면 문제가 발생할 수 있다.

블록 내부에 변수를 재정의하면 변수를 블록 외부에 재정의 할 수도 있다.

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

let 키워드를 사용하여 변수를 재정의하면 이 문제를 해결할 수 있다.

블럭 내에서 변수를 재정의해도 변수를 블록 외부로 재정의하지 않음.

Loop Scope

var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
// Here i is 10

let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
// Here i is

위의 예제에서 var를 사용하여 loop에 선언된 변수는 루프 외부에 변수를 재정의한다.

두 번째 예에서, let을 사용하여루프에서 선언된 변수는 루프 외부에 변수를 다시 정의하지 않는다.

let 이 i 변수를 루프에서 선언하는 데 사용될 때, i 변수는 루프 내에서만 볼 수 있다.

Redeclaring

var x = 2;

// Now x is 2
 
var x = 3;

// Now x is 3

var 를 이용해 자바스크립트 변수를 재선언 하는 것은 어느 곳에서나 허용된다.

var x = 2;       // Allowed
let x = 3;       // Not allowed

{
  var x = 4;   // Allowed
  let x = 5   // Not allowed
}

같은 scope나 block 안에서 let 을 이용해 var 변수를 재선언 하는 것은 허용되지 않는다.

JavaScript Const

const을 사용하여 정의된 변수는 재할당될 수 없다는 점을 제외하고 let 변수처럼 동작함

Block Scope

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10

위의 block 안 변수 x 는 block 밖의 변수 x와 다르다.

Assigned

const PI;
PI = 3.14159265359; //Incorrect

const PI = 3.14159265359; //Correct

const 변수는 선언될 때 값이 할당되어야 한다.

Primitive Values

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

만약 우리가 primitive 값을 constant에 할당한다면, 그 값을 변경할 수 없다.

Constant Objects

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

우리는 constant 객체의 속성을 변경할 수 있다.

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

하지만 재할당 할 수는 없다.

Constant Arrays

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

우리는 constant array의 element를 변경할 수 있다.

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

하지만 재할당 할 수는 없다.

Redeclaring

var x = 2;    //  Allowed
var x = 3;    //  Allowed
x = 4;

var x = 2;         // Allowed
const x = 2;       // Not allowed
{
  let x = 2;     // Allowed
  const x = 2;   // Not allowed
}

기존 var 또는 let 변수를 const로 동일한 범위 내에서 또는 동일한 블록에서 구성하거나 다시 지정할 수 없다.

const x = 2;       // Allowed
const x = 3;       // Not allowed
x = 3;             // Not allowed
var x = 3;         // Not allowed
let x = 3;         // Not allowed

{
  const x = 2;   // Allowed
  const x = 3;   // Not allowed
  x = 3;         // Not allowed
  var x = 3;     // Not allowed
  let x = 3;     // Not allowed
}

동일한 범위 또는 동일한 블록에서 기존 const 변수를 redeclaring 하거나 reassigning할 수 없다.

const x = 2;       // Allowed

{
  const x = 3;   // Allowed
}

{
  const x = 4;   // Allowed
}

다른 범위 또는 다른 block을 사용하여 const 변수로 redeclaring할 수 있다.

Hoisting

carName = "Volvo";    // You CAN use carName here
var carName;

var 로 정의된 변수들은 상단으로 호스트된다.

변수를 선언하기 전에 var 변수를 사용할 수 있다.

carName = "Volvo";    // You can NOT use carName here
const carName = "Volvo";

const 로 정의된 변수들은 상단으로 호스트되지 않는다.

변수를 선언하기 전에 const 변수를 사용할 수 없다.

Arrow Function

Arrow functions 는 더 짧은 function syntax 를 작성하게 해준다.

hello = function() {
  return "Hello World!";
}

Before

hello = () => {
  return "Hello World!";
}

with arrow function

hello = () => "Hello World!";

함수에 statement가 하나만 있고 이것이 값을 반환하는 경우 대괄호와 return 키워드를 제거할 수 있다.

hello = (val) => "Hello " + val;

만약 parameter 가 있으면, 괄호 안의 것을 패스해도 된다.

hello = val => "Hello " + val;

만약 parameter 가 하나라면, 괄호도 스킵해도 된다.

this 키워드 사용

arrow functions에서 this 를 다루는 것은 일반 함수들과는 다르다.

간단히 말해서, arrow functions으로는 this 를 묶는 것이 없다.

일반 함수에서 this 는 함수를 호출한 객체를 나타냈는데, window, the document, a button 등이 될 수 있다.

arrow function을 사용하는 경우 this 키워드는 항상 arrow funtion을 정의한 개체를 나타낸다.

그 차이를 이해하기 위해 두 가지 예를 살펴보자.

두 예시 페이지가 불러질 때 먼저 method를 두 번 호출하고 사용자가 버튼을 클릭할 때 다시 한 번 호출한다.

첫 번째 예는 일반 함수를 사용하고, 두 번째 예는 arrow function을 사용한다.

결과는 첫 번째 예시가 서로 다른 두 개의 개체(window and button)를 반환하고, 두 번째 예시는 window 객체가 함수의 "owner"이기 때문에 window 객체를 두 번 반환한다는 것을 보여준다.

//Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

with a regular function, this represents the object that calls the function

//Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

With an arrow function, this represents the owner of the function

JSON

JSON 이란?

JSON은 JavaScript 객체 표기법을 의미한다. (JavaScript Object Notation)
JSON은 경량 데이터 교환 형식이다. (lightweight data interchange format)
JSON은 언어에 독립적이다 (syntax는 JavaScript 객체 표기법 구문에서 파생되었지만, JSON 형식은 텍스트만)
JSON은 "self-describing"이며 이해하기 쉽다.

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

Ex. 이 JSON syntax는 employees object를 정의한다 (an array of 3 employee records)

Syntax Rules
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays

JSON Text to JS object

JSON의 일반적인 용도는 웹 서버에서 데이터를 읽고 웹 페이지에 데이터를 표시하는 것이다.

단순성을 위해, 이것은 입력으로 문자열을 사용하여 증명할 수 있다.

먼저 JSON 구문을 포함하는 JavaScript 문자열을 생성한다.

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

그리고, JavaScript 내장 함수 JSON.parse()를 사용하여 문자열을 JavaScript 개체로 변환한다.

var obj = JSON.parse(text);

마지막으로, 새로운 JS 물체를 page 안에서 사용한다.

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

(위의 모든 내용은 https://www.w3schools.com/js 을 참고해서 작성했다.)

'Study > Web' 카테고리의 다른 글

Node.js (2) - 웹 서버 만들기 (0)	2020.08.26
Node.js (1) - 시작 (설치하기) (0)	2020.08.25
JS DOM (0)	2020.08.21
JS Form 만들기 (0)	2020.08.21
CSS (0)	2020.08.18

WonNote

JavaScript

Events

JavaScript Date 입력방식

Strict Mode

'this' Keyword

JavaScript Let

JavaScript Const

Arrow Function

JSON

'Study > Web' 카테고리의 다른 글

티스토리툴바

JavaScript

Events

JavaScript Date 입력방식

Strict Mode

'this' Keyword

JavaScript Let

JavaScript Const

Arrow Function

JSON

'Study > Web' 카테고리의 다른 글

'Study/Web' Related Articles

티스토리툴바