Javascript

1. Javascript ๊ตฌ์„ฑ์š”์†Œ

  • Core(ECMAScript)

    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ ๊ตฌ์กฐ, ๋ฐ์ดํ„ฐ ํƒ€์ž…, ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ชฉ๋ฌธ, ํ•จ์ˆ˜, ๊ธฐ๋ณธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ฑ์ด ํฌํ•จ
  • DOM(Document Object Model)

    • DOM(Document Object Model)์€ ์›น๋ฌธ์„œ๋ฅผ ์กฐ์ž‘ํ• ๋•Œ ์ง€์ผœ์•ผํ•  ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ œ์กฐ์‚ฌ์˜ ์ž์‹ ๋“ค๋งŒ์˜ ๊ธฐ์ˆ ๋กœ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ ๊ฒƒ
  • BOM(Browser Object Model)

    • BOM(Browser Object Model)์€ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์— ์ ‘๊ทผํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์ธํ„ฐํŽ˜์ด์Šค

2. HTML ์†์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • script ์š”์†Œ

    • async - ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฆ‰์‹œ ๋‚ด๋ ค๋ฐ›์ง€๋งŒ ์ž์›์„ ๋‚ด๋ ค๋ฐ›๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋“ฑ ๋‹ค๋ฅธ ํŽ˜์ด์ง€ ์ž‘์—…์„ ๋ฐฉํ•ดํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค๊ณ  ์ง€์‹œ. ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋งŒ ์œ ํšจ.
    • charset - src ์†์„ฑ์œผ๋กœ ๋ช…์‹œํ•œ ์ฝ”๋“œ์˜ ๋ฌธ์ž์…‹์„ ์ง€์ •. ์ข€์ฒ˜๋Ÿผ ์“ฐ์ด์ง€ ์•Š๋Š”๋‹ค.
    • defer - ๋ฌธ์„œ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์™„์ „ํžˆ ํŒŒ์‹ฑํ•˜๊ณ  ํ‘œ์‹œํ•  ๋•Œ๊นŒ์ง€ ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰์„ ์ง€์—ฐํ•ด๋„ ์•ˆ์ „ํ•จ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ ๋–„๋งŒ ์œ ํšจ
    • src - ์‹คํ–‰ํ•  ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•œ ์™ธ๋ถ€ ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ์ง€์ •
    • type - language ์†์„ฑ์„ ๋Œ€์ฒดํ•  ์˜๋„๋กœ ๋งŒ๋“ค์–ด์กŒ๋‹ค. Default ๊ฐ’์€ text/javascript ์ด๋‹ค.
    • ์ฐธ๊ณ ์‚ฌ์ดํŠธ : http://www.w3schools.com/tags/tag_script.asp
  • ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋‚ด๋ ค๋ฐ›์•„ ์‹คํ–‰ํ•˜๋ฉฐ ์ธ๋ผ์ธ ์ฝ”๋“œ๋Š” ๋ฌด์‹œ.

<script type="text/javascript" src="dummy.js">alert('hello')</script>
  • ํƒœ๊ทธ ์œ„์น˜

    • head ํƒœ๊ทธ ์•ˆ์— ์“ฐ๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ €๋Š” body ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜๋ฉด์„œ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง์ด ์ง€์—ฐ๋  ์ˆ˜ ์žˆ๋‹ค. ์š”์ฆ˜์—๋Š” body ํƒœ๊ทธ ๋งจ ๋ฐ‘์ชฝ์— ์“ด๋‹ค.
  • ๋น„๋™๊ธฐ ์Šคํฌ๋ฆฝํŠธ

    • ์•„๋ž˜ ์ฝ”๋“œ์—์„œ๋Š” example2.js๊ฐ€ example1.js๋ณด๋‹ค ๋จผ์ € ์‹คํ–‰๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํŒŒ์ผ ์‚ฌ์ด์— ์˜์กด์„ฑ์ด ์žˆ์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
    • async ๋ชฉ์ ์€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชจ๋‘ ๋‚ด๋ ค๋ฐ›์•„ ์‹คํ–‰ํ•  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ๋’ค์— ์žˆ๋Š” ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋‚ด๋ ค๋ฐ›์•„ ์‹คํ–‰ํ•ด๋„ ์ข‹๋‹ค๊ณ  ๋ช…์‹œํ•˜๋Š” ๊ฒƒ (DOM ์กฐ์ž‘์€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค์ง€ ์•Š๋Š” ํŽธ์ด ์ข‹๋‹ค.)
  <script type="text/javascript" async src="example1.js"></script>
  <script type="text/javascript" async src="example2.js"></script>
  • ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์žฅ์ 

    • ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฝ๋‹ค.
    • ์™ธ๋ถ€์—์„œ ์—ฐ๊ฒฐ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ชจ๋‘ ์บ์‹ฑ.

