JavaScript Reference v1.0 </doc>
sojinkim.co.kr
sojinkim.co.kr
자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다.
HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Javascript 사용방법</title>
<!-- 외부 파일로 로드하는 방법-->
<script type="text/javascript" src="javascript.js"></script>
<!-- script 태그 사이에 기술하는 방법-->
<script type="text/javascript" src="javascript.js">
document.write("hello";)
</script>
</head>
<body>
<!-- 태그에 직접 기술하는 방법 -->
<input type="button" onclick="alert('hello')" value="hello">
</body>
</html>
일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 표시입니다.
자바스크립트에서는 의미를 가진 단어들이 있기 때문에 사용자가 임의로 사용할 수 없는 단어들이 있습니다.
다음의 키워드는 자바스크립트에서 사용하기 때문에 사용자가 임의로 사용 할 수 없습니다.
break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
while
with
class
enum
export
extends
import
super
implements
interface
let
package
private
protexted
public
static
yield
사용자는 임의의 식별자를 만들 수 있으며, 다음의 사항을 지켜주어야 합니다.
두 가지 이상의 단어를 조합할 때에는 다음과 같은 방법을 사용합니다.
문자열을 구분하기 위해서는 작은 따옴표 또는 큰 따옴표를 사용합니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수</title>
<script>
var x = 10; //변수 x에 10(숫자)를 저장함
var y = 20; //변수 y에 20(숫자)를 저장함
var z = "javascript" //변수 z에 javascript(문자)를 저장함
y = 100; //변수 y에 값이 20 -> 100 변경
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
document.write("<br>");
document.write(x+y);
document.write("<br>");
document.write(x*y);
</script>
</head>
<body>
</body>
</html>
변수는 사용 가능 범위에 따라 4가지로 구분 될 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>지역변수/전역변수</title>
<script>
var x = 100; //변수(전역) x에 100을 저장
var y = 200; //변수(전역) y에 200을 저장
function area(){
var x = 300; //변수(지역) x에 300을 저장
var z = 500; //변수(지역) z에 500을 저장
y = 600; //변수(전역) y에 값을 200에서 600으로 변경
document.write("area 함수 안");
document.write("<br>");
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
document.write("<br><br>");
}
area(); //함수를 실행
document.write("area 함수 밖");
document.write("<br>");
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
</script>
</head>
<body>
</body>
</html>
변수는 식별자로만 구분하기 때문에 어떠한 값인지 구분해야 하며, 숫자, 문자열, 불린, 함수, 객체, underfined으로 나눌 수 있습니다.
자료형 | 설명 |
---|---|
숫자(Number) | 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다. |
문자열(String) | "문자","String" 처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다. |
논리(Boolean) | 참과 거짓을 나타내는 자료형이며, 오직 true ,false 로만 표현을 합니다. |
특수값(null) | null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화 할 때 사용합니다. |
특수값(undefined) | 변수 선언시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다. |
배열(array) | 배열 형태의 자료형도 자바스크립에서 사용 할 수 있습니다. |
객체(object) | 객체 형태의 자료형도 자바스크립에서 사용 할 수 있습니다. |
함수(Function) | Function은 자바스크립트를 구성하는 기본 단위이며, 자료형으로 변수에 넣을 수 있습니다. |
배열은 여러개의 데이터를 순차적으로 저장하는 저장소 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열</title>
<script>
//배열 선언
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;
document.write(arr1[0], "<br>");
document.write(arr1[1], "<br>");
document.write(arr1[1] + arr1[0], "<br><br>");
//배열 선언과 동시에 초기화하기
var arr2 = new Array(100,200,300);
document.write(arr2[0], "<br>");
document.write(arr2[1], "<br>");
document.write(arr2[2], "<br>");
document.write(arr2[0] * arr2[1] * arr2[2], "<br><br>");
//배열의 크기 구하기
var arr3 = new Array(100,200,300,400,500);
document.write(arr3.length, "<br><br>");
//for문을 이용한 배열의 합 구하기
var arr4 = new Array(100,200,300,400,500,600,700,800,900,1000);
var sum = 0;
for(var i = 0; i<arr4.length; i++){
sum = sum + arr4[i];
// 100 = 0 + 100
// 300 = 100 + 200
// 600 = 300 + 300
// 1000 = 300 + 400
// 1500 = 300 + 500
}
document.write(sum);
</script>
</head>
<body>
</body>
</html>
연산자 | 예시 | 설명 |
---|---|---|
+ |
x+y | 더하기 |
- |
x-y | 빼기 |
* |
x*y | 곱하기 |
/ |
x/y | 나누기 |
% |
x%y | 나머지 |
연산자 | 예시 | 설명 |
---|---|---|
+= |
x = x + 10 | x+=10 |
-= |
x = x - 10 | x-=10 |
*= |
x = x * 10 | x*=10 |
/= |
x = x / 10 | x/=10 |
연산자 | 예시 | 설명 |
---|---|---|
++ |
x = x + 1 | x++ or ++x |
-- |
x = x - 1 | x-- or --x |
연산자 | 예시 | 설명 |
---|---|---|
== |
x == y | 좌변과 우변의 값이 같은 경우 |
=== |
x === y | 좌변과 우변의 값이 같거나 데이터형도 같은 경우 true 반환 |
!= |
x != y | 좌변과 우변의 값이 같지 않은 경우 true 반환 |
!== |
x !== y | 좌변과 우변의 값이 같지 않은 경우, 또는 데이터형이 다른 경우 true 반환 |
< |
x < y | 좌변과 우변보다 클 경우 true 반환 |
> |
x &g; y | 좌변과 우변보다 작을 경우 true 반환 |
<= |
x < y | 좌변과 우변보다 크거나 같을 경우 true 반환 |
>= |
x > y | 좌변과 우변보다 작거나 같을 경우 true 반환 |
연산자 | 예시 | 설명 |
---|---|---|
&& |
x && y | (AND)둘 다 true인 경우 true 반환 |
|| |
x || y | (OR)둘 중 하나 이상이 true인 경우 true 반환 |
! |
!x | (NOT) 식이 false인 경우 True |
우선순위 | 연산자 | 설명 |
---|---|---|
1 | () [] |
괄호/대괄호 |
2 | ! ~ ++ -- |
부정/증감연산자 |
3 | * / % |
곱셈/나눔셈 연산자 |
4 | + - |
덧셈/뺄셈 연산자 |
5 | << >> >>> |
비트 단위의 시프트 연산자 |
6 | > > >= >= |
관계 연산자 |
7 | == != === !== |
관계 연산자 |
8 | & |
비트 단위 논니 곱 연산자 |
9 | | |
비트 단위 논니 부정 연산자 |
10 | ^ |
비트 단위 논니 합 연산자 |
11 | && |
논리 곱 연산자 |
12 | || |
논리 합 연산자 |
13 | ?: |
조건부 연산자 |
14 | = += -= *= /= %= <<= >>= >>>= &= ^= |= |
대입/할당 연산자 |
15 | , |
쉼표 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>if문</title>
<script>
var x = 100;
if(x % 2 == 0) {
document.write("짝수");
}
var vlaue = window.prompt("숫자를 입력해주세요.");
if(value % 2 == 0){
alert("당신이 입력한 숫자는 짝수입니다.");
}
</script>
</head>
<body>
</body>
</html>
두개의 값을 비교하여 코드를 별개로 실행합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if~else</title>
<script>
var x = 100;
if(x % 2 == 0){
document.write("짝수입니다.");
} else {
document.write("홀수입니다.");
}
var value = window.prompt("숫자를 입력해주세요");
if(value % 2 == 0){
alert("짝수입니다.");
} else {
alert("홀수입니다.");
}
var useID = window.prompt("아이디를 입력하세요");
var usePW = window.prompt("패스워드를 입력하세요");
if(useID == "webstoryboy" && usePW == "123456"){
alert("환영합니다.");
} else {
alert("아이디 또는 비밀번호가 틀렸습니다.");
}
</script>
</head>
<body>
</body>
</html>
여러가지 조건에 따라 조건문을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if~else</title>
<script>
var x = 100;
if(x == 90){
document.write("x의 숫자는 90입니다.");
} else if(x == 92) {
document.write("x의 숫자는 92입니다.");
} else if(x == 93) {
document.write("x의 숫자는 93입니다.");
} else if(x == 94) {
document.write("x의 숫자는 94입니다.");
} else if(x == 95) {
document.write("x의 숫자는 95입니다.");
} else if(x == 96) {
document.write("x의 숫자는 96입니다.");
} else if(x == 97) {
document.write("x의 숫자는 97입니다.");
} else if(x == 98) {
document.write("x의 숫자는 98입니다.");
} else if(x == 99) {
document.write("x의 숫자는 99입니다.");
} else if(x == 100) {
document.write("x의 숫자를 모르겠습니다.");
}
var userID = window.prompt("아이디를 입력해주세요");
var userPW = window.prompt("패스워드를 입력해주세요");
if( userID == "webstoryboy" && userPW == "1234") {
alert ("환영합니다");
} else if ( userID == "webstoryboy" ){
alert ("패스워드가 틀렸습니다.");
} else {
alert ("틀렸습니다.");
}
</script>
</head>
<body>
</body>
</html>
해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>switch</title>
<script>
var color = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 좋아하는 색을 적으세요.");
switch(color){
case "빨강":
document.write("당신은 빨강처럼 열정적인 사람입니다.");
break;
case "파랑":
document.write("당신은 파랑처럼 열정적인 사람입니다.");
break;
case "노랑":
document.write("당신은 노랑처럼 열정적인 사람입니다.");
break;
case "검정":
document.write("당신은 검정처럼 열정적인 사람입니다.");
break;
case "흰색":
document.write("당신은 흰색처럼 열정적인 사람입니다.");
break;
default :
document.write("당신은 색을 볼 줄 모르는군요?");
break;
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>switch2</title>
<script>
var site =window.prompt("네이버, 다음, 구글, 네이트 중 자주 가는 사이트는?");
var url;
switch(site){
case "네이버":
url ="www.naver.com";
break;
case "다음":
url ="www.daum.net";
break;
case "구글":
url ="www.google.co.kr";
break;
case "네이트":
url ="www.nate.com";
break;
default :
document.write("그런 사이트는 없습니다.");
break;
}
if (url) {
location.href="http://"+ url;
}
</script>
</head>
<body>
</body>
</html>
조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>조건부 연산자</title>
<script>
//if ~ else
var value = window.prompt("숫자를 입력해주세요");
value = parseInt(value); //숫자로 인식할 수 있도록 형 변환
if(value % 2 == 0) {
alert("짝수입니다.");
} else {
alert("홀수입니다.");
}
//조건 연산자
var value2 = window.prompt("숫자를 입력해주세요");
value2 = parseInt(value2);
(value2 % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
</script>
</head>
<body>
</body>
</html>
반복되는 부분을 실행할 때 사용하는 제어문입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while문</title>
<script>
var count = 0;
while(true){
count++;
document.write(count + " 번째 실행");
document.write("<br>");
if(count > 999){
break;
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while문</title>
<script>
//100보다 작은 숫자에서 4의 배수 6의 배수 출력하기
//초기값 설정
var i = 1;
while(i<=100) { //i가 100보다 작거나 같을 때 까지 반복 실행합니다.
if(i%4 == 0 && i%6 ==0){
document.write(i,"<br>");
}
i++;
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
<script>
//100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
var i = 100;
while(i>0){
if(i%2 == 0){
document.write("<span style ='color:blue;'>"+ i +"</span>","<br>");
} else {
document.write("<span style ='color:red;'>"+ i +"</span>","<br>");
}
i--;
}
</script>
</head>
<body>
</body>
</html>
While 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 여부를 결정합니다. 하지만 do while무은 반드시 한 번은 실행문을 실행하고 조건식을 검사합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
<script>
//100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
var i = 100;
while(i>0){
if(i%2 == 0){
document.write("<span style ='color:blue;'>"+ i +"</span>","<br>");
} else {
document.write("<span style ='color:red;'>"+ i +"</span>","<br>");
}
i--;
}
</script>
</head>
<body>
</body>
</html>
for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.
0~100까지 반복을 한다면, 다음과 같이 표현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for문</title>
<script>
//0~100까지 출력
// for(var i=0; i<=100; i++){
// document.write("숫자"+i,"<br>");
// }
//1~100까지 출력
// for(var i=1; i<=100; i++){
// document.write("숫자"+i,"<br>");
// }
//1~100까지 중에서 짝수만 출력
for(var i=2; i<=100; i+=2){
document.write("숫자"+i,"<br>");
}
//1~100까지 중에서 홀수만 출력
for(var i=1; i<=100; i+=2){
document.write("숫자"+i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for문</title>
<script>
//1~100까지 출력
for(var i=1; i<=100; i++){
//5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력하기
if(i%5 == 0 && i%7!==0){ //5의 배수이고 7의 배수가 아닌 경우
document.write("<span style='color:blue'>"+i+"</span>","<br>");
} else if(i%7 == 0 && i%5!==0){ //7의 배수이고 5의 배수가 아닌 경우
document.write("<span style='color:red'>"+i+"</span>","<br>");
} else if(i%5 == 0 && i%7 == 0){ //7의 배수이고 5의 배수인 경우
document.write("<span style='color:black'>"+i+"</span>","<br>");
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for문을 이용한 배열의 합 구하기</title>
<script>
var arr = new Array (100, 200, 300, 400, 500, 600, 700, 800,);
var sum = 0;
//8 = i<8
for(var i=0; i<arr.length; i++){
sum = sum + arr[i];
// 0 = 0 + arr[0]=(100);
// 100 = 100 + arr[1]=(200);
// 300 = 300 + arr[2]=(300);
// 600 = 600 + arr[3]=(400);
// 1000 = 1000 + arr[4]=(500);
}
document.write(sum);
</script>
</head>
<body>
</body>
</html>
for문 안에 for문이 있는 형태입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>다중 for문</title>
<script>
for(var i=0; i<8; i++){
for(var j=0; j<8; j++){
var num1 = i + 2;
var num2 = j + 1;
var sum = num1 * num2;
document.write(num1 + "X" + num2 + "=" + sum);
document.write("<br>");
}
}
//
// var i * j = sum
// 2 * 1 =2 3 * 1 =3
// 2 * 2 =4 3 * 2 =6
// 2 * 3 =6
//
// i = 2,3,4,5,6,7,8,9
// j = 1,2,3,4,5,6,7,8,9
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for문을 이용한 테이블 만들기</title>
<script>
var num = 1;
var t = "<table border='1'>"; //테이블 시작태그
for(var i=1; i<=10; i ++){
t += "<tr>";
for(var k=1; k<=10; k++){
t+= "<td>" + num + "</td>";
num++;
}
t +="</td>";
}
t += "</table>";
document.write(t);
</script>
</head>
<body>
<!--
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
-->
</body>
</html>
break문 Continue문은 반복문을 제어하는 명령어 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>break문 Continue</title>
<script>
var count = 0;
while(true){
count++;
if(count == 3){
continue;
}
document.write(count,"<br>");
if(count > 9){
break;
}
}
</script>
</head>
<body>
</body>
</html>
함수는 하나의 실행문을 저장하여 사용할 수 있습니다.
함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>함수를 사용하는 이유</title>
<script>
//1~100까지 출력
// for(var i=1; i<=100; i++){
// document.write(+i,".","블랙입니다.","<br>");
// }
//
// for(var i=1; i<=100;i++){
// document.write(i +".블랙입니다.");
// document.write("<br><br>");
// }
// for(var i=1; i<=100;i++){
// document.write(i +".블루입니다.");
// document.write("<br><br>");
// }
// for(var i=1; i<=100;i++){
// document.write(i +".레드입니다.");
// document.write("<br><br>");
// }
function Show(name){
for(var i=1;i<=100;i++){
document.write(i +"."+ name +"입니다.");
document.write("<br>");
}
}
Show ("레드");
Show ("블루");
Show ("블랙");
</script>
<!--
//for문으로 다음과 같이 출력하기
1.블랙입니다. 1.블루입니다.
2.블랙입니다. 2.블루입니다.
3.블랙입니다.
....
100.블랙입니다.
-->
</head>
<body>
</body>
</html>
함수는 사용 형태에 따라 익명함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분이 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>선언적 함수</title>
<script>
//선언적 함수 : 일반적인 함수의 형태이며, 함수 이름을 설정하고 함수를 호출 해야 합니다.
function fun1(){
document.write("fun1이 실행되었습니다.");
document.write("<br>");
}
fun1();
fun1();
//익명 함수 : 변수 안에 함수가 들어간 형태로 함수의 이름이 존재하지 않아 익명함수라고 합니다.
var fun2 = function() {
document.write("fun2이 실행되었습니다.");
document.write("<br>");
}
fun2();
fun2();
//매개 변수가 있는 함수 : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우.
function fun3(name){
document.write(name+"이 실행되었습니다.");
document.write("<br>");
}
fun3("fun3");
fun3("fun3");
//리턴값이 있는 함수
function fun4(){
var now = new Date(); //현재 시간을 구해오는 객체 데이터
var hour = now.getHours(); //구해온 시간에서 시(hour)를 변수에 할당
return hour;
}
var value= fun4();
document.write(value)
</script>
</head>
<body>
</body>
</html>
객체는 데이터와 연산 작업을 담고 있는 기본적인 자바스크립트 기능입니다.
객체가 가지고 있는 기본 상태 값을 속성이라 하고 객체가 할 수 있는 행동들을 메소드 라고 합니다. 객체는 내장 객체, 브라우저 객체, 문서 객체로 나누어집니다.
문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 좁은 의미로는 document 객체와 관련된 객체의 집합입니다.
브라우저 객체 모델(Browser Object Model)은 웹 브라우저와 관련된 집합을 의미합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>브라우저 위치</title>
<script>
var x = window.screenX;
var y = window.screenY;
alert("현재 브라우저의 좌표 값 : " + x + ","+ y);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>콘텐츠 영역 크기</title>
<script>
var x = window.innerWidth;
var y = window.innerHeight;
alert("현재 콘텐츠 영역의 크기 값 : " + x + ","+ y);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이머 설정</title>
<script>
//setInterval() : 지정한 시간마다 함수를 실행 <--> ClearInterval()
//setTimeOut() : 지정한 시간 후 한번만 실행 <--> CkearTimeOut()
function func(){
document.write("setInterval이 실행되었습니다.");
document.write("<br>");
}
setInterval(func,1000);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>브라우저 속성 알아내기</title>
<script>
document.write("appCodeName: "+navigator.appCodeName,"<br />");
document.write("appName: "+navigator.appName,"<br />");
document.write("appVersion: "+navigator.appVersion,"<br />");
document.write("language: "+navigator.language,"<br />");
document.write("product: "+navigator.product,"<br />");
document.write("platform: "+navigator.platform,"<br />");
document.write("userAgent: "+navigator.userAgent,"<br />");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
function info1(){
/* 브라우저 및 운영체제 종합정보를 반환후 모두 소문자로 바꿉니다.*/
var os=navigator.userAgent.toLowerCase();
/*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
var info_wrap=document.getElementById("info_wrap");
/*navigator객체를 이용해 반환받은 정보에 다음과 같은 문자가 포함되어 있으면 운영체제 명을 지정한 요소 사이에 텍스트로 출력합니다.*/
if(os.indexOf('windows')>=0){
info_wrap.innerHTML="윈도우";
}else if(os.indexOf('macintosh')>=0){
info_wrap.innerHTML="메킨토시";
}else if(os.indexOf('iphone')>=0){
info_wrap.innerHTML="아이폰";
}else if(os.indexOf('android')>=0){
info_wrap.innerHTML="안드로이드";
}
}
function info2(){
/*스크린 너비와 높이 값을 가져와 각각의 변수에 저장합니다.*/
var sc_w=screen.width;
var sc_h=screen.height;
/*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
var info_wrap=document.getElementById("info_wrap");
/*스크린 너비와 높이 값을 지정한 요소에 텍스트로 출력합니다. */
info_wrap.innerHTML=sc_w+"X"+sc_h;
//3초 후에 스크린 정보를 지웁니다.
//setTimeout("info_wrap.innerHTML=''",3000);
}
</script>
</head>
<body>
<h1>운영체제 및 스크린 정보</h1>
<p id="info_wrap"></p>
<button onclick="info1();">운영체제 정보</button> <br />
<button onclick="info2();">스크린 정보</button> <br />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>화면 크기 알아내기</title>
<script>
document.write("width:" + screen.width,"<br>");
document.write("height:" + screen.height,"<br>");
document.write("availWidth:" + screen.availWidth,"<br>");
document.write("availHeight:" + screen.availHeight,"<br>");
document.write("colorDepth:" + screen.colorDepth,"<br>");
</script>
</head>
<body>
</body>
</html>
자바스크립트 자체에서 제공하는 객체입니다.