javascript w3schools.com study
1. html 문서
- 파일 이름의 끝이 .html
- web browser용 문서 (.hwp는 한글 프로그램에서, .doc는 워드프로세서에서 읽듯)
2. W3schools.com에서 Javascript 'try it yourself'를 진행할 때, 알아야 하는 html 틀
---------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
------------------------------------------------
위는 html의 가장 기본적인 모양이다.
<!DOCTYPE html> <-- html 문서임을 명시함
<html> <-- 문서의 시작
</html> <-- 문서의 끝
<body> <-- 내용의 시작
</body> <-- 내용의 끝
<h2> <-- 제목을 포함하는 태크, 종류가 여러가지 있으나 그중 2번째
</h2> <-- 제목의 끝
<button > <--button 을 나타내는 태그, 사용자의 클릭 이벤트를 캐치한다.
onclick <--button클릭시 실행할 javascript
document <-- 문서를 나타내는 javascript 객체
javascript 객체 <-- 자체적으로 value와 실행할 수 있는 function을 지니고 있다. 이것들은 구글 검색등을 통해 우리가 프로그래밍할 때, 찾아야 하는 것들이다. 이미 정해져 있는 것들이 있다라고만 현재는 받아들이면 좋다.
onclick="document.getElementById('demo').innerHTML = Date()"
에서 document.getElementById('demo')는 문서 내의 id를 demo로 갖는 element(객체와 같이 쓰이는 말)를 나타낸다. 위의 경우 <p> 이다. 그리고 .innerHTML은 <p>의 내부의 html 내용이다.
Date()는 날짜와 관련된 javascript에서 제공하는 객체이다. Date() 와 같이 () 내에 아무것도 써 있지 않으면 현재 시간을 나타낸다.
따라서 위의 경우 버튼을 클릭하면 현재 시간을 <p>에 쓰라는 것이다.
<button> <-- button 끝
<p> <--문단을 나탸내는 태그, 태그 내부의 내용은 문단이다.
</p> <--문단의 끝
동적인 객체: 상황에 따라 바뀔수 있는 것들
정적인 객체: 변하지 않는 것들 이라고 받아들이자. 고정된 것은 아니나 실력이 좋아지면서 개념이 체득되면 명료해질 것이다.
일단 코딩 처음 접하는 이가 w3schools.com에서 javascript를 공부할 경우, 받아들이면 정신적으로 좀 편할 것 같은 것을 정리해 보았다.
이전 글에서도 언급하였듯, 위 코드를 .html로 저장하고 더블클릭하면 웹브라우저에서 코딩내용을 확인하고, 버튼 클릭시 현재 시간이 나타날 것이다.
댓글
댓글 쓰기