처음 시작하는 자바 스크립트 - 기초01 'Hello World!'

안녕하세요 . 알렉스 입니다. 이번에는 자바스크립트를 처음 배우게 되서 글을 작성하게 되었습니다. 어느 프로그램 언어나 마찬가지로 'Hello World'를 작성해 보도록 하겠습니다.

그림1) 크롬 화면

일단 시작할때 빈 공백의 크롬화면을 시작합니다. 이때 가능하면 웹사이트를 통하지 않고 그냥 완전 빈 공간이 좋습니다.

그림2) 검사 선택

마우스를 우클릭 한 다음 검사를 누릅니다. 이후 목차에서 Console를 선택하시면 그림 3과 같은 화면이 출력이 됩니다. 빠른 방법으로 F12를 누르면 바로 Console화면으로 전환이 됩니다.

그림3) console로 작성

이제 console.log를 이용하여 문자를 출력하려고 한다. 출력하고자 하는 문자열은 'Hello World!'이다. 따라서 console.log(/*console에 출력할 내용 기입*/)를 사용하면 된다. 그림3과 같이 console.log('Hello World')를 기입했다.

그림4) 'Hello World!' 출력

그림5) 변수 저장

변수를 이용하여 'Hello World!'를 출력하도록 하겠다. 일단 변수명을 선언하고 그 변수에 문자열을 저장해야 한다. 여기서 'str'은 변수를 선언한 것이고 'Hello World!'는 변수이다. 따라서 위와 같이 'var str = 'Hello World!';'를 작성한다면 str에 변수가 저장된 것이다. 

그림6) 변수를 console로 출력

그림3과 마찬가지로 'console.log'를 이용하여 출력을 해보자. 일단 'Hello World!'의 입력위치는 같다. 하지만 ' '가 생략되어 있다. 이거는 차후에 나오지만 이미 변수 'str'은 문자열이기 때문에 필요하지가 않다. 

그림7) clear사용

이후 코드를 하다보면 console 창이 지저분해지는 경우가 있다. 한번에 지우고 싶으면 'clear()'함수를 사용하면 된다. 

그림8) clear된 상태

그림8과 같이 화면이 깨끗해 진것을 알수 있다. 하지만 변수명과 그 안에 저장되어있는 값은 지워지지 않는다. 만약 지우고 싶다면 단축치 'ctrl + Shift + R'을 입력하면 된다.(OS Window 기준)

그림9) 단축키를 이용한 Reset

Javascript를 처음 배우면서 다양한 프로그래밍 언어가 존재한다는 것을 알게 되었습니다. 이제 블로그를 작성하면서 차근차근 배우겠습니다.