[생활코딩] 3일차_JavaScript

JavaScript

=> html은 정적이라는 한계를 극복하고 동적으로 사용자와 상호작용할 수 있도록 함

 

<실습 목표: night / day 버튼을 누르면 각 버튼에 맞는 테마로 변경>

1. <script> 태그를 통하여 사용 가능

ex) 자바스크립트의 객체 document를 이용하여 출력한 결과와 정적인 html태그를 이용한 결과에 차이가 있다.

     write() 메서드를 이용하면 단순 출력이 아닌 계산도 가능

<script>
            document.write(1+1);
</script>

<h1>1+1</h1>

2. 속성 값에 자바스크립트 메서드 이용

ex) hi 버튼을 눌렀을 때 경고창 표시 alert()

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

 

3. 이벤트를 정의하는 속성 

• 속성 값은 반드시 자바스크립트가 와야 한다.
• 이벤트가 실행되었을 때 미리 기억하고 있던 자바스크립트 코드를 실행하는 역할을 하게 된다.
• ex) onclick, onchange 등

 

4. 자바스크립트의 데이터 타입

🔔 Boolean, Null, Undefined, Number, String, Symbol, Object

 

5. 웹브라우저 제어

① 제어하고자 하는 태그를 선택

onclick="document.querySelector('body')"

② 선택한 태그의 스타일을 바꾸기 위하여 속성 설정

document.querySelector('body').style.background='black';

최종 실습 목표에 맞게 속성 값 설정

        <input type="button" value="night" onclick="
            document.querySelector('body').style.background='black';
            document.querySelector('body').style.color='white';
            ">

        <input type="button" value="day" onclick="
            document.querySelector('body').style.background='white';
            document.querySelector('body').style.color='black';
            ">

night(왼) , day(오)

---

아직 연산자나 자료형등의 기초적인 부분을 위주로 가르쳐주시기 때문에 강의를 통해 이미 알고있는 개념을 코드에 적용하는 방식이 익숙해지는 것에 집중하고,  개념적인 부분은 자바스크립트의 객체나 이벤트를 다루는 예제들에 대하여 스스로 더 공부하자.!