WEB2 - JavaScript_2-4 HTML과 JavaScript의 만남

2. Script 태그

JavaScript는 HTML을 기반으로 동작한다. JavaScript를 전혀 다른 언어인 HTML과 어떻게 같이 사용할 수 있을까.

: <script>태그를 이용. <script>태그 안의 코드는 JavaScript로 해석한다.

<!-- JavaScript를 이용해서 텍스트 작성 -->
<script>
    document.write("Hello world")
</script>

JavaScript vs HTML

---

텍스트는 HTML에 직접 입력해도 사용할 수 있지만 JavaScript가 HTML에 비해 동적으로 수행할 수 있는 여지가 더 많다.

<!-- HTML: "1+1"로 출력 -->
<p>
    1+1
</p>

<!-- JavaScript: "2"로 출력 -->
<script>
    document.write(1+1)
</script>

3. 이벤트 (Event)

JavaScript가 사용자와 상호작용하기 위한 핵심기능.

<input type = "button" value = "hi" onclick = "alert('hi')">

onclick의 속성값을 기억하고 있다가 '클릭했을 때' 코드를 실행

위의 '클릭'처럼 웹 브라우저에서 일어나는 일중 대표적인 것을 추려 EVENT라고 한다.

Example: onclick - 클릭할 때, onchange - 내용 변화가 있을 때, onkeydown - 키를 입력했을 때

4. 콘솔 (Console)

개발자 도구의 콘솔(console)을 이용하면 웹 페이지가 파일형태가 아니더라도 JavaScript 코드를 간단하게 실행해볼 수 있다.

• Example 문자열의 단어 수 세기

  페이지의 글(문자열)을 복사해서 따옴표로 감싼 뒤 .length를 붙여 문자열에 포함된 단어의 개수를 셀 수 있다.

  alert('String'.length)

Console에 입력한 JavaScript는 현재 페이지를 대상으로 작동하기 때문에 유용하게 사용할 수 있다.

• Example 현재 게시글의 댓글 랜덤 추첨

  해당 서비스의 댓글을 랜덤 추첨하는 코드를 만들거나 가져와서 console에서 실행하면 현재 페이지의 댓글을 랜덤 추첨할 수 있다.

Console과 JavaScript를 이용하면 이미 만들어진 웹 페이지를 보다 효율적으로 활용할 수도 있다.

2020.04.30 13:54 작성