1. JavaScript와 HTML

# 이 글은 생활코딩 Web2-JavaScript를 바탕으로 작성한 내용입니다.

 

글을 잘 정리하기 보단 배운 내용들을 나열하는 식으로 글을 작성해보려고 한다.

 

1. JavaSript와 HTML

 

먼저 JavaScript는 기본적으로 HTML 위에서 적용되는 언어라고 한다.

이때 JavaScript를 HTML에 넣는 방법은 바로 태그를 사용하면 된다.

 

스크립트 태그 - HTML은 스크립트 태그 안의 코드를 자바 스크립트 코드로 인식한다.

<script> </script>

 

JavaSript와 HTML의 차이점

만약 1+1을 Web 페이지에 출력한다고 생각해보자.

HTML은 정적이기 때문에 말 그대로 1+1 이 출력 될 것이다.

JavaScript는 동적이다.

만약 document.write(1+1) 이란 코드를 입력한다면 Web 페이지에는 2가 출력될 것이다.

 

(정적과 동적은 정말 차이가 크다.

이번학기에 Java를 배우면서 정적인 처리와 동적인 처리(GUI)를 둘 다 다뤄보면서 느낀점은.. 동적 처리는 정말 어렵다 였다 ㅎㅎ)

 

2. 이벤트

이벤트란, 어떠한 상황이 발생했다면 그에 대한 이벤트가 발생했다고 하고, 그 이벤트에 대해 반응해주는 것이다.

(정확히 무엇이다 라고 설명하긴 힘드네..)

이벤트는 혼자 독립적으로 쓰이지 않는다. 이벤트 리스너가 필요하고, 그 이벤트에 대해 반응해주는 (Java에서는 EventHandler라고 하던데 JavaScript도 그런진 모르겠음) 코드가 필요하다.

 

강의에서는 먼저 버튼으로 예제를 보여주는데 (아무래도 이벤트 설명에는 버튼이 최고인듯)

 

코드는 다음과 같다.

<input type = "button" value = "hi" onclick = "alert('hi')">

코드를 하나 하나 분석해보자.

일단 이 코드는 JavaScript와 HTML이 동시에 들어간 코드이다.

 

input type = "button"      :     button 객체를 만들어서 web에 추가한다

value = "hi"                   :     해당 버튼의 이름은 "hi" 이다.

onclick = "alert('hi')"        :     

onclick은 버튼을 클릭했을 때 (즉 해당 이벤트가 발생했을 때) "alert"를 실행한다는 뜻이다.

이 때 onclick이란 코드 뒤에는 반드시 JavaScript 코드가 와야 한다. 이 뜻은 "alert()"가 JavaScript 코드란 것이겠죠? 

alert는 경고창을 띄워주는 코드이다. 그때 경고창에 뜨는 말을 ()안에 넣어주면 된다.

 

실제 실행화면이다.

 

<input type = "text" onchange = "alert('changed')">

이 코드도 쉽게 이해가 가능할 것이다.

만약 text의 입력이 바뀐다면, 경고창을 띄워주는 것이다.

 

<input type = "text" onkeydown = "alert('key down')">

이 코드는 text창에 key가 입력될 시 경고창이 뜨는 것이다.

 

당연히 외울 필요가 없다. 이 코드들을 통해 내가 알게된 것은 html 코드의 속성을 바꿔줌으로써 이벤트를 발생시킬수 있다, 즉 동적인 프로그래밍이 가능하다이다.

( + Java의 GUI보다 훠얼씬 간단하다 )

 

 

3. 콘솔

 

파일을 만들지 않고도 바로 JavaScript 코드 실행 가능

 

 

 

아직 많은 것을 공부하진 않았지만 어떤식으로 동작하는지에 대한 큰틀은 이해한 것 같다.

이제부터는 JavaScript란 언어 자체를 공부할 예정이다.