김용태 Javascript

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

자바스크립트는 인터프린터 언어입니다.

자바스크립트 코드는 작성한 순서대로 구문 을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다.

자바스크립트는 클라이언트 스크립트 언어입니다.

자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영이 되는 언어는 PHP,ASP,JSP 언어가 있습니다.

자바스크립트는 객체 기반의 언어입니다.

C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.

다양한 라이브러리가 지원되는 언어입니다.

자바스크립트를 이용한 라이브러리에는 jQueyr, Angular.js, React.js, Node.js, Vue.js, Therr.js 등이 있습니다.

자바스크립트 주석

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

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

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

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

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

자바스크립트 문법 주의 사항

1. 자바스크립트는 코드 한 줄을 작성한 후에는 세미콜론을 쓰는 것이 좋습니다.세미콜론을 쓰지 않으면 다음 예제처럼 한 줄에 2개의 코드를 작성할 경우 오류가 발생합니다.

document.write("hi") document.write("bye") (X)
document.write("hi"); document.write("bye"); (O)

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

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

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

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

document.write("welcome!"; (X)
document.write("welvome!"); (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>

자바스크립트 출력방법

자바스크립트 출력하는 방법은 내장 객체 콘솔(consile), 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>
<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><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=Javascript05, 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;    //두번째 배열 저장소에 100을 저장

        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];
        //반복문
                // i = 0;  0<8;  1
                // i = 1;  1<8;  2
                // i = 2;  2<8;  3
                // i = 3;  3<8;  4
                // i = 4;  4<8;  5
                // i = 5;  5<8;  6
                // i = 6;  6<8;  7
                // i = 7;  7<8;  8
        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>

산술연산자

산술연산자 VIEW

연산자	예시	설명
+	x + y	더하기
-	x - y	빼기
*	x * y	곱하기
/	x / y	나누기
%	x % y	나머지

<!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 num1 = 15;
        let num2 = 2;
        let result;
        result = num1 + num2;
        document.write(result, "<br>");
        result = num1 - num2;
        document.write(result, "<br>");
        result = num1 * num2;
        document.write(result, "<br>");
        result = num1 / num2;
        document.write(result, "<br>");
        result = num1 % num2;
        document.write(result, "<br>");

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

대입연산자

대입연산자 VIEW

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

<!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 num1 = 10;
        let num2 = 3;

        num1 += num2;
        document.write(num1,"<br>");
        num1 -= num2;
        document.write(num1,"<br>");
        num1 *= num2;
        document.write(num1,"<br>");
        num1 %= num2;
        document.write(num1,"<br>");
    </script>
</head>
<body>

</body>
</html>

증감연산자

증감연산자 VIEW

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

<!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 num1 = 10;
        let num2 = 20;
        let result;

        num1--;
        document.write(num1,"<br>");
        num1++;
        document.write(num1,"<br>");
        result = num2++;
        document.write(result,"<br>");
    </script>
</head>
<body>

</body>
</html>

비교연산자

비교연산자 VIEW

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

<!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 a =10;
        let b =20;
        let c =10;
        let f ="20";
        var result;

        result = a>b;
        document.write(result,"<br>");
        result = a<b;
        document.write(result,"<br>");
        result = a<=b;
        document.write(result,"<br>");
        result = b==f;
        document.write(result,"<br>");
        result = a!=b;
        document.write(result,"<br>");
        result = b===f;
        document.write(result,"<br>");

    </script>
</head>
<body>

</body>
</html>

논리연산자

논리연산자 VIEW

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

<!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 a=10;
        let b=20;
        let m=30;
        let n = 40;

        let result;

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

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

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

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

        result = !(a>b);
        document.write(result,"<br>");


    </script>
</head>
<body>

</body>
</html>

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

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(조건식){
//참(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 == "sdw6545" && userPW == "1122"  ){
            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문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>
        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문2VIEW

<!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 mon = prompt("현재는 몇 월입니까?","0");

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

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

중첩 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 id ="sdw6545";
        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문1VIEW

<!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문2VIEW

<!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 mon = prompt("현재는 몇 월입니까?");

        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"1":
            case"2":
            case"12":  
            document.write("스키의 계절 겨울이네요!!");
            break;
            default: 
                document.write("잘못 입력하셨습니다.");
            break;
        }
    
    </script>
</head>
<body>
    
</body>
</html>

switch문3VIEW

<!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 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문4VIEW

<!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 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("그런 사이트 없어요~");
        }
    </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 변수 = 초깃값;
