JavaScript

자바스크립트는 객체 기반의 클라이언트 스크립트 언어로 웹 페이지에서 동적으로 만드는데 사용하는 언어입니다.

  • 자바스크립트는 인터프린터 언어입니다.
    • 자바스크립트 코드는 작성한 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다.
  • 자바스크립트는 클라이언트 스크립트 언어입니다.
    • 자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영이 되는 언어는 PHP, ASP, JSP 언어가 있습니다.
  • 자바스크립트는 객체 기반의 언어입니다.
    • C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.
  • 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
    • 자바스크립트를 이용한 라이브러리에는 jQueyr, Angular.js, React.js, Node.js, Vue.js, Three.js등이 있습니다.

자바스크립트 기초

자바스크립트 주석

자바스크립트 주석은 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용한다.

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

자바스크립트 코드 입력 시 주의 사항

자바스크립트는 대문자와 소문자를 구별한다.

배열 객체 생성 : New Array() : (x)
배열 객체 생성 : new Array() : (o)

코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋다.

document.write("hi") document.write("bye") : (x)
document.write("hi"); document.write("bye"); : (o)

하지만 코드를 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋다.

문자형 데이터를 작성할 때는 큰따옴표(" ")와 작은따옴표(' ')의 겹침 오류를 주의해야 한다.

큰따옴표 겹침 오류
document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.");

잘된 예
document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.');
document.write("책에＼" 자바스크립트는 대소문자를 구분해야 합니다＼"라고 나와 있다.");

코드를 작성할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 한다.

