자바스크립트 튜토리얼 1 | 변수 | JS 기초 | 웹브라우저 콘솔 사용하기
자바스크립트의 변수에 대해서 알아보자.
웹사이트에서 사용할 프로그램을 만들기 위해서는 자료를 저장해야 한다.
숫자도 저장해야 되고 글자도 저장해야 되고 이미지도 저장해야 한다.
이런 사진을 컴퓨터에 표시하려면 컴퓨터의 메모리에 저장해야 한다.
그런데 메모리는 무척 넓다. 메모리는 0과 1만 들어있는 곳이다. 8기가의 메모리에는 0과1을 담을 수 있는 저장소가
68,719,476,736 (680억개...)가 들어있다. 이런 곳에 사진을 저장해도 어디있는지 모르니까 집주소 처럼 주소가 있어야 한다.
변수는 결국 메모리의 주소이다. 메모리 역시 숫자로 되어있는데 또 그 숫자가 많다. 메모리 주소는 바이트(256단위)로 계산되는데 4기가에 42억개의 주소가 들어있다. 이쯤되면 주소 외우는 것도 힘들겠다.
그래서 변수에 이름을 붙이기로 한다.
* 변수의 이름 -> 메모리 주소 -> 실제값
프로그래머는 변수의 이름만 알고 있으면 된다. 물론 숫자가 아니라 문자로 쓴다. 무엇인가 기억하기 쉬운 이름을 붙여야 나말고도 다른 사람에게 이해를 시키기 쉽다.
자바 스크립트의 변수 뿐 아니라 다른 프로그래밍 언어도 사정이 비슷하다. 컴퓨터 소프트웨어를 많이 다루다 보면 더 많은 규칙이 있다는 것도 알게 될 것이다. 이 포스팅에서는 자바 스크립트에 대해서 알아본다.
자바 스크립트의 실행환경은 아래의 포스트를 참고한다. 참고로 비주얼 스튜디오 코드를 쓰면 편리하다.
'코딩(CODING)/자바스크립트(JS)' 카테고리의 글 목록
컴퓨터 코딩과 언어학 * 컴퓨터: 파이썬, 자바, C언어 외 * 자연어: 수학
digiconfactory.tistory.com
비주얼 스튜디오 코드을 열고 확장자 html 인 파일을 하나 만들자. 이름은 아무거나 지어도 된다. 확장자를 html 으로 한다.
! 를 입력하고 자동완성이 나오면 엔터키를 누른다.
그러면
자동완성이 된다. 오랜만에 html 파일을 작성해보니 이건 정말 좋은 기능이다.
lang 설정은 ko 로 해주는게 좋다. 하지 않아도 한글은 잘 나오지만 한글 문서인데 영어로 설정되 있으면 나중에 검색 엔진 최적화에 불리하다.
바디의 위치에 다음과 같이 자바 스크립트를 추가한다.
<body>
<h1>
자바스크립트 예제
</h1>
<script>
var name = "냥냥이";
document.write("<b><big>" + name + "</big></b>, 안녕?(^^)");
</script>
</body>
live server 로 웹사이트에서 열어본다.
바로 실행이 잘 된 것을 확인할 수 있다. 그런데 이게 무슨 의미냐? 이전 예제와 다음 예제의 name 을 비교해보자.
<body>
<h1>
자바스크립트 예제
</h1>
<script>
var name = prompt("이름이 뭐니?")
document.write("<b><big>" + name + "</big></b>, 안녕?(^^)");
</script>
</body>
첫번째와 두번째 예제가 다른 것은 name 다음의 내용이었다.
하나는 "냥냥이"라고 써져 있었고 그 다음은 prompt(... 라고 써져 있었다.
결과창에 보면 name 에 입력한 것이 출력됨을 알 수 있다. prompt 도 name 이라는 변수에 전달해주고 document write 에서 출력을 해줬다.
여기서 데이터를 저장을 하고 전달을 해준 name 은 변수다. " " 따옴표 안에 있는 것은 문자열이라고 하는데 만약 아직 컴퓨터 구조를 모른다면 그냥 모두 데이터라고 이해하면 된다. 이 세상에 사람이 표현할 수 있거나 알 수 있는 거의 모든 데이터는 컴퓨터에도 저장할 수 있다.
말도 안되는 이야기 같지만 조지 불이라는 수학자가 이론을 증명했다. 컴퓨터로 신나게 게임하고 인터넷할 수 있는 것은 컴퓨터에 온갖 정보를 다 저장하기 때문이다. 점점 더 많이 저장하고 있다.
조지 불 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 조지 불(영어: George Boole IPA: [dʒɔː(ɹ)dʒ buːl], 1815년 11월 2일~1864년 12월 8일)은 영국의 수학자, 논리학자이다. 논리대수인 불 대수를 창안해, 기호논리학 분야에
ko.wikipedia.org
자바스크립트에서 변수를 쓰기위해서 규칙이 있는데 변수의 이름 앞에 var 라는 표시를 해줘야 한다.
var name 이러면 인터프리터(스크립트의 번역기)가 이것은 메모리 저장공간으로 인식한다.
한번 var 를 적어줬다면 다음에는 그냥 name = 10 이렇게 사용하면 된다.
자바스크립트는 웹브라우저(크롬이나 엣지 등)에서 단축키 Ctrl + Shift + I 를 입력하면 나오는 콘솔창에서도 할 수 있다.
콘솔은 커맨드라인으로 입출력을 할수있는 곳이다. 옛날 컴퓨터들이 이 방식을 사용했다. (리눅스는 지금도,,,)
위에서는 var userName 이라는 변수를 만들고 잘 저장이 되어있는지 확인해봤다.
자바스크립트는 웹브라우저에서 즉각적으로 사용가능한 언어이다. 웹에 관련된 함수를 입력하니 바로 내용이 바뀐다.
콘솔에 출력하는 방법은 console.log() 메서드를 사용하는 것이다. 콘솔은 개발자 도구로써 내부 로직에 대한 확인을 위해 자주 사용된다. 크롬 브라우저에서 사용가능하니 어디서나 사용이 가능하다. document.write 에 대응하는 기본 출력문으로 볼 수 있다.
이처럼 자바스크립트의 변수는 누구나 손쉽게 사용할 수 있다.
