Javscript 기본

코드 예시

// 자바스크립트 코드 예시 1
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';
}

// 자바스크립트 코드 예시 2
// 위 코드와 동일 동작
var target = document.querySelector('body');
if(this.value === 'night') {
  target.style.backgroundColor = 'black';
  target.style.color = 'white';
  this.value = 'day';
}
else {
  target.style.backgroundColor = 'white';
  target.style.color = 'black';
  this.value = 'night';
}

// 자바스크립트 코드 예시 3
// head->script
function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      self.value = 'day';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      self.value = 'night';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  }
// body
  <input type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <input type="button" value="night" onclick="
    nightDayHandler(this);
  ">

// 객체 coworkers 생성 및 멤버 추가
var coworkers = {
  prorammer : "Jameson",
  designer : "Alice",
  setColor : function(color) {...}
};

// 멤버 추가
coworkers.bookkeeper = "Michael";
coworkers["data scientist"] = "Smith"; 

// 멤버 순회 함수 추가
coworkers.showAll = function() {
  for(var key in this) {
    document.write(key+" : "+this[key]);
  }
}

• JS 코드는 script 태그 안에 쓴다
• input의 onclick 속성에는 JS 코드가 온다
• 웹브라우저는 20개 정도의 이벤트를 지원한다 ex) onclick, onchange, onkeydown
• 크롬 검사도구의 console은 현재 페이지를 대상으로 javascript 코드를 실행한다
• "abc"+"1" => 'abc1'
• var fruits = ["apple", "banana"]
• document.querySelector(element_name) : 제일 먼저 등장하는 하나의 태그만 반환
• document.querySelectorAll(element_name) : 페이지의 모든 태그를 노드리스트(배열)로 반환
• var myname = name || "defualt" : 변수 name이 선언이 되어있으면 name, 아니면 default
• 함수 선언문에 매개변수 지정안해도 arguments 배열로 받을 수 있음
• 객체에 속해있는 함수는 method 라고 한다
• CDN : 라이브러리를 직접 다운로드받지 않고, <script src= >에 URL을 통해 사용할 수 있도록 하는 방식
• library : 부품, 땡겨와서 사용한다
  ex) jQuery
• framework : 완제품, 들어가서 작업한다
• 알아볼 것들 : document, DOM, window, cookie, offline web application, webRTC, speech, webGL, webVR