소개
이번 수업 시간에는 HTML이 무엇인지, CSS가 무엇인지.. 구체적으로 다루어 보는 시간을 가졌습니다. 하지만, Javascript에 대해서는 저와 함께 구체적으로 살펴보지 않았죠! 그렇기 때문에 이번 과제는 Javascript에 대해 스스로 학습하고 정의 내리는 시간을 가지려고 합니다.
지난 시간에 수행했던 과제 파일을 활용해주세요 
들어가기 앞서
웹 랜더링 과정에 대해 읽어보면 좋은 글들 (WIL 작성 과제 참고자료)
HTML, CSS만 존재하는 파일에 어떻게 Javascript 코드를 넣을 수 있을까요?
1.
Javascript 외부 파일로 로드하기
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
JavaScript
복사
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="script.js"></script>
<h1 id="hw">Happy Homework!</h1>
</body>
</html>
HTML
복사
body 태그 안에, script 태그를 활용하여 외부에서 작성한 자바스크립트 파일을 불러올 수 있습니다.
2.
inline으로 Javascript 파일 작성하기
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
HTML
복사
과제
목표
•
Javascript가 브라우저를 구상하는 데 있어 어떤 동작 원리를 갖고 있는지 확인할 수 있다.
•
CSS가 어떻게 로드되는지 확인할 수 있다.
•
간단한 Javascript 구문을 이용하여 인터랙티브한 웹을 구성할 수 있다.
명세
1.
아래 질문에 대한 답을 찾기 위해 학습하고, WIL을 작성하세요. (파일 이름 : WIL2)
a.
JavaScript가 DOM에 어떻게 접근하고 적용될까?
b.
브라우저를 이루는 컴포넌트 중, JavaScript Engine은 무엇이고 어떤 일을 할까?
c.
inline CSS가 항상 좋은 것일까? 아니라면 그 이유는 무엇일까?
ChatGPT의 답변을 복붙하지 마시고, 스스로 관련된 자료를 찾아보고 진지하게 과제를 수행해주시길 바랍니다!
2.
GDSC Hongik!을 띄운 웹 페이지에 JavaScript 작성하여 간단한 기능 만들기
간단한 계산기 / 버튼 클릭으로 GDSC Hongik! 글자 색 바꾸기 / 타이머 만들기 / 사용자 입력에 따라 글자 바뀌기 등등 .. 자율적으로 수행
제출해야할 파일과 파일 경로
Week2/
├── WIL2.md
├── index.html
├── script.js
└── style.css
JavaScript
복사
마감 기한
2024년 5월 23일 23:59
제출 방법
2024-1-Web-Study 라는 이름의 레포지토리의
Week2 폴더를 생성하여 제출해주세요.
2024-1-Web-Study/Week2