생활코딩의 WEB2 JavaScript - 1~5 (YouTube)

 

오늘은 유튜브 생활코딩의 WEB2 JavaScript - 1~5를 보며 공부를 하였습니다.

 

 HTML과 JavaScript

HTML은 Hyper Text Markup Language 의 약자입니다.

인터넷 창에서 우클릭 - 검사를 누르면 개발자 도구가 나오는데 개발자 도구의 Elements탭에 보이는 문자들이 바로 그 HTML입니다. 지금 보는 인터넷 화면은 이런 HTML과 JavaScript로 이루어져 있습니다.

 

JavaScript는 사용자와 상호작용할수 있게 하는 언어입니다.
웹브라우저는 한번 화면에 출력이 되면 그것을 바꿀 수 있는 능력이 없습니다. 그러나 그것을 바꿀 수 있게 해주는 것이 바로 JavaScript입니다.

 

HTML

HTML에서 input 태그로 무엇인가를 추가할 수 있습니다. 예를들어 버튼을 만들고 싶으면 input type="button"을 적으면 됩니다. 그리고 value는 추가된 것의 이름을 넣을 수 있게 해줍니다. 예를 들어 button이라는 단어를 넣고 싶으면 value="button"이라고 적으면 됩니다. 또한 그 버튼이 동작할 수 있게 하려면 onclick을 적으면 되고 이때 onclick안에는 JavaScript가 들어가야 합니다. 그래야 버튼이 정상적으로 작동할 수 있습니다. 그러면 버튼을 누르게 되면 onclick에 들어가는 JavaScript 코드를 실행시키게 됩니다.

JavaScript

기본적으로 JavaScript는 HTML안에서 동작하는 언어이며 HTML을 제어하는 언어라고 할 수 있습니다.
JavaScript와 HTML은 완전히 다른 문법을 가지고 사용됩니다. 그렇다면 어떻게 HTML안에 JavaScript를 사용할 수 있을까요? 그것은 바로 script 태그를 이용하는 것이다. <script>와 </script>사이에 JavaScript를 넣으면 JavaScript를 사용할 수 있게됩니다.
그러면 여기서 그냥 HTML을 사용해도 되는데 왜 JavaScript를 사용하는 거냐 라고 하실 수도 있는데 HTML은 정적이고 JavaScript는 동적이라는 차이가 있습니다. 예를 들어 HTML과 JavaScript에 똑같이 1+1을 넣는다고 해봅시다. 그러면 HTML은 문자 그대로인 1+1을 출력하고 JavaScript는 1+1=2 이므로 2를 출력하게 됩니다. 따라서 용도에 따라 적절히 사용하면 됩니다.

 

JavaScript 사용법

HTML안에 JavaScript를 사용하는 방법은 여러 가지가 있습니다. 오늘은 그중에서 Event 몇 개를 다뤄보겠습니다.

(onclick) input type="button"을 사용하여 버튼을 만들었을 때 onclick=""을 넣어주면 버튼이 클릭되었을 때 ""안에 들어있는 JavaScript 코드가 실행이 됩니다.
(onchange) input type="text"를 사용하여 텍스트를 만들었을 때 onchange=""를 넣어주면 텍스트를 빠져나갈 때 텍스트 안의 글자가 바뀐 경우 ""안에 들어있는 JavaScript 코드가 실행이 됩니다.
(onkeydown) onchange와 같은 방식으로 사용되지만 onchange와는 다르게 텍스트 안에서 키가 눌린 즉시 ""안에 들어있는 JavaScript 코드가 실행이 됩니다.
더욱 많은 Event 정보를 원하면 JavaScript Event List로 검색하여 볼 수 있습니다.

 

Console

Console을 이용하면 파일을 만들지 않고 JavaScript를 즉석에서 사용할 수 있습니다. Console창에서 실행되는 JavaScript는 웹페이지를 대상으로 실행됩니다. 따라서 Console을 이용하여 이미 만들어져 있는 웹페이지의 정보를 바탕으로 우리가 원하는 것을 쉽게 얻을 수 있습니다. 또한 개발자 도구에서 Console탭을 클릭해서 쓸 수도 있지만 Elements 탭에서 ESC키를 누르게 되면  Elements 탭과 Console탭이 함께 표시가 되어 더욱 편하게 사용할 수 있습니다.