[JavaScript] 생활코딩 1일차

인류는 HTML을 통해 정보를 주고 받을 수 있게 되었지만 더 나아가 사용자와 상호작용하는 웹페이지를 만들고 싶어하기 시작했다.

정적인 HTML을 게임과 같이 사용자의 조작에 반응해서 움직이는, 즉 동적으로 사용자와 상호작용할 수 있게 하기 위해서 만든 기술이 바로 JavaScript 이다.

비유를 하자면 HTML이 정보라는 멈춰있는 이미지를 그린 것이라면 JS는 정보라고 하는 그 이미지를 영화처럼 움직이게 한다.

  1. JS는 사용자와 상호작용을 하는 언어이다.
  2. 웹브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없지만 JS를 이용하면 특정 코드를 수정하거나 속성을 추가할 수 있다.(즉, JS는 HTML을 제어하는 언어이다)
  3. JS는 웹페이지를 훨씬 더 동적으로, 다이나믹하게 만들어주는 특성을 웹페이지에게 부여한다.

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

기본적으로 JS는 HTML 위에서 동작하는 언어이다. 그렇기 때문에 어떻게 하면 HTML이라는 컴퓨터 언어에 완전히 다른 문법을 가지고 있는 JS를 연결시킬 것인가를 배워볼 것이다.

JS를 넣는 방법은 우선 웹브라우저한테 HTML의 코드로 '지금부터 JS가 시작됩니다'라고 알려주어야 한다.

이때 사용하는 방법이 바로 < script >라는 태그이다. 이 태그 안에는 JS가 오도록 약속되어 있기 때문에 웹브라우저는 이 태그 안쪽에 있는 코드를 JS로 해석하게 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8">
    <title></title>
  </head>

  <body>
    <h1>JavaScript</h1>
    <script>
      document.write('hello world');
    </script>
    <h1>html</h1>
    hello world
  </body>
</html>

위 코드에서 우리는 JS로 작성한 것과 html로 작성한 것과 무슨 차이가 있냐고 궁금증을 가질 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8">
    <title></title>
  </head>

  <body>
    <h1>JavaScript</h1>
    <script>
      document.write(1+1);
    </script>
    <h1>html</h1>
    1+1
  </body>
</html>

그 차이는 바로 JS는 HTML과 달리 동적이라는 것이다. HTML은 작성한 코드 그대로 출력하지만 JS는 계산기처럼 동작할 수도 있는 다재다능한 언어라는 것이다.

  1. JS코드라는 것을 웹브라우저에게 알려주기 위해서는 < script >태그를 사용한다.
  2. 웹페이지에 글씨를 출력할 때는 document.write를 사용한다.

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

이번에 공부할 이벤트는 JS가 사용자와 상호작용하는데 핵심적인 역할을 한다.

버튼을 만들기 위해서는 < input type="button" >이라는 태그를 입력하면 되고, 이 버튼에 값을 넣기 위해서는 value="..."을 입력하면 된다.

우리는 이 버튼을 눌렀을 때 경고창이 뜨게 하기 위해서 onclick 이라는 속성을 사용할건데 이 속성의 값으로는 반드시 JS가 와야한다.

또한 onclick의 속성 값은 웹브라우저가 기억하고 있다가 사용자가 실제로 그 행동을 취할때 이 onclick 속성이 위치하고 있는 태그에 기억하고 있던 JS코드를 JS문법에 따라 해석해서 웹브라우저가 동작한다.

이렇게 웹브라우저 위에서 일어나는 일들을 이벤트(Event)라고 한다.

즉, 어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것이 onclick 속성이라는 것이다.

버튼이라는 이벤트말고 텍스트를 입력하는 이벤트를 일어나게 하기 위해서 < input type="text" >태그와 onchange="alert('changed')태그를 넣어보자.

그러면 값을 넣고 다른 곳을 클릭했을때 "changed"라는 경고창이 뜨게 된다.

이렇게 웹브라우저는 웹브라우저 위에서 일어나는 여러 사건중에 기념할 만한 것들 몇 가지, 약 10개에서 20개 정도 되는 이벤트들을 정의하고 있다.

우리는 그 이벤트를 이용해서 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8">
    <title></title>
  </head>

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

이번 시간의 주인공은 바로 이렇게 on으로 시작하는 속성(Attribute)이었다.
ex)onclick, onchange, onkeydown

이런 속성들을 우리는 'event'라고 하고, 웹브라우저 위에서 일어나는 사건들이 있는데 그 중에 기념할 만한, 사용자에게 유용할 만한 이벤트를 10개에서 20개정도 정의해놓고 이것들을 이용해서 사용자와 상호작용하는 코드를 만들 수 있게 된다.

HTML과 JavaScript의 만남3 (콘솔)

이번 시간에는 JS를 실행하는 또 다른 방법을 살펴볼 것이다.

지금까지 우리는 JS를 실행하기 위해서 웹페이지를 만들었다. 그런데 경우에 따라서는 꼭 파일이 아니더라도 어떤 코드를 실행해야 되는 아주 가벼운 상황들이 있다.

이 경우에 우리는 웹페이지의 오른쪽 마우스를 눌러서 검사에 들어가 Console 이라는 기능을 이용할 수 있다.

이 기능을 이용하면 우리는 파일을 만들지 않고도 JS코드를 즉석에서 실행할 수 있다.

Console에서 실행시키는 JS는 지금 우리가 보고 있는 웹페이지 안에 삽입된 JS인 것처럼 동작한다. 다시 말해 Console에서 실행시키는 JS는 지금 보고 있는 웹페이지를 대상으로 실행하게 된다는 것이다.

위 처럼 따로 파일을 만들지 않고도 Console창을 이용해서 문자열의 길이를 구하는 등 우리가 필요한 문제를 해결해줄 수 있다.

우리가 웹페이지를, JS를 이용한다는 것은 웹페이지나 웹사이트를 만드는 것처럼 거대한 목표일 수도 있지만 이미 만들어져 있는 웹사이트를 나의 필요에 따라서 나에게 맞는 코드를 작성해서 어떤 문제를 해결할 수도 있다.

그래서 우리가 코딩을 해서 얻을 수 있는 효용은 개발자가 될 수 있느냐 없느냐만 있는 것이 아니라 나의 현실의 문제를 가볍게 해결할 수도 있다는 것이다.

데이터타입 - 문자열과 숫자

컴퓨터 프로그래밍에서는 데이터를 처리하는 것이 아주 중요한 일이다. 그렇기 때문에 컴퓨터에서는 데이터를 잘 처리하기 위해서 종류별로 데이터를 분류하였다.

이번 시간에는 JS에는 어떠한 형태의 데이터들이 있는가를 살펴보고 그 중에서 대표적인 '문자'와 '숫자'에 대해 깊게 이해하는 시간을 가질 것이다.

숫자는 숫자 그대로 작성하면 되지만, 문자열(String)은 큰 따옴표나 작은 따옴표로 감싸줘야 한다.

인터넷에 "javascript string" 이라고 검색하면 문자열에 대한 여러가지 값과 함수들을 알 수 있다.

문자열이냐 숫자냐에 따라서 명령에 대한 결과가 많이 달라질 수 있기 때문에 우리는 항상 데이터 타입을 정확하게 표현해야만 한다.
ex) 1+1 = 2 , "1"+"1"+ = "11"

백준 1937 욕심쟁이 판다
실습 - HELBAK

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage