02_데이터타입
어휘 구조
1) 문장 : 세미콜론 (;)으로 문장이 종료됨. 세미콜론없이 문장 줄이 바뀔 시 자동으로 세미콜론 생성됨
2) 주석 : // 한줄 주석 /* */ 여러 줄 주석
기본 데이터 타입
문자열(string), 숫자(number), 불린(boolean)
변수와 상수
1) 변수 : 값의 변경이 가능. var 키워드를 사용하여 선언, 데이터 타입은 명시하지 않음.
2) 상수 : 값을 변경할 수 없음.
타입변환
1) 적합한 데이터 타입이 아닌 데이터가 함수의 매개 인자나 피 연산자로 오는 경우 자동으로 데이터 타입이 변환됨
2) 자동 변환이 불가능한 경우는 오류가 발생
자바스크립트 오류 확인 방법
인터넷 익스플로어의 도구 메뉴 -> 인터넷 옵션 메뉴 -> 고급 탭 -> ‘모든 스크립트 관련 오류 표시’ 체크 박스에 체크 -> 확인 버튼 클릭
실습예제
예제 02-1.html
기본 데이터 타입 형 변환과 '+'연산자를 이용한 문자열 이어붙이기 예제입니다.
.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
\n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">
<html>
<head>
<script type="text/javascript">
var result=(1==2);
result = result + "script";
result = result+ 30;
alert(result);
</script>
</head>
</html>
예제 결과
예제 02-2.html
parseInt() 함수의 예제입니다.
if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2859442,"name":"hihellloitland","title":"27","isDormancy":false,"nickName":"hihelllo","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://hihellloitland.tistory.com/33","DEFAULT_URL":"https://hihellloitland.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"};
window.T.entryInfo = {"entryId":33,"isAuthor":false,"categoryId":766226,"categoryLabel":"프로그래밍/Javascript"};
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};
window.TistoryBlog = {
basePath: "",
url: "https://hihellloitland.tistory.com",
tistoryUrl: "https://hihellloitland.tistory.com",
manageUrl: "https://hihellloitland.tistory.com/manage",
token: "caXyizH7wQiaSyErGKQCwPbigqARPVWd1puPqX0HSWlRfSbVa5mZwB4Tb+cSW/cb"
};
var servicePath = "";
var blogURL = "";
\n \n
\n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">
<html>
<head>
<script type="text/javascript">
var price = parseInt("100원짜리 초코우유")*parseInt("3개");
alert(price);
</script>
</head>
</html>
예제 결과
'프로그래밍 > Javascript' 카테고리의 다른 글
| 05_반복 (0) | 2018.02.27 |
|---|---|
| 04_의사결정 (0) | 2018.02.27 |
| 03_연산자 (0) | 2018.02.27 |
| 01_자바스크립트 개요 (0) | 2018.02.27 |
| Perfect! Javascript (0) | 2018.02.21 |