JabaScript

📖 Part1. 자바스크립트 개요

• 자바스크립트(java script)는 HTML 언어에 추가되서 웹페이지를 동적으로 다양하게 제작 할 수 있게 도와주는 스크립트 언어이다. 스크립트 언어는 혼자 실행될 수 없어서 다른 언어에 포함되어 실행되고, 문법이 복잡하지 않은 특징을 가지고 있다. 즉, 자바스크립트 HTML 안에서만 구현된다.

📖 Part2. 자바스크립트 적용 방법

1. 내부 자바스크립트 코드로 사용

• 자바스크립트 코드는 script 태그를 사용하여 HTML문서 안에 삽입 할 수 있다.

    <script>
        document.write("HELLO JAVASCRPIT");
    </script>

2. 외부 자바스크립트 파일로 적용

📖 Part3. 자바스크립트 이벤트

• 이벤트 : 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

• 이벤트의 종류 : click(마우스이벤트), change(폼 이벤트), keydown(키 이벤트) 등등

    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('keydown')">

📖 Part4. 자바스크립트 변수

• 자바스크립트에서는 var 키워드로 변수를 선언하며, 선언함과 동시에 값을 할당할 수 있다. 또한 쉼표(,)를 통해 여러개를 한 문장으로 선언할 수 있다.

var a;
var b=3;
var c,d,f;
var c=1,
    d=2,
    f=3;

📖 Part5. querySelector, querySelectorAll

• querySelector()는 특정 name,id,class를 제한하지 않고 css 선택자를 사용하여 요소를 찾는다. 즉 하나만 가져온다.
• ex) 버튼을 클릭했을때 body태그의 색상을 바꾸는

 <input id="night_day" type="button" value="night"language-null">var alist = document.querySelectorAll('a');
    var i=0;
    while(i<alist.length){
      alist[i].style.color='powderblue';
      i=i+1;
      }