3. ์–ธ์–ด์˜ ๊ธฐ์ดˆ

  • โ€use strictโ€;

    • ๊ธฐ์กด๊ณผ๋Š” ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํŒŒ์‹ฑํ•˜๊ณ  ์‹คํ–‰ํ•˜๋ผ๊ณ  ์ง€์‹œํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ฌธ๋ฒ•์€ ECMAScript 3 ๋ฌธ๋ฒ•๊ณผ ํ˜ธํ™˜๋˜๋„๋ก ๋งŒ๋“  ๊ฒƒ์ด๋‹ค. ํ•จ์ˆ˜ ๋‹จ ํ•˜๋‚˜๋งŒ ์ ์šฉํ•˜๋ ค๋ฉด ์•„๋ž˜์˜ ์ฝ”๋“œ๋กœ ์ž‘์„ฑ.
  function doSomething(){
    "use strict";
    //function
  }
  • ๋ณ€์ˆ˜

    • var ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜๋ฅผ Local Scope์—์„œ ์ •์˜ํ•œ๋‹ค๋Š” ์ 
  function test(){
    var message = "hi";  // local Scope
  }
  test();
  alert(message); // Error
  function test(){
    message = "hi";  //  ์ „์—ญ ๋ณ€์ˆ˜
  }
  test();
  alert(message); // "hi"
  • undefined

    • var๋ฅผ ์จ์„œ ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ–ˆ์ง€๋งŒ ์ดˆ๊ธฐํ™”ํ•˜์ง€ ์•Š์•˜๋‹ค๋ฉด ํ•ด๋‹น ๋ณ€์ˆ˜์—๋Š” undefined๊ฐ€ ํ• ๋‹น๋œ๋‹ค.
  • Null

    • ๋นˆ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ํฌ์ธํ„ฐ
    • ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜์ง€๋งŒ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์—†์„ ๋•Œ์—๋Š” ํ•ญ์ƒ ๊ทธ ์ž๋ฆฌ์— null์ด ์™€์•ผ ํ•œ๋‹ค.
  • ์ˆซ์ž ๋ณ€ํ™˜

    • Number(), parseInt(), parseFloat() ํ•จ์ˆ˜
var num1 = Number("Hello World"); // NaN
 var num2 = Number(""); // 0
 var num3 = Number("00000011"); // 11
 var num4 = Number(true); // 1
  var num1 = parseInt("1234blue"); // 1234
  var num2 = parseInt(""); // NaN
  var num3 = parseInt("0xA"); // 16์ง„์ˆ˜ 10
  var num4 = parseInt(22.5); // 22  
  • ๋ฌธ์ž์—ด ๋ณ€ํ™˜

    • Object.toString() , String(Object);
    var value1 = 10;
    var value2 = true;
    var value3 = null;
    var value4;
    alert(String(value1)); // 10
    alert(String(value2)); // true
    alert(String(value3)); // null
    alert(String(value4)); // undefined
  • for - in ๋ฐ˜๋ณต๋ฌธ

//BOM window ๊ฐ์ฒด์˜ ๋ชจ๋“  ์†์„ฑ์„ ํ‘œ์‹œ
for (var propName in window){
  document.write(propName);
}