JavaScript Reference

자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 포현한다면, 자바스크립트는 동적인 기능을 표현합니다.

자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 EXMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다.

자바스크립트 언어의 특징

자바스크립트는 인터프린터 언어입니다.
- 자바스크립트는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 해석하지 않습니다.
자바스크립트는 클라이언트 언어입니다.
- 자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 클라이언트 자바스크립트는 EXMAScript가 규정한 코어 언어와 웹 브라우저 API로 구성되어 있습니다.
자바스크립트는 객체 기반의 언어입니다.
- C++와 JAVA는 클래스를 이용하여 객체를 생성하는 클래스 기반의 객체 지향 언어인 반면 자바스크립트는 포로토타입을 상속하는 프로토타입 기반의 객체 지향 언어입니다.
자바스크립트는 동적 타입 언어입니다.
- C++와 JAVA는 변수 타입이 결정되는 정적 타입 언어인 반면 자바스크립트 변수 타입이 없습니다.
자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
- 자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.

대문자와 소문자

자바스크립트는 대문자와 소문자를 구별하여 처리해야합니다.

주석

일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다.

/* ..... */ : 여러줄에 주석을 적용한는 경우
// : 한줄에 주석을 적용하는 경우

키워드와 식별자

키워드(예약어) : 자바스크립트에 정해진 단어
식별자 : 사용자가 임의로 사용하는 단어

변수명 규칙

사용자가 사용할 수 있는 문자 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
첫 글자는 숫자를 사용할 수 없습니다.
공백을 주면 안됩니다. : 밑줄(_) 사용가능, 하이픈(-) 사용안됩니다.
특수기호 사용 안됩니다.
키워드(예약어)를 사용할 수 없습니다.

변수명 조합 규칙

언더스코어 표기법 : text_top
카멜 표기법 : textTop
파스칼 표기법 : TrxtTop

변수는 하나의 데이터를 저장하는 저장소입니다.

var 변수명 = 값;

변수view

<!DOCTYPE html>
<!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);
   </script>
</head>
<body>
   
</body>
</html>

변수의 종류

변수의 사용 가능 범위에 따라 4가지로 구분됩니다.

지역변수 : 특정 범위 안에서만 사용하는 변수
전역변수 : 모든 영역에서 사용하는 변수
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수(프로퍼터) : 클래스 내부에서 만들어지며, 주로 객체에서 사용하는 경우

지역변수/전역변수 view

<!DOCTYPE html>
<!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에 숫자 100을 저장
         var z = 400;      //변수(지역) z에 숫자 200을 저장
         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(y);
      document.write("<br>");   
   </script>
</head>
<body>
   
</body>
</html>

매개변수 view

<!DOCTYPE html>
<!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)	배열 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다.

배열는 여러 개의를 저장하는 저장소입니다.

var 변수명 = [값1, 값2, 값3.....]

배열 view

<!DOCTYPE html>
<!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>");
      
      //배열의 크기 구하기
      var arr3 = 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
      
      //0 = 0 + 100;
      //100 = 100 + 200;
      //300 = 300 + 300;
      //600 = 600 + 400;
      //1000 = 1000 + 500;
      //1500 = 1500 + 600;
      //2100 = 2100 + 700;
      //2800 = 2800 + 800;
      //3600 = 3600 + 900;
      //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><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
`\|\|`	x \|\| y	(or) 둘 중의 하나 이상이 true 이면 true
`!`	!x	(not) 식이 false인 경우 true

조건문은 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.

if

if 단독으로 사용하는 형태입니다.

if(조건){
//실행코드
}

if view

<!DOCTYPE html>
<!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 {
//거짓일 때 실행코드
}

if~else view

<!DOCTYPE html>
<!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 == "leehun" && userPW == "1234"){
         alert("안녕하세요!");
      } else {
         alert("아이디 또는 비밀번호를 확인해주세요!");
      }
   </script>
</head>
<body>
   
