Javascript 2일차 (생활코딩 WEB2)

1. 배열과 반복문의 활용

'javascript get element by css selector multiple' 검색

document.querySelctorAll('a')

var alist = document.querySelectorAll('a');

alist에 a 태그들의 목록을 담고 있는 배열을 담음

    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = 'powderblue';
      i = i + 1;

 

2. 함수

function

기본 문법

<script>

function two(){

 document.write('<li>2-1</li>');

 document.write('<li>2-2</li>');

}

 document.write('<li>1</li>');

 two();

 document.write('<li>3</li>');

 two();

</script>

 

매개변수&인자

<script>

 function onePlusone(){

 document.write(1+1);

} 

onePlusone();

function sum(left, right){

 document.write(left+right);

}

sum(2,3); // 5

sum(3,4); // 7

</script>

 

리턴

<script>

 function sum2(left,right){

 return left+right;

}

 document.write(sum2(2,3));

 document.write('<div style="color:red">'+sum2(2,3)+'</div>');

 document.write('<div style="font-size:3rem;">'sum2(2,3)+'</div>');

</script>

 

3. 객체

순서 없이 저장할 수 있는 것이 객체

객체의 쓰기와 읽기

<script>

 var coworkers = {

 "programmer":"egoing"

 "designer":"leezche"

};

document.write("programmer : "+coworkers.programmer);

document.write("programmer : "+coworkers.designer);

coworkers.bookkeeprer = "duru";

document.write("bookkeeper : "+coworkers.bookkeeper);

coworkers["data scientist"] = "teaho";

document.write("programmer : "+coworkers["data scientist"]);

</script>

 

객체와 반복문

'javascript object iterate' 검색

<script>

 for(var key in coworkers) {

  document.write(key+' : '+coworkers[key]);

 }

</script>

위 코드과 같은 결과가 나옴

 

프로퍼티와 메소드

객체에는 함수도 담을 수 있음

<script>

 coworkers.showAll = function(){

 for(var key in this) {

  document.write(key+' : '+this[key]);

 }

 }

 coworkers.showAll();

</script>

 

4. 파일로 쪼개서 정리 정돈하기

연관된 코드들을 파일로 묶어서 그룹핑

스크립트를 제외한 코드들을 color.js 파일에 복붙

srcipt src="colors.js"를 다른 파일들에도 복붙

 

5. 라이브러리와 프레임워크

라이브러리는 땡겨와서 쓰는 거고 프레임워크는 그 안에 들어가서 작업하는 느낌

둘 다 다른 사람과 협력하는 모델임

JS 라이브러리는 jQuery

CDN을 활용하면 편함

jQuery를 이용하면 반복문을 쓰지 않아도 됨

Ctrl+/ : 주석 처리

$('a').css('color', color); 

 

6. UI vs API

User Interface / Application Programming Interface

 

document
DOM (Document Object Model)
window
ajax
cookie
offline web application
webRTC
speech
webGL
webVR
등등등