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 ์ด๋ค.
-
-
์คํฌ๋ฆฝํธ ํ์ผ์ ๋ด๋ ค๋ฐ์ ์คํํ๋ฉฐ ์ธ๋ผ์ธ ์ฝ๋๋ ๋ฌด์.
<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
//BOM window ๊ฐ์ฒด์ ๋ชจ๋ ์์ฑ์ ํ์
for (var propName in window){
document.write(propName);
}