Javascript 자바스크립트 기초 개념 이해하기

이름에 자바가 들어가있지만 Java 언어와는 완전히 다른 자바스크립트에 대해 배웠습니다. 단순하게 딱 나눠서 말한다면 자바스크립트는 클라이언트 즉 프론트엔드에서 사용하는 것이고 자바는 서버, 즉 백엔드에서 쓰는 것입니다. 그렇다면 자바스크립트를 사용하는 이유가 무엇일까요?

 

그것은 바로 웹에 접근하기 위해, 우리가 열심히 HTML에서 만들었던 tag들에 접근하기 위해서 스크립트를 짜는 것입니다. 보조 프로그래밍 언어로서 컴파일을 하지 않아 빠르고 가볍다는 장점이 있습니다. 이것에서 더 나아가 경량화 시킨 것이 JQuery라고 보시면 됩니다.

 

이렇게만 봐서는 실질적으로 어디에 쓰이는지 잘 모르겠는데, 한 가지 예시를 들자면 우리가 홈페이지에 회원 가입을 할 때 필요한 정보들을 입력하는 단계가 있습니다. 이 과정에서 사용자가 빈 칸을 남겨두지는 않았는지, ID 글자수는 적절한지, 그리고 가끔 너무 까다로운 패스워드 생성 기준 역시 자바 스크립트로 만질 수 있습니다. 이 밖에도 CSS를 제어하거나 구현하고 타이머를 설정할 수도 있겠습니다. 

 

<p id = "practice">p tag</p>

<script type="text/javascript">

alert("Java Script 실행");

var v = document.getElementById("practice").innerHTML; //getter, p tag가 나옴

document.getElementById("practice").innerHTML = "P 태그"; //setter

</script>

먼저 p tag를 하나 만들어서 이걸 가지고 실습을 해보겠습니다. id는 practice로 줬습니다. <script type = "text/javascript"> 이 부분부터 </script> 전까지가 자바스크립트의 영역이라고 보면 됩니다. 주석 처리를 할 때는 자바와 동일하게 /* */ 이것도 가능하고 // 이것 역시 가능합니다. alert();는 팝업처럼 띄워지는 창이라고 보시면 됩니다. 예를 들어 위의 코드처럼 쓰면 아래와 같이 띵 하고 나타납니다. 

 

그 다음 보이는 것은 document.getElementById("practice").innerHTML;인데요, 영어를 그대로 해석해보면 document에서 Id 기준, 즉 practice라는 아이디를 갖고 있는 요소를 HTML안에서 찾아오라는 말이나 마찬가지입니다. 우리가 첫번째 줄에서 p tag를 하나 만들고 이것의 아이디를 practice로 줬었죠? 그러면 var v 는 p tag가 되게 됩니다. 제대로 가져오는지는 alert();를 활용해서 확인할 수 있습니다. 그 다음에 단순히 가져오는 것 뿐만 아니라 우리가 바꿔줄수도 있습니다. 마지막 줄에서 "P 태그"로 정의하고 , 즉 setter의 역할을 수행하게끔 하면 화면에는 p tag가 아닌 P 태그가 등장하게 됩니다. 지금까지는 화면상의 문자열을 받아온 것입니다. 그렇다면 객체를 받아오려면 어떻게 해야할까요?

 

<p id = "practice">p tag</p>
var obj = document.getElementById("practice");
document.getElementById("practice").innerHTML = "배가 고파요";
alert(obj.innerHTML);

마찬가지로 위에처럼 p 태그를 동일하게 주고 이번에는 obj로 받아보겠습니다. 그런 다음에 p tag라는 문장이 나오지 않고 '배가 고파요'가 나오게끔 만들어보겠습니다. 차이점이라면 alert(obj.innerHTML); 이것처럼 객체를 앞에 한 번 더 써줘야 한다는 점입니다. 

 

alert(obj.innerHTML);창을 띄워보면 위와 같은 결과가 출력됩니다. 

 

<var, let>

 

대표적인 변수 2가지를 이해하고 넘어가도록 하겠습니다. 바로 var과 let인데 요즘에는 let을 더 많이 사용합니다. 그래도 var가 어떻게 돌아가는지 정도는 이해하는 것이 좋겠습니다. 

 

int, double, String, char, Boolean, MyClass(object), Array[]= > var, let

 

우리가 자바에서 썼던 어딘지 익숙한 것들입니다. 이러한 자료형들은 var와 let으로 표현할 수 있습니다. var와 let의 두드러지는 차이점이라 하면 var는 선언 전에 초기화를 하지 않아도 

 

v = 1;            let l;

var v;             l = 2;

alert(v);          alert(l);

 

이런식으로도 쓸 수 있다는 점이고, let은 초기화를 하기 전에 선언을 무조건 해줘야 합니다. 그렇지 않으면 동작하지 않습니다. 

 

let strNum = "1" + 2 + 3 // 결과값은 123

let numStr = 3 + 2 + "1" //결과값은 51 

 

이는 왜 그런고하니 처음에 문자열이 나오면 나머지도 다 문자열로 취급되는 것이고 처음에 숫자가 나오면 마지막에 문자열로 "1"이 나오더라도, 제일 마지막에 나온 것이기 때문에 힘이 없어 앞에서 합산한 숫자와 붙여서 51이 되게 되는 것입니다.