자바스크립트의 시작 정리 2번째: HTML과 JS의 만남

Lofo·2021년 1월 9일

부스트코스 생활코딩 이고잉 자바스크립트

Javascript

목록 보기

3/14

1월 7일 들은 수업 LIST

수업소개
수업의 목적
HTML과 JS의 만남: script태그
HTML과 JS의 만남 : 이벤트
HTML과 JS의 만남 : 콘솔
데이터 타입(문자열과 숫자)

오늘의 정리

3. HTML과 JS의 만남: script태그

Javascript는 HTML 위에서 동작하는 언어입니다. 그렇다면 어떻게 서로 다른 두 언어를 하나로 합칠 수 있는 것일까요?
이 때 바로 script 태그가 필요합니다

<body>
  <script>
    document.write('hello, world!');
  </script>
</body>

생각해보기

1) 어떤 경우에 HTML 코드를 사용하고, 어떤 경우에 Javascript 코드를 사용하면 좋을까요?

나의 답변: 상호작용이 필요하거나 변하는 값이나 데이터를 표현할 때 자바스크립트를 사용하고, 특별히 바꿀 일이 없는 값이나 데이터를 표현할 때는 HTML을 사용하면 될 것이다.

4. HTML과 JS의 만남 : 이벤트

웹 브라우저에서 일어나는 유용한 사건을 이벤트(Event)라고 합니다. 이 강의에서는 onclick 속성과 onchange 속성에 대해서 배웠습니다.
onclick은 onclick속성이 포함된 태그가 클릭되었을 때, 그 안에 있는 자바스크립트 코드가 실행되는 속성입니다.
onchange은 onchange속성이 포함된 입력창에 키보드로 무언가를 치고 엔터를 쳤을 때, 그 안에 있는 자바스크립트 코드가 실행되는 속성입니다.

이 외에도 총 10~20가지 정도의 이벤트가 존재합니다. 이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 됩니다.
이러한 다양한 이벤트들을 모두 외울 수는 없겠죠? 여러분이 코딩을 하다가 필요한 이벤트들은 구글링을 통해서 쉽게 찾아볼 수 있습니다. 예를 들어서 키보드를 누르는 이벤트를 알아보고 싶다면, 구글에 "javascript keydown event"라고 검색하면 onkeydown 이라는 이벤트를 쉽게 찾을 수 있습니다.

생각해보기

1) 버튼 위에 마우스를 올리면 경고창이 뜨는 웹 사이트를 만드는 개발자가 되었다고 상상해 봅시다. 어떤 이벤트를 사용하면 좋을지 알아보세요. (힌트: javascript mouseover event라고 검색해보세요!)
https://sas-study.tistory.com/141
위 사이트의 글을 참고해서 문제를 풀었습니다.

<li onmouseover="alert('hi')"><a href="3.html">JavaScript</a></li>

5. HTML과 JS의 만남: 콘솔

첫 강의에서 했던 것처럼 웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 겁니다. 이 콘솔을 이용하면 웹사이트에서 간단한 문제를 간편하게 Javascript를 실행시켜서 해결할 수 있는 것입니다.
Tip
개발자도구를 켠 상태에서 esc를 누르면 element창과 console창을 한번에 볼 수 있다.
console창에서 이미 입력한 JS코드는 위쪽 화살표키를 누르면 찾을 수 있어서 복사 붙여넣기를 하지 않아도 된다.
생각해보기

1) 현재 페이지에서 콘솔을 이용해서 '생각해보기' 라는 경고창을 띄워봅시다.

6. 데이터 타입(문자열과 숫자)

Javascript의 데이터 타입
컴퓨터 프로그래밍에서는 많은 데이터를 처리하게 되고, 이를 위해서는 특히 데이터를 종류별로 분류하는 일은 아주 중요합니다. 그렇다면 Javascript에서는 어떤 데이터 종류가 있을까요?

크게 6종류의 데이터 타입이 있지만, 이 강의에서는 문자열(String)과 숫자(Number)에 대해서 배웠습니다.

숫자(Number): 사칙 연산을 이용해서 숫자 데이터 타입을 계산할 수 있는 것입니다.
문자열(String): 문자열은 따옴표로 시작해서 따옴표로 끝나게 됩니다.
작은 따옴표로 시작하면 작은 따옴표로 끝내고, 큰 따옴표로 시작하면 큰 따옴표로 끝내면 됩니다. 문자열에서 흔히 사용하는 연산으로는 length가 있습니다. 문자열 뒤에 .을 붙이고 length를 입력하면 그 문자열의 길이를 알려주게 됩니다.

데이터 타입의 중요성

그렇다면 이제 조금 전에 숫자 데이터 타입에서 봤던 연산을 문자열에 적용시켜 봅시다. 다음 코드를 실행하면 어떻게 될까요?