๋๋ง์ JavaScript๋ฅผ ๋ฐฐ์ฐ๋ ๋ ์ด์๋ค!!!
๋จผ์ , ์น์ ๋ํ ๋ฐฐ๊ฒฝ์ ๋ํด์ ๋จผ์ ์ง๊ณ ๋์ด๊ฐ๋ค. ์ธํฐ๋ท์ด ์ด์ฉ๋ค ๋ง๋ค์ด์ก๋์ง์ ๋ํ ์๊ธฐ๋ฅผ ๋ค์๋ค. ์ ์ ๊ฐ์ ์ฐ๊ตฌ์์์ ์ ๋ณด๋ฅผ ๊ณต์ ํ๊ธฐ ์ํจ ์ด์๋ค๊ณ ํ๋๋ฐ, ์ธํฐ๋ท์ด ์๋ ์์ ์ ์ ์ ๊ฐ์๊ธฐ๊ฐ ๊ฐ๋ฐ์ด ๋์ด ์์๋ค๋๊ฒ ๋ ์ ๊ธฐํ๋ค.
๊ทธ๋ฆฌ๊ณ ํ๊ตญ์ด ์ธ๊ณ์์ ๋๋ฒ์งธ๋ก ์ธํฐ๋ท์ด ์ฐ๊ฒฐ๋ ๋๋ผ๋ผ๋ ์ด์ผ๊ธฐ๋ ์ ๊ธฐํ๋ค... ๊ดํ IT ๊ฐ๊ตญ์ด ์๋๊ฐ๋ณด๋ค.
https://www.dentin.kr/news/article.html?no=2928
ํ๋ก๊ทธ๋๋ฐ์ ์ปดํจํฐํํ ๋ช ๋ นํ๊ธฐ ์ํ ์ฒด๊ณ.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ ์ปดํ์ผ ์ธ์ด์ ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ๋๋๋ค. ๋ํ์ ์ธ ์์๊ฐ C์ ํ์ด์ฌ์ธ๊ฑด ์๊ณ ์์๋๋ฐ, JavaScript๋ ์คํฌ๋ฆฝํธ ์ธ์ด์๋ค. ์๊ฐํด๋ณด๋ ์ฝ์์ ํ ์ค ์ฉ ์ ๋ ฅํด์ ์คํํ๋๊ฒ ํ์ด์ฌ idle๊ณผ ๋น์ทํ๋ค. ๋ณดํต ์ปดํ์ผ ์ธ์ด๋ ์๋ก์ด ๊ฒ์ ๋ง๋ค ๋, ์คํฌ๋ฆฝํธ ์ธ์ด๋ ๋ง๋ค์ด์ง ๊ฒ์ ์ ์ดํ ๋ ์ฌ์ฉํ๋ค.
์๋๋ netscape navigator๋ผ๋ ๋ธ๋ผ์ฐ์ ์์๋ง ์ง์ํ๋ ๋นํ์ค๊ธฐ๋ฅ์ด์๋ค.
๋น์์ java๊ฐ ์ธ๊ธฐ๊ฐ ๋ง์์ (โต OS ๋ ๋ฆฝ์ ์ผ๋ก JVM๋ง ์ค์นํ๋ฉด ์ฌ์ฉ ๊ฐ๋ฅ + OOP) ์ด๋ฆ์ ๋ฐ์๋ค๊ณ ํ๋ค. ECMAScript(ES)๊ฐ ์ ์ ๋ช ์นญ์ด๋ค. ES5๋ผ๋๊ฒ ๋ญ๊น ํ๋๋ฐ JavaScript์ ๋ฒ์ ผ์ด์๋ค.
JavaScript๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์คํํ ์ ์๋ ์ ์ผํ ์ธ์ด๋ก, ์น์์๋ง ๋์ํ๋ ์ธ์ด์๋ค. ๊ทธ๋ฐ๋ฐ, ์ด์ ๋ ์น ๋ฐ๊นฅ์์๋! node.js๋ฅผ ํตํด javascript๋ฅผ ๋๋ฆด ์ ์๊ฒ ๋์๋ค.
๊ธฐ๋ฅ
1. BOM & DOM : HTML ์ ์ ์ด
2. Event handling
3. Ajax & JSON
ํ๋ฉด์ ์ถ๋ ฅํ๋ ๋ฒ 4๊ฐ์ง
console.log(); document.write(); document.getElementById('id').innerHTML = 'hi'; window.alert();
์ด๋ค ๊ฒ์ ์ ์ฒด๋ฅผ ์๊ณ ์ถ์ ๋!
console.dir(window); // window๋ฅผ Control ํ๊ธฐ ์ํด ์ ์ํด ๋์ ๊ฒ๋ค. window.console. //์ ๊ทผ๋ฐฉ๋ฒ .(๋ฉค๋ฒ ์ ๊ทผ ์ฐ์ฐ์)
๋ง์ด ์ฌ์ฉ
console.error('hello'); // error msg์ hello console.table(list); // list๋ฅผ table ํํ๋ก ์ถ๋ ฅํด์ค.
1. inline: HTML tag ์์์ or script ํ๊ทธ ์์์ ์ฌ์ฉ
// onclick : ํด๋ฆญํ์ ๋, // #demoOne์ ๊ฐ์ ธ์์ // innerHTML ์ Date() ๋ฅผ ํ ๋น. - innerHTML์ html์ ๋ฃ๋ ๊ฑฐ๋ผ, "<h1>hello</h1>" ์ด๊ฒ๋ ๋ฃ์ ์ ์๋ค. <button type="button" onclick="document.getElementById('demoOne').innerHTML = Date()">Click me (One)</button>
<script> document.getElementById('title').innerHTML = 'Welcome to JS100์ '; document.write(20 + 20); // body ๋งจ ๋์ ์จ์ง. </script>
2. script: .js ํ์ผ ๋ง๋ค์ด์ ์ฌ์ฉ.
script ํ๊ทธ๋ body ๋งจ ์๋์ ์ฐ์. ๋ธ๋ผ์ฐ์ ๊ฐ html ํ์ผ์ ๋ ๋๋งํ๋ค๊ฐ script๋ฅผ ๋ง๋๋ฉด ๋ฉ์ถ๊ณ js๋ฅผ ํด์ํ๊ธฐ ๋๋ฌธ. head์ ์ฐ๊ณ , defer ๊ฐ์ ๋ฐฉ๋ฒ์ด ์๊ธด ํ๋ค.
๊ฐ๋ฐ์ ๋๊ตฌ๋ก CSS๋ฅผ ํ ์คํธ ํด ๋ณธ ๊ฒ ์ฒ๋ผ, Js๋ Console ์ฐฝ์์ ์ฌ์ฉํ๋ฉด ๋๋ค.
var a = 1, b = 2; // variable - ์ฌ์ ์ธ, ์ฌํ ๋น ๊ฐ๋ฅ let c = function() { } ; //let me use - ์ฌํ ๋น ๊ฐ๋ฅ const //constant - ๋ถ๊ฐ๋ฅ
๋ณ์๋ช ๊ท์น: ํน์๋ฌธ์๋ $ _ ๋ง ๊ฐ๋ฅ, ์ฒซ ๊ธ์๋ ๋ฌธ์, ๋์๋ฌธ์ ๊ตฌ๋ถ, ์์ฝ์ด X, ์ ๋์ฝ๋ X
const let var ์ ์ฐจ์ด
์ฝ์ ๋ชจ๋์์ ์ ์ธ
javascript์ '์ ์ญ' ์ window ์ด๋ค. ์๋ ๋ ๋ฌธ์ฅ์ ๊ฒฐ๊ตญ ๊ฐ์ ๋ฌธ์ฅ!
var a = 1; window.a = 1;
document.alert(); ๋ ์ ์๋๋๋ ์ง๋ฌธ์ด ์์๋๋ฐ, ์กฐ์๋๊ป์... ๊ทธ๊ฒ์ ๊ตฝ๋ค ์นํจ์ ๊ฐ์ ํฉ๊ธ์ฌ๋ฆฌ๋ธ๋ฅผ ๋ฌ๋ผ๊ณ ํ๋ ๊ฒ๊ณผ ๊ฐ๋ค๋ ์ฐฐ๋ก ๋น์ ๋ฅผ ํด์ฃผ์ จ๋ค. document์๋ alert๋ผ๋ ํจ์๊ฐ ์๊ธฐ ๋๋ฌธ!!!
์ฐ์
+ - * / % ** a++ ++a a-- --a += -= *= /=
/ ๋ float ๋ก ๋ง๋ค๊ธฐ ๋๋ฌธ์ ๋ชซ์ด ํ์ํ๋ฉด
parseInt();
ํด์ฃผ์
- parseInt ๋ ๋ณธ์ธ์ด ์ ์ ์๋ ๋ฒ์๊น์ง๋ง ๋ฐํํด์ค๋ค.
parseInt("14m3l") == 14
- ์ฐ์ฐ ๊ฒฐ๊ณผ๊ฐ ์ซ์๊ฐ ์๋ ๊ฒฝ์ฐ
NaN
parseint(20, 16) //32๊ฐ ๋์จ๋ค. 16์ง์.
๋ฌธ์์ด.toLocaleString()
:
๋น๊ต
>= < <= == // ๊ฐ๋ง ๋น๊ต (๋ ์ค ํ๋์ type์ผ๋ก ํ๋ณํ์ ํ๊ณ ๋น๊ตํ๋ ๊ฒ์) === // type๊น์ง ๋น๊ต (ํ๋ณํ ์ํด์ ==๋ณด๋ค ๋น ๋ฆ)
๋ ผ๋ฆฌ
&& || !
String ์ฐ์ฐ +
`์ด๊ฒ์ ${๋ณ์}์ ๋๋ค.`; var str = "๋ณ์๋" + " ์ฐ์ฐ ๊ฐ๋ฅ"; // + ์ฐ์ฐ์๋ง ๊ฐ๋ฅํ๋ค. str[5] // ์ฐ
//๋ฌธ์์ด ๋ด์ฅ ํจ์ s.length; s.indexOf('๋ฌธ์์ด'); // ๋ฌธ์์ด ์์ index ์๋ ค์ค. s.indexOf('a', 4); // 4๋ฒ์งธ a index s.search('g'); // ์์ ์ ๊ท์์ ๋ฃ์ ์ ์๋ค. s.slice(1, 4); s.substring(1, 4); // 0..<3 ๊น์ง ๋ฝ์์ค๋ค. ๋๊ฐ์๋ฐ? s.slice(2,-2); // 2๋ถํฐ -2(s.length-2) ๊น์ง ๋ฝ์์ค. s.substring(2,-2); // -2๋ฅผ 0์ผ๋ก ์ฒ๋ฆฌํด์ 1, 2 ๋ฝ์ s.substr(1, 5) // 1๋ถํฐ 5๊ฐ s.replace('asdf', 'ddosang'); // asdf๋ฅผ ddosang์ผ๋ก ๋ฐ๊ฟ์ค. ์ ๊ทํํ์ ๊ฐ๋ฅ. s.replaceAll(',', '');
Math
Math.random(); Math.pow(2, 8); // 2^8 Math.abs(); Math.sqrt(); Math.round(); Math.floor(); Math.ceil(); Math.max(); Math.min(); //์ธ์ ์ฌ๋ฌ๊ฐ.
๋ถ๋์์์
์์๋ฅผ ํํํ๋ค๋ณด๋ ์๊ธฐ๋ ์ค์ฐจ.
+ ํฐ ์ ์๋ overflow ๋ง๊ธฐ ์ํด BigInt ์ฌ์ฉํด์ผ ํจ. 999999999999n+3n
ํ์ฌ์์๋ ์ด๋ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด์ ํด๊ฒฐํ๋ผ๊ณ ์ง์นจ์ด ๋ด๋ ค์จ๋ค.
// ๋๋ชจ๋ฅด๊ฐ ๋ฒ์น !(x || y) === (!x && !y) !(x && y) === (!x || !y)
// 3ํญ์ฐ์ฐ์ ๋์ฒด ์ฉ๋ฒ true && '์๋ฃ' || '๋ฏธ์๋ฃ'; // '' false 'ํ๊ธ์๋ผ๋ ์์ผ๋ฉด' true // ๋ณ์ ๊ฐ์ด true์ด๋ฉด ์์ด true๊ฐ ๋ผ์ ๋ค์๋ ํ์ธ๋ ์ํ๊ณ ์๋ฃ(true)๋ฅผ ์ฐ์ // false์ด๋ฉด ์์ด false๋ผ์ ๋ฏธ์๋ฃ(true) ๋ฅผ ํ์ธํ๊ณ ์ฐ์. // ๋น๊ต์ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ ์ง์ผ๋ฉด ๋ค๋ฅผ ์๋ณด๊ณ ๋จ์ถ ํ๊ฐํ๊ณ ๊ทธ ๊ฐ์ return ํ๊ฒ ๋๊ธฐ ๋๋ฌธ์. // ์ค๋ฌด์์ ์ฐ์ง ๋ง์. ๊ฐ๋ ์ฑ์ด ๋ณ๋ก๋ค. ๊ทธ๋ฅ 3ํญ ์ฐ์ฐ์๋ ์ ์์ ใ ใ ...
// if (truthy) ๋ฌธ์ && ์ผ๋ก ๋์ฒด ๊ฐ๋ฅ. if (done) msg = "๋คํ๋ค."; msg = doen && "๋คํ๋ค."; // if (falsy) ๋ฌธ์ || ์ผ๋ก ๋์ฒด ๊ฐ๋ฅ. if (!done) msg = "๋ชปํ๋ค."; msg = done || "๋ชปํ๋ค."; //if -else ๋ ์ผํญ์กฐ๊ฑด์๊ฐ ๋์ฒด๊ฐ๋ฅ ์ผํญ์กฐ๊ฑด์๋ ์๋๋ก ๋์ฒด๊ฐ๋ฅ. true && '๋คํ๋ค.' || '๋ชปํ๋ค.';
typeof
typeof '' // -> "string" typeof NaN === 'number' // true typeof 1 // -> "number" typeof NaN // -> "number" typeof true // -> "boolean" typeof undefined // -> "undefined" typeof Symbol() // -> "symbol" typeof null // -> "object", ์ฌ๊ฐ typeof [] // -> "object", ์ฌ๊ฐ, array๋ผ๊ณ ๋์์ผ์ง! typeof {} // -> "object" ์ด๊ฒ ์ง์ง object typeof new Date() // -> "object" typeof /test/gi // -> "object" typeof function () {} // -> "function"
์ ์ ์๋ js์ ์ธ๊ณ
- ๋น ๋ฌธ์์ด
''
,0
,NaN
์false
[]
,{}
์true
null == undefinded
- ๊ทผ๋ฐ ๋
null != undefined
์ด๋ฏ๋ก,!!null //false
์ฒ๋ผ ํ๋ณํ์ ํด์ ์ด์ฉํ์.
์ ์ ์๋ js์ ์ธ๊ณ : ๋ฌธ์์ด ์ฐ์ฐํธ
1+'1'; '1'+1; //'11' '11'-1; // 10 -> String์๋ - ์ฐ์ฐ์ด ์์ผ๋๊น Number๋ก ๋ณํ ํด์ฃผ๋๊ฑฐ ์๋๊น '0' == 0; 0 == ''; 0 == '0'; //true
ํ๋ณํ
Boolean(); Number(); parseInt(์ซ์, ์ง๋ฒ); // parseInt๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค. Number(false); Number(true); // 0 1 1.toString() //'1' //์ค๋ฌด์์ ๋ง์ด ์ฌ์ฉ 123 + ''; +'123'; // 123 -'123' //-123 !!NaN; !!undefined //false false == !!undefined;
NaN
=== // ๋น๊ต๋ 3๊ฐ์ง๋ฆฌ๋ก ์ฐ์. NaN === NaN; //false isNaN(NaN); //true : NaN ํ๋จ์์๋ isNaN์ ์ฌ์ฉํ์. Object.js(NaN, NaN); //true Object.js(+0, -0); //false
if-else if-else
//true or false ๋ก ๊ฐ๋ฆฌ๋ ๊ณณ์ ์ if () { } else if() { } else { }
switch
ํ์ ์์ ๋ง์ด ์...switch (๋ณ์) { case 0: break; case 1: break; default: break; } // break ๊ฑธ์ด์ผํ๋ค.. C์ ๊ฐ์.
for, while, do~while
- forEach, for ... in, for ... of
cars = ['Audi', 'Volvo', 'BMW', 'Ford']; for(int i = 0; i < cars.length; i++) {} //forEach cars.forEach(e => e*3); //for ... of === python for ... in for (let val of cars) { } // array ์์ ๊ฐ ์ํ for (let index in cars) {} // array ๋ฅผ index ๊ฐ์ผ๋ก ์ํ while (์กฐ๊ฑด) {} do {} while(์กฐ๊ฑด);