■ script
자바스크립트는 Html 문서의 어느 곳에 넣어도 돼.
그렇지만 Html 과 마구 섞어 쓰면 어디가 문서이고 어디가 자바스크립트 명령인지 헷갈리겠지?
그래서 브라우저가 자바스크립트의 명령을 알아 듣도록
"여기서 여기까지는 자바스크립트 코드다.." 라는 것을 표시해 줘야 해.
그 구분을 하는 태그가 바로 <script>야.
즉 브라우저는 <script>∼</script> 사이에 들어가는 것은 자바스크립트 명령으로 인식해.
Html 파일을 열면 브라우저는 위에서 부터 읽어 내려 오다 <script>∼</script> 라는 태그를 만나면 그 안의 명령들을 처리하고 다시 그 아래 Html 을 처리해.
그래서 자바스크립트는 문서 맨 아래쪽에 위치하는 경우가 많아.
보통 Html 문서를 다 보여주고 난 뒤에 어떤 작동을 하는 경우가 많거든.
또 자바스크립트 코드들을 별도의 파일에 저장해 두었다 불러 쓰는 방법도 있어.
보통 홈페이지는 여러 페이지로 구성되어 있잖아? 홈피소개, 자유게시판, 공지사항, 회원가입..등등
<script> 태그만 사용하려면 이 각각의 Html 파일에 동일한 코드들을 일일이 넣어 줘야 하겠지?
그래서 어느 파일에서나 공통으로 많이 사용되는 코드들은 아예 별도의 파일에 넣어 두고 사용하는 방법으로 <head>∼</head> 태그 안에 아래와 같이 미리 만들어 둔 자바스크립트 파일을 지정하면 돼.
<script src="자바스크립파일..js"></script>
CSS 파일을 지정하는 것과 마찬가지야.
주로 공통적으로 사용하는 코드들은 이 방법을 사용하고, 특정 페이지에서만 사용되는 자바스크립 코드들은 위에서 설명한 것 처럼 Html 문서 중간에 <script>∼</script>를 이용해서 넣는 것이 일반적이야.
■ alert()
학습을 위해 가장 먼저 알아야 할 자바스크립트이 바로 alert() 라는 명령이야.
이것은 팝업 메시지 창이야.
정말 많이 사용하고, 학습을 진행하기 위해서도 꼭 필요하기 때문에 가장 먼저 설명해.
( ) 안에 보여줄 내용을 입력하면 이 명령줄을 만나서 바로 팝업 메시지 창으로 보여 주게 돼.
다음과 같이 사용하면 되겠지?
alert('반가워')
그럼 배운 내용으로 초간단 프로그램을 만들어 볼까?
1. 우선 빈 Html 문서를 하나 만들고 body 내용에 다음과 같은 자바스크립트 코드를 입력해.
<p>너의 이름은?</p>
<script>
alert('홍길동')
</script>
위 코드에서 "<p>너의 이름은?</p>"는 Html 내용이고 <script>∼</script> 사이는 자바스크립트 코드야.
2. 브라우저에서 이 파일을 오픈해 봐.
파일은 서버에 저장한 뒤 브라우저 주소에 http://서버주소/test.html 같이 입력해도 되고, 그냥 여러분의 PC에 저장한뒤 윈도우탐색기에서 파일을 끌어서 브라우저에 갔다 놓아도 돼.
서버에서 작동하는 PHP 와는 달리 자바스크립트는 PC의 브라우저에서 작동하는 프로그램이거든..
결과는 굳이 설명하지 않아도 알겠지?
■ document.write()
팝업 메시지창 말고 그냥 브라우저에 표시하는 방법을 알아 볼까?
PHP의 echo 명령 처럼 자바스크립트에서 브라우저에 문장이나 태그를 표시하기 위해서는 document.write() 라는 명령을 사용해.
이 명령을 사용하면 현재 자바스크립트가 있는 위치에 입력한 내용을 보여줘.
위 코드를 다음과 같이 변경해 봐.
<p>너의 이름은?</p>
<script>
document.write('홍길동<br>')
</script>
이 document.write()는 아주 중요한 명령이지만 실제 코드에서는 그렇게 많이 사용되지는 않아.
왜냐하면 웹페이지의 내용은 보통 Html 이나 PHP 에서 다 만들어서 가져오기 때문이야.
그리도 자바스크립에는 웹페이지를 변경할 때는 다른 방법도 있거든.
차차 알아 보자구.
■ 이벤트(event)
'이벤트(event)'는 사건? 변화?
프로그램에서의 이벤트는 우리말로 정확하게 설명할 수 없어서 보통 그냥
'이벤트' 라고 부를께.
브라우저에서 특정 파일을 오픈할 때 부터 우리 눈에는 보이지 않지만 내부적으로 끊임없는 이벤트가 발생해.
Html파일을 다 읽었다는 이벤트, 사용자가 클릭했다는 이벤트, 마우스를 움직였다는 이벤트, 키보드를 쳤다는 이벤트... 등등 온통 이벤트 투성이야.
자바스크립트에는 이런 여러가지 이벤트를 알아 채는 능력이 있어.
이 능력을 이용해서 여러가지 일을 할 수 있어.
위 코드에서 <script>∼</script>를 지우고 첫줄을 아래와 같이 수정해 봐.
<p>너의 이름은?<button onclick="alert('홍길동')">확인</button></p>
한 줄이 되고 버튼을 추가했어.
브라우저에서 새로고침을 하면 "너의이름은? [확인]" 만 보이겠지?
이제 [확인]을 클릭하면 확인창이 나와..
아~ 자바스크립트 코드를 넣는 방법이 하나 더 있네?
바로 이벤트가 발생하는 자리에 이벤트 이름과 같이 넣는 방법이야.
여기서 onclick 이 바로 이벤트 이고, 이 이벤트를 만나면 뒤의 내용을 실행하라는 명령이야.
여기서 onclick 은 이름 그대로 "클릭을 하면.." 이라는 뜻이겠지?
onclick 외에도 수많은 이벤트가 있어. 자주 쓰는 것 만 소개하면..
- onmouseover : 요소 위에 마우스가 올라 왔을 때
- onmouseout : 요소에서 마우스가 나갔을 때
- onmounsedown : 마우스 버튼을 내렸을 때
- onmouseup : 마우스 버튼을 내렸다 올릴 때
- onkeydown : 키보드를 누를 때
- onkeyup : 키보드를 뗄 때
- onchange : input 요소에 입력한 내용이 변경되었을 때
위 설명에서 "요소(element)" 란 이벤트가 발생하는 위치에 있는 태그나 구분이야.
위 설명에서의 요소는 <p>~</p> 태그 안이 되겠지?