JavaScript Reference v1.0 </doc>
hyeyeon89.dothome.co.kr
자바스크립트
자바스크립트는(JavaScript)는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다.
HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다.
자바스크립트 언어의 특징
- 자바스크립트는 인터프린터 언어입니다.
자바스크립트 코드는 작성된 순서대로 구문을 해석합니다. 만약에 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다. - 자바스크립트는 클라이언트 스크립트 언어입니다.
자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 PHP, JSP, ASP 언어와 비교됩니다. - 자바스크립트는 객체 기반 언어입니다.
자바스크립트는 객체를 기반으로 한 언어이며, 다양한 기능들과 종류들이 있습니다. - 자바스크립트는 오픈소스 언어입니다.
자바스크립트는 소스를 숨길 수 없는 오픈 소스입니다. - 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다. 이러한 자바스크립트 라이브러리 언어들을 통해 제이쿼리 뿐만 아니라 센차터피, 제이쿼리 모바일, node js 등 많은 언어를 사용할 수 있습니다.
자바스크립트 사용방법
1. 외부 파일로 로드하는 방법sample01
2. 태그 사이에 기술하는 방법
3. 태그에 직접 기술하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
<!-- 외부 파일로 로딩하는 방법-->
<script type="text/javascript" src="javascript.js"></script>
<!-- 스크립트 태그 사이에 기술하는 방법 -->
<script type="text/javascript">
document.write("hello world");
</script>
</head>
<body>
<!-- 태그에 직접 기술하는 방법 -->
<input type="button" onclick="alert('hello javascript')" 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
사용자는 임의의 식별자를 만들 수 있으며, 다음의 사항을 지켜주어야 합니다.
- 숫자로 시작하면 안됨(첫글자).
- 공백을 주면 안됨.
- 특수기호를 사용하면 안됨(-, _ 가능).
- 키워드를 사용하면 안됨.
두 가지 이상의 단어를 조합할 때는 다음과 같은 방법을 사용합니다.
- 언더스코어 노테이션 : text_top과 같이 중간에 '_'를 사용합니다.
- 카멜 노테이션 : textTop과 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
- Pascal : TextTop과 같이 모든 단어의 첫 글자를 대문자로 사용합니다.
변수
변수는하나의 데이터를 저장하는 저장소입니다.
var 변수명=값;
변수sample02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample2</title>
<script type="text/javascript">
var x = 10; //변수 x에 10(숫자)를 저장함
var y = 20; //변수 y에 20(숫자)를 저장함
var z = "javascript"; //변수 z에 javascript(문자)를 저장함
y = 200; //변수 y의 값이 20 -> 200으로 변경
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);
document.write("<br>");
</script>
</head>
<body>
</body>
</html>
변수의 종류
변수는 사용 가능 범위에 따라 4가지로 구분됩니다.
지역 변수 : 특정 범위 안에서 사용하는 경우
전역 변수 : 모든 범위 안에서 사용하는 경우
매개 변수(파라미터) : 데이터를 전달하기 위해 사용하는 경우
멤버 변수(프로퍼티) : 클래스 내부 객체에서 사용되는 변수
지역변수, 전역변수 View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample03</title>
<script type="text/javascript">
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의 값 : " + x);
document.write("<br>");
document.write("'y의 값 : " + y);
document.write("<br>");
document.write("'z의 값 : " + z);
document.write("<br>");
}
area();
document.write("area 함수 밖");
document.write("<br>");
document.write("'x의 값 : " + x);
document.write("<br>");
document.write("'y의 값 : " + y);
document.write("<br>");
document.write("'z의 값 : " + z);
document.write("<br>");
</script>
</head>
<body>
</body>
</html>
매개 변수 View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample04</title>
<script type="text/javascript">
document.write("javascript");
document.write("<br>");
function area(){
document.write("jquery")
document.write("<br>");
}
area();
function area2(){
document.write("javascript+jquery")
document.write("<br>");
}
area2();
function area3(num1,num2){
document.write(num1,num2);
document.write("<br>");
}
area3("javascript","jquery");
</script>
</head>
<body>
</body>
</html>
변수의 유형(자료형)
변수는 식별자로만 구분하기 때문에 어떠한 값 인지 구분해야 하며, 숫자, 문자열, 블린, 함수, 객체, undefined으로 나눌 수 있습니다.
| 자료형 | 설명 |
|---|---|
숫자(number) |
자바스크립트에서 정수와 실수를 구분하지 않고 사용합니다. |
문자열(string) |
자바스크립트에서 따옴표를 사용한 문자의 집합 문자열을 사용합니다. |
블린(boolean) |
자바스크립트에서 참(true)과 거짓(false)를 사용합니다. |
특수값(null) |
null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화 할 때 사용합니다. |
특수값(undefined) |
변수 선언 시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다. |
배열(array) |
자바스크립트에서는 배열을 사용합니다. |
객체(object) |
자바스크립트에서는 개체를 사용합니다. |
함수(function) |
자바스크립트에서는 함수를 사용합니다. |
배열
배열은여러개의 데이터를 순차적으로 저장하는 저장소입니다.
var 변수명 = [값1, 값2, 값3, .......]
배열View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample05</title>
<script type="text/javascript">
//배열을 선언
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;
arr1[2] = 300;
document.write(arr1[0]);
document.write("<br>");
document.write(arr1[1]);
document.write("<br>");
document.write(arr1[2]);
document.write("<br>");
document.write(arr1[0] + arr1[1] + arr1[2]);
document.write("<br><br>");
//배열 선언과 동시에 초기화하기
var arr2 = new Array(100,200,300);
document.write(arr2[0]);
document.write("<br>");
document.write(arr2[1]);
document.write("<br>");
document.write(arr2[2]);
document.write("<br>");
document.write(arr2[0] + arr2[1] + arr2[2]);
document.write("<br><br>");
//배열의 크기 구하기
var arr3 = new Array(100,200,300,400,500);
document.write(arr3.length);
//for문을 이용한 배열의 합 구하기
var arr4 = new Array(100,200,300,400,500);
var sum = 0;
for(var i=0; i<arr4.length; i++){
sum = sum + arr4[i];
}
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 % 10 | x%=10 |
증감 연산자
증가 연산자는 1만큼 증가시키고, 감소 연산자는 1만큼 감소시킵니다.
| 연산자 | 설명 | 표현 |
|---|---|---|
++ |
x = x + 1 | x++ 또는 ++x |
-- |
x = x - 1 | x-- 또는 --x |
비교 연산자
두개의 값을 비교하여 결과를 참 또는 거짓으로 나타냅니다.
| 연산자 | 예시 | 설명 |
|---|---|---|
== |
x == y | 좌변과 우변이 값이 같을 경우 true |
=== |
x === y | 좌변과 우변이 값이 같거나 데이터형도 같을 경우 true |
!= |
x != y | 좌변과 우변의 값이 같지 않을 경우 true |
!== |
x !== y | 좌변과 우변의 값이 같지 않을 경우, 또는 데이터형이 다른 경우 true |
> |
x > y | 좌변이 우변보다 클 경우 ture |
< |
x < y | 좌변이 우변보다 작을 경우 true |
>= |
x >= y | 좌변이 우변보다 크거나 같을 경우 ture |
<= |
x <= y | 좌변이 우변보다 작거나 같을 경우 true |
논리 연산자
참/거짓으로 나타나는 boolean 값을 조합해서 논리 연산을 수행합니다.
| 연산자 | 예시 | 설명 |
|---|---|---|
&& |
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 | , |
쉼표 |
조건문
조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.
if
if(조건){
}//실행코드
if문View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample06</title>
<script type="text/javascript">
var x = 100;
if(x % 2 == 0){
document.write("짝수");
}
var value = window.prompt("숫자를 입력해주세요");
if(value % 2 == 0){
alert("짝수입니다.");
}
</script>
</head>
<body>
</body>
</html>
if문~else문
두개의 값을 비교화여 코드를 별개로 실행합니다.
if(조건){
//참일 때 실행코드
} else {
//거짓일때 실행코드
}
if~elseView
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample07</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 userID = window.prompt("아이디를 입력해주세요.")
var userPW = window.prompt("비밀번호를 입력해주세요.")
if(userID == "arkdgpdus"&& userPW == 1234){
alert("환영합니다.");
}
else {
alert("아이디 또는 비밀번호가 틀렸습니다.");
}
</script>
</head>
<body>
</body>
</html>
다중 if문
여러가지 조건에 따라 조건문을 실행합니다.
if(조건){
//참일 때 실행코드
} else if {
// 앞 조건이 거짓일때 실행코드
}
else if {
// 앞 조건이 거짓일때 실행코드
}
else if {
// 앞 조건이 거짓일때 실행코드
}
else if {
// 앞 조건이 거짓일때 실행코드
}
else if {
// 앞의 모든 조건이 거짓일때 실행코드
}
다중 if문View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample08</title>
<script type="text/javascript">
var x = 100;
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의 숫자는 100입니다.");
}
else {
document.write("x의 숫자는 모르겠습니다.");
}
</script>
</head>
<body>
</body>
</html>
다중 if문2View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample09</title>
<script>
var userId = window.prompt("아이디를 입력하세요");
var userPw = window.prompt("비밀번호를 입력하세요");
if (userId == "arkdgpdus" && userPw == "1234"){
alert("환영합니다.");
}
else if (userId="arkdgpdus"){
alert("비밀번호가 틀렸습니다.");
}
else {
alert("틀렸습니다.");
}
</script>
</head>
<body>
</body>
</html>
switch문
switch(조건을 체크할 변수){
case 값1:
//조건을 체크할 변수가 값1을 가지면 실행
break;
case 값2:
//조건을 체크할 변수가 값2을 가지면 실행
break;
case 값3:
//조건을 체크할 변수가 값3을 가지면 실행
break;
case 값4:
//조건을 체크할 변수가 값4을 가지면 실행
break;
default:
//해당되는 값을 가지고 있지 않을 경우 실행
break;
}
switch문View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample10</title>
<script>
var color = prompt("빨강, 파랑, 노랑, 검정 중 가장 느낌이 노는 색을 적어주세요")
switch(color){
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>
switch문2View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample11</title>
<script>
var site = prompt("당신이 네이버, 다음, 구글, 네이트 중 자주가는 사이트는?");
var url;
switch(site){
case "네이버":
url="www.naver.com";
break;
case "다음":
url="www.daum.net";
break;
case "구글":
url="www.google.com";
break;
case "네이트":
url="www.nate.com";
break;
default:
document.write("그런 사이트는 없습니다.");
break;
}
if(url){
location.href="http://"+url;
}
</script>
</head>
<body>
</body>
</html>
조건부 연산자
(조건) ? (참일 때 실행코드) : (거짓일 때 실행코드);
조건부 연산자View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample12</title>
<script>
//if~else문
var value = prompt("숫자를 입력해주세요");
value = parseInt(value);
if(value % 2 == 0){
alert("짝수입니다.");
}
else{
alert("홀수입니다.");
};
//조건 연산자 (삼황연산자)
var value2 = prompt("숫자를 입력해주세요");
value2 = parseInt(value2);
(value2 % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
</script>
</head>
<body>
</body>
</html>
반복문
반복되는 부분을 실행할 때 사용하는 제어문입니다.
while문
var 변수 = 초기값
while(조건식){
실행문;
증감문;
}
while문View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample13</title>
<script>
var count = 0;
while(true){
count++;
document.write(count+"번째 실행입니다."+"<br>");
if(count > 9 ){
break;
}
}
</script>
</head>
<body>
</body>
</html>
while문2(100보다 작은 숫자에서 4의 배수 6의 배수 출력하기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample14</title>
<script>
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>
while문3(100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색으로 출력하기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample15</title>
<script>
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>
do while문
while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행문을 실행하고 조건식을 검사합니다.
var 변수 = 초기값
do {
실행문;
증감식;
}while(조건식)
Example View
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var count = 0;
do{
count++;
document.write(count + "번째 실행","<br />");
}while(count<9);
</script>
</head>
<body>
...
</body>
</html>
for문
for(초기값; 조건식; 증감값){
//실행함수
}
초기값 설정 : var i = 0; 초기 시작 값을 0으로 설정하고, 초기밧은 오직 한번만 실행되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100 조건에 맞으면 실행됩니다.
증감 설정: 조건에 맞으면 1씩 추가되거나 1씩 감소시킵니다.
forView
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample16</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=1; i<=100; i+=2){
document.write(i,"<br>");
}
//1~100까지 짝수만 출력
for (var i=0; i<=100; i+=2){
document.write(i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
for문2(5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample15</title>
<script>
for(var i=0; i<=100; i++){
if(i % 5 == 0 && i % 7 == 0){
document.write("<span style='color:black'>"+i+"</span>","<br>");
}else if(i % 7 == 0){
document.write("<span style='color:red'>"+i+"</span>","<br>");
}else if(i % 5 == 0) {
document.write("<span style='color:blue'>"+i+"</span>","<br>");
}
}
</script>
</head>
<body>
</body>
</html>
for문3View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample18</title>
<script>
var arr4 = new Array(100,200,300,400,500,600,700,800,900);
var sum = 0;
for(var i=0; i<arr4.length; i++){
sum = sum + arr4[i];
}
document.write(sum);
</script>
</head>
<body>
</body>
</html>
다중 for문
for(var i=0; i<100; i++){
for(var j=0; j<100; j++){
//실행함수
}
}
다중 for문(구구단 만들기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample19</title>
<script>
for(var i=0; i<8; i++){
for(var j=0; j<9; j++){
var num1 = i + 2;
var num2 = j + 1;
var gugu = num1 * num2;
document.write(num1+"x"+num2+"="+gugu+"<br>");
}
}
</script>
</head>
<body>
</body>
</html>
다중 for문2(테이블 만들기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample20</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+="</tr>";
}
t+="</table>"
document.write(t);
</script>
</head>
<body>
</body>
</html>
break문과 continue문
break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다.
continue문 : 코드 실행 중에 continue을 만나며, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다.
break문과 continue문View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample21</title>
<script>
var count = 0;
while(true){
count++;
if(count == 30){
continue;
}
document.write(count+"<br>");
if(count >= 100 ){
break;
}
}
</script>
</head>
<body>
</body>
</html>
함수
함수는 하나의 실행문을 저장하여 사용할 수 있습니다. 함수는 반복 사용되는 코드를 구조화하거나, 재활용을 목적으로 사용합니다.
functionView
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample22</title>
<script>
/*
//for문을 이용하여 1부터 100까지 출력 (1.black입니다.)
for (var i=1; i<=100; i++){
document.write(i+". black입니다."+"<br>");
}
//for문을 이용하여 1부터 100까지 출력 (1.red입니다.)
for (var i=1; i<=100; i++){
document.write(i+". red입니다."+"<br>");
}
//for문을 이용하여 1부터 100까지 출력 (1.blue입니다.)
for (var i=1; i<=100; i++){
document.write(i+". blue입니다."+"<br>");
} */
//위 3가지를 함수로 이용하여 적용
function color(name){
for (var i=1; i<=100; i++){
document.write(i+". "+name+"입니다."+"<br>");
}
}
color("blue");
color("red");
color("black");
</script>
</head>
<body>
</body>
</html>
함수의 사용 형태
함수는 일반적인 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다.
함수는 일반적인 함수, 매개변수가 있는 함수, 리턴값이 있는 함수View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample23</title>
<script>
//일반적인 함수
function func1(){
document.write("function이 실행되었습니다."+"<br>");
}
func1();
func1();
func1();
//매개변수가 있는 함수
function func2(name){
document.write(name+"이 실행되었습니다."+"<br>");
}
func2("javascript");
func2("jQuery");
func2("html");
func2("css");
//리턴값(결과)이 있는 함수
function func3(){
var now = new Date(); //현재 시간을 구해오는 객체 데이터
var hour = now.getHours(); //구해온 시간에서 시(hour)를 가져옴
var year = now.getFullYear(); //구해온 시간에서 년도(year)를 가져옴
var day = now.getDay(); //구해온 시간에서 요일(day)을 가져옴
return day;
}
var value=func3();
document.write(value);
</script>
</head>
<body>
</body>
</html>
객체
객체는 데이터와 연산작업을 담고 있는 기본적인 기능입니다.
속성 : 객체가 가지고 있는 기본적인 상태 값 및 속성 값(ex: color, width, height)
메서도 : 객체가 할 수 있는 동작 및 행동 (ex: width값을 변경, color색을 변경)
메서도 : 객체가 할 수 있는 동작 및 행동 (ex: width값을 변경, color색을 변경)
내장 객체
| 객체 | 개요 |
|---|---|
Object |
모든 객체의 모형이 되는 기능을 제공합니다. |
Arrary |
배열을 조작하기 위한 관련된 기능을 제공합니다. |
String |
문자열을 조작하기 위한 관련된 기능을 제공합니다. |
Boolean |
논리형을 조작하기 위한 관련된 기능을 제공합니다. |
Number |
숫자를 조작하기 위한 관련된 기능을 제공합니다. |
Function |
함수를 조작하기 위한 관련된 기능을 제공합니다. |
Math |
수치연산을 조작하기 위한 관련된 기능을 제공합니다. |
Date |
날짜를 조작하기 위한 관련된 기능을 제공합니다. |
RegExp |
정규식 표현과 관련된 기능을 제공합니다. |
Error |
에러와 관련된 기능을 제공합니다. |
내장객체(현재 시간 구하기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample24</title>
<script>
//페이지에 시간 표시하기
window.onload=function(){
var clock=document.getElementById('clock');
setInterval(function(){
clock.innerHTML=new Date();
},1000);
}
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
내장객체(랜덤 숫자 표시하기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample28</title>
<script>
var number = Math.floor(Math.random()*10);
var answer = parseInt(window.prompt("0~10 사이의 숫자를 맞쳐보세요"));
var message;
if(answer === number){
message = '정답';
} else if(answer < number){
message = '땡! 더 큰 숫자입니다.';
} else if(answer > number){
message = '땡! 더 작은 숫자입니다.';
} else {
message = '0~10사이의 숫자를 입력하세요';
}
window.alert(message);
</script>
</head>
<body>
</body>
</html>
문서 객체
| 객체 | 설명 |
|---|---|
createElement(tagName) |
요소 노드를 생성합니다. |
createTextNode(text) |
텍스트 노드를 생성합니다. |
appendChild(node) |
객체에 노드를 연결합니다. |
setAttribute(name, value) |
객체의 속성을 지정합니다. |
getAttribute(name) |
객체의 속성을 가져옵니다. |
getElementById(id) |
태그의 id속성이 id와 일치하는 문서 객체를 가져옵니다. |
getElementsByName(name) |
태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옵니다. |
getElementsByTagName(tagName) |
tagName과 일치하는 문서 객체를 배열로 가져옵니다. |
removeChild(child) |
문서 객체의 자식 노드를 제거합니다. |
doucment.querySelector(선택자) |
선택자로 가장 처음 선택되는 문서 객체를 가져옵니다. |
document.querySelectorAll(선택자) |
선택자로 선택되는 문서 객체를 배열로 가져옵니다. |
브라우저 객체
window 객체
window 객체(컨텐츠 영역 크기 구하기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample25</title>
<script>
var width=window.innerWidth;
var height=window.innerHeight;
alert("콘텐츠 영역의 크기 :" +"width값="+ width +","+"height값=" +height);
</script>
</head>
<body>
</body>
</html>
navigator 객체
navigator 객체(브라우저 속성 알아내기)View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample26</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>
navigator 객체2(운영체제 및 스크린정보 알아내기)View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
function info1(){
var os=navigator.userAgent.toLowerCase();
var info_wrap=document.getElementById("info_wrap");
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;
var info_wrap=document.getElementById("info_wrap");
info_wrap.innerHTML=sc_w+"X"+sc_h;
}
</script>
</head>
<body>
<h1>운영체제 및 스크린 정보</h1>
<p id="info_wrap"></p>
<button onclick="info1();">운영체제 정보</button> <br />
<button onclick="info2();">스크린 정보</button> <br />
</body>
</html>
screen 객체
history 객체
location 객체
이벤트
이벤트란? 마우스 클릭이나 키보드 입력 등으로 발생하는 모든 동장작을 이벤트라고 합니다. 이벤트는 브라우저에서 이벤트가 발생시 자동으로 실행하는 실행문이며, 함수는 조건에 맞으면 실행되는 실행문입니다.
| 이벤트 속성 | 설명 |
|---|---|
onabort |
이미지 다운로드 중지할 때(브라우저 중지 버튼 클릭 시) 호출 |
onactivate |
객체가 활성화될 때(태그 기능이 동작할 때) 호출 |
onafterprint |
문서를 출력한 후(또는 미리보기 후에) 호출 |
onafterupdate |
데이터 객체 내의 데이터가 업데이트 되었을 때 호출 |
onbeforeactivate |
객체가 활성화되기 직전에 호출 |
onbeforecopy |
선택 영역이 클립보드로 복사되기 직전에 호출 |
onbeforecut |
선택 영역이 클립보드로 잘라내지기 직전에 호출 |
onbeforedeactivate |
웹 문서상에서 현재 객체에서 다른 객체로 activeElement가 변경될 때 호출 |
onbeforeeditfocus |
편집 가능한 객체 내부에 포함된 객체의 편집 모드가 활성화될 때 호출 |
onbeforepaste |
클립보드에서 문서로 붙여넣기를 할 때 대상 객체에서 호출 |
onbeforeprint |
웹 문서가 출력되기 직전에(또는 미리보기를 실행하기 직전에) 호출 |
onbeforeunload |
웹 문서가 업로드 되기 직전에 호출 |
onbeforeupdate |
데이터 객체 내의 데이터가 업데이트 되기 직전에 호출 |
onblur |
객체가 포커스를 잃었을 때 호출 |
onbounce |
marquee 객체의 스크롤 영역 양쪽 끝에서 바운드 될 때 호출 |
oncellchange |
데이터 객체에서 데이터가 변경될 때 호출 |
onchange |
객체 또는 선택 영역의 내용이 변경될 때 호출 |
onclick |
객체 위에서 마우스 왼쪽 버튼을 클릭할 때 호출 |
oncontextmenu |
클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 팝업 메뉴를 띄울 때 호출 |
oncontrolselect |
사용자가 객체의 제어 영역을 선택할 때 호출 |
oncopy |
클립보드에 선택 영역 또는 객체를 복사할 때 호출 |
oncut |
클립보드에 선택 영역 또는 객체를 잘라낼 때 호출 |
ondataavailable |
비정기적으로 데이터가 전달되는 데이터 객체로부터 데이터가 전달될 때 호출 |
ondatasetchanged |
데이터 객체의 변화 때문에 데이터가 노출되면 호출 |
ondatasetcomplete |
데이터 객체의 모든 데이터가 사용 가능한 상태가 될 때 호출 |
ondblclick |
객체 위에서 더블클릭할 때 호출 |
ondeactivate |
웹 문서의 현재 선택된 객체에서 다른 객체로 activeDlement가 변할 때 호출 |
ondrag |
드래그 상태가 유지되는 동안 해당 객체로부터 호출 |
ondragend |
드래그 상태가 종료될 때 해당 객체로부터 호출 |
ondragenter |
사용자가 객체를 드래그하여 드롭 가능한 영역으로 이동시킬 때 호출 |
ondragleave |
사용자가 객체를 드래그하여 드롭 가능한 영역을 벗어날 때 호출 |
ondragover |
사용자가 드롭 가능 영역 내에서 객체를 드래그할 때 호출 |
ongragstart |
선택된 객체 또는 텍스트 영역에서 사용자가 드래그를 시작할 때 호출 |
ondrop |
사용자가 특정 객체를 드래그하다가 드롭하였을 때 호출 |
onerror |
웹 문서 내에서 스크립트 에러가 발생할 때 호출 |
onerrorupdate |
데이터 객체 내의 데이터가 변경되는 중에 에러가 발생할 경우 호출 |
onfilterchange |
비주얼 필터의 상태가 변경되거나 트랜지션이 완료되었을 때 호출 |
onfinish |
marquee 객체의 Loop가 완료되었을 때 호출 |
onfocus |
객체가 포커스 상태가 되었을 때 호출 |
onfocusin |
객체가 포커스되기 직전에 호출 |
onfocusout |
포커스가 다른 객체로 이동할 때 호츨 |
onhelp |
브라우저에서 F1 키를 눌렀을 때 호출 |
onkeydown |
사용자가 키를 눌렀을 때 호출 |
onkeypress |
사용자가 기능 키를 제외한 키를 눌렀을 때 호출 |
onkeyup |
사용자가 키를 눌렀다가 떼었을 때 호출 |
onload |
브라우저 객체를 로딩한 다음 호출 |
onlosecapture |
객체가 마우스 캡쳐를 잃었을 때 호출 |
mmousedown |
객체 위에서 마우스 버튼을 클릭할 때 호출 |
onmouseenter |
객체의 영역 안으로 마우스 포인터가 들어올 때 호출 |
onmouseleave |
객체의 영역 밖으로 마우스 포인터가 이동할 때 호출 |
onmousemove |
객체의 영역 내에서 마우스 포인터가 움직일 때 호출 |
onmouseout |
객체의 영역 밖으로 마우스 포인터가 빠져나갈 때 호출 |
onmouseover |
객체의 영역으로 마우스 포인처가 들어올 때 호출 |
onmouseup |
객체 위에서 마우스 버튼을 눌렀다가 떼었을 때 호출 |
onmousewheel |
마우스 휠로 조정할 때 호출 |
onmove |
객체가 움직일 때 호출 |
onmoveend |
객체의 이동이 끝날 때 호출 |
mmovestart |
객체의 움직이기 시작할 때 호출 |
onpaste |
클립보드에 복사해둔 내용을 웹 문서에 붙여넣기를 할 때 호출 |
onpropertychange |
객체의 속성이 변경될 때 호출 |
onreadystatechange |
객체의 상태가 변경될 때 호출 |
onreset |
사용자가 폼을 리셋할 때 호출 |
onresize |
객체의 크기가 변경될 때 호출 |
onresizeend |
사용자가 객체의 크기 변경을 끝낼 때 호출 |
onresizestart |
사용자가 객체의 크기변경을 시작할 때 호출 |
onrowenter |
데이터 소스 내에서 현재 열이 변경되거나 객체에 새로운 데이터가 추가될 때 호출 |
onrowexit |
데이터 소스 컨트롤이 객체 내의 현재 열을 변경시킬 때 호출 |
onrowsdelete |
현재 레코드셋에 열이 삭제될 때 호출 |
onrowsinserted
| 현재 레코드셋에 새로운 열리 추가될 때 호출 |
onscroll |
사용자가 객체 내의 스크롤바를 이용하여 스크롤 할 때 호출 |
onselect |
현재 선택된 영역이 변경될 때 호출 |
onselectionchange |
웹 문서의 선택 영역 상태가 변경될 때 호출 |
onstart |
marquee 객체의 Loop가 시작될 때 마다 호출 |
onstop |
사용자가 stop버튼을 클릭했을 때(또는 웹 문서를 떠날 때) 호출 |
onsubmit |
폼이 전송되기 직전에 호출 |
onunload |
객체가 언로드되기 직전에 호출 |