본문 바로가기

Programming language/JavaScript

JavaScript - 1 [의미, 환경 설정, 실행]

JavaScirpt

- 웹에 쓰이는 단 하나의 언어

- 웹사이트를 interactive 하게 만들고 싶을때 쓸 수 있는 단 하나의 언어

 

즉, 프론트앤드를 선택한다면 쓸 수 있는 언어는 단 하나뿐이다.  javaScript

모든 컴퓨터에는 브라우저가 있고 브라우저는 javaScript로 돌아가니까

 

 

ECMAscript

: specification의 명칭 같은 말 - javaScript의 설명문 

- 이러한 specification은 버전별로 있다.

 

ES5 = ECMAscript5

ES6 = ECMAscript6

 

Vanilla JavaScript

- 라이브러리가 없는 자바스크립트

- 다른 자바스크립트 기반 언어들도 많지만 그러한 모든 언어들은

바닐라 자바스크립트를 실행하기위한 코드들을 모아놓은 라이브러리다.

- 바닐라 자바스크립트를 모르고 라이브러리만 다룰줄 안다면 어떠한

도구이든 자유롭게 쓸 수 없다. 웹사이트를 만드는 가장 기초적인 언어인 것이다.

 

즉, 다른 자바스크립트 라이브러리를 이용할때에 그 정의를 이해하려면

바닐라 자바스크립트를 알아야지 이해를 할 수 있다.

 

자바는 따로 언어를 깔지 않아도 된다.

웹브라우저에 이미 언어가 심어져 있기 때문에 js파일을 코딩하고

웹브라우저에 실행을 시키면 웹브라우저가 js파일을 읽고 컴파일 해준다.

 

JS파일의 추가

- js 파일은 확장자가 .js이다. 이파일의 추가는 굉장히 간단하다.

이전에 배웠던 것처럼 html파일을 만든다음, body 안의 맨 마지막줄에 추가하면된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Something</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>This works!</h1>
    <script src = "index.js"></script>
</body>
 
</html>

body의 맨아랫줄에

<script src = " index.js"></script>

이 코드만 추가하면

 

js코드가 html에 추가된다.

 

javascript를 보면서 파일이 실행이 되는지 안되는지 보려면

실제 웹을 켜서 동작을 확인하는 것과, 컴파일시 경고메세지를 확인하는 방법밖에 없다. 

 

js로 경고메세지를 확인해보자.

 

alert('Im working, Im Js, Im beautiful, Im workth it' );

웹 브라우저로 실행을 해보면 경고메세지가 잘 출력되어 뜬다.

 

다른 메세지로는 console.log가 있다.

console.log('Im working, Im Js, Im beautiful, Im workth it' );

페이지 검사에서 console부분을 누르면 console.log부분이 출력된다.