자바스크립트와 HTML이 만나는 방법
스크립트 태그, 이벤트, 콘솔
* 본 포스팅은 이전 글에서 이어집니다.
본 포스팅은 생활코딩의 강좌를 공부한 내용 정리를 바탕으로 했습니다.
HTML이 JavaScript를 만나는 방법 (1) : Script Tag
출처 : 생활코딩, WEB2-JavaScript자바스크립트를 넣는 방법은, 웹 브라우저에게 HTML의 코드로 '지금부터 자바스크립트가 시작됩니다.' 라고 알려줘야 한다.
이 때 사용 하는 것이 <script>라는 태그다. 이 스크립트 태그 안 쪽에 있는 코드를 웹브라우저는 자바스트립트로 해석하는 것이다. script 태그 안쪽에, '이 문서에'라는 뜻에 .document.write 에다가 ('hello world')라고 명령 시에 위와 같은 화면이 나온다. 또한 script 태그로 감싸지 않고 그냥 hello world라고 입력했을 때도 같은 결과다.
이 결과가 같은데, 둘의 차이는 무엇일까?
WEB2-JavaScript자바스크립트는 1+1을 연산한 결과를 화면에 출력하는 동적인 능력을 갖고 있다.
반면 HTML은 정적으로, 그런 연산을 하지 않고 그대로 출력한다는 점에서 차이가 있다.
HTML이 JavaScript를 만나는 방법 (2) : Event
WEB2-JavaScript
위와 같이, hi 버튼을 만들고 싶을 때
: input 태그의 type을 button 으로 넣고, 글씨를 넣고 싶을 때는 value 라는 속성을 이용한다.
WEB2-JavaScript
버튼을 클릭했을 때 경고창(alert)이 뜨게 하고 싶을 때
: onclick 속성을 이용하여, alert('hi')로 명령해준다.
HTML 설명서에 따르면, onclick이라는 속성의 속성값으로는 반드시 자바스크립트가 와야한다고 적혀있다고 한다. 그리고 onclick의 속성 값을 웹브라우저가 기억하고 있다가, 이 onclick 속성이 위치하고 있는 태그인 hi 버튼을 사용자가 클릭했을 때, 기억하고 있던 자바스크립트 코드를 자바스크립트의 문법에 따라 해석해서 적혀있는대로 웹브라우저가 동작할 것이다라고 적혀있다.
즉, 웹브라우저의 입장에서는 onclick 속성을 만나면 alert('hi')라는 것을 기억하고 있다가 사용자가 해당 버튼을 클릭하면 그 때 실행해야지 하고 생각하고 기다리고 있다가, 실제로 그런 일이 일어났을 때 실행을 하는 것이다.
이러한 웹브라우저 내에서 일어나는 일들을 '사건(event)'라고 한다.
그렇다면, 웹브라우저 내에서 일어나는 이벤트는 어떤 것들이 있을까?
무수히 많은 일들이 일어나겠지만, 그 중 10-20가지 정도로 기념할만한 것을 지정해놨다고 한다.
출처 : W3S위의 목록은 자주 쓰이는, on으로 시작하는 HTML 이벤트들이다.
이 중 하나로, 만약 HTML 태그가 바뀌는 사건이 일어났을 때 반응이 일어나게 하려면 어떤 이벤트를 쓰면 될까?
WEB2-JavaScript
위와 같이, onchange를 사용 하면 된다.
이 의미는 사용자가 텍스트 입력란에 입력한 값이 바뀌면 경고창(alert)이 나오도록 하는 것이다.
이처럼 이벤트를 이용해서 사용자와 상호작용하는 웹사이트를 만들 수 있다.
HTML이 JavaScript를 만나는 방법 (3) : Console
WEB2-JavaScript어떤 코드를 실행해야하는 가벼운 상황에서, 크롬 개발자 도구 내의 Console 을 이용하면 파일을 만들지 않고도 자바스크립트 코드를 즉석으로 사용할 수 있다. 살다보면 계산이 필요할 때 계산기를 키듯이, 여러가지 데이터를 처리해야할 경우가 많을 때 간단히 Console을 이용해서 자바스크립트를 실행시켜볼 수 있다.
예시
WEB2-JavaScript위 사진의 본문의 글자 수를 알고 싶을 때, 일일이 다 세는 것은 시간 낭비다. 이를 자바스크립트와 콘솔을 활용하여 효율적으로 알 수 있는 방법이 있다.
글자 수를 알고 싶은 것을 복사하여 콘솔창에 붙여넣고, '____' 이렇게 작은 따옴표로 묶어주어 문자라는 특성을 부여해준다.
WEB2-JavaScript그리고 .length라는 명령어를 더한 후 alert( )로 감싸서 실행시키면, 글자 수가 경고창에 뜨는 것을 확인할 수 있다.
이 외에 영상에서는, 생활코딩 페이스북 그룹 내에서 이벤트 당첨자를 랜덤으로 추출하는 과정도 콘솔 기능을 통해 데이터를 처리하는 것을 예시로 보여준다. 이를 통해 코딩을 통해 얻을 수 있는 효용이 우리의 일상생활의 문제를 가볍게 해결해주는 데에도 있음을 강조하고 있다.
