[5] JavaScript 무작정 따라하기2 - Using JavaScript on a Web Page

 

 

 

안녕하세요.

오늘은 'JavaScript 무작정 따라하기' 두번째 시간 입니다~ :)

 

자, 오늘 공부할 주제는 'Using JavaScript on a Web Page' 가 되겠습니다.

 

기본적인 웹페이지를 만들었다고 할 때,

이 페이지에서 동작하는 JavaScript 를 추가하고 싶다면 선택 가능한 두가지 옵션이 있는데요.

 

첫번째 방법은 작성된 코드(기본 웹페이지)에 아래와 같은 Script tag 를 추가해 넣는 방법이예요.

 

 

 

그리고, 두번째 방법으로는 '.js 확장자의 파일' 을 따로 만들고, 작성된 코드(기본 웹페이지)에서는

해당 파일을 불러오는 태그를 추가하는 방법이 있어요.

먼저 '.js 확장자의 파일' 을 만든 후 코드에 아래와 같은 태그를 추가 해줍니다.

 

 

 

src 이후에 나오는 " " 사이에 '.js 확장자의 파일' 이 있는 경로를 적어주면 되는군요.

여기까지는 특별히 어려운 내용이 없네요.

 

그런데, 위 코드들을 보며 눈치를 채셨겠지만, 주의할 사항은 <script> tag 는

반드시 닫아주어야 한다는 겁니다.

<script>로 시작해서 </script> 로 닫아주는 tag 사이에 내용이 없다해도,

마지막엔 꼭 </script> 로 닫아주어야 한다 는 것을 기억해둡시다.

 

추가로, 브라우저는 웹 페이지를 읽어들일 때,

위에서부터 아래로 즉, Top -> Bottom 의 순서로 페이지를 Rendering 합니다. (읽어들입니다.)

 

보통 JavaScript 를 작성할 때, 페이지의 상단에 작성하는 경우와 하단에 작성하는 경우의 두가지가 있는데,

이 경우 상단에 작성하는 것 보다는 하단에 작성하는 것을 권장합니다.

이유는 페이지를 Rendering 하는 방식 때문인데,

상단에 작성할 경우 해당 작성된 JavaScript 를 읽어들이기 위해 페이지 Rendering 작업이 잠시

멈춰지기 때문이라고 하네요.

코드 작성 시 참고 해두면 좋은 내용입니다.

 

 

Syntax Conventions (구문 표기규칙)

 

JavaScript 를 작성할 때에는 당연히 '문법' 이라고 할 수 있는 구문을 표기하는 규칙이 있어요.

'이렇게 써야해~' 라고 하는 일종의 약속이죠.

JavaScript 의 표기규칙은 매우 기초적이고 분명한데, 종종 '미묘한 차이가 있는 경우' 를 발견할 수 있다는군요.

하나의 일을 처리할 때, 한가지가 아닌 2개 이상의 방법이 있고, 시간이 지남에 따라 그 처리방법 수가 불어나는

특정 규칙을 갖고 있는 경우가 있다고 해요.

 

이게 무슨 말이지...? 어려우니, 조금 더 쉽게 이해할 수 있도록 예를 들어보죠.

저자가 가장 먼저 언급하는 그 규칙의 주인공은 '세미콜론' 입니다.   ';' <- 바로, 이렇게 생긴 기호죠.

 

종종 JavaScript 코드를 살펴보면, 라인의 마지막 끝나는 부분에 ';' 을 사용하는 경우와 사용하지 않는 경우가

그 좋은 예인데요.

우리는 세미콜론을 사용하는 경우와 하지 않는 경우 모두를 살펴볼 수 있어요.

즉, 일종의 '강제 사용' 이 아닌 '옵션' 같은 느낌이죠.

 

'사용하는 것이 맞다' 거나, '사용하지 않는 것이 맞다' 처럼 한가지가 정해지지 않은,

사용자의 선택에 맡긴다는 느낌이예요.

하지만, 이 책의 저자는 '반드시 세미콜론을 사용하길 권한다.' 라고 이야기하고 있습니다.

 

특별한 이유가 없지만, '사용하고 하지 않고' 라는 상황을 모두 허용할 경우,

가독성이나 정확한 규칙을 이해하는데에 혼선이 있을 수 있기 때문인 것 같습니다.

 

또 한가지, 공백(Tab 이나 Space 를 이용한 공백 입력) 에 대해서도 코드 작성을 통해 자신만의 기준을

정하는 것이 좋다는 내용이네요.

 

JavaScript 에서는 '부연 설명' 등을 하기 위한 주석을 허용하고 있습니다.

 

 

하나의 라인만 작성되었다면, "//" 이렇게 작성 후 내용을 써주면 되고,

여러 라인을 작성하여 범위로 묶고 싶을 경우에는

"/*   ~작성하고 싶은 내용~    */" 이런식으로 작성하면 됩니다.

 

 

