6일차
수업의 목적
HTML과 JavaScript의 만남 1 (script 태그)
HTML과 JavaScript의 만남 2 (이벤트)
HTML과 JavaScript의 만남 3 (콘솔)
데이터타입 - 문자열과 숫자
변수와 대입 연산자
웹브라우저 제어
CSS 기초
제어할 태그 선택하기
프로그램, 프로그래밍, 프로그래머
조건문 예고
비교 연산자와 Boolean 데이터 타입
조건문
조건문의 활용
리팩토링(refactoring)
반복문 예고
배열
반복문
배열과 반복문
배열과 반복문의 활용
함수예고
함수
함수의 활용
객체예고
객체
객체 활용
파일로 쪼개서 정리 정돈하기
라이브러리와 프래임워크
UI vs API
수업을 마치며
#34. 파일로 쪼개서 정리 정돈하기
▲ 각 웹페이지에 <input> 배부하기
□ 각 웹페이지 <body>에 '3.html'과 동일한 input 태그 배부하기
□ 각 웹페이지에 '버튼'은 생성되나, 클릭해도 이벤트가 발생하지 않는다
□ Why? ⇒ 자바스크립트까지 적용되지 않았기 때문이다.
▲ 각 웹페이지 <head>에 자바스크립트'<script>'까지 배부하여야, 이벤트가 발생한다.
▲ colors.js
□ [문제점] 글자색을 변경하려는 경우, 각 웹페이지에서 일일이 설정하여야 함 ⇒ 시간낭비
□ [해결] 새로운 파일 'colors.js' 만들기 → 공통된 태그 '복사+붙여넣기'
▲ <script src="colors.js"></script>
□ 각 웹페이지에 스크립트 '내용' 지우기
□ 자바스크립트 수정하기
<script src="colors.js"></script>
▲ F12 → Network
두 개의 파일로 인하여, 이벤트가 발생함을 알 수 있다.
한 개의 파일 'colors.js'를 통해 통제가 가능하므로, 효율적이다 [*캐시(Cache) 절약]
▲ 다른 웹페이지도 동일하게 스크립트 '내용'을 지우고, 스크립트를 <script src="colors.js"></script>로 수정한다.
'Develop > WEB2 - JavaScript' 카테고리의 다른 글
| [6일차] #36. UI vs API (0) | 2018.12.07 |
|---|---|
| [6일차] #35. 라이브러리와 프레임워크 - '세계적 협업' (0) | 2018.12.07 |
| [5일차] #33. 객체 활용 (0) | 2018.12.07 |
| [5일차] #32. 객체 프로퍼티와 메소드 (0) | 2018.12.07 |
| [5일차] #31. 객체와 반복문 (0) | 2018.12.07 |
