자바스크립트
자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면 자바스크립트는 동적인 기능을 표현합니다.
자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Nacigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 EXMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. (jQuery - Node.js, vue.js, ...)
자바스크립트 언어의 특징
- 자바스크립트는 인터프린터 언어입니다.
- 자바스크립트는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 해석하지 않습니다.
- 자바스크립트는 클라이언트 언어입니다.
- 자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 클라이언트 자바스크립트는 ESMAScript가 규정한 코어 언어와 웹 브라우저 API로 구성되어 있습니다.
- 자바스크립트는 객체 기반의 언어입니다.
- C++와 JAVA는 클래스를 이용하여 객체를 생성하는 클래스 기반의 객체 지향 언어인 반면 자바스크립트는 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.
- 자바스크립트는 동적 타입 언어입니다.
- C++와 JAVA는 변수타입이 결정되는 정적 타입 언어인 반면 자바스크립트는 변수 타입이 없습니다.
- 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
- 자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.
자바스크립트 기본
대문자와 소문자
자바스크립트는 대문자와 소문자를 구별하여 처리해야 합니다.
주석
일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다.
/*.....*/ : 여러 줄에 주석을 적용하는 경우
// : 한 줄에 주석을 적용하는 경우
// : 한 줄에 주석을 적용하는 경우
키워드와 식별자
키워드(예약어) : 자바스크립트에 정해진 단어
식별자 : 사용자가 임의로 사용하는 단어
식별자 : 사용자가 임의로 사용하는 단어
변수명 규칙
- 사용자가 사용할 수 있는 문자 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
- 첫 글자는 숫자를 사용할 수 없음
- 공백을 주면 안됨 : 밑줄(_) 사용가능, 하이픈(-) 사용안됨
- 특수기호 사용 안됨
- 키워드(예약어)를 사용할 수 없음
변수명 조합 규칙
- 언더스코어 표기법 : text_top
- 카멜 표기법 : textTop
- 파스칼 표기법 : TextTop
변수
변수는 하나의 데이터를 저장하는 저장소입니다.
var 변수명 = 값;
변수view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수</title>
<script>
var x = 10; //변수 x에 숫자 10을 할당(저장)
var y = 20; //변수 y에 숫자 20을 할당(저장)
var y2 = "20"; //변수 y2에 문자20을 할당(저장)
var y2 = '20'; //변수 y2에 문자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(y2);
/*alert(x);
document.write(x);
console.log(x);*/
</script>
</head>
<body>
</body>
</html>
변수의 종류
변수의 사용 가능 범위에 따라 4가지로 구분됩니다.
지역변수 : 특정 범위 안에서만 사용하는 변수
전역변수 : 모든 영역에서 사용하는 변수
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수(프로퍼티) : 클래스 내부에서 만들어지며, 주로 객체에서 사용하는 경우
전역변수 : 모든 영역에서 사용하는 변수
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수(프로퍼티) : 클래스 내부에서 만들어지며, 주로 객체에서 사용하는 경우
변수view
<!DOCTYPE html>
<html lang="ko">
<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 = 400; //변수(지역) z에 숫자 400을 저장
y = 600; //변수(전역) y의 값을 200에서 600으로 변경
document.write("area 함수 안");
document.write("<br>");
document.write(x);
document.write("<br>");
document.write(z);
document.write("<br>");
document.write(y);
document.write("<br>");
}
area();
document.write("area 함수 밖");
document.write("<br>");
document.write(x);
document.write("<br>");
document.write(z);
document.write("<br>");
document.write(y);
document.write("<br>");
</script>
</head>
<body>
</body>
</html>
매개변수view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>매개 변수</title>
<script>
//브라우저 화면에 "javascript" 문자를 출력해주세요!
document.write ("javascript");
document.write ("<br>");
//변수를 이용해서 화면에 "jquery" 문자를 출력해주세요!
var x ="jquery";
document.write(x);
document.write ("<br>");
//함수를 이용해서 화면에 "html" 문자를 출력해주세요!
function str1(){
document.write("html");
document.write ("<br>");
}
str1();
//매개변수를 이용해서 화면에 "css" 문자를 출력해주세요!
function str2(num){
document.write(num);
document.write ("<br>");
}
str2("css");
</script>
</head>
<body>
</body>
</html>
변수의 유형
변수는 식별자로만 구분하기 때문에 어떠한 값인지 구분해야 하며, 숫자 또는 문자, 함수, 객체, undefined로 나눌 수 있습니다.
| 자료형 | 설명 |
|---|---|
| 숫자(Number) | 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다. |
| 문자열(String) | "문자", "string"처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다. |
| 논리(Boolean) | 참과 거짓을 나타내는 자료형이며 오직 true, false로만 표현합니다. |
| 특수값(null) | null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화할 때 사용합니다. |
| 특수값(undefined) | 변수 선언 시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다. |
| 배열(array) | 배열 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다. |
| 객체(object) | 객체 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다. |
| 함수(Function) | 함수 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다. |
배열
배열은 여러개의 데이터를 저장하는 저장소입니다.
배열
배열
if(조건) {
//실행코드
}
//실행코드
}
배열view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열</title>
<script>
//변수 x=100, y=200 출력해주세요!
var x = 100;
var y = 200;
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br><br>");
//배열 선언
var arr1 = new Array();
arr1 [0] = 100;
arr1 [1] = 200;
document.write(arr1[0]);
document.write("<br>");
document.write(arr1[1]);
document.write("<br><br>");
//배열 선언과 동시에 초기화하기
var arr2 = new Array(100,200,300);
document.write(arr2[0],"<br>");
document.write(arr2[1],"<br>");
document.write(arr2[2],"<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,600,700,800,900,1000);
var sum = 0;
//arr4[0] = 100
//arr4[1] = 200
//arr4[2] = 300
//arr4[3] = 400
//arr4[4] = 500
//arr4[5] = 600
//arr4[6] = 700
//arr4[7] = 800
//arr4[8] = 900
//arr4[9] = 1000
for(var i=0; i<arr4.length; i++){
sum = sum + arr4[i];
// 0 = 0 + 100;
//100 = 100 + 200;
//200 = 200 + 300;
//300 = 300 + 300;
//...
//4500 = 4500 + 1000;
//5500
//i = 0; 0 < 10; 1;
//i = 1; 1 < 10; 2;
//i = 2; 2 < 10; 3;
//i = 3; 3 < 10; 4;
//i = 4; 4 < 10; 5;
//i = 5; 5 < 10; 6;
//i = 6; 6 < 10; 7;
//i = 7; 7 < 10; 8;
//i = 8; 8 < 10; 9;
//i = 9; 9 < 10; 10;
for(var i=0; i<arr4.length; i++){
sum = sum + arr4[i]
}
document.write("<br>");
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 | 좌변이 우변보다 클 경우에 true |
< |
x < y | 좌변이 우변보다 작을 경우에 true |
>= |
x >= y | 좌변이 우변보다 크거나 같을 경우에 true |
<= |
x <= y | 좌변이 우변보다 작거나 같을 경우에 true |
논리연산자
논리연산자는 참/거짓으로 나타내는 boolean 값을 조합해서 논리 연산을 수행합니다.
| 연산자 | 예시 | 설명 |
|---|---|---|
&& |
x >&& y | (and) 둘다 true인 경우 true |
ll |
x ll y | (or) 둘 중 하나 이상이 true 이면 true |
! |
!x | (not) 식이 false 인 경우 true |
조건문
조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.
if
if는 단독으로 사용하는 형태입니다.
if(조건) {
//실행코드
}
//실행코드
}
ifview
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>if</title>
<script>
var x = 100;
if(x % 2 == 0){
document.write("짝수입니다.");
}
var num = window.prompt("숫자를 입력해주세요!");
if(num % 2 == 0){
document.write("당신이 입력한 숫자는 짝수입니다.");
}
</script>
</head>
<body>
</body>
</html>
if~else
두개의 값을 비교하여 코드를 별개로 실행합니다.
if(조건) {
//참일 때 실행코드
} else{
//거짓일 때 실행코드
}
//참일 때 실행코드
} else{
//거짓일 때 실행코드
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>if~else</title>
<script>
var x = 100;
if(x % 2 === 0){
document.write("짝수입니다.");
} else {
document.write("홀수입니다.");
}
var num = window.prompt("숫자를 입력해주세요");
if(num % 2 == 0){
alert("짝수입니다.");
}else{
alert("홀수입니다.");
}
var userID = window.prompt("아이디를 입력하세요");
var userPW = window.prompt("패스워드를 입력하세요!");
if (userID == "goka" && userPW == "1234"){
alert("환영합니다.");
}else{
alert("아이디 또는 비밀번호를 확인해주세요");
}
</script>
</head>
<body>
</body>
</html>
다중 if
다중
if(조건) {
//참일 때 실행코드
} else if { //앞에 조건이 거짓일때 실행코드 } else if { //앞에 조건이 거짓일때 실행코드 } else { //앞에 모든 조건이 거짓일때 실행코드 }
//참일 때 실행코드
} else if { //앞에 조건이 거짓일때 실행코드 } else if { //앞에 조건이 거짓일때 실행코드 } else { //앞에 모든 조건이 거짓일때 실행코드 }
배열view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>다중 if문</title>
<script>
var x = 100;
if(x == 90){
document.write("x의 숫자는 90입니다.");
} else if(x == 91) {
document.write("x의 숫자는 91입니다.");
} 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 {
document.write("x의 숫자는 모르겠습니다.");
}
var userID = window.prompt("아이디를 입력하세요");
var userPW = window.prompt("패스워드를 입력하세요!");
if (userID == "goka" && userPW == "1234"){
alert("환영합니다.");
} else if(userID == "goka"){
alert("패스워드가 틀렸습니다.");
} else if(userPW == "1234"){
alert("아이디가 틀렸습니다.");
} else {
alert("아이디와 비밀번호를 다시 한번 확인해주세요.");
}
</script>
</head>
<body>
</body>
</html>
switch
해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.
switch(조건) {
case 값1:{
//조건을 체크할 변수가 값1을 가지고 있으면 실행{
break;{
case 값2:{
//조건을 체크할 변수가 값2을 가지고 있으면 실행{
break;{
case 값3:{
//조건을 체크할 변수가 값3을 가지고 있으면 실행{
break;{
default;{
//해당되는 값을 가지고 있지 않을 경우 실행{
break;{
}
case 값1:{
//조건을 체크할 변수가 값1을 가지고 있으면 실행{
break;{
case 값2:{
//조건을 체크할 변수가 값2을 가지고 있으면 실행{
break;{
case 값3:{
//조건을 체크할 변수가 값3을 가지고 있으면 실행{
break;{
default;{
//해당되는 값을 가지고 있지 않을 경우 실행{
break;{
}
switch view
<!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>
switch view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>switch</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;
}
//alert(url);
if(url){
location.href="http://"+url
}
</script>
</head>
<body>
</body>
</html>
조건부 연산자
(조건) ? (참일때 실행코드) : (거짓일때 실행코드)
조건부 연산자 view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>조건부 연산자</title>
<script>
//숫자를 입력했을 때 10보다 크면 ""숫자가 10보다 큽니다" 출력
//숫자가 10보다 작으면 "숫자가 10보다 작습니다" 출력
// var num = window.prompt("숫자를 입력하세요");
// if(num > 10){
// document.write("숫자가 10보다 큽니다");
// } else {
// document.write("숫자가 10보다 작습니다");
// }
//숫자가 5면 "빙고"
var num = window.prompt("숫자를 입력하세요");
if(num == 5){
document.write("빙고");
} else if(num > 5){
document.write("숫자가 5보다 큽니다");
} else if (num < 5){
document.write("숫자가 5보다 작습니다");
}
//x:100, y:200 x*y의 값을 출력해주세요!
var x = 100;
var y = 200;
document.write("<br><br>");
document.write(x * y);
//x:100, y:200 함수를 이용해서 x*y의 값을 출력해주세요!
function num2(){
var x = 100;
var y = 200;
document.write("<br><br>");
document.write(x * y);
}
num2();
//매개변수를 이용해서 100, 200을 이용해 함수 (num3)를 만들어서 x*y의 값을 출력
function num3(n1,n2){
document.write("<br><br>");
document.write(n1*n2);
}
num3(100,200);
document.write("<br><br>");
//사용자가 숫자를 입력했을 때 홀수,짝수를 구별해서 출력
var num5 = window.prompt("숫자를 입력해주세요")
num5 = parseInt(num5);
if (num5 % 2 === 0){
document.write("짝수");
} else {
document.write("홀수");
}
//조건부 연산자
(num5 % 0 == 0 ) ? document.write("짝수"): document.write("홀수");
</script>
</head>
<body>
</body>
</html>
반복문
while문
var 변수 = 초기값
while(조건식){
실행문;
증감식;
}
while(조건식){
실행문;
증감식;
}
whileview
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>while</title>
<script>
//1~1000출력
//초기값, 실행문, 증감식
var count = 1;
while(count<=1000){
document.write(count,"<br>");
count++;
}
</script>
</head>
<body>
</body>
</html>
100보다 작은 숫자에서 4의배수와 6의배수 출력하기view
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//1~100까지 출력(4의 배수, 6의 배수)
//초기값, 조건식, 실행문, 증감식
var num = 1;
while(num<=100){
if(num%4==0 && num%6==0){
document.write(num,"<br>");
}
num++;
}
</script>
</head>
<body>
</body>
</html>
숫자 1~100를 짝수는 파란색, 홀수는 빨간색으로 표현하기view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//1~100출력(짝수:파란색, 홀수: 빨간색)
var num = 1
while(num<=100){
if(num % 2 ==0){
document.write("<span style='color:blue'>"+num+"</span>", "<br>");
}else{
document.write("<span style='color:red'>"+num+"</span>", "<br>");
}
num++;
}
</script>
</head>
<body>
</body>
</html>
do while문
while문의 경우에는 조건식의 만족여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행여부를 결정합니다. 하지만 do while문은 반드시 한번은 실행문을 실행하고 조건식을 검사합니다.
var 변수 = 초기값;
do {
실행문;
증감식;
}while(조건식)
do {
실행문;
증감식;
}while(조건식)
do whileview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do while</title>
<script>
var count = 0;
do {
count++;
document.write(count,"<br>");
}while(count<100);
</script>
</head>
<body>
</body>
</html>
for문
for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.
for(초기값; 조건식; 증감값){
//실행코드
}
//실행코드
}
do whileview
<!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>");
}
//0~100중에서 짝수만 출력
for(var i =0; i<=100; i+=2){
document.write("짝수"+i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의배수는 검은색 출력view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//for문을 이용해서 1~100까지 출력
//5의 배수는 파란색을 출력
//7의 배수는 빨간색을 출력
//5와 7의 배수는 검은색으로 출력
for (var i =1; i <=100; i++){
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){//5의 배수이고 7의 배수인 경우
document.write("<span style='color:black'>"+i+"</span>", "<br>");
}
}
</script>
</head>
<body>
</body>
</html>
for문을 이용해서 배열의 합 구하기view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//변수 : 하나의 데이터를 저장하는 저장소
//배열 : 두개 이상의 데이터를 저장하는 저장소
var arr4 = new Array(100,200,300,400,500);
var sum = 0;
for(var i=0; i<arr4.length; i++){
//document.write(arr4[i],"<br>");
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(var j=0; j<100; j++){
//실행코드
}
}
do whileview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>구구단</title>
<script>
//num1 * num2 = sum
//(2~9)*(1~9)
//2 * 1 = 2
//2 * 2 = 4
//2 * 3 = 6
//2 * 4 = 8
//2 * 5 = 10
//2 * 6 = 12
//3 * 1 = 3
//3 * 2 = 6
//3 * 3 = 9
//3 * 4 = 12
//3 * 5 = 15
//3 * 6 = 18
for(var i=0; i<8; i++){
for(var j=0; j<9; j++){
var num1 = i+2;
var num2 = j+1;
var sum = num1 * num2;
document.write(num1 + " x " + num2 + " = " + sum);
document.write("<br>");
}
}
</script>
</head>
<body>
</body>
</html>
테이블view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<script>
var num = 1;
var table = "<table border='1'>";
for(var i=1; i<=10; i++){
table += "<tr>";
for(var j=1; j<=10; j++){
table += "<td>" + num + "</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
</script>
</head>
<body>
<!--<table border="1">
<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>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>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>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>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>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>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>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>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>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>
</table>-->
</body>
</html>
break문과 continue문
함수
함수는 하나의 실행문을 저장하여 사용할 수 있습니다.
함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다.
함수를 사용하는 이유view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//for문을 이용해서 화면에 다음과 같이 출력해주세요!
// 1.white
// 2.white ~10까지
for (var i=1; i<=10; i++){
document.write(i+".white","<br>");
}
document.write("<br>");
// 1.black
// 2.black ~10까지
for (var i=1; i<=10; i++){
document.write(i+".black","<br>");
}
document.write("<br>");
// 1.blue
// 2.blue ~10까지
for (var i=1; i<=10; i++){
document.write(i+".blue","<br>");
}
document.write("<br>","<br>");
//한줄로 써보기
function color(name){
for (var i=1; i<=10; i++){
document.write(i+"."+name+"","<br>");
}
}
color("black");
color("blue");
color("white");
document.write("<br>","<br>");
//연습문제
//1. 변수를 사용해서 423*869값을 출력해주세요!
var x = 423;
var y = 869;
document.write(x*y);
document.write("<br>");
//1-1. 함수를 사용해서 423*869 값을 출력해주세요!
function str1(){
document.write(x*y);
document.write("<br>");
}
str1();
//2. 변수를 사용해서 "javascript" 문자열을 출력해주세요!
var z ="javascript"
document.write(z);
document.write("<br>");
//3. 배열을 사용해서 "html", "css" 문자열을 출력해주세요!
var arr1 = new Array();
arr1 [0] ="html"
arr1 [1] ="css"
document.write(arr1[0]);
document.write("<br>");
document.write(arr1[1]);
document.write("<br>");
//3-1. var arr2 = new Array(1,2,3,4,5,6,7); 배열의 크기를 구해주세요!
var arr2 = new Array(1,2,3,4,5,6,7);
document.write(arr2.length);
document.write("<br>");
//4. for문을 사용해서 1~100까지 출력해주세요!
for(var i=1; i<=100; i++){
document.write(i);
}
//5. 숫자 483463 홀수 짝수를 판단해서 출력해주세요!
var q = 483463;
if(q % 2 == 0){
document.write("짝수");
}else{
document.write("홀수");
}
document.write("<br>");
//6. for문을 이용해서 50보다 작은 숫자에서 13의 배수를 출력해주세요!
for(var i=1; i<=50; i++){
if(i % 13 == 0){
document.write(i,"<br>");
}
}
</script>
</head>
<body>
</body>
</html>
함수의 사용 형태
함수는 사용형태에 따라서 선언적 함수, 익명함수, 매개변수가 있는 함수, 리턴 값이 있는 함수로 구분됩니다.
선언적 함수view
function 함수이름(){
//실행코드
}
함수이름(); //함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기본적이 함수</title>
</head>
<body>
<div id="message">환영합니다.</div>
<script>
var msg="10% 할인을 받으시려면 지금 회원으로 가입하세요!"
function updateMeessage(){
var el = document.getElementById('message');
el.textContent = msg;
}
updateMeessage();
</script>
</body>
</html>
익명 함수
var 변수이름 = function(){
//실행코드
}
변수이름(); //함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>익명 함수</title>
<script>
var fun = function(){
document.write("익명함수가 실행되었습니다.");
}
fun();
document.write("<br>");
</script>
</head>
<body>
<div id="message">환영합니다.</div>
<script>
var msg="10% 할인을 받으시려면 지금 회원으로 가입하세요!"
var updateMeessage = function(){
var el = document.getElementById('message');
el.textContent = msg;
}
updateMeessage();
</script>
</body>
</html>
매개변수가 있는 함수
function 함수이름(매개변수1, 매개변수2, ....){
//실행코드
}
함수이름(매개변수1, 매개변수2, ....); //함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>매개변수가 있는 함수</title>
<script>
function func3(num){
document.write(num);
}
func3("매개변수가 있는 함수 입니다.");
</script>
</head>
<body>
<div id="message">환영합니다.</div>
<script>
var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!"
function updateMeessage(msg){
var el = document.getElementById('message');
el.textContent = msg;
}
updateMeessage(msg);
</script>
</body>
</html>
리턴값이 있는 함수
function 함수이름(매개변수1, 매개변수2, ....){
//실행코드
return 리턴값;
}
함수이름(); //함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>리턴값이 있는 함수</title>
<script>
function func4(){
var str = "리턴값이 있는 함수입니다."
return str;
}
document.write(func4());
function calculateArea(width, height){
var area = width *height;
return area;
}
var ca=calculateArea(300,400);
document.write(ca);
function getSize(width, height, depth){
var area = width * height;
var volume = width * height * depth;
var size =[area, volume];
return size;
}
var areaOne = getSize(3,2,3)[0];
var vilumeOne = getSize(3,2,3)[1];
document.write(areaOne);
document.write(volume);
</script>
</head>
<body>
</body>
</html>
객체
객체는 데이터와 연산 작업을 담고있는 기본적인 기능입니다.
객체(object)란 여러분이 현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화 한것을 말합니다.
속성 : 객체 안에 잇는 변수
메서드 : 객체 안에 있는 함수
객체를 생성하는 방법
축약형 표기법, 객체 생성자 표기법,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체를 생성하는 방법</title>
<script>
//객체를 생성한 후 속성과 메서드를 추가하는 방법
//축약형 표기법
var hotle = {};
hotle.name = "park";
hotle.rooms =40;
hotle.booked =25;
hotle.check = function(){
return this.rooms-this.booked;
}
//객체 생성자 표기법
var hotle2 = new Object{};
hotle2.name = "park";
hotle2.rooms =40;
hotle2.booked =25;
hotle2.check = function(){
return this.rooms-this.booked;
}
//속성과 메서드를 사전에 정의하고 객체 생성하기
//축약형 표기법
var hotel3 = {
name:"web",
rooms:40,
booked:25,
check:function(){
return this.rooms-this.booked;
}
}
//객체 생성자 표기법
//함수를 이용하면 여러개의 객체를 생성할 수 있습니다
//이름대신 this 키워드를 사용합니다.
function Hotel(name, rooms, booked){
this.name = name;
this.rooms = rooms;
this.booked = booked;
this.check = function(){
return this.rooms-this.booked;
}
}
var quatHotel = new Hotel('quay',40,25);
var quatHotel = new Hotel('park',40,25);
</script>
</head>
<body>
</body>
</html>
객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체</title>
</head>
<body>
<h2>예약 정보</h2>
<div id="hotelName"></div>
<div id="availability">
<p id="room"></p>
<p>개의 방이 남아있습니다.</p>
</div>
<script>
var hotel = {
name : 'quay',
rooms : 40,
booked : 25,
gym : true,
roomTypes:['트윈','더블','스위트'],
checkAvailability: function(){
var free = this.rooms - this.booked;
return free;
}
}
var elName = document.getElementById('hotelName');
elName.textContent = hotel.name;
var elRoom = document.getElementById('room');
elRoom.textContent = hotel.checkAvailability();
</script>
</body>
</html>
생성자 문법을 이용한 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>객체</title>
<script>
</script>
</head>
<body>
<div id="hotelName"></div>
<div id="availability">
<p id="room"></p>
<p>개의 방이 남아있습니다.</p>
</div>
<script>
//var hotel = new Array();
var hotel = new Object();
hotel.name = 'park';
hotel.rooms='120';
hotel.booked='70';
hotel.checkAvailability =function(){
return this.rooms - this.booked;
};
var elName = document.getElementById('hotelName');
elName.textContent =hotel.name;
var elRooms = document.getElementById('rooms');
elName.textContent = hotel.checkAvailability();
</script>
</body>
</html>
데이터 저장
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>데이터 저장하기</title>
<script>
var hotel = "park";
document.write(hotel,"<br>")
//배열: 여러개의 데이터를 저장하는 저장소
var hotel = ["web","S","y"," Nam"]
document.write(hotel[0],"<br>")
//객체 : 속성과 메서드를 저장하는 저장소
var hotel2 = {
name:"java",
rooms:40,
};
document.write(hotel2.name,"<br>");
//여러개의 객체 : 여러개의 객체를 저장하는 저장소
function Hotel6(name, rooms){
this.name = name;
this.rooms = rooms;
}
var hou1 = new Hotel6('Css','40');
var hou2 = new Hotel6('Cass','120');
document.write(hou1.name,"<br>");
document.write(hou2.name,"<br>");
document.write(hou1.rooms,"<br>");
document.write(hou2.rooms,"<br>");
</script>
</head>
<body>
</body>
</html>
내장 객체
브라우저는 브라우저 창과 이 창이 현재 보여주고 있는 페이지 등을 표현하기 위한 내장 객체들을 가지고 있습니다.
브라우저 객체 모델
브라우저 객체 모델은 브라우저 탭 혹은 창의 모델을 생성합니다
document, history, location, navigatior, screen
브라우저 객체 모델 : Window 객체
| 속성 | 설명 |
|---|---|
| Window,innerHeight | 창의 높이 (브라우저 창 테두리 및 사용자 인터페이스 부분은 제외) (단위는 픽셀) |
| Window,innerHeight | 창의 높이 (브라우저 창 테두리 및 사용자 인터페이스 부분은 제외) (단위는 픽셀) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var msg = "<h2>브라우저 창</h2><p>너비 : "+window.innerWidth+"</p>"
msg += "<p>높이 : "+window.innerHeight+"</p>"
msg += "<p>히스토리 : "+window.history.length+"</p>"
msg += "<h2>화면</h2><p>너비 : "+window.screen.width+"</p>"
msg += "<p>높이 : "+window.screen.height+"</p>"
msg += "<h2>브라우저 </h2><p>주소 : "+window.location+"</p>"
document.write(msg);
</script>
</head>
<body>
</body>
</html>
문서 객체 모델view
문서 객체 모델 (Dom : Document Object Model)현재 페이지의 모델을 생성합니다.
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>document 객체/title>
script>
var msg = "p>페이지 제목 : " + document.title + "/p>";
msg += "p>페이지 주소 : " + document.url + "/p>";
msg += "p>페이지 수정 : " + document.lastModified + "/p>";
document.write(msg);
/script>
/head>
body>
/body>
/html>
전역 자바 스크립트 객체view
전역 객체는 어떤 특정한 모델을 표현하지 않고 각기 다른 부분을 담당하는 관련 객체들의 집합
string, numver, boolean, date, math, RegEx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>string 객체</title>
<script>
var saying="Home sweet home";
var msg = "<p>길이 :"+saying.length+"</p>";
msg += "<p>대문자 :"+saying.toUpperCase()+"</p>";
msg += "<p>소문자 :"+saying.toLowerCase()+"</p>";
msg += "<p>문자인덱스12 :"+saying.charAt(12)+"</p>";
msg += "<p>'ee'첫번째 위치 :"+saying.indexOf("ee")+"</p>";
msg += "<p> 'e' 마지막 번째 위치:"+saying.lastIndexOf('e')+"</p>";
msg += "<p>인덱스 범위(8-14) :"+saying.substring(8,14)+"</p>";
msg += "<p>replace :"+saying.replace('me','w')+"</p>";
document.write(msg);
</script>
</head>
<body>
</body>
</html>
Number 객체view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number 객체</title>
<script>
var number = 10.23456;
var msg = "<p>원래 숫자 : " + number + "</p>";
msg += "<p>소수점 반올림 : " + number.toFixed(3); + "</p>";
msg += "<p>소수점 반올림 : " + number.toPrecision(3); + "</p>";
document.write(msg);
</script>
</head>
<body>
</body>
</html>
Math 객체view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>math 객체</title>
<script>
var ramdom = Math.floor((Math.random()*10));
document.write(ramdom);
</script>
</head>
<body>
</body>
</html>
Date 객체view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date 객체</title>
<script>
var today = new Date( );
var msg ="";
msg += "오늘은 몇 일이니?" + today.getDate() + "<br>";
msg += "오늘은 무슨 요일 이니?" + today.getDay() + "<br>";
msg += "오늘은 몇년도 이니?" + today.getFullYear() + "<br>";
msg += "오늘은 몇시 니?" + today.getHours() + "<br>";
msg += "오늘은 몇 분이니?" + today.getMinutes() + "<br>";
msg += "오늘은 몇 초니?" + today.getMilliseconds() + "<br>";
msg += "오늘은 몇 월이니?" + today.getMonth() + "<br>";
document.write(msg);
</script>
</head>
<body>
</body>
</html>