1.๋ฐ์ดํฐํ์
-๋ฌธ์์ด๊ณผ ์ซ์
1-1. ๋ฐ์ดํฐํ์
์ข
๋ฅ
- Boolean
- Null
- Undefined
- Number (์ซ์)
- String (๋ฌธ์์ด)
- Symbol
1-2. String(๋ฌธ์์ด)
- ๋ฌธ์๋ ""('')์ฌ์ฉ
- .length ๋ฌธ์์ด์ ๊ฐฏ์๋ฅผ ์๋ ค์ค
- .toUpperCase( ) ๋๋ฌธ์ ์ํ๋ฒณ์ผ๋ก ๋ณ๊ฒฝ
- .indexOf( ) ๋ฌธ์์ ์์น๋ฅผ ์ฐพ์์ค
- .trim( ) ๊ณต๋ฐฑ์ ์์ ์ค
2. ๋ณ์์ ๋์
์ฐ์ฐ์
- x(๋ณ์) =(๋์
์ฐ์ฐ์) 1 ;
- ๋์
์ฐ์ฐ์ : ์ขํญ๊ณผ ์ฐํญ์ ๊ฒฐํฉํด์ ์ฐํญ์ ๊ฐ์ ๋ง๋ค์ด ๋ธ๋ค.
- 1(์์)=2; -> ์ฑ๋ฆฝ๋์ง ์๋ ์์
- varibale(๋ณ์) vs constant(์์)
- ์คํ = enter / ์คํ์ ๋ณด = shift + enter
- ๋ณ์ ์ฌ์ฉํ ๋ ์์ 'var' ๋ถ์ฌ์ ์ฌ์ฉ ํ ๊ฒ ex) var name ="sujin" ;
- ๋ณ์ ์ฌ์ฉ์ ์ด์ : ๋ฐฉ๋ํ ์๋ฃ ์ ํน์ ํ ๋ฌธ์๋ฅผ ๋ณ์๋ฅผ ์ด์ฉํ์ฌ ์ ํํ๊ณ ๋น ๋ฅด๊ฒ ๋ฐ๊ฟ ์ ์๋ค.
3. ์ ์ดํ ํ๊ทธ ์ ํํ๊ธฐ
-
javascript select tag by css selector
: element = document .querySelector(selectors);
ex) var el = document .querySelector(".myclass");
-
javascript element style
: var x = document .getElementById("myH1").style;
-
javascript style background-color
: document.body.style.backgroundColor="red"
4. ํ๋ก๊ทธ๋จ, ํ๋ก๊ทธ๋, ํ๋ก๊ทธ๋๋จธ
- HTML: ํ๋ก๊ทธ๋๋ฐ ์ธ์ด(X), ์๊ฐ์ ์์์ ๊ตฌ์ ๋ฐ์ง ์๋๋ค
- JAVASCRIPT : ํ๋ก๊ทธ๋๋ฐ ์ธ์ด(0), ์ฌ์ฉ์์์ ์ํธ์์ฉ, ์๊ฐ์ ์์์ ๋ฐ๋ผ ์คํ
- ํ๋ก๊ทธ๋จ : ์์
- ํ๋ก๊ทธ๋๋ฐ : ์์๋ฅผ ๋ง๋๋ ํ์ -> ๋ฐ๋ณต์ ์ธ ์ผ์ ํ์ง ์์๋ ๋จ
- ํ๋ก๊ทธ๋๋จธ: ์์๋ฅผ ๋ง๋๋ ์ฌ๋
5. ์กฐ๊ฑด๋ฌธ
- ์กฐ๊ฑด๋ฌธ: ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ ์์์ ๊ธฐ๋ฅ๋ค์ด ์คํ ๋๋๋ก ํจ -> ๋ณต์กํ ์ผ์ ํด๊ฒฐ
6. ๋น๊ต ์ฐ์ฐ์์ ๋ธ๋ฆฌ์ธ
6-1. === (๋น๊ต ์ฐ์ฐ์)
ex) 1 === 1 : true / 1===2 : false
6-2. true / false (๋ธ๋ฆฌ์ธ)
html '<' ์ '<' ๋ก ํํํ๋ค
7. ์กฐ๊ฑด๋ฌธ
document .write("1");
if (true){
document.write("2");
} else {
document.write("3");
}
document.write("4");
โก if ( true or false ) { A } else { B }
- if ์ ์ ๊ฐ์ด true ์ผ ๋, else ์กฐ๊ฑด๋ฌธ(B) ์ด ์๋ต ๋๊ณ ,
- if ์ ์ ๊ฐ์ด false ์ผ ๋, if ์กฐ๊ฑด๋ฌธ(A) ์ด ์๋ต ๋๋ค.
8. ์กฐ๊ฑด๋ฌธ์ ํ์ฉ
- javascript element get value
: document.querySelector('selector' ).value;
9. ๋ฆฌํฉํ ๋ง ์ค๋ณต์ ์ ๊ฑฐ
- ๋ฆฌํฉํ ๋ง: ๋นํจ์ธ์ ์ธ ์ฝ๋๋ฅผ ํจ์จ์ ์ผ๋ก ๋ง๋ค์ด ๊ฐ๋
์ฑ์ ๋์ด๊ณ ์ ์ง๋ณด์๊ฐ ์ฝ๋๋ก ์ฝ๋๋ฅผ ๊ฐ์
9-1. this: ์ด๋ฒคํธ๊ฐ ์ํด ์๋ ์์ ์ ๊ฐ๋ฅดํด (๋ฐ๋ก id, class๋ช
์ ์ค์ ํ์ง ์์๋ ๋จ)
if(document.querySelector('#night_day').value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value='day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value='night';
}
if(this.value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value='day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value='night';
}
โ์ฝ๋ฉ์ ์ํ๋ tip : ์ค๋ณต๋๋ ์ฝ๋ ์ ๊ฑฐ!
9-2. ์ค๋ณต๋๋ ์ฝ๋ ์ด๋ฆ ์ค์
if(this.value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value='day';
}
var target = document.querySelector('body');
if(this.value ==='night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value='day';
}
10. ๋ฐฐ์ด(Array)
-
[ "๊ฐ1", "๊ฐ2" ]
index 0 = ๊ฐ1
index 1 = ๊ฐ2
-
javascript array count
: var fruits = ["Banana" , "Orange" , "Apple", "Mango"]; fruits.length;
-
javascript array add data
: var fruits = ["Banana" , "Orange" , "Apple", "Mango"]; fruits.push("Kiwi");
11. ๋ฐ๋ณต๋ฌธ(Loop)
- ๋ฐ๋ณต๋ฌธ: ์์๋๋ก ํ๋ฅด๋ ์์๋ฌธ์ ํ๋ฆ์ ์ ์ด
- while(ture / false ){ ์ฝ๋ }
: ( ) ์์ ๊ฐ์ด false๊ฐ ๋ ๋๊น์ง { } ์์ ์ฝ๋ ๋ค์ด ์คํ ๋จ, ( ) ์์ ๊ฐ์ด false๊ฐ ๋๋ฉด
- while๋ฌธ : ๋ฐ๊นฅ์ ์ฝ๋๊ฐ ์คํ๋จ. (๋ฐ๋ณต๋ฌธ ์ข
๋ฃ)
- var i = 0; : ์คํ ์ฝ๋๊ฐ ๋ช๋ฒ ์คํ ๋๋์ง ์ ๋ ์ฝ๋
12. ๋ฐฐ์ด๊ณผ ๋ฐ๋ณต๋ฌธ์ ํ์ฉ
- querySelector : ์ฐพ์ผ๋ ค๊ณ ํ๋ ํ๊ทธ์ ์ฒซ ๋ฒ์งธ๋ง ์ฐพ์์ค๋ ์์ฑ์ด ์์( ํด๋นํ๋ ๋ชจ๋ ํ๊ทธ๋ฅผ ๊ฐ์ ธ์ค๋ ค๊ณ ํ ๋ ์ฌ์ฉํ๊ธฐ์๋ ๋ถ์ ์ ํจ)
- javascript get element by css selector multiple
: document.querySeletorAll( );
13. ํจ์ (function)
- ์ฐ์์ ์ธ ๋ฐ๋ณต์ด ์๋๋ผ๋ฉด ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค. ํจ์๋ฅผ ์ด์ฉ !
- ๊ธฐ๋ณธ ํ์ : function night name( ) { ์ฝ๋ }
- ์คํ ์ฝ๋ : name ( ) ;
14. ํจ์ : ๋งค๊ฐ๋ณ์์ ์ธ์
- ์ํ๊ธฐ ์๋ฃ ์ ํ : ์
๋ ฅ
- ์๋ฃ ๋์ด : ์ถ๋ ฅ
- ํจ์ : ์
๋ ฅ์ ์ถ๋ ฅ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์
function sum( left, right){
document.write(left+right);
}
sum(2,3);
sum(3,4);
- (left, right) => ๋งค๊ฐ๋ณ์
- (2,3)/(3,4) => ์ธ์
- ๋งค๊ฐ๋ณ์์ ์ธ์๋ ํจ์์ ๋ค์ด์ค๋ ์
๋ ฅ๊ฐ!
15. ๊ฐ์ฒด
- ํจ์์ ์ฐ๊ด
- ์ ๋ฆฌ์ ๋์ ์๋จ
- ๋ณ์๊ฐ ๋ง์์ ธ ํ๊ณ์ ๋ถ๋ชํ์ ๋, ์๋ก ์ฐ๊ด๋ ํจ์์ ๋ณ์๋ฅผ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ ๋ฆฌ์ ๋ ํ๋ ๊ฒ
15-1. ํจ์์ ์ด๋ฆ์ด ์ค๋ณต ๋ ๋ : ๊ธฐ์กด์ ์ฝ๋๊ฐ ๋ค์์ ๋์ค๋ ์ฝ๋(์ค๋ณต)์ ์ํด ๋ฎ์ด์ฐ๊ธฐ ๋๋ฉด์ ์ญ์ ๋จ
-
์ด๋ฆ์ด ์ค๋ณต ๋์ง ์๋๋ก ์์ ๊ตฌ๋ถํด์ฃผ๊ธฐ
function SetColor( ) โก unction LinksSetColor( ), function BodysetColor( )
-
๋ฐ์ดํฐ์ ์์ด ๋ง์์ง๋ฉด ์ด๋ฆ๋ ๊ธธ์ด ์ง ์ ์์, ๋ฐ๋ผ์ ๊ธธ์ด์ง๋ ์ด๋ฆ์ ํธ๋ฆฌํ๊ฒ ๊ด๋ฆฌํ๊ธฐ ์ํด ํด๋, ๋๋ ํ ๋ฆฌ์ ์ญํ ์ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉ
LinksSetColor( ) โก Links.setcolor( )
BodysetColor( ) โก Body.setcolor( )
-
document.querySelector( )
๊ฐ์ฒด : documnet / ํจ์ : querySelector
๊ฐ์ฒด์ ์ํด์๋ ํจ์๋ '๋ฉ์๋'๋ผ๊ณ ๋ถ๋ฆฐ๋ค.
16. ๊ฐ์ฒด ์ฐ๊ธฐ์ ์ฝ๊ธฐ
- ๋ฐฐ์ด: ์ ๋ณด๋ฅผ ๋ด๋ ๊ทธ๋ฆ, ์์๋๋ก ์ ๋ณด๋ฅผ ์ ์ฅ / '[]'์ฌ์ฉ
- ๊ฐ์ฒด: ์์ ์์ด ์ ๋ณด๋ฅผ ์ ์ฅ (์ด๋ฆ์ด ์๋ ์ ๋ฆฌ์ ๋ ์์) / '{}'์ฌ์ฉ
- ์ด๋ฆ์ ๋์ด์ฐ๊ธฐ๋ฅผ ๋ฃ์ ์ ์์, '[]' ๋ฅผ ์ฌ์ฉ ํ ๊ฒ
ex) coworkers.data scientist โ โก coworkers["data scientist"]โญ
17. ๊ฐ์ฒด์ ๋ฐ๋ณต๋ฌธ
- javascript object iterate (๊ฐ์ฒด ๋ฐ๋ณต๋ฌธ)
: for ( var key in yourobject) { document.write(key); }
: for ( var key in yourobject) { document.write(exo[key]); }
โก exo(๊ฐ์ฒด)์ ์๋ key๊ฐ(leader , main dancer, vocal, main vocal, sub vocal....) ํ๋ํ๋๋ฅผ ๋ณ์ ๊ฐ์ผ๋ก ์ธํ
ํด์ค๋ค.
18. ๊ฐ์ฒดํ๋กํผํฐ์ ๋ฉ์๋
- coworkers.showAll = function( ){ }
- function showAll( ) { }
- var showAll = function( ) { }
โก ๊ฐ์ ํํ(์๋ฏธ)
- ๊ฐ์ฒด์ ์์๋ ํจ์ : ๋ฉ์๋
- ๊ฐ์ฒด์ ์์๋ ๋ณ์ : ํ๋กํผํฐ
- ๊ฐน์ฒด์ ์ด๋ฆ ๋ฐ๊ผ์ ๋, ๋ฐ์ดํฐ๋ฅผ ๋ชป๊ฐ์ ธ ์ฌ ์ ์์
- ๋ฐ๋ผ์ ํจ์ ์์์ ํจ์๊ฐ ์์๋์ด ์๋ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฅดํค๋ ์ฝ์๋ ๊ธฐํธ ์ฌ์ฉ (= this)
19. ๊ฐ์ฒด์ ํ์ฉ
- ๊ฐ์ฒด์ ํ๋กํผํฐ์ ํ๋กํผํฐ๋ฅผ ๊ตฌ๋ถ ํ ๋ ์ฝค๋ง(,)๋ฅผ ์
๋ ฅํ๋ค.
20. ํ์ผ๋ก ์ชผ๊ฐ์ ์ ๋ฆฌ ์ ๋ํ๊ธฐ
21. ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ
- ๋ค๋ฅธ ์ฌ๋์ ๋์์ ๋ฐ์ ์ํํธ์จ์ด๋ฅผ ๋ง๋ ๋ค.
- ๋ค๋ฅธ ์ฌ๋๊ณผ ํ๋ ฅํ๋ ๋ชจ๋ธ
21-1. ๋ผ์ด๋ธ๋ฌ๋ฆฌ(library)
- ๋ด๊ฐ ๋ง๋ค๊ณ ์ ํ๋ ์ํํธ์จ์ด์ ๋ถํ๋ค์ ์ ์ ๋ฆฌ์ ๋ํ์ฌ ์ฌ์ฌ์ฉ ํ๊ธฐ ์ฝ๋๋ก ํด๋
ผ ๊ฒ
- ๋ด๊ฐ ๋ง๋ค๊ณ ์๋ ํ๋ก๊ทธ๋จ์ ๋ถํ์ ๊ฐ์ ธ์ค๋ ๋๋ ex) jQuery
21-2. ํ๋ ์์ํฌ(framework)
- ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ์ด ๋ฌด์์ด๋์ ๋ฐ๋ผ(๊ฒ์, ์น, ์ณํ
) ๊ณตํต์ ์ธ ๋ถ๋ถ์ ํ๋ ์์ํฌ๊ฐ ๋ง๋ค์ด ๋๊ณ , ๋ฌ๋ผ์ง๋ ๋ถ๋ถ์ ์์ฐํด ๋ด๋ ๊ฒ
21-3. jQuery
- ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ง ์์๋ ๋๋ค.
- '$'๋ก ์์
- ์๋ก์ด ์ธ์ด๊ฐ ์๋๊ณ , javascript๋ฅผ ์ด์ฉ
- ์ด๋ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ฑ๋์ด ์๋์ง ํ์
ํ๋ ๊ฒ์ด ์ค์
22. UI vs API
22-1. User Interface (UI)
- ์ฌ์ฉ์๊ฐ ์์คํ
์ ์ ์ดํ๊ธฐ ์ํด์ ์ฌ์ฉํ๋ ์กฐ์์ฅ์น
22-2. Application Programming Interface (API)
23. ๋ง๋ฌด๋ฆฌ
- ํ๊ทธ๋ฅผ ์ญ์ ๋๋ ์์ ํ๊ทธ๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ ๋ (์นํ์ด์ง ์ ์ด)
โก docuement < DOM
- window (์น๋ธ๋ผ์ฐ์ ์ ์ด , ํ์ฌ ์ด๋ ค์๋ ์นํ์ด์ง์ ์ฃผ์, ์์ฐฝ, ํ๋ฉดํฌ๊ธฐ..)
- ajax (์นํ์ด์ง๋ฅผ ๋ฆฌ๋ก๋ ํ์ง ์๊ณ ์ ๋ณด๋ฅผ ๋ณ๊ฒฝ)
- cookie ( ์นํ์ด์ง๊ฐ ๋ฆฌ๋ก๋ ๋์ด๋ ํ์ฌ ์ํ ์ ์ง, ์ฌ์ฉ์๋ฅผ ์ํ ๊ฐ์ธํ๋ ์๋น์ค ์ ๊ณต)
- offline web application (์ธํฐ๋ท์ด ๋๊ฒจ๋ ๋์ํ๋ ์นํ์ด์ง)
- webRTC (ํ์ํต์ ์น์ฑ)
- speech (์ฌ์ฉ์ ์์ฑ์ธ์, ์์ฑ ์ ๋ณด ์ ๋ฌ)
- webGL (3์ฐจ์ ๊ทธ๋ํฝ ๊ฒ์)
- webVR (๊ฐ์ํ์ค)