[JS] 0. 자바스크립트란 무엇인가?

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

 

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

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

22. API & UI 그리고 프로젝트 활용도구

---

 

지난 번 CSS 강의 파일의 마지막 파일에 아래의 자바스크립트 코드를 추가했습니다.

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

 

 

그리고 결과를 한번 보죠~

웹페이지 제일 상단에 버튼 두개가 생깁니다.

 

Night 버튼을 누르면  아래와 같이 배경이 바뀝니다.

day를 누르면 다시 흰색으로 바뀌게 되죠~

 

개발자도구를 통해서 살펴보면,

Night 버튼을 눌렀을때, 바디 태그의 style이 바뀌는걸 확인할 수 있습니다. day도 마찬가지이구요~

 

 

자, 그럼 자바스크립트가 어떤건지 조금 감이 오셨나요?

자바스크립트란, 이렇게 사용자와 웹브라우저간에 서로 상호작용할 수 있도록 도와줍니다.

HTML이 정적이라면, 자바스크립트는 동적으로 작용하는거죠~

앞으로 수업을 통해서 하나하나 배워갈테니 너무 염려마세요~

 

그럼 다음시간에 뵐께요!

 

 

아래 생활코딩의 강의를 바탕으로 필요에 맞게 재작성된 강의안입니다.

opentutorials.org/course/3085/18868