1일차 : 수업소개, HTML과 JavaScript의 만남

1일차 : 수업소개, HTML과 JavaScript의 만남

 

웹이 세상에 처음 등장했을 때는 HTML만 존재했습니다.

HTML은 한 번 화면에 출력되면 언제나 그 모습 그대로 보여줍니다.

 

사람들은 웹페이지도 사람들과 동적으로 상호작용하기를 바라기 시작합니다.

이를 위해서 탄생한 것이 바로 자바스크립트죠.

 

예를 들어, 야간모드처럼 사용자가 버튼을 클릭하면 화면의 색이 변경되는 것이 바로 자바를 활용한 것입니다.

html과 javascript는 어떻게 함께 사용할 수 있을까요? 크게 3가지 방법이 있습니다.

 

1. Script 태그

 

html 안에 자바를 넣겠다는 태그가 바로 script 태그 입니다.

<script> 자바 코드 </script> 이렇게 자바를 넣어주면 됩니다.

쉬운 예로 글씨를 넣겠다는 document.write('넣을내용');을 사용해 봅시다.

 

 

이런걸 왜 쓸까요? 그냥 입력하면 똑같은 내용이 나올텐데요. 비교를 위해 일반 html도 사용해 봅시다.

 

 

html을 사용한 것과 javascript를 사용한 것 모두 결과는 같습니다.

 

하지만 자바스크립트는 조금 더 똑똑해요!

예를 들어, 1+1을 입력하면 결과가 어떻게 될까요?

 

 

html은 문자 그대로 1+1이 나오지만, javascript는 연산을 해서 2를 보여줍니다.

자바가 조금 더 똑똑한 것 같죠?

 

 

2. 이벤트

 

이벤트는 자바스크립트가 사용자와 상호작용을 하는 데에 핵심적인 역할을 합니다.

 

우선 웹페이지에 버튼을 하나 만들어 볼게요.

 

 

버튼에 글씨를 쓰고 싶으면 value를 사용하면 됩니다. hi라는 글씨를 넣어볼게요.

 

 

버튼이 있으면 누르고 싶은 마음이 드는 것이 인지상정! 알람 박스가 뜨게 만들어 봅시다.

우선 구글에 javacript alert를 검색하고, w3school 페이지에 들어갑니다. (여기 매우 유용해요!! 꼭 들어가보세요!)

 

W3Schools Free Online Web Tutorials

 

알람 박스 안에 넣고 싶은 문구를 적어주세요. onclick을 사용하게 되면  alert 바깥에 큰따옴표가 오니, 괄호 안에는 작은 따옴표를 사용하면 되겠죠.

 

 

그럼 이렇게 알람에 문구가 표시됩니다.

 

 

이렇게 온클릭을 사용하기 위해서는 그 안에 꼭 자바스크립트 명령어를 넣어야 합니다.

온클릭 속성의 속성값은 웹브라우저가 기억하고 있다가 그 태그가 실행될 때, 즉 클릭을 할 때, 자바 스크립트 코드를 활용해서 웹브라우저가 동작하도록 되어 있습니다.

 

이렇게 웹브라우저 위에서 일어나는 일들을 이벤트라고 합니다.

웹브라우저에서 일어날 수 있는 이벤트는 정말 많지만, 중요한 이벤트들만 몇 가지 알아봅시다.

예를 들어, 이번에는 버튼이 아니라 텍스트를 입력할 수 있는 창을 만들어 봅시다.

 

어떤 인풋이냐에 따라 이렇게 추천해주는 이벤트들 리스트를 확인할 수 있습니다.

 

 

텍스트를 변경했을 때, 알람이 나오는 onchange를 사용해봅시다.

 

 

텍스트 창 안의 글자를 변경하면 changed!라는 알람이 뜨게 설정했습니다.

 

검색을 해보면 다양한 이벤트 등이 나오죠. onclick, onchange, onkeydown 등의 이벤트를 이렇게 활용할 수 있습니다.

 

 

3. 콘솔

 

마지막으로 콘솔에 대해 알아봅시다.

 

지금까지 우리는 자바스크립트를 사용하기 위해 웹페이지를 만들었는데요.

매번 페이지를 만들어서 자바스크립트를 실행하기가 어려울 수 있습니다.

 

이럴 때는 콘솔 창을 열고 자바스크립트를 실행하면 됩니다.

웹페이지에서 검사 즉 inspection을 열면, console이라는 부분이 나옵니다.

 

 

여기 콘솔 부분에 자바스크립트를 넣고 실행시키면, 따로 코딩프로그램이나 웹페이지를 만들지 않아도 스크립트를 실행시킬 수 있습니다. 심지어 다른 웹사이트에서도 이것을 활용해서 계산을 하거나 데이터를 뽑아낼 수도 있습니다.

 

SNS에서 당첨자를 추첨하는 이벤트 보신 적 많으시죠?

 

웹페이지에서 검사를 실행하고, element를 보고 있는 상태에서 esc를 누르면 아래쪽에 콘솔을 입력할 수 있는 창이 나옵니다. 여기다가 원하는 자바스크립트 코드를 넣고 실행시키면 원하는 정보를 얻을 수 있습니다.

 

 

한번 사용한 코드는 위쪽 화살표를 누르면 또 사용할 수 있습니다. 당첨자수를 수정해서 또 추첨을 할 수 있겠죠.

 

자바 스크립트를 사용하면, 이렇게 이미 만들어져있는 웹사이트에서 나의 필요에 따라 간단하게 코드를 작성해서 어떤 문제를 해결할 수도 있습니다. 웹사이트를 만드는 것처럼 큰 목표가 없어도, 이렇게 생활에서 간단하게 활용할 수 있습니다.

 

오늘은 우선 html에서 자바스크립트를 어떻게 사용하는지, 사용하는 이유가 무엇인지에 대해 살짝 알아보았습니다.

다음에는 조금 더 디테일한 부분에 대해 공부해보죠!