JS(JavaScript)

• 사용자와 상호작용하는 언어
• HTML을 제어하는 언어
• HTML 위에서 동작하는 언어
• 컴퓨터 언어, 프로그래밍 언어
  (HTML은 프로그래밍 언어 X)

사용한 태그

HTML과 JS

자바스크립트 사용을 알리는 태그

<script>
document.write('hello world');
</script>

event

자바스크립트가 사용자와 상호작용하는데 핵심적 역할

onclick

• 어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것
• onclick 속성 값으로 반드시 자바스크립트 코드가 와야함

<input type="button" value="hi" onclick="alert(hi)">

JS 데이터 타입(자료형)

6개의 타입 .
Boolean, Null, Undefined, Number, String, Symbol

Number (숫자)

이항연산자와 산술연산자

String (문자열)

"", ''로 이루어져있음

변수와 대입연산자

변수(variable): x, y, z ... / 변수 앞 var 사용
대입연산자: =

조건문

조건에 따라 다른 순서의 기능들이 실행되게 하는 것

if 조건문

===: 좌항과 우항의 관계에 따라 true 또는 false 중 하나의 값을 만들어냄
(비교 연산자, 이항연산자)
불리언(boolean): true, false

  <input type="button" value="night" onclick="
    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';
    }
    ">

less than(<)의 표현

<h3>1&lt;2</h3>

리팩터링(refactoring)

• 코드를 효율적으로 만들어 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업.

*키워드 this

이벤트 안에서 실행되는 코드에서는 현재 코드가 속해있는 태그를 가리키도록 약속돼 있는 특수한 키워드 사용

배열(array)

• 데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납 상자
• 대괄호 사용: ["A","B"]

<script>
var coworkers = ["ABC","DEF"];
</script>

<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>

<script>
document.write(coworkers.length);
</script>

반복문(Loop)

*키워드 while

while(true or false)
true인 동안 while 문 안의 코드가 반복적으로 실행 후 false가 되면 중단.

  <script>
      document.write('<li>1</li>');
      var i = 0;
      while(i < 3){
        document.write('<li>2</li>');
        document.write('<li>3</li>');
        i = i + 1;
      }
      document.write('<li>4</li>');
    </script>

배열과 반복문

  <script>
      var i = 0;
      while(i < coworkers.length){
      document.write('<li>'+coworkers[i]+'</li>');
      i = i + 1;
      }
    </script>

  <input type="button" value="night" onclick="
    var target = document.querySelector('body');
  if(this.value === 'night'){
    target.style.backgroundColor='black';
    target.style.color ='white';
    this.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';
    this.value = 'night';

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

    }
    ">

유용한 팁

콘솔(console)

• 웹페이지 - 마우스오른쪽[검사]-[Console]
• 계산기, 간단한 데이터 처리 가능
• 자바스크립트 코드 즉석 실행 가능
• shift+enter: 줄바꿈 (실행x)

reference

생활코딩👍