티스토리 뷰
안녕하세요 박스여우입니다. 오늘은 JavaScript를 Html 속에서 사용하는 방법에 대해서 알아보겠습니다.
우선, JavaScript 강좌는 기본적으로 Html을 알고계시다는 전제 하에 진행하도록 하겠습니다.
아래 파일을 다운받아서 크롬이나 사용하고 계시는 익스플로러에서 적용해 봅시다.
test.html
다운받으신 test.html파일을 익스플로어나 크롬에 끌어다 놓으면 이런 모양의 웹 페이지가 보이게 됩니다.
그다음 '클릭해 볼까?' 라는 버튼을 클릭해 보면 아래 사진처럼 클릭했음 이라는 메세지가 나오게 됩니다.
이처럼 웹페이지의 버튼을 클릭했을때 이벤트를 처리하는 과정을 순수하게 Html을 통해 처리할 수도 있지만, 좀 더 복잡하거나 많은일, HTML로는 한계가 있는 것들을 구현하기 위해서는 JavaScript를 사용하게 됩니다.
그럼 우리가 보았던 웹페이지의 소스를 살펴보며 자세히 알아보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <input type="button" value="클릭해 볼까?" onclick="clickEvent()"; "> </body> <script type="text/javascript"> function clickEvent() { alert('클릭했음'); }; </script> <html> | cs |
body 안에 버튼을 만들었고, value(버튼 이름)는 '클릭해 볼까?'라고 설정했습니다. 그리고 마지막으로 버튼이 클릭되었을때 어떤 동작을 하기 위해 onclick에 클릭했을시에 하게될 행동을 지정했습니다. 그런데 onclick에는 clickEvent()라는 메소드가 등록되어 있습니다. 순수 html만 배우신 분들이시라면 어떻게 html에 메소드가 있을지 의문이 생기실 수 있습니다. 하지만, 이 clickEvent() 메소드는 html의 메소드가 아니라 javascript의 메소드 입니다.
좀더 아래로 이동해 보면 <script type="text/javascript"> 이런 태그가 있네요.
바로 javascript를 삽입하는 구간을 나타냅니다. 이 태그 사이에는 javascript가 들어가게 됩니다. 여기에 메소드나 변수등을 선언하고 html에서 사용하게 됩니다.
javascript구역에는 function clickEvent() 라고 메소드가 선언되어 있습니다. 위에서 버튼이 onclick에 등록한 메소드가 바로 이 메소드 입니다.
마지막으로 alert('클릭했음')이 메소드는 웹페이지 상에서 메세지를 출력하는 메소드 입니다. alert 메소드는 기본적으로 javascript에서 제공하는 메소드 이기 때문에 따로 선언되어있지 않습니다.
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <input type="button" value="클릭해 볼까?" onclick="clickEvent()"; "> </body> <script type="text/javascript"> function clickEvent() { alert('클릭했음'); }; </script> <html> | cs |
위의 코드를 정리해 보면 클릭해 볼까? 버튼을 클릭하면 onclick에 선언되어 있는대로 clickEvent()라는 메소드를 호출하게 됩니다. 그러면 javascript의 clickEvent()메소드를 호출하여 선언되어있는 동작을 하게 됩니다.
위의 예제같은 경우, 코드를 좀더 간단하게 아래와 같이 수정할 수 있습니다.
1 2 3 4 5 | <html> <body> <input type="button" value="클릭해 볼까?" onclick="alert('클릭했음')"; "> </body> <html> | cs |
하지만, 위와같은 예제처럼 간단하지 않을때 이와 같은 방법은 바람직하지는 못한 코드 입니다. 되도록이면 javascript에 메소드를 선언하고 호출하는 방법으로 코드를 짜는 것을 권장해 드립니다.
마지막으로 정리를 하면, html에서 javascript를 사용하기 위해서는 아래와 같이 직접 HTML에 삽입하는 방법과,
따로 만들어둔 JS파일을 아래처럼 html에 등록해 주면 사용할 수 있습니다. (import와 비슷한 개념(?))
1 | <script type="text/javascript" src="lib/js/jquery.min.js"></script> | cs |
'프로그래밍 > 웹' 카테고리의 다른 글
| AngularJS (424) | 2016.08.18 |
|---|---|
| AngularJS (0) | 2016.08.09 |
| Web Worker - 웹에서 멀티 쓰레드 구현하기 (1) | 2016.07.14 |
| Ajax - 페이지 새로고침 없이 변경하기 (2) | 2016.07.06 |
| 웹사이트에 facebook 로그인 적용하기 (2) | 2016.07.04 |