whlie( 조건식 ){
실행문;
증감식
}

whlie문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++;
        }

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

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

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

do~whlie문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문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>
        //브라우저에 1~10 까지 출력해주세요~
        let num=12345678910;
        document.write(num);
        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>")
            }
            if(i % 7 ==0 && i % 5 !=0){
                document.write("<span style='color:green'>" +i+"</span>")
            }
            if(i % 5 ==0 && i % 7 ==0){
                document.write("<span style='color:blue'>" +i+"</span>")
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

for in문VIEW

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

중첩 for문1VIEW

<!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>
        //for문을 이용해서 1부터 10까지 출력 해주세요~~
        for( let i=1; i<=10; i++ ){
            document.write(i)
        }
        //중첩 for문
        document.write("<br><br>")
        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문2VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript25</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*3 =8
        //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문3VIEW

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

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


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

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

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>
        //선언적 함수
        function func1(){
            document.write("1.함수가 실행되었습니다.<br><br>");
        }
        func1();

        //익명 함수
        const func2 = function(){
            document.write("2.함수가 실행되었습니다.<br><br>");
        }
        func2();

        //매개변수 함수
        function func3(str){
            document.write(str);
        }
        func3("3.함수가 실행되었습니다.<br><br>");


        //리턴값(결과값)이 있는 함수
        function func4(){
            const str ="4.함수가 실행되었습니다.<br><br>";
            return str;
        }
        const val = func4();
        document.write(val);


        //재귀함수: 함수 정의문 내에 함수를 호출하여 실행하는 함수
        function func5(){
            document.write("5.함수가 실행되었습니다.<br><br>");
            //func5();
        }
        func5();


        //재귀함수2: 함수를 여러번 실행하고 싶을 때
        function func6(num){
            if(num ==0 ){
                document.write("6.함수가 실행되었습니다.<br><br>");
            }else{
                document.write("6.함수가 실행되었습니다.<br><br>");
                func6(num - 1);
            }
        }
        func6(9);


        //콜백함수 : 함수를 변수에 저장하고 변수를 함수의 인자로 사용하여 매개변수 전달하는 함수
        function callback(num){
            //for문을 5번 실행
            for(let i=1; i<=5; i++ ){
                num(i);
            }
        }
        const fnuc7 = function(i){
            document.write("7.함수가 실행되었습니다.<br><br>");
        }
        callback(fnuc7);

        //내부함수 : 함수 안에 함수를 선언하는 함수
        function fnuc8out(){
            function fnuc8out(){
                document.write("8.함수가 실행되었습니다.<br><br>");
            }
            fnuc8out()
        } 
        fnuc8out()

        //화살표 함수 - 선언적 함수
        func9 = () =>{
            document.write("9.함수가 실행되었습니다.<br><br>");
        }
        func9();

        //화살표 함수 - 익명 함수
        const func10 = () => {
            document.write("10.함수가 실행되었습니다.<br><br>");
        }
        func10();

        //화살표 함수 - 리턴문
        func11 = () => {
            const str ="11.함수가 실행되었습니다.<br><br>";
            return str
        }
        const val11 = func11();
        document.write(val11);

        //화살표 함수 - 매개변수, 괄호
        const func12= (str) =>{
            return str;
        }
        const val12 = func12("12.함수가 실행되었습니다.<br><br>");
        document.write(val12);

        //화살표 함수 - 매개변수, 괄호 생략
        const func13= str =>{
            return str;
        }
        const val13 = func13("13.함수가 실행되었습니다.<br><br>");
        document.write(val13);


        //화살표 함수 - 리턴 생략
        const func14= (str) =>str;
        const val14 = func14("14.함수가 실행되었습니다.<br><br>");
        document.write(val14);



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

Javascript Reference v1.0 </doc>

자바스크립트

자바스크립트 기초