Web/java script

생활코딩 8일차 [21.01.19] - JavaScript 시작

itisjustK 2021. 1. 19. 16:00

<HTML과 JavaScript의 만남1 (script 태그)>

JavsScript의 첫 강의다. 이 강의에서 JS의 문법에 대해서 배웠다.

JS는 기본적으로 HTML 위에서 실행된다. 즉, CSS와 마찬가지로 HTML 위에서 '자 여기부터 JS에 관한 코드를 적을 테니 JS로 인식해줘 컴퓨터야~'하는 메세지를 넣어야 한다. (CSS는 <head>에, JS는 <body>에)

그것이 <script> </script> 이고, 이 태그 사이에는 JS의 태그를 JS의 문법에 맞게 적어야 컴퓨터가 제대로 인식할 수 있다.

일단은, 화면에 글자를 출력하는 JS 문법으로 document.write('hello world'); 의 예시를 배웠다. 이를 통해 알 수 있는 점은 

출력되고자 하는 글자는 ①( ) 소괄호 안에 ②작은따옴표 ', ' 로 표시한다는 것이다.

자 JS로 출력한 글자와 HTML로 출력한 글자를 비교해보자.

  <body>
    <h1>Java Script</h1>
    <script>
      document.write('hello world');
    </script>
    <h1>HTML</h1>
    hello world
  </body>

JS와 HTML

글자를 출력하면 차이가 없다. 여기서 드는 의문점이 있다. 아니, 이럴 거면 JS를 쓰는 의미가 없지 않나?

우리가 간과한 것이 있다. JS는 컴퓨터와 사람, 사람과 사람 사이의 상호작용을 하기 위해 만들어진 언어이다. 이를 확인하기 위해 hello world 글자를 출력하는 것이 아니라 예시로 수식 1+1을 출력해보자.

  <body>
    <h1>Java Script</h1>
    <script>
      document.write(1+1);
    </script>
    <h1>HTML</h1>
    1+1
  </body>

차이점을 알겠는가?

JS는 1+1을 컴퓨터가 수식으로 인식하여 계산한 결과값을 출력해준 반면, HTML은 오직 글자 그대로만을 화면에 출력했다.

이렇게, JS는 반응에 따른 상호작용을 하기 위해 고안된 언어이다.

 

<HTML과 JavaScript의 만남2 (이벤트)>

앞에서 JS는 상호작용을 위한 언어라고 배웠다. 그렇다면 구체적으로 들어가서, 어떻게 사용자들 간에 상호작용을 할까?

컴퓨터 코드에는 코드 작성자가 사용자들과 상호작용하는 데에 유용한 반응들을 위한 스무여가지의 코드가 내재되어있다.

그리고 여기서 유용한 반응들을 이벤트라고 한다.

즉, 사용자들간에 가장 많이 발생하는 반응과 결과를 코드로 작성할 수 있고 모든 반응들을 이벤트라고 한다.

그리고 이벤트에 관한 코드들은 on-으로 시작하고, on-="JS코드()"의 문법을 가진다.

HTML의 input 태그와 함께 예시를 들어보자.

 

<input> : 무언가를 삽입한다 (버튼이나 텍스트 입력창 등)

type=" " : 어떤 종류를 삽입할 것인가? (button, text 등)

value=" " : 그 안에 쓰일 문구

on---="JS" : 사용자들간의 상호작용을 하게 하는 이벤트 태그

onclick : 클릭의 이벤트

onchange : 변화되는 것의 이벤트 (무언가 입력되어 변한 것)

onkeydown : 키 다운의 이벤트 (키가 눌러지는 것)

alert('text') : 경고 문구를(text) 띄우는 JavaScript 언어

  <body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('key down!')">
  </body>

①input 해석 : hi 문구가 적힌 버튼이 있고 클릭하면 hi라는 문구의 경고창이 뜬다.

②input 해석 : 텍스트를 입력하는 창이 있고 무언가 입력되어 값이 변하면 changed라는 문구의 경고창이 뜬다.

③input 해석 : 텍스트를 입력하는 창이 있고 어떤 키가 눌러지면 key down! 이라는 문구의 경고창이 뜬다.

위에서 언급했듯, JavaScript에는 다양한 이벤트들이 존재한다. 그리고 이 이벤트들을 십분 활용해 본인의 웹 페이지에서 코드를 작성하여 사용자들과 다양한 상호작용을 할 수 있다. JS의 이벤트들은 'Javsscript event attribute'라고 구글링하면 찾을 수 있다.

 

<HTML과 JavaScript의 만남3 (콘솔)>

콘솔 : 파일을 생성하지 않고도, 웹 페이지의 '검사' 창의 'console' 란에서 즉석으로 JS 코드를 짜고 실행할 수 있다.

이 강의는 JavaScript의 의미적인 부분을 설명해주었다. 그리고 JS의 의미를 '콘솔'을 통해 실현시킨다는 것을 인지시켜주었다.

코딩을 하면서 좋은 개발자가 되겠다는 마음 가짐으로 공부하는 것은 구태여 말할 필요도 없을 만큼 좋은 마음가짐이다. 하지만 코딩을 배워서, 가령 JS를 배워서, 우리 실생활의 문제들을 아니면 조금은 지루하고 귀찮은 것들을 간단하게 해결할 수가 있다. 

 

그리고 웹 페이지 '검사' 창의 'console' 란에서 파일을 만들지 않고도 즉석에서 JS 코드를 실행시킬 수 있고, 이를 통해 실생활의 문제들을 해결할 수 있다. 예를 들면, 글자 수 세기, 댓글 목록에서 추첨을 통하여 3명 뽑기 등이 있다.