변 수 (Variables)

 

코딩 중 특정한 시점의 값 혹은 계산된 결과 값들을 기억하고 싶을 때,

많은 프로그래밍 언어들에선 '변수' 라는 것을 지원하고 있죠.

웹 프로그래밍에서도 현재 글자의 색상이 파란색이라던가 배경 색상이 빨간색이라는 것 혹은,

수행하게 될 계산의 값이 33이라는 것 등등을 저장하고 싶을 거예요.

 

그럴 때, JavaScript 를 포함한 대부분의 프로그래밍 언어들은 변수를 지정하여 사용합니다.

 

자, 변수를 만드는 방법은 간단합니다.

하나의 변수를 만들고 싶다면, 우선 'var' 라는 키워드로 선언을 해주어야 합니다.

그리고, 이름을 지정해준 후, '=(equal)' 과 같은 기호로 무언가의 값과 같다고 설정해주면 됩니다.

하지만, 그렇다고 해서 꼭 '무언가의 값' 을 지정해줄 필요는 없습니다.

 

'var 이름 = 6' 과 같이 특정 값을 반드시 지정해줄 필요는 없다는 뜻인데,

예를 들어보죠.

 

 

이런 식으로,

변수가 정의되지 않은 값으로 셋팅되도록 (the variable will be set to undefined) 할 수 있습니다.

 

위 예제에서는 세가지 변수가 선언되었는데,

첫번째 변수인 twoPlusThree 에는 5라는 값이 저장되었습니다.

두번째 변수인 twoPlusTow 에는 2 + 2 의 결과값 (즉, 4) 이 저장됩니다.

'+' 는 '-' 나 '/' 혹은 '*' 와 같이 값들을 연산하는 많은 연산자들 중에 하나입니다.

앞으로 책의 후반부로 가면서 다양한 연산자를 만날 수 있을 예정이라고 하네요.

세번째 변수인 notYetDefined 에는 특정 값이 저장되어 있지 않습니다.

왜냐하면, 변수를 선언하여 변수가 생성되었지만, 특정한 값을 지정해주지 않았기 때문에 저장된 값은

없는 것이죠.

 

변수의 이름은 문자나 숫자, 밑줄을 모두 포함할 수 있어요.

다만, 변수 이름 선언 시 주의해야할 점은 '숫자로 시작할 수 없다는 점' 입니다.

그러니까, 'abc0' 은 변수이름으로 사용 가능하지만, '0abc' 는 사용 불가가 되는거죠.

 

일반적으로 대부분의 개발자들은 변수이름을 선언할 때 숫자를 사용하지 않고,

한곳에 모아쓰지 않는 낙타 표기법(낙타의 등 모양을 비유한 단어)을 사용하거나

밑줄 표기에 충실한(구분하기 쉬운) 변수 이름을 사용한다는 것을 참고하면 될 것 같아요.

 

저자의 팁에 따르면,

자바 스크립트 커뮤니티의 대부분은 낙타 표기법을 사용한다고 해요.

낙타 표기법의 규칙은 변수에서 첫번째 단어의 철자는 소문자로 시작해야하지만, 변수 내 다른 모든 단어들은 대문자로 시작하는 것이 기본 규칙입니다.

위 예제의 변수명을 보시면 이해하기 쉽겠네요.

twoPlusThree 나 twoPlusTwo 혹은 notYetDefined 의 단어들을 뜯어보면, 쉽게 이해할 수 있죠.

 

 

변수를 선언 후 '= 5' 와 같이 값을 지정해주었을 때,

이 값이 '영원히 고정된다' 를 의미하진 않아요. 5라는 값은 여러분이 원한다면,

언제든 변경해줄 수 있다는 의미죠.

그리고, 변수에 저장된 값을 변경하는 방법은 최초 변수 선언 시 사용하는 'var' 라는 키워드만 제외하고

그대로 사용해주면 됩니다. 'var' 라는 키워드는 최초 해당 변수를 선언해줄 때에만 사용해주면 되는거니까요.

 

즉, 이런 식으로 사용하시면 됩니다.

최초 'totalCost' 라는 변수를 선언 후 5라는 값을 저장하였고, 그 아랫줄에서 '5 + 3' 의 결과값 즉,

8이라는 값으로 totalCost 변수에 저장된 값을 변경하였습니다.

 

 

오늘은 요기까지 공부하겠습니다.

 

다음 시간에는

Types 에 대해 배워볼 예정입니다.

Type 즉, 형식은 변수에 저장된 값들의 형식을 의미 합니다.

숫자가 저장될 수도 있고, 문자나 문자열이 저장될 수 도 있습니다.

각각의 선언된 변수 내에 어떤 값들을 저장할 수 있는지와 사용방법에 대해선

다음 시간에 자세히 알아볼께요~ 수고하셨습니다. :)