> For the complete documentation index, see [llms.txt](https://westsilver.gitbook.io/study-script/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://westsilver.gitbook.io/study-script/javascript/basic/what_is_javascript.md).

# 자바스크립트란?

HTML과JavaScript의 차이점, 이벤트(Event), 콘솔(Console)

> 자바스크립트(JavaScript)는 HTML로 만들어진 정적인 웹페이지와 사용자가 상호작용할 수 있도록 만들어진 동적인 언어이자, 프로그래밍 언어

## 1. HTML과 JavaScript의 차이점

```markup
<h1>html</h1>
1+1 <!--1+1-->
```

**HTML**은 정적인 언어로 1+1을 **그대로** 출력

```javascript
<script>
    document.write('1+1');    //2
</script>
```

**SCRIPT**는 동적인 언어로 1+1을 **계산**하여 2로 출력

## 2. 이벤트(event)

> 이벤트란? 웹브라우저 위에서 일어나는 사건으로 사용자와 상호작용이 가능할 수 있게 함

### 2-1. 이벤트 종류

| Event     | Description |
| --------- | ----------- |
| onclick   | 클릭했을 때      |
| onchange  | 상태 변동이 있을 때 |
| onkeydown | 키를 눌렀을 때    |
| onkeyup   | 키를 눌렀다 뗐을 때 |

### 2-2. 예시

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

## 3. 콘솔(console)

> 콘솔이란 ? 자바스트립트를 실행하는 여러 방법 중 하나로, 파일을 만들지 않고도 **즉석에서 코드를 실행**시켜 줌

### 3-1. 사용방법

* 개발자도구(**우클릭-inspect/검사** 혹은 **F12**) ➡ **esc** 혹은 **console 메뉴** 클릭
* 한 번 실행했던 코드를 재실행하려면 키보드의 ⬆를 누르기

```javascript
//예) 글자 수를 알고 싶을 때
//1. 내용을 따옴표('')로 묶어준다.
//2. 문자의 개수를 알려주는 명령어 length 사용.
//3. 경고창 alert를 사용하여 글자의 개수를 알 수 있다.

alert('내용'.length)
```

{% hint style="info" %}

* 명령어 입력 후 **실행** - enter
* 명령어 입력 후 **실행 유보** 또는 **줄바꿈** - shift + enter
  {% endhint %}