자바스크립트 Hello World 출력하기!

자바스크립트는 인터프리터 방식의 프로그래밍 언어이다. 웹의 탄생과 함께 발전해왔다.

자바 스크립트는 다이나믹한 웹을 추구하며 배우기가 매우 쉬운 언어다.

티오비 인덱스를 한번 살펴보자. 전세계 순위는 7위로 상당히 많이 사용된다.

주로 웹 환경에서 쓸 것으로 추정된다.

웹을 사랑하는 사람에게 자바스크립트는 최고의 언어가 아닐까 싶다.

그럼 바로 튜토리얼을 시작한다.

자바스크립트 준비물

자바스크립트의 실행환경은 기본적으로 웹브라우저다. 크롬이나 파이어폭스, 엣지 다 가능하다. MS익스플로러는 MS의 지원이 끓겼으니까 웬만하면 추천하지 않는다. (느리고 보안에도 취약하다)

그리고 js 파일을 만들 편집기가 필요한데, 요새는 거의 비주얼 스튜디오 코드를 추천한다. VSC는 한번 사용하면 계속 사용하게 된다.

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

라이브 서버를 같이 설치해주면 코딩 과정이 매우 쾌적해진다.

아래 코드로 테스트해본다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script language = "javascript" type = "text/javascript"> 
    document.write("Hello World!")
    </script>
</body>
</html>

html에서 분리한 부분이다.

    <script language = "javascript" type = "text/javascript"> 
    document.write("Hello World!")
    </script>

스크립트 언어는 자바스크립트이고 타입은 텍스트이다. document.write 메소드로 Hello World 를 브라우저에 출력한다.

라이브 서버를 설치하면 비주얼 스튜디오 편집기의 마우스 우를릭 후 Open with live server 를 선택한다. 소스코드의 수정을 하고 저장할 때 마다 브라우저는 자동으로 갱신되기 때문에 실시간 테스트가 가능하다.

위의 파일은 HTML 파일로 저장하여 실행시킨다. HTML 파일 안 자바 스크립트가 포함되어 있는 것이다. HTML안에 포함시키는 것이 하나의 방식이고...

다른 방법은 js 파일을 만들어서 코드를 작성한 후 html 에서 불러오는 방식을 취하는 것이다.

비주얼 스튜디오 코드에서 확장자가 .js 인 파일을 만들어 아래의 코드를 입력한다.

var1 = 10
var2 = 20
document.write(var1+" , " + var2) // 주석문

/*
주석문이다.
*/

파일명을 jscd.js 라 한 후 html 에서 script 태그에 넣는다. (같은 디렉토리 경우)

<body>
    <script src = "jscd.js"></script>
</body>

변수를 출력했다. 사용법은 여타 프로그래밍 언어의 Hello World 와 크게 다르지 않아 보인다.

자바 스크립트를 넣을 수 있는 장소가 여러개가 있다. 그 중에 하나는 위의 body 태그였고, head 에 넣고 html 의 버튼 컴포넌트에 연결 시키는 것도 방법이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <script type="text/javascript">
        function sayHello(){
            alert("Hello World!")
        }
    </script>
</head>
<body>
    <h1>클릭해주세요! </h1>
    <input type = "button" onclick = "sayHello()" value = "Click me!"/>
</body>
</html>

html 과 script를 나눠서 볼줄 알아야 한다. html은 정적인 문서들이다. 반면 자바스크립트 코드는 동적이다. head 태그에 함수를 장착해놨다. 이름은 sayHello 이고 경고창을 띄운다. 아래 body 의 자바스크립트 코드에 와서는 html의 버튼 태그와 연결을 시킨다.

onclick 이 그 연결고리를 제공한다는 것을 볼 수 있다. 그러니까 function sayHello -> input onclick 이다.

이것으로 자바스크립트을 사용하는 법에 대하여 알아봤다.

다른 언어와 달리 컴파일러와 런타임을 설치할 필요도 없고 웹브라우저에 직접 실행시키면 되니까 여러모로 편하다. 비주얼 스튜디오 코드는 어차피 무료판이고 플러그인의 종류가 다양하니까 한번쯤 부담없이 사용해보기에 좋다. VSC는 특정 언어를 위해서라기 보다는 범용으로 사용하기 좋다.

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript

JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지의 스크립트 언어로서 제일 유명하지만 Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라��

developer.mozilla.org