피로그래밍 14기: day4 오후 <JAVASCRIPT 기본 문법>

 

 

0. 우선, 자바스크립트는 자바와 전혀 다른 언어이다. 흔히들 이 둘관의 관계를 인도와 인도네시아에 비유하곤 한다. 

생긴것도 굉장히 심플하다

1. 웹코딩을 하는데 자바스크립트가 왜 필요한가?

 

1. HTML과 CSS를 코드의 수정 없이 바꿔서 사용자에게 화면이 바뀌는 효과를 주기 위해서

2. 웹페이지에서의 이벤트(클릭, 스크롤 등)을 인식하고 입력받기 위해서

3. AJAX 기술을 이용한 웹 서버와의 통신

 

모두가 웹을 만들기 위해서 꼭 필요한 기능들이다. 

 

2. 자바스크립트를 어떻게 적용하는가?

 

기본적으로 .js파일을 새롭게 만들어서 html파일에 css를 적용시키는 것처럼 <script>태그로 감싸서 같이 넣어준다. 그러면 이제 html의 어디에 script태그를 넣어야 하는지에 대해 궁금증이 생길 수 있는데, ㄱ. 크게 head태그에 넣는 방법과, ㄴ. body태그의 맨 마지막에 넣는 방법이 있다. 

 

ㄱ. head태그에 넣는 방법은 그닥 추천하는 방법이 아니다. 모든 프로그래밍 언어가 그렇듯이, html도 컴퓨터가 맨 위부터 아래로 한 줄씩 내려가면서 코드를 해석한다. head-body의 순서로 이루어져 있는 html파일에서 만약 head에 script를 넣는다면, 페이지의 본 내용(body)부분이 보이기도 전에 script를 해석하기 때문에 비교적 시간이 오래걸릴 수 있다. 

 

ㄴ. body태그의 맨 밑에 넣는 방법이 우리가 사용할 방법이다. 위에서 소개한 head태그에 넣는 방법이 가지고 있는 단점을 보완할 수 있다. 하지만 이 역시 단점이 있는데, 만약 사용자가 페이지가 나옴과 동시에 어떤 이벤트를 기대한다면 이 이벤트의 실행이 늦어질 수 있다. 

 

3. 자바스크립트 기본 문법

 

여기서 굉장히 유용한 팁이 등장한다. 

 

∮  변수선언:

 

이전까지 우리가 프로그래밍을 할 때 변수를 선언하기 위해서 variance, variable의 약자로 var를 사용했다. 그런데 자바스크립트에서는 var보다는 const 와 let을 사용한다. 사실상 변수를 선언한다는 기본 개념은 같지만, 두 방식 모두 var에서 하지 못하는 굉장히 핵심적인 기능을 수행할 수 있다. 뭔지는 잘 기억이 안나는데, 아무튼 const나 let을 사용하자. 만약 변수를 선언했는데 변수의 내용이 바뀐다면 let, 바뀌지 않고 항상 일정한 값을 가진다면 const를 사용하면 된다. 

 

자바스크립트는 변수의 타입이 정해져 있지 않다.

let first = 5;를 한 다음에 first = 'five';라고 다시 선언을 해도 전혀 문제가 없다. 

 

∮  연산자:

 

파이썬에서는 불가능했던 ++을 다시 사용할 수 있다. +를 사용해서 문자열 두 개를 이어붙일수도 있다.

 

|| or, && and를 사용할 수 있다.

 

==와 ===의 차이도 있다. ==를 두 번  사용하면 값이 같은지만을 비교하고, ===를 세 번 사용하면 값과 타입이 모두 같은지를 비교한다.

예를 들면, 5 == '5', 5 !== '5'가 된다. 

 

삼항 연사자를 사용할 수 있다. 

let 결과 = 조건 ? '값1' : '값2' 와 같이 식을 사용하면 조건의 참이면 값1이, 거짓이면 값2가 결과에 대입된다. 

 

∮  반복문:

 

c언어와 같이 근본있는 for문을 사용할 수 있다. for(i=0; i < 10; i++){ ... } 

 

∮  배열:

 

배열은 자바스크립트의 굉장히 큰 특징 중 하나이다. 내 맘대로 할 수 있는 기능이라고 할 수 있다.

 

let arr = new Array()로 선언해서 새로운 배열을 만든 다음에, 

arr[0] = 0

arr[1] = 1 ... 와 같은 코드를 이용해서 배열에 요소를 채워넣을 수 있다. 

 

위와 비슷하게, 배열의 요소들의 타입이 모두 같을 필요는 없다.

arr[2] = 'two'

arr[3] = True ... 를 넣어도 된다. 

 

∮  객체 기반 언어:

 

자바스크립트는 객체 기반의 언어라고 표현할 수 있다. 객체(object)는 자바스크립트의 함수, 배열, 표현식등을 모두 통칭하는데, 정말 간단하게 { }를 사용해서 이 안에 속성을 넣으면 객체에 해당 속성이 추가된다. 

 

∮  메시지 띄우기:

 

이것 역시 자바스크립트의 장점이라고 볼 수 있는데, 이벤트를 콘솔창에서만 입력받는게 아니라, 윈도우 페이지에서 좀 더 직관적으로 사용자와 상호작용할 수 있다. 

alert, prompt, confirm을 사용하면 위 기능을 구현할 수 있다. 

 

alert

사용자에게 정보를 전달만 하는 함수

 

prompt

사용자에게 값을 받을 수 있는 함수

 

confirm

사용자에게 True/False를 받을 수 있는 함수

---

바로 다음의, 자바스크립트 응용으로 이어진다. 

피로그래밍 14기: day5 오전 <js-끝말잇기, 숫자야구=""></js-끝말잇기,>