Chapter 4 JavaScript(1)

JavaScript

• 웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없습니다.
  - 바꾸는걸 가능하게 해주는 것이 자바스크립트입니다.
• 웹에서 개발자 모드의 엘리먼트는 태그라는 뜻입니다.
• <input>이라는 태그를 이용해 버튼을 만들 수 있습니다.
  - 태그의 속성을 'button'으로 지정해야합니다.
  - value로 이름을 지정할 수 있습니다.
  - onclick이라는 속성의 값으로는 자바스크립트가 와야합니다. onclick 속성이 있는 버튼을 클릭했을 때 자바스크립트가 실행됩니다.
  

정리

1) 자바스크립트는 사용자와 상호작용하는 언어입니다.
2) HTML은 웹 브라우저 화면에 한 번 출력되면 자기자신을 바꿀 수 없습니다. 하지만 자바스크립트를 이용하면 자바스크립트 코드에 따라 HTML 태그의 디자인을 바꿀 수 있습니다.
3) JavaScript는 HTML을 제어하는 언어입니다.

<Script> 태그

• 기본적 자바스크립트는 HTML 위에서 동작하는 언어입니다.
• <Script> 태그는 웹 브라우저에게 자바스크립트 코드가 시작된다고 알리는 태그입니다.
  - 웹 브라우저는 <Script> 태그 안의 코드를 자바스크립트 코드로 해석합니다.

예제 4-1 <Script> 태그와 자바스크립트 코드

• HTML과 JavaScript의 차이가 없는 것처럼 보인다.

• 어떤 부분에서 차이가 생기나면 HTML에서 '1+1'을 쓰면 영원히 '1+1'이 출력됩니다. 하지만 자바스크립트는 동적입니다. 계산기처럼 작동할 수 있습니다!!

예제 4-2 HTML 태그와 자바스크립트의 차이 살펴보기

• 자바스크립트는 숫자 1과 1을 더한 값을 2로 만든 다음에 이것을 출력하는 능력이 있습니다.
• HTML은 정적이므로 그렇게 할 수 없습니다.

이벤트

• 이벤트는 자바스크립트가 사용자와 상호작용하는데 핵심적인 역할을 함
• 버튼을 만드는데 사용하는 것은 <input> 태그입니다.
  - <input> 태그의 속성을 'button'으로 지정하면 버튼 모양이 됩니다.
  - 버튼에 글자를 넣고 싶으면 value라는 속성을 이용하면 됩니다.

예제 4-3 버튼을 만들고 onclick 속성과 값 추가

• <input> 태그에 onclick이라는 속성을 사용했는데, 이 속성은 아주 특별한 속성입니다.
• onclick 속성 값으로는 반드시 자바스크립트 코드가 와야합니다.
• 웹 브라우저에서 위에서 일어나는 일들을 사건, 영어로는 이벤트(event)라고 합니다.
• 어떤 이벤트가 일어났을 때 자바스크립트 코드를 실행하게 하는 것이 onclick입니다.

예제 4-4 글자를 입력할 수 있는 텍스트 상자 만들기

• input type에 text라고 지정하면 글자를 입력할 수 있습니다.

• 내용이 변했을 때를 체크하는 이벤트도 있습니다.
  - onchange이라는 속성입니다.

예제 4-5 onchange 속성과 값 추가

• 값을 입력하고, 마우스 커서를 바깥으로 빼서 클릭하면 웹 브라우저가 onchange 이벤트를 실행합니다.
• 값이 변경되지 않으면 이벤트가 실행되지 않습니다.

• 키를 눌렀을 때 경고창이 나타나는 이벤트도 있습니다.
  - onkeydown이라는 속성입니다.

예제 4-6 input 태그 추가하고, onkeydown 속성과 값 추가

• 'on'으로 시작하는 속성들을 자바스크립트에서는 이벤트라고 합니다.

콘솔

• 자바스크립트 코드를 실행하는 또 다른 방법으로 콘솔(console)이 있습니다.
• 콘솔을 이용하면 웹 페이지 파일을 만들지 않더라도 자바스크립트 코드를 웹에서 즉석에서 실행할 수 있습니다.
  - 계산기로 사용하거나 데이터를 간단하게 처리해야하는 경우에 사용할 수 있습니다.

예제 4-7 텍스트가 몇 개의 글자로 이뤄졌는지 확인하기

• 문자들을 ' '로 묶으면 ' ' 안의 것들은 문자가 됩니다.
• 자바스크립트에서는 ' ' 안에 들어 있는 문자의 개수를 알려주는 명령이 .length입니다.
• 위 문자를 alert( )로 감싸서 콘솔에서 실행했습니다.
• 콘솔을 이용하면 자바스크립트 코드를 즉석에서 실행할 수 있습니다.

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

• 데이터 타입을 한국어로는 자료형이라고 부릅니다.
• 자바스크립트에는 6개의 데이터 타입이 있고, 객체라는 것이 있습니다.

예제 4-8 경고창에 숫자 표현하기

• alert(1);을 입력하면 경고창에 숫자 1이 출력됩니다.
  
• alert(1+1);을 입력하면 경고창에 1+1의 합인 숫자 2가 출력됩니다.
  
• alert를 사용하지 않고 계산기처럼 1+1을 입력하고 엔터 키를 치면 숫자 2가 출력됩니다.
  
• 산술 연산자( +, -, *, / ) 전부 사용할 수 있습니다.

• 문자열은 따옴표(" ")로 이루어져 있습니다.(작은 따옴표 ' '를 사용해도 무방함)
  - 단, 큰따옴표로 시작하면 큰따옴표로 끝나고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야합니다.
• 문자열에 사용할 수 있는 것들은 프로터피와 메서드가 있으며, 문자열 뒤에 ( . )을 붙이고 나서 프로퍼티나 메서드를 호출합니다.
• 프로퍼티(Properties)라고 하는 것들이 있으며, 앞에서 사용한 length가 여기에 해당됩니다.

예제 4-9 문자열을 대문자로 출력하기

• toUpperCare( )를 쓰면 결과가 대문자로 출력됩니다.

예제 4-10 문자열에서 특정 문자 찾기

• 찾고자 하는 값을 ( ) 안에 넣으면 찾을 수 있습니다.
• -1은 찾을 수 없다는 결과입니다.
  
• indexOf( )는 찾을 때 공백을 포함해서 계산합니다.
• 'hello world'.indexOf('world')의 결과가 6이 나온 것은 공백을 포함해서 6번째에 'world'라는 문자열이 시작한다는 것입니다.

예제 4-11 문자열에서 공백 제거하기

• trim( ) 메서드는 공백을 없애고 출력하는 기능을 합니다.

• 1은 숫자인가요? 문자인가요? 숫자입니다.
• "1"은 숫자인가요? 문자인가요? 문자입니다.
• 1+1은 2입니다. "1"+"1"은 11입니다.
• 숫자냐 문자열이냐에 따라 결과값이 많이 달라집니다.

예제 4-12 숫자와 문자열

변수와 대입 연산자

예제 4-13 변수와 대입 연산자

• 여기서 x와 y를 변수(variable)라고 합니다.
• =는 대입 연산자라고 합니다.

• 대입 연산자의 기능
  - 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할을 합니다.
  - 좌항과 우항을 결합해서 우항의 값을 만들어 냅니다.
• 변수란 값이 바뀔 수 있다는 뜻입니다.
• 상수(constant)란 바뀌지 않는 수라는 뜻입니다.