</body>
</html>

다중 if

여러가지 조건에 따라 조건문을 설정합니다.

if(조건){
//참일 때 실행코드
} else if{
//앞 조건이 거짓일 때 실행코드
} else if {
//앞 조건이 거짓일 때 실행코드
} else {
//앞 모든 조건이 거짓일 떄 실행코드 }

다중 if view

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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 == "leehun" && userPW == "1234"){
         alert("안녕하세요!");
      } else if(userID == "leehun") {
         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;
}

switch view

<!DOCTYPE html>
<!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>
<!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.com";
         break;
            
         case "네이트" : url="www.nate.com";
         break;
            
         default : document.write("그런 사이트는 없습니다!");
         break;
      }
      //alert(url);
      
      if(url){
         location.href="http://"+url
      }
   </script>
</head>
<body>
   
</body>
</html>

조건부 연산자

if 단독으로 사용하는 형태입니다.

(조건) ? (참일 때 실행코드) : (거짓일 때 실행코드);

조건부 연산자 view

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>조건문 연산자</title>
    <script>
        //숫자를 입력했을 때 10보다 크면 "숫자가 10보다 큽니다" 출력
        //숫자가 10보다 작으면 "숫자가 10보다 작습니다" 출력(if)


    /*  var num = window.prompt("숫자를 입력해주세요");
        
        if(num > 10){
            document.write("숫자가 10보다 큽니다.");
            document.write("<br><br>");
        } else {
            document.write("숫자가 10보다 작습니다.");
            document.write("<br><br>");
        }
    */
        //숫자를 입력했을 때 10보다 크면 "숫자가 5보다 큽니다" 출력
        //숫자가 10보다 작으면 "숫자가 5보다 작습니다" 출력(if)
        //숫자가 5면 "빙고"
   
        var num = window.prompt("숫자를 입력해주세요!");
        if(num == 5){
            document.write("빙고");
        }else if(num > 5){
            document.write("5보다 큽니다.");
        }else if(num < 5){
            document.write("5보다 작습니다.");
        }   document.write("<br>");

        
        //x:100, y:200 x*y의 값을 출력해주세요!
        var x = 100;
        var y = 200;
        
        document.write(x*y);
        document.write("<br>");
        
        //x:100, y:200 함수를 이용해서 x*y의 값을 출력해주세요!
        function num2 () {
            var x = 100;
            var y = 200;
            document.write(x*y);
            document.write("<br>");
        }
        num2();
        
        
        //매개변수를 100,200을 이용해 함수(num3)를 만들어서 x*y의 값을 출력
        function num3 (n1,n2) {
            document.write(n1*n2);
            document.write("<br>");
        }
        num3(100,200);
        
        //사용자가 숫자를 입력했을 때 홀수,짝수를 구별해서 출력해주세요!    
        var num5 = window.prompt("숫자 입력해라~")
        num5 = parseInt(num5);
        
    /*  if(num5 % 2 == 0){
            document.write("짝수다~")
        } else {
            document.write("홀수다~")
        }
    */  
        (num5 % 2 == 0) ? document.write("짝수") : document.write("홀수");

    </script>
</head>
<body>
    
</body>
</html>

while

var 변수 = 초기값
while(조건식){
실행문;
증감식;
}

반복문 view

반복문2 view2

반복문3 view3

<!DOCTYPE html>
<!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>

<!DOCTYPE html>
<!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>

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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 view

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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(초기값; 조건식; 증감값){
//실행코드
}

