2016. 11. 17. (Thu)
L15JavaScript
L01Variable
HTML5의 데이터타입에 대해 알아보자.
ex) L01Variable.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JavaScript로 변수를 선언해보자</h1>
<h2>script 선언법: <script type="text/javascript"></script></h2>
<h2>script 선언법(html5): <script></script></h2>
<hr/>
<script>
//script는 기본데이터 타입이 없다.
//심지어 기본데이터 타입을 제외한 다른 클래스도 var로 받을 수 있다.
var numVar = 10;
document.write("<h3>numVar: "+numVar+"<h3>");
document.write("<h3> numVar x 5.33 : "+(numVar*5.33)+"<h3>");
document.write("<h3> typeof numVar : "+typeof numVar+"<h3>");
document.write("<hr/>");
//script는 대체로 모든 수의 데이터 타입을 number로 지정한다.
var stringVar = "scriptLesson";
document.write("<h3>stringVar: "+stringVar+"<h3>");
document.write("<h3>stringVar+100 : "+(stringVar+100)+"<h3>");
document.write("<h3>typeof stringVar : "+typeof stringVar+"<h3>");
document.write("<hr/>");
var charVar = 'a';
document.write("<h3>charVar: "+charVar+"<h3>");
document.write("<h3>typeof charVar : "+typeof charVar+"<h3>");
document.write("<hr/>");
//script 언어는 대체로 character와 string을 구분하지 않는다. 때문에 " 와 '를 같이 사용한다.
var nullVar = null;
document.write("<h3>nullVar : "+nullVar+"<h3>");
document.write("<h3>typeof nullVar : "+typeof nullVar+"<h3>");
document.write("<h3>Boolean(nullVar) : "+(Boolean(nullVar))+"<h3>");
document.write("<hr/>");
/* null == object 데이터 -> null이라는 데이터가 존재함 null과 비슷하지만 빈값은 아닌 상태
모든 프로그래밍 언어에서 undefined와 null 상태를 구분할 수 있어야 한다.
예) java에서 undefined된 변수는 return 할 수 없다. 하지만 null은 할 수 있다.*/
var undefinedVar;
document.write("<h3>undefinedVar : "+undefinedVar+"<h3>");
document.write("<h3>typeof undefinedVar : "+typeof undefinedVar+"<h3>");
document.write("<h3>Boolean(undefinedVar) : "+(Boolean(undefinedVar))+"<h3>");
document.write("<hr/>");
/* undefined 진짜 null인 상태 빈값*/
document.write("<h3>nullVar == undefinedVar : "+(nullVar == undefinedVar)+"<h3>"); //융통성이 있는 비교
document.write("<h3>nullVar === undefinedVar : "+(nullVar === undefinedVar)+"<h3>"); //융통성이 없는 비교
document.write("<hr/>");
document.write("<h3>2 == '2' : "+(2 == '2')+"<h3>"); //융통성이 있는 비교
document.write("<h3>2 === '2' : "+(2 === '2')+"<h3>"); //융통성이 없는 비교
document.write("<hr/>");
document.write("<h3>2 > '12' : "+(2 > '12')+"<h3>"); //숫자와 문자 비교
document.write("<h3>'2' > '12' : "+('2' > '12')+"<h3>"); //문자와 문자 비교
document.write("<hr/>");
document.write("<h3> Boolean(0) :"+( Boolean(0))+"</h3>");
document.write("<h3> Boolean(1) :"+( Boolean(1))+"</h3>");
document.write("<h3> Boolean('') :"+( Boolean(''))+"</h3>");
document.write("<h3> Boolean('0') :"+( Boolean('0'))+"</h3>");
document.write("<h3> Boolean('a') :"+( Boolean('a'))+"</h3>");
document.write("<hr/>");
//문자열에 어떤 값이든 있으면 true
var test ='';
//test의 상태가 '' or null or undefined or 0 인지 알아야할 때! Boolean을 사용
//Boolean(test)가 false일때 상태를 처리하면 된다.
var now = Date(); //Date now = Date(); new 연산자를 사용하지 않는다.
//java의 Date()와는 차이가 있음.
document.write("<h3> now :"+(now)+"</h3>");
document.write("<h3> new Date() :"+(new Date())+"</h3>");
document.write("<h3> new 생성자를 사용하지 않는 것을 권장 :"+(Date())+"</h3>");
document.write("<hr/>");
document.write("<h1>JavaScript에서 중요한 클래스 Array</h1>");
var dataType = ["number","string","boolean","Array","JSON"];
document.write("<h3> dataType :"+(dataType)+"</h3>");
document.write("<h3> typeof dataType :"+(typeof dataType)+"</h3>");
document.write("<h3> Array.isArray(dataType) :"+(Array.isArray(dataType))+"</h3>");
//Java에서의 Array와 다르다. Array클래스이고, 마치 List처럼 사용한다.
var cars = Array("Saab","Volvo","BMW");
document.write("<h3> cars :"+(cars)+"</h3>");
var cars2 = new Array("Saab","Volvo","BMW");
document.write("<h3> cars2 :"+(cars2)+"</h3>");
// Array는 선언법이 3개인데 이 중에 []만 사용하면 된다. 나머지는 성능을 떨어뜨린다.
// JavaScript도 객체지향이라서 new 연산자를 지원한다. 하지만 사용하지 않기를 권장한다.
document.write("<hr/>");
document.write("<h3> 'ABC' == new String('ABC') :"+('ABC' == new String('ABC'))+" 문자열 비교</h3>");
document.write("<h3> 'ABC' === new String('ABC') :"+('ABC' === new String('ABC'))+" 주소값 비교</h3>");
document.write("<h3> new String('ABC') == new String('ABC') :"+(new String('ABC') == new String('ABC'))+"</h3>");
document.write("<hr/>");
//new 연산자 로 생성한 객체끼리 비교할때는 융통성있는 (==)이 소용없다.
document.write("<h1>JSON(Java Script에서 Object Notation)</h1>");
//List, Map, Vector 사용하지 않고 Array와 JSON을 사용하는 이유!
//List, Map -> Class(java.util -> collection framework) -> 객체로 사용
//Array, JSON -> 문자열 -> 문자 그대로 사용 -> 데이터통신시 객체보다 문자가 빠르다.
//객체 << XML << 문자(JSON) 속도비교!
var person = {
firstName:"Jhon",
lastName:"Doe",
age:50,
eyeColor:"blue"
}; //추천하는 정렬방식
document.write("<h3> person :"+(person)+"</h3>");
document.write("<h3> typeof person :"+(typeof person)+"</h3>");
document.write("<h3> person['firstName'] :"+(person['firstName'])+"</h3>");
document.write("<h3> person.firstName :"+(person.firstName)+"</h3>");
//JSON {Key(String) : value(Object)}
//KEY는 ""을 제외
</script>
</body>
</html>
※출력내용
'IT story > JSP' 카테고리의 다른 글
| [JSP 강의] L15JavaScript (L03Number.html) (0) | 2016.11.17 |
|---|---|
| [JSP 강의] L15JavaScript (L02String.html) (0) | 2016.11.17 |
| [JSP 강의] L14Model2 (0) | 2016.11.17 |
| [JSP 강의] L13JSTL (0) | 2016.11.17 |
| [Jsp 강의] L12JDBC (0) | 2016.10.28 |