웹스토리보이

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

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

자바스크립트 주석

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

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

자바스크립트 대문자 소문자

자바스크립트는 대문자와를 구별합니다.

배열 객체 생성 : New Array() : (X)
배열 객체 생성 : new Array() : (O)

자바스크립트 사용방법

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

자바스크립트 사용방법 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 src="javascript.js"></script>

    <!-- 스크립트에 기술하는 방법 -->
    <script>
        document.write("javascript");
    </script>
</head>
<body>
    <!-- 태그에 직접 기술하는 방법 -->
    <a href="#" onclick="alert('javascript')"></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>Javascript</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>
<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><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><br>");
    </script>
</head>
<body>
    
</body>
</html>

변수 유형(자료형)

변수의 유형	설명
숫자(Number)	숫자를 사용할 수 있습니다.
문자(String)	문자를 사용할 수 있습니다. 큰따옴표(") 또는 작은 따옴표를(')를 사용합니다.
논리형(Boolean)	참(true)과 거짓(false)을 사용할 수 있습니다.
특수값(null)	아무런 값이 없을 경우 표현합니다.
특수값(undefined)	정의되지 않은 상태를 표현합니다.
심벌(symbol)	자기 자신을 제외한 유일한 값일 때 표현합니다.
객체(object)	객체 형태도 사용 가능합니다.
함수(function)	함수 형태도 사용 가능합니다.

변수 유형 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>
        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 x0 = 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(x0),"<br>");
    </script>
</head>
<body>
    
</body>
</html>

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

배열 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>
        //변수 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]);
        }
        document.write("<br><br>");

        //배열의 합 구하기
        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	나머지

대입연산자

연산자	예시	설명
+=	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

증감연산자

연산자	예시	설명
++	x++ 또는 ++x	x = x + 1
--	x-- 또는 --x	x = x - 1

비교연산자

연산자	예시	설명
==	x == y	좌변과 우변이 같다
===	x === y	좌변과 우변이 같다. 데이터형도 같다.
!=	x != y	좌변과 우변이 다르다.
!==	x !== y	좌변과 우변이 다르다. 데이터형도 다르다.
>	x > y	좌변이 우변보다 크다
<	x < y	좌변이 우변보다 작다
>=	x >= y	좌변이 우변보다 크거나 같다
<=	x <= y	좌변이 우변보다 작거나 같다

논리연산자

연산자	예시	설명
&&	x && y	둘다 true인 경우에 true를 반환합니다.[AND]
\|\|	x \|\| y	둘 중의 하나 이상이 true인 경우 true를 반환합니다.[OR]
!	!x	반대 값을 반환합니다.

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

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

if문 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>
        //변수 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(조건식){
//참(true)실행코드
} else {
//거짓(false)실행코드
}

if~else문 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>
        let num = 200;

        if( num > 100 ){
            document.write("숫자가 100보다 큽니다.<br><br>");
        } else {
            document.write("숫자가 100보다 작습니다.<br><br>");
        }

        //짝수 홀수 구하기
        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(조건식1){
     //참 일때 실행코드
} else if(조건식2){
     //앞 조건이 거짓일 때 실행코드
} else if(조건식3){
     //앞 조건이 거짓일 때 실행코드
} else if(조건식4){
     //앞 조건이 거짓일 때 실행코드
}
...............
} else {
     //앞의 모든 조건이 거짓일 때 실행코드
}

다중 if문 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>
        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>

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 = "webstoryboy";
        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>

var 변수 = 초깃값;
switch( 조건을 체크할 변수 ){
     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">
    <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.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문2 VIEW

<!DOCTYPE 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="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascirpt</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>

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

삼항 연산자 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>
        //사용자가 숫자를 넣으면 짝수인지 홀수인지 구분하는 스크립트를 작성하시오!
        let num = prompt("숫자를 입력하세요")

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

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

자바스크립트는 객체 기반의 반복문을 사용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다.

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

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>
        //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>

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

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

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 = 1;
        while(num <= 20){
            document.write(num);
            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문 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);
        document.write(2);
        document.write(3);
        document.write(4);
        document.write(5);
        document.write(6);
        document.write(7);
        document.write(8);
        document.write(9);
        document.write(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=1; i<=100; i++ ){
            if( i % 2 == 0){
                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>

while문 VIEW

<!DOCTYPE html>

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( let i=1; i<=10; i++){
            document.write(i)
        }
        document.write("<br>");

        //중첩 for문
        for( let i=1; i<=10; i++){
            for( let j=1; j<=10; j++){
                document.write(i +","+ j, "<br>");
            }   
        }
    </script>
</head>
<body>
    
</body>
</html>

중첩 for문1 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>
        // 2단 ~ 9단 (i=2; i<=9; i++)
        // 1 ~9        (j=1; i<=9; i++)

        // i * j = sum
        // 2 * 1 = 2
        // 2 * 2 = 3
        // 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문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 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)
    </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>

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

함수를 사용하는 이유 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>");
        }

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

        //"이것은 검은색입니다". * 10
        for(let i=1; i<=10; i++){
            document.write(i+". 이것은 검은색입니다","<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

<!DOCTYPE html>

JavaScript Reference v1.0 </doc>

JavaScript

자바스크립트 기초

자바스크립트 주석

자바스크립트 대문자 소문자

자바스크립트 사용방법

자바스크립트 사용방법 VIEW

자바스크립트 출력방법

자바스크립트 출력방법 VIEW

변수

변수명

식별자를 만드는 규칙

단어를 조합할 때 규칙

변수 선언

변수 VIEW

변수 유형(자료형)

변수 유형 VIEW

배열

배열 VIEW

연산자

산술연산자

대입연산자

증감연산자

비교연산자

논리연산자

조건문

if문

if문 VIEW

if~else문

if~else문 VIEW

다중 if문

다중 if문 VIEW

다중 if문2 VIEW

중첩 if문

중첩 if문 VIEW

switch문

switch문 VIEW

switch문2 VIEW

switch문3 VIEW

switch문4 VIEW

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

삼항 연산자 VIEW

반복문

while문

while문 VIEW

do while문

while문 VIEW

for문

for문 VIEW

for in문

while문 VIEW

중첩 for문

중첩 for문1 VIEW

중첩 for문1 VIEW

중첩 for문2 VIEW

함수

함수를 사용하는 이유 VIEW

선언전 함수

함수 VIEW

함수

함수

함수

함수

함수

함수

함수