JavaScript 기본 문법 정리

JS

 JavaScript는 웹에 상호작용을 더하게 해주는 요소이다.

 JavaScript(줄여서 JS)는 full-fledged dynamic programming language이다.

 즉 html, css를 쓰는 사람은 프로그래머라고 부를 수 없지만 JS를 쓴다면 프로그래머라고 할 수 있다!

 

 JS는 매우 간결(compact)하면서 반면에 유연(flexible)한 언어이다.

 따라서 많은 tool들이 core JavaScript language로 쓰이고, 이들은 최소한의 노력으로 많은 기능성(functionality)을 제공한다. 이에 다음의 이점들이 나타난다.

•  web browser에 내장된 API(Application Programming Interface)로 동적인 HTML 페이지나 CSS 스타일을 만들어 낼 수 있다.
• 타사 API를 사용해 사이트 내의 기능을 통합할 수 있다.
• 제삼자의 framework나 library를 사용해 개발을 가속화할 수 있다.

 

JS의 core features

1. Variables(변수)

 변수는 값을 저장하는 상자(container)이다. var 또는 let, const로 선언할 수 있다.(var은 지금은 여러 문제로 쓰이지 않는다.)

 뭐가 다른지 알고 싶다면..

Storing the information you need — Variables - Learn web development | MDN

 변수는 선언(declaration)-초기화(initialization)-대입(Assignment)의 생애 주기(lifecycle)를 가진다.

let myVariable = 'Bob'; /* declaration, initialization */
myVariable = 'Steve'; // assignment

 

 Variable은 아무 data type의 Value(값)을 넣을 수 있다. 즉 variable의 datatype은 dynamic(유동적)이다.

 Data types :

• String : 문자열, 값이 문자열임을 나타내려면 따옴표로 묶어라.
• Number : 숫자, 따옴표로 묶지 마라.
• Boolean : True(진실) 또는 False(거짓)의 값을 가진다. true와 false로 표현하며 따옴표로 묶지 마라.
• Array : 단일 참조에 여러 값을 저장할 수 있는 구조(물).
• Object : 무엇이든 될 수 있다. JS에서 모든 것은 객체이며 variable(변수)에 저장될 수 있다.

let myVariable = 'Bob'; // String
let myVariable = 10; // Number
let myVariable = true; // Boolean
let myVariable = [1,'Bob','Steve',10]; // Array
let myVariable = document.querySelector('h1'); // Object

 

 

2. Comment(주석)

 코드를 설명하는 글

/*
여러 줄에 걸쳐서
주석을 쓰려면
이렇게
*/
let myVariable;//한줄만 또는 코드 뒤에 쓰려면 이렇게

 

 

3. Operators(연산자)

 operator는 두 value 또는 variable를 토대로 하나의 결과(값)를 만들어 내는 수학적 기호(mathematical symbol)이다.

• Addition(더하기) : +
  • 두 number 또는 string을 더한다.
• Substraction(빼기), Multiplication(곱하기), Division(나누기) : - , * , /
  • 두 number을 빼고, 곱하고 나눈다(몫을 결과로)
• Assignment(할당) : =
  • variable에 value를 할당(assignment)한다.
• Equality : ===
  • 두 value가 같은지 보고 그에 따라 true/false를 반환한다.
• Not, Does-not-equal :! ,!==
  • 값을 논리적으로 반대인 값으로 바꾼다(e.g. true->false)
  • 두 value가 같지 않은지 보고 그에 따라 true/false를 반환한다.

// +
6 + 9;
'Hello ' + 'world!';

// -, *, /
9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;

// =
let myVariable = 'Bob';

// ===
let myVariable = 3;
myVariable === 4;

// !, !==
let myVariable = 3;
!(myVariable === 3);

let myVariable = 3;
myVariable !== 3;

 

 

4. Conditionals(조건부)

let iceCream = 'chocolate';
if(iceCream === 'chocolate') {//iceCream이 chocolate일 경우 이 중괄호 안의 문 실행. else문 생략
  alert('Yay, I love chocolate ice cream!');
} else {//iceCream이 cholate가 아닐 경우 이 중괄호 안의 문이 실행 if문 생략
  alert('Awwww, but chocolate is my favorite...');
}

 if의 () 안의 조건의 true/false 에 따라  if문이나 else문 둘 중 하나를 실행.

 

5. Functions(함수)

 Function은 다시 쓰고 싶은 코드 블록의 기능을 pakaging(포장, 지칭)하는 하나의 방법이다.

 한 코드 블록을 function으로 정의하고 그 function name으로 call(호출) 시 그 코드 블록이 실행되도록 한다.

 똑같은 코드를 여러 번 쓰는 비효율성을 없애는 좋은 대안이다.

 이미 위에서도 여러 번 function을 사용했다.

let myVariable = document.querySelector('h1');
alert('hello!');

 위 두 함수 모두 browser 내장 함수이다.

 

 함수는 다음과 같이 정의할 수 있다.

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

 

 정의한 함수는 다음과 같이 호출(call)할 수 있다.

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

 

 함수 내에서 선언된 variable은 함수 내에서만 유효하다.

 자세한 내용은 variable scoping(변수 범위)를 참조하라.

Grammar and types - JavaScript | MDN

 

6. Events

 진정한 상호작용성을 web page에서 구현하려면 event handler가 필요하다.

 event handler는 웹 브라우저 내에서 특정 activity(행동)에 귀 기울이고 있으면서 반응이 오면 코드를 실행하는 코드 구조(code structure)이다. 마우스 클릭과 같은 것이 activity의 예이다. 마우스 클릭은 마우스 클릭에 대한 event handler를 fire(점화)시켜 해당 code를 실행하도록 한다.

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

 

 

* 활용 예시

 image changer

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/firefox2.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}

 

 change user name

// in index.html
<button>Change user</button> 

//in main.js
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

function setUserName() {
  let myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
  setUserName();
}

 

 user name 이 null(없음, 무효)이라면

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

 

 전체 코드

mdn/beginner-html-site-scripted

 

 참조한 사이트

JavaScript basics - Learn web development | MDN

 

 

 물론, 여기서 말하지 못한 operator(%, &&, ||)이나 const, 화살표 함수 등 그 외 중요 문법이 있다. event handler의 동작원리라던가 컴퓨터 구조 같은 것도 말하지 못했다. 그러나 위 사이트는 충분히 기본 문법을 잘 설명하고 있다고 생각한다. 그 외의 자잘한 건, 예제를 하며 그때그때 검색하여 배워도 문제없을 것이다.

 

 또, 이후에 포스팅할 웹 개발 인트로를 보면 웹 구조에 대해 더 잘 이해할 수 있을 것이다.