document.write("welcome!"; (x)
document.write("welcome!"); (o)

자바스크립트 사용방법

자바스크립트 사용하는 방법은 외부파일, 스크립트 태그, 태그에 직접 기술하는 방법이 있습니다.

자바스크립트 사용방법 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javsscript</title>

    <!-- 외부 파일로 로드하는 방법 -->
    <script src="javscript.js"></script>

    <!-- 스크립트에 기술하는 방법 -->
    <script>
        document.write("javescript");
    </script>
</head>
<body>
    <!-- 태그에 직접 기술하는 방법 -->
    <a href="#" onclick="alert('javescript')">클릭</a>
</body>
</html>

자바스크립트 출럭방법

자바스크립트 출력하는 방법은 내장 객체 콘소(console), document.write(), alert()을 이용하는 방법이 있습니다.

자바스크립트 출럭방법 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javasript</title>
    <script>
        //콘솔 로그를 이용하는 방법
        console.log("01. 자바스크립트가 출력되었습니다.")

        //웹 문서에 출력하는 방법
        document.write("02. 자바스크립트가 출력되었습니다.")

        //경고창을 이용하여 출력하는 방법
        alert("03. 자바스크립트가 출력되었습니다.")
    </script>
</head>
<body>
    
</body>
</html>

변수

변수(Variables)는 변하는 하나의 데이터 값을 저장하는 저장소입니다.

변수명

키워드 : 자바스크립트에서 사용하는 단어, 즉 자바스크립트 문법을 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드입니다.
식별자 : 사용자가 임의로 사용하는 단어, 즉 변수나 함수를 사용할 때 정의하는 키워드입니다.

식별자를 만드는 규칙

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

단어를 조합할 때 규칙

  • 언더스코어 노테이션(스네이크 표기법) : color_top와 같이 중간에 '_'를 사용합니다.
  • 캐멀 노테이션 : colorTop와 같이 두번 째 단어의 첫 글자를 대문자로 사용합니다.
  • 파스칼 노테이션 : ColorTop와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.

변수 선언

var 변수명 = 값; or let 변수명 = 값

변수 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        //변수 선언
        var x =100;                   //변수 x에 숫자 100을 저장
        var y =200;                   //변수 y에 숫자 200을 저장
        var z ="자바스크립트";    //변수 z에 문자 "자바스크립트"를 저장

        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br>");
        document.write("<br>");

        //변수 선언
        let a = 100;
        let b = 200;
        let c = "자바스크립트";

        document.write(a);
        document.write("<br>");
        document.write(b);
        document.write("<br>");
        document.write(c);
        document.write("<br><br>");

        //변수 변경
        x = 300;             //변수 x의 값을 100에서 300으로 변경
        y = 400;             //변수 y의 값을 200에서 400으로 변경
        z = "javascript"    //변수 z의 값을  "자바스크립트"에서 "javascript" 변경

        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br>");
        document.write("<br>");
    </script>
</head>
<body>
    
</body>
</html>

변수의 유형(자료형)

변수의 유형 설명
숫자(Nunmber) 숫자를 사용할 수 있습니다.
문자(String) 문자를 사용할 수 있습니다. 큰따옴표(") 또는 작은 따옴표(')를 사용합니다.
논리형(Boolean) 참(true)과 거짓(false)을 사용할 수 있습니다.
특수값(null) 아무런 값이 없을 경우 표현합니다.
특수값(nudefined) 정의되지 않은 상태를 표현합니다.
객체(Object) 객체 형태도 사용 가능합니다.
함수(Function) 함수 형태도 사용 가능합니다.
변수 유형 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let x1 = 100;                           //변수에 숫자를 저장
        let x2 = "100";                         //변수에 문자를 저장
        let x3 = "javascript";                  //변수에 문자를 저장
        let x4 = true;                           //변수에 논리값을 저장
        let x5 = false;                          //변수에 논리값을 저장
        let x6;                                    //특수값
        let x7 = undefined;                   //특수값
        let x8 = function(){}                   //변수에 함수를 저장
        let x9 = {}                               //변수에 객체를 저장
        let x10 = Symbol();                    //변수에 심볼을 저장

        document.write(typeof(x1),"<br>");
        document.write(typeof(x2),"<br>");
        document.write(typeof(x3),"<br>");
        document.write(typeof(x4),"<br>");
        document.write(typeof(x5),"<br>");
        document.write(typeof(x6),"<br>");
        document.write(typeof(x7),"<br>");
        document.write(typeof(x8),"<br>");
        document.write(typeof(x9),"<br>");
        document.write(typeof(x10),"<br>");
    </script>
</head>
<body>
    
</body>
</html>

배열

배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.

배열 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //변수 x = 100 변수 y = 200 을 저장한 다음에 출력해주세요!
        let x = 100;
        let y = 200;

        document.write(x,"<br>");
        document.write(y,"<br><br>");

        //배열을 선언하고 데이터 입력
        const arr1 = new Array();
        arr1[0] = 100;              //첫번째 배열 저장소에 100을 저장
        arr1[1] = 200;              //두번째 배열 저장소에 200을 저장

        document.write(arr1[0],"<br>");
        document.write(arr1[1],"<br><br>");

        //배열을 선언하고 동시에 데이터 입력
        const arr2 = new Array(100,200);

        document.write(arr2[0],"<br>");
        document.write(arr2[1],"<br><br>");

        //배열을 선언하지 않고 데이터 입력
        const arr3 = [ ]
        arr3[0] = 100;
        arr3[1] = 200;

        document.write(arr3[0],"<br>");
        document.write(arr3[1],"<br><br>");

        //배열을 선언하지 않고 동시에 데이터 입력
        const arr4 = [100,200,300];

        document.write(arr4[0],"<br>");
        document.write(arr4[1],"<br>");
        document.write(arr4[2],"<br><br>");

        //배열의 크기 구하기
        const arr5 = [100,200,300,400,500];

        document.write(arr5.length);
        document.write("<br><br>");

        //배열 가져오기
        const arr6 = [100,200,300,400,500,600,700,800];

        //반복문
        for(let i=0; i<arr6.length; i++){
            document.write(arr6[i]);
        }

        //배열의 합 구하기
        const arr7 = [100,200,300,400,500];
        let sum = 0;

    
        for(let i=0; i<arr7.length; i++){
            sum = sum + arr7[i];
        }
        
        document.write(sum);

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

연산자

산술 연산자

연산자 예시 설명
+ x + y 더하기
- x - y 빼기
* x * y 곱하기
/ x / y 나누기
% x % y 나머지
산술 연산자 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        var num1 = 15;
        var num2 = 2;
        var result;
        result = num1 + num2;
        document.write(result, "<br>"); //17
        result = num1 - num2;
        document.write(result, "<br>"); //13
        result = num1 * num2;
        document.write(result, "<br>"); //30
        result = num1 / num2;
        document.write(result, "<br>"); //7.5
        result = num1 % num2;
        document.write(result, "<br>"); //1
    </script>
</head>
<body>
    
</body>
</html>

대입 연산자

연산자 예시 설명
+= x+=10 x = x + 10
-= x-=10 x = x - 10
*= x *= y x = x * 10
/= x /= y x = x / 10
%= x %= y x = x % 10
대입 연산자 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        var num1 = 10;
        var num2 = 3;

        num1 +=num2;        //num1 = num1(10) + num2(3);
        document.write(num1, "<br>");   //13

        num1 -=num2;        //num1 = num1(13) - num2(3);
        document.write(num1, "<br>");   //10

        num1 *=num2;        //num1 = num1(10) * num2(3);
        document.write(num1, "<br>");   //30

        num1 %=num2;        //num1 = num1(30) % num2(3);
        document.write(num1, "<br>");   //0
    </script>
</head>
<body>
    
</body>
</html>

증감 연산자

연산자 예시 설명
++ x++ 또는 ++x x = x + 1
-- x-- 또는 --x x = x - 1
증감 연산자 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        var num1 = 10; 
        var num2 = 20;
        var result;

        num1--;                                                     //9
        document.write(num1,"<br>"); 

        num1++;                                                    //10
        document.write(num1,"<br>"); 

        result = num2++;                                         //result:20, num2: 21
        document.write(result,"<br>")

        result = ++num2;                                         //result:22, num2: 22
        document.write(result,"<br>")
    </script>
</head>
<body>
    
</body>
</html>

비교 연산자

연산자 예시 설명
== x == y 좌변과 우변이 같다
=== x === y 좌변과 우변이 같다. 데이터형도 같다.
!= x != y 좌변과 우변이 다르다.
!== x !== y 좌변과 우변이 다르다. 데이터형도 다르다.
> x > y 좌변이 우변보다 크다
< x < y 좌변이 우변보다 작다
>= x >= y 좌변이 우변보다 크거나 같다
<= x <= y 좌변이 우변보다 작거나 같다
비교 연산자 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        var a = 10;
        var b = 20;
        var c = 10;
        var f = "20";
        var result;

        result = a > b;         //false
        document.write(result,"<br>");
        result = a < b;         //true
        document.write(result,"<br>");
        result = a <= b;       //true
        document.write(result,"<br>");
        result = b == f;        //false
        document.write(result,"<br>");
        result = a != b;         //false
        document.write(result,"<br>");
        result = b === f;      //false
        document.write(result,"<br>");
    </script>
</head>
<body>
    
</body>
</html>

논리 연산자

연산자 예시 설명
&& x && y 둘다 true인 경우에 true를 반환합니다.[AND]
|| x || y 둘 중의 하나 이상이 true인 경우 true를 반환합니다.[OR]
! !x 반대 값을 반환합니다.
논리 연산자 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        var a=10;
        var b=20;
        var m=30;
        var n=40;

        var result;
        result = a > b || b >= m||m > n;                //false || false || false
        document.write(result,"<br>");                   //false
        
        var result;
        result = a > b || b >= m||m <= n;              //false || false || true
        document.write(result,"<br>");                   //true

        var result;
        result = a < b && b >= m && m <= n;     //true && false && true
        document.write(result,"<br>");                   //false

        var result;
        result = a < b && b <= m && m <= n;     //true && true && true
        document.write(result,"<br>");                   //true

        result=!(a>b);                                         //!false를 계산
        document.write(result,"<br>");                    //true
    </script>
</head>
<body>
    
</body>
</html>

조건문

조건문은 조건식의 값의 참(true)인지, 거짓(false) 인지에 따라 자바스크립트 코드를 제어합니다.

if문

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

if문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        //변수 num에 숫자 100을 저장하고 출력하시오.
        let num = 100;

        document.write(num);
        document.write("<br><br>");

        //변수 num2에 값이 숫자 200보다 크면 출력하시오.
        let num2 = 201;
        if(num2 > 200){
            document.write(num2);
            document.write("<br><br>");
        }

        //조건값이 true 무조건 실행
        if(true){
            document.write(num2);
            document.write("<br><br>");
        }

        //if문 약식
        if(true)document.write(num2);
        
        document.write("<br><br>");

        //짝수
        let num3 = prompt("숫자를 입력해주세요!");

        if(num3 % 2 === 0){
            document.write("당신이 입력한 숫자는 짝수입니다.");
        }
        document.write("<br><br>");

        //방문자 이름
        let userName = prompt("당신의 이름은 무엇입니까?","");

        if(userName){
            document.write(userName+"님 방갑습니다. 방문을 환영합니다.")
        }

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

if~else문

if(조건식){
     //참(true)실행코드
} else {
     //거짓(false)실행코드
}

if~else문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript</title>
    <script>
        let num = 200;
        
        if (num > 100){
            document.write("숫자가 100보다 큽니다.")
        } else{
            document.write("숫자가 100보다 작습니다.")
        }

        //짝수 홀수 구하기
        let num2 = prompt("당신이 좋아하는 숫자는 무엇입니까?")

        if(num2 % 2 == 0){
            document.write("당신이 좋아하는 숫자는 짝수입니다.<br><br>")
        } else {
            document.write("당신이 좋아하는 숫자는 홀수입니다.<br><br>")
        }

        //아이디 비밀번호 구분하기
        let userID = prompt("아이디를 입력하세요.");
        let userPW =prompt("비밀번호를 입력하세요.")

        if(userID == "webstoryboy" && userPW == "1245"){
            document.write("환영합니다.<br><br>")
        } else {
            document.write("아이디 또는 비밀번호가 틀렸습니다.<br><br>")
        }

        //확인하기
        let result = confirm ("정말로 회원을 탈퇴하겠습니까?")

        if(result){
            document.write("탈퇴 처리되었습니다.")
        } else {
            document.write("탈퇴 취소되었습니다.")
    </script>
</head>
<body>
    
</body>
</html>

다중 if문

if(조건식){
    //참 일때 실행코드
} else if(조건식2){
    //앞 조건이 거짓일 때 실행코드 } else if(조건식3){     //앞 조건이 거짓일 때 실행코드 } else if(조건식4){     //앞 조건이 거짓일 때 실행코드 }
...................
    //앞에 모든 조건이 거짓일때 실행코드

다중 if문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajvascript</title>
    <script>
        let food = prompt("다음 중 가장 먹고 싶은 음식은? 1.카레 2.레몬 3.팝콘 4.커피 5.초콜릿")

        if(food == "카레"){
            document.write("매콤한 음식을 고른 당신은 사람에게 첫눈에 반하기보다는 서서히 사랑에 빠지는 스타일입니다.")
        } else if(food == "레몬"){
            document.write("새콤한 과일을 고른 당신은 쉽게 마음을 열고 또 쉽게 사람을 믿는 스타일입니다.")
        } else if(food == "팝콘"){
            document.write("짭짭할고 고소한 팝콘을 고른 당신은 오래 알고 지낸 사람들에게서 보이는 의외에 모습에 약한 스타일입니다.")
        } else if(food == "커피"){
            document.write("쌉싸름한 커피를 고른 당신은 사랑에 누구보다 적극적인 스타일입니다.")
        } else if(food == "초콜릿"){
            document.write("달콤한 초콜릿을 선택한 당신은 금방 사랑에 빠지는 스타일입니다.")
        } else {
            document.write("해당 과일이 없습니다.")
        }
    </script>
</head>
<body>
    
</body>
</html>
다중 if문 그 2번째 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        var mon = prompt("현재는 몇 월입니까?","0");

        if(mon >=9 && mon <=11){                   //9 ~ 11
            document.write("독서의 계절 가을이네요!!");
        }else if(mon >=6 && mon <=8){              //6 ~ 8
            document.write("여행가기 좋은 여름이네요!!");
        }else if(mon >=3 && mon <=5){              //3 ~ 5
            document.write("햇살 가득한 봄이네요!!");
        }else{                                     //나머지 입력
            document.write("스키의 계절 겨울이네요!!");
        }
    </script>
</head>
<body>
    
</body>
</html>

중첩 if문

if(조건식1){
    if(조건식2){
         //실행문
    }
}

중첩 if문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let id = "김재민";
        let pw = "1234";

        let userId = prompt("아이디는 무엇입니까?");
        let userPw = prompt("비밀번호가 무엇입니까?");

        if(id == userId){
            if(pw == userPw){
                document.write(userId+"님 반갑습니다.");
            } else{
                alert("비밀번호가 일치하지 않습니다.");
                location.reload();
            }
        } else{
            alert("아이디가 일치하지 않습니다.");
            location.reload();
        }
    </script>
</head>
<body>
    
</body>
</html>

switch문

var 변수 = 초기값;
switch(조건을 체크할 변수){
    case 값1:
        //조건에 체크할 변수가 값1을 가지면 실행
    break;
    case 값2:
        //조건에 체크할 변수가 값1을 가지면 실행
        break;
    case 값3:
        //조건에 체크할 변수가 값1을 가지면 실행
    break;
    ...............
    default:
        //해당되는 값을 가지고 있지 않을 경우에 실행
    break;
}

switch문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let first = prompt("제일 먼저 잡고 싶은 물건은? 1.과일, 2.떡, 3.수정구술, 4.현찰, 5.반지");

        switch(first){
            case "과일" :
                document.width("생각이 많고 진지해 보이는 이성 타입입니다.");
            break;
            case "떡" :
                document.width("무드에 약하고 화술과 매너가 좋은 이성 타입입니다.");
            break;
            case "수정구술" :
                document.width("정열적이고 열중하는 이성 타입입니다.");
            break;
            case "현찰" :
                document.width("부드럽고 따듯한 이성 타입입니다.");
            break;
            case "반지" :
                document.width("자기를 보호해 줄 수 잇는 이성 타입입니다.");
            break;
            default :
                document.width("잘못 선택했습니다.");
            break;
        }
    </script>
</head>
<body>
    
</body>
</html>
switch문2 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let mon = prompt("현재는 몇 월입니까?","0");

        switch(mon){
            case "9": case"10": case"11":                   
            document.write("독서의 계절 가을이네요!!");
            break;
            case "6": case "7": case "8": 
            document.write("여행가기 좋은 여름이네요!!");
            break;
            case "3": case "4": case "5":
            document.write("햇살 가득한 봄이네요!!");
            break;
            case "12": case "1": case "2":
            document.write("스키의 계절 겨울이네요!!");
            break;
            default :
            document.write("12월이 최대값입니닷!!");
            break;
        }
    </script>
</head>
<body>
    
</body>
</html>
switch문3 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let site = prompt("네이버, 다음, 네이트, 구글 중 즐겨 사용하는 사이트는?")
        let url = "0";

        switch(site){
            case "네이버" : url = "https://www.naver.com";
            break;
            case "다음" : url = "https://www.daum.net";
            break;
            case "네이트" : url = "https://www.nate.com";
            break;
            case "구글" : url = "https://www.google.co.kr";
            break;
            default : document.write("그런 사이트 없어요~");
            break;
        }
        //alert(url)
        if(url) location.href = url
    </script>
</head>
<body>
    
</body>
</html>
switch문4 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let site = prompt("네이버, 다음, 네이트, 구글 중 즐겨 사용하는 사이트는?")
        let url = "0";

        if(site == "네이버"){
            url = "https://www.naver.com";
        } else if(site == "다음"){
            url = "https://www.daum.net";
        }else if(site == "네이트"){
            url = "https://www.nate.com";
        }else if(site == "구글"){
            url = "https://www.google.co.kr";
        }else {
            document.write("그런 사이트 없어요~");
        }

        if(url) location.href = url
    </script>
</head>
<body>
    
</body>
</html>

조건부 연산자(삼항연산자)

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

switch문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //사용자가 숫자를 넣으면 짝수인지 홀수인지 구분하는 스크립트를 작성하시오!
        
        let num = prompt("숫자를 입력하세요")

        if( num % 2 ==0){
            document.write("짝수")
        } else {
            document.write("홀수")
        }

        //삼항 연산자
        ( num % 2 ==0) ? document.write("짝수") : document.write("홀수");
    </script>
</head>
<body>
    
</body>
</html>

반복문

반복문을 사용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다.

while문

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

while문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //100보다 작은 수 출력하기
        let num = 0;                    //초기값 설정
        while( num < 100 ){           //조건식 설정
            num++;
            document.write(num,"<br>");
        }

        //100보다 작은 수(짝수만) 출력하기
        let num2 = 0;                   //초기값 설정
        while( num2 <= 100){
            if( num2 % 2 ==0){        //조건식 설정
                document.write(num2,"<br>");
            }
            num2++;
        }

        //100보다 작은 수(4의 배수) 출력하기
        let num3 = 0;                   //초기값 설정
        while( num3 <= 100){
            if( num3 % 4 ==0){        //조건식 설정
                document.write(num3,"<br>");
            }
            num3++;
        }

        //100보다 작은 수(4의배수와 6의배수) 출력하기
        let num4 = 1;
        while( num4 <= 100){
            if(num4 % 4 ==0 || num4 % 6 ==0){
                document.write(num4);
            } 
            num4++;
        } 
        document.write("<br><br>");

        //1~100까지 짝수는 파란색, 홀수는 빨간색으로 출력하세요~
        let num5 = 1;
        while(num5 <= 100){
            if(num5 %2 ==0){
                document.write("<span style='color:blue'>"+num5+"</span>");
            } else {
                document.write("<span style='color:red'>"+num5+"</span>");
            }
            num5++
        }
    </script>
</head>
<body>
    
</body>
</html>

do~while문

while문은 조건을 검사하고 코드를 반복적으로 실행합니다. 첫 조건이 거짓이라면 코드를 실행하지 않을 수 있습니다. 하지만 do while문은 조건이 참, 거짓과 상관없이 최소한 한번은 실행해야합니다.

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

do~while문 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //while문을 이용해서 1~20까지 출력하세요~
        let num = 0;
        while(num < 20){
            num++
            document.write(num);
        }
        document.write("<br>");

        //do while문을 이용해서 1~20까지 출력하세요~
        let num2 = 0;
        do{
            num2++;
            document.write(num2);
        }while(num2 <= 19);

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

for문

for(초기값; 조건식; 증감식){
    //반복 실행 코드
}

for문 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //브라우저에 1~10까지 출력해주세요.
        document.write(1,2,3,4,5,6,7,8,9,10);
        document.write("<br><br>");

        //for 문을 이용해서 1~100까지 출력~
        for( let i=1; i<=100; i++){
            document.write(i,",")
        }
        document.write("<br><br>");

        //for 문을 이용해서 1~100까지(짝수만) 출력~
        for( let i=2; i<=100; i+=2){
            document.write(i,",")
        }
        document.write("<br><br>");

        //for 문을 이용해서 5의 배수 빨간색, 7의배수일때 초록색,
        //5와 7의 배수는 아쿠아색으로 출력하세요~
        for( let i=1; i<=100; i++){
            if( i % 5 == 0 && i % 7 != 0 ){
                document.write("<span style='color:red'>"+i+"</span>");
            } else if( i % 7 == 0 && i % 5 != 0 ){
                document.write("<span style='color:green'>"+i+"</span>");
            } else if( i % 7 == 0 && i % 5 == 0 ){
                document.write("<span style='color:blue'>"+i+"</span>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

for in문

switch문 VIEW

중첩 for문

for(var i=0; i<100; i++){
    for(var j=0; j<100; j++){         //반복코드     } }

중첩 for문1 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //for문을 이용해서 1부터 10까지 출력해주세요~
        for(i=0; i<=10; i++){
            document.write(i);
        }
        document.write("<br>");

        //중첩 for문
        for(i=0; i<=10; i++){
            for(j=0; j<=10; j++){
                document.write(i+","+j,"<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>
중첩 for문2 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        // 2단 ~ 9단 (i=2; i<=9; i++)
        // 1 ~ 9       (j=1; j<=9; j++)

        // i * j = sum
        //2 * 1 = 2   
        //2 * 2 = 4
        //2 * 4 = 8
        //2 * 5 = 10
        //2 * 6 = 12
        //2 * 7 = 14
        //2 * 8 = 16
        //2 * 9 = 18

        for( let i=2; i<=9; i++){
            for(let j=1; j<=9; j++){
                let sum = i * j;
                document.write(i + "*" + j + "=" + sum)
                document.write("<br>")
            }
        }
    </script>
</head>
<body>
    
</body>
</html>
중첩 for문3 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        let table = "<table border='1'>";
        let num = "1";

            for(let i=1; i<=50; i++){
                table += "<tr>";

                for(let j=1; j<=50; j++){
                    table += "<td>"+num+"</td>";
                    num++;
                }

                table += "</tr>";
            }

        table += "</table>";

        document.write(table);

        //alert(table);
    </script>
</head>
<body>
    <!-- <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table> -->
</body>
</html>

break문

break문 VIEW

함수

함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역활을 하기 때문에 반복사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다.

함수를 사용하는 이유 VIEW
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <script>
        //"이것은 빨간색입니다." 문자열을 출력해주세요~
        document.write("이것은 빨간색입니다","<br><br>");

        //"이것은 빨간색입니다." 문자열을 출력해주세요~*10
        for(let i=1; i<=10; i++){
            document.write("이것은 빨간색입니다","<br>");
        } 
        document.write("<br>");

        //"1. 이것은 빨간색입니다. 2. 이것은 빨간색입니다." 문자열을 출력해주세요~*10
        for(let i=1; i<=10; i++){
            document.write(i+". 이것은 빨간색입니다","<br>");
        }
        document.write("<br>");

        //이것은 검음색입니다. *10
        for(let i=1; i<=10; i++){
            document.write(i+". 이것은 검음색입니다","<br>");
        } 
        document.write("<br>");

        //이것은 파란색입니다. *10
        for(let i=1; i<=10; i++){
            document.write(i+". 이것은 파란색입니다.","<br>");
        }
        document.write("<br><br><br><br>");

        function colorName(color){
            for(let i=1; i<=10; i++){
            document.write(i+". 이것은 "+ color +"입니다.","<br>");
            }
        }
        colorName("빨간색")
        colorName("파란색")
        colorName("검은색")

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

선언적 함수

function 함수명(){
    //실행함수
}
함수명() --> 함수호출

함수를 사용하는 이유 VIEW

선언적 함수

선언적 함수

선언적 함수

선언적 함수

선언적 함수

선언적 함수

선언적 함수

JavaScript