-
[JavaScript] 기초비전공자 공부일기/:: WEB & Front-End 2020. 6. 16. 13:29
간단개요
자바스크립트는 동적인 페이지를 표현하기 위한 언어, 동적 제어를 위한 언어이다.
처음 나왔을 때는 각광받지 못했지만, 점점 웹이 무거워지고 동적인 표현들이 필요하게 되면서
최근 자바스크립트가 많이 필요하게 되었다.
자바와 자바스크립트는 이름이 비슷하지만 사실 전혀 다른 언어인데,
자바가 뜨니까 숟가락을 얹기 위해 자바스크립트라는 이름을 붙이게 되었다.
일단 자바는 컴파일 언어인 반면에 자바스크립트는 인터프리터 언어인 것부터 다르다.
* ECMA Script ---> 자바스크립트의 표준. 매년 표준안이 나온다. 그러나 업데이트가 빨리 되는편인 건 아님.
자바스크립트 활용 기초
HTML에서 스타일에 대한 제어를 위해서 <style> 이라는 태그를 사용했던 것처럼,
자바스크립트는 <script> 태그를 이용해서 표현구간을 선언할 수 있다.
(웹브라우저가 <html>구간은 html로 해석, <style>은 css로 해석, <script>는 자바스크립트로 해석)
<style type="text/css"> </style> <script type="text/javascript"></script><head> 또는 <body> 태그 안에서 <script> 태그를 이용할 수 있으며,
어차피 이 태그 자체가 javascript를 위한 태그이기 때문에,
<style> 태그와 마찬가지로 type="" 은 생략 가능하며,
그러나 어디에 선언되는지에 따라 차이가 있다.
스크립트 언어는 한 줄씩 해석하면서 일을 처리하기 때문에,
<head> 쪽에 있으면 <body>를 찍기 전에 읽어서 일을 처리
<body> 쪽에 있으면 내용을 읽으면서 수행하게 된다.
<script> document.write("넣고싶은 텍스트"); </script>document.write("")는 삽입하고 싶은 텍스트를 넣을 수 있는 함수이다.
(* 자바스크립트에서는 메소드라는 말을 쓰지 않고, 함수라고 말한다.)
** 참고 : 자바에서 중간중간 콘솔창에 찍어보는 것처럼, 자바스크립트에서는 alert(찍어보고싶은 내용) 으로 중간중간 원하는 내용을 확인한다. 브라우저에서 경고 메시지창을 띄우는 함수인데, 메시지창에 괄호 안 내용이 찍히므로, 찍어보고 싶은 내용을 확인하는 데 용이하다.
자바스크립트의 자료형
ㅁ origin type
number
string
boolean
undefined : 변수를 생성해놓고 초기화가 되어있지 않은 경우
null : 가리키는 객체가 없는 경우 / 따라서 typeof null : object 로 뜬다.
ㅁ 추가타입
object :
symbol :
자바스크립트는 변수를 선언할 때 모든 자료형을 [ var 변수명 = 값 ]형태로 쓴다.
이는 '느슨한 결합(loosing coupling)'이 가능하기 때문인데,
변수를 선언한 뒤 값의 형태에 따라서 변수의 자료형이 정해지는 형식이다.
심지어 var라는 키워드를 생략해도 변수 선언이 가능하다.
반대로 이미 선언된 변수에 새 값을 대입할 때 var를 또 써줘도 오류가 나지 않는다.
아래와 같은 형태도 가능하다.
age = 27; var age; alert('나이 : '+age);** prompt()는 새로운 창을 띄워 입력값을 받아올 수 있게 하는 함수이다. var a = prompt() 형식으로 변수에 받아온 값을 저장할 수 있다. 이 때 받아온 값은
취소를 누르면 null 이 반환된다.
var a = '' 또는 ""; // 문자열 (''과 ""의 차이가 없다) var b = 0; // 숫자 var c = false; // 불린 var d = null; // 널 var e = undefined; // 언디파인드 var f = []; // 배열 var g = {}; // 객체 var h = function() {}; // 함수오타(에러)가 나면 그 다음 문장부터 수행이 안 된다.
Number('123') : string -> number 형변환
변수.toString(123) : numer -> string 형변환
자바스크립트의 연산자
기본적으로 + - * / 같은 사칙연산자 등은 다른 언어와 같다.
그러나 자바스크립트의 비교연산자가 갖는 특징이 있다.
alert(1 == 1); // true alert("1" == "1"); // true alert(1 == "1"); // false,, 가 아니라 true라고 나온다. alert(1 != "1"); // 얘가 false로 나옴 alert(1 === "1"); // false --- "타입"까지 매칭해주는 연산자 alert(1 !== "1"); // true= 기호는 변수에 값을 대입하는 기호이며,
== 또는 != 기호가 비교연산자인 건 다른 언어와 동일하나, 숫자나 문자 자료형에 상관없이 비교한다.
=== 또는 !== 기호를 썼을 때 자료형까지 비교가 가능하다.
'비전공자 공부일기 > :: WEB & Front-End' 카테고리의 다른 글
[JavaScript] 자바스크립트의 함수 (0) 2020.06.16 [JavaScript] 호이스팅(Hoisting)과 var, let, const 변수 (0) 2020.06.16 [HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (3) (0) 2020.06.15 [HTML/CSS] CSS 기초 (0) 2020.06.12 [HTML/CSS] CSS의 이해(개요) (0) 2020.06.12