for view

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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의 배수는 검은색 출력

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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){ //7의 배수이고 5의 배수인 경우
                document.write("<span style='color:black'>"+i+"</span>","<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

for문을 이용해서 배열의 합구하기

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<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 view


<!DOCTYPE html>
<html lang="ko">
<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>

다중 for2 view2


<!DOCTYPE html>
<html lang="ko">
<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="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    //for문을 이용해서 화면에 다음과 같이 출력해주세요!
    //1.white
    //2.white
    //3.white
    //4.white
    //5.white
    //6.white
    //7.white
    //8.white
    //9.white
    //10.white
//        for( var i = 1; i<=10; i++){
//            document.write(i+".white","<br>");
//        }
    //1.black
    //2.black
    //3.black
    //4.black
    //5.black
    //6.black
    //7.black
    //8.black
    //9.black
    //10.black
//        for( var j = 1; j<=10; j++){
//                document.write(j+".black","<br>");
//        }
    //1.blue
    //2.blue
    //3.blue
    //4.blue
    //5.blue
    //6.blue
    //7.blue
    //8.blue
    //9.blue
    //10.blue
//        for( var k = 1; k<=10; k++){
//                document.write(k+".blue","<br>");
//        }
        
        function color(name){
            for( var k = 1; k<=10; k++){
                document.write(k +"."+name,"<br>");
            }
        }
        color("black");
        color("blue");
        color("white");
    </script>
</head>
<body>
    
</body>
</html>

함수의 사용 형태

함수는 사용형태에 따라 선언적함수, 익명함수, 매개변수가 있는 함수, 리턴 값이 있는 함수로 구분됩니다.

선언적 함수view

function 함수이름(){ //실행코드 } 함수이름(); //함수호출


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본적인 함수</title>

</head>
<body>
    <div id="message">환영합니다.</div>
    
        <script>
        var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!";
        
        function updateMessage(){
            var el = document.getElementById('message');
            el.textContent = msg;
        }
        updateMessage();
        
        </script>
</body>
</html>

선언적 함수view

var 변수이름 = function(){ //실행코드 } 함수이름(); //함수호출


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var fun = function(){
            document.write("익명함수가 실행되었습니다.");
            
        }
        fun();
    </script>
</head>
<body>
    <div id="message">환영합니다.</div>
    
        <script>
        var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!";
        
        var updateMessage = function(){
            var el = document.getElementById('message');
            el.textContent = msg;
        }
        updateMessage();
        
        </script>

</body>
</html>

매개변수가 있는 함수view

funtion 함수이름(매개변수1, 매개변수2, .....){ //실행코드 } 함수이름(매개변수1, 매개변수2, .....); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func3(num){
            document.write(num);
        }
        func3("매개변수가 있는 함수 입니다.");
    </script>
</head>
<body>
        <div id="message">환영합니다.</div>
    
        <script>
        var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!";
        
        function updateMessage(msg){
            var el = document.getElementById('message');
            el.textContent = msg;
        }
        updateMessage(msg);
        
        </script>
</body>
</html>

리턴값이 있는함수view

funtion 함수이름(){ //실행코드 return 리턴값; } 함수이름(); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<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 volumeOne = getSize(3,2,3[1]);
        
        document.write(areaOne);
        document.write(volumeOne);
    </script>
</head>
<body>
    
</body>
</html>

함수의 정의 방법

함수는 정의방법에 따라 fuction 키워드를 이용하는 방법, 리터럴을 이용하는 방법, 객체를 이용하는 방법, 익명 함수 확장을 이용하는 방법이 있습니다.

객체는 데이터와 연산 작업을 담고 있는 기본적인 기능입니다.

객체란 여러분이 현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화한 것을 말합니다.

속성 : 객체 안에 있는 변수 메서드 : 객체 안에 있는 함수

객체를 생성하는 방법

축약형 표기법, 객체 생성자 표기법,view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //객체를 생성한 후 속성과 메서드를 추가하는 방법
        //축약형 표기법
        var hotel = {}
        
        hotel.name = "Park";
        hotel.rooms = 40;
        hotel.booked = 25;
        hotel.check = function(){
            return this.rooms - this.booked;
        }
        //객체 생성자 표기법
        var hotel = new Object{};
        
        hotel.name = "Park";
        hotel.rooms = 40;
        hotel.booked = 25;
        hotel.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.bookde;
            }
        }
        var quayHotel = new Hotel('quay',40,25);
        var parkHotel = new Hotel('park',40,25);
    </script>
</head>
<body>
    
</body>
</html>

객체view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var hotel = {
            name : 'quay',
            rooms : 40,
            booked : 25,
            gym : true,
            roomTypes:['트윈','더블','스위트'],
            checkAvailability: function(){
                return this.rooms - this.booked;
                return free;
            }
        };
    </script>
</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(){
                return this.rooms - this.booked;
                return free;
            }
        };
        
        var elName = document.getElementById('hotelName');
        elName.textContent = hotel.name;
        
        var elRooms = document.getElementById('room');
        elRooms.textContent = hotel.checkAvailability();
        
    </script>
</body>
</html>

생성자 문법을 이용한 객체view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var hotel = {
            name : 'quay',
            rooms : 40,
            booked : 25,
            gym : true,
            roomTypes:['트윈','더블','스위트'],
            checkAvailability: function(){
                return this.rooms - this.booked;
                return free;
            }
        };
    </script>
</head>
<body>
    <h2>예약정보</h2>
    <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>

데이터 저장view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>데이터 저장하기</title>
    <script>
        //변수 : 하나의 데이터를 저장하는 저장소
        var hotel = "Park";
        document.write(hotel,"<br>");
        
        //배열 : 여러개의 데이터를 저장하는 저장소
        var hotel1 = ["web","S","Y","Nan"];
        
        document.write(hotel1[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

문서 객체 모델 view

문서 객체 모델(DOM : Document Object Model)은 현재 페이지의 모델을 생성합니다.


<!DOCTYPE html>
<html lang="ko">
<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>

브라우저 객체 모델 : window 객체view

속성	설명
window.innerHeight	창의 높이(브라우저 창 테두리 및 사용자 인터페이스 부분은 제외)(단위는 픽셀)


<!DOCTYPE html>
<html lang="ko">
<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>

전역 자바스크립트 객체

전역 객체는 어떤 특정한 모델을 표현하지 않고 각기 다른 부분을 담당하는 관련 객체들의 집합입니다.

string, numver, boolean, data, math, RegEx

saying 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</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="ko">
<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="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var random = Math.floor((Math.random()*10));
        document.write(random);
    </script>
</head>
<body>
    
</body>
</html>

Date객체 view


<!DOCTYPE html>
<html lang="ko">
<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>

JavaScript Reference v1.0 </doc>

자바스크립트

자바스크립트 언어의 특징

자바스크립트 기본

대문자와 소문자

주석

키워드와 식별자

변수명 규칙

변수명 조합 규칙

변수

변수view

변수의 종류

지역변수/전역변수 view

매개변수 view

변수의 유형

배열

배열 view

연산자

산술연산자

복합연산자

증감연산자

비교연산자

논리연산자

조건문

if

if view

if~else

if~else view

다중 if

다중 if view

switch

switch view

switch view

조건부 연산자

조건부 연산자 view

반복문

while

반복문 view

반복문2 view2

반복문3 view3

do while

do while view

for

for view

5의 배수는 파란색, 7의 배수는 빨간색, 5와7의 배수는 검은색 출력

for문을 이용해서 배열의 합구하기

다중 for

다중 for view

다중 for2 view2

break와 continue

함수

함수를 사용하는 이유 view

함수의 사용 형태

선언적 함수view

선언적 함수view

매개변수가 있는 함수view

리턴값이 있는함수view

함수의 정의 방법

객체

객체를 생성하는 방법

축약형 표기법, 객체 생성자 표기법,view

객체view

생성자 문법을 이용한 객체view

데이터 저장view

내장 객체

브라우저 객체 모델

문서 객체 모델 view

브라우저 객체 모델 : window 객체view

전역 자바스크립트 객체

saying 객체 view

Number객체 view

Math객체 view

Date객체 view

자바스크립트