웹다이어리

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

자바스크립트는 인터프린터 언어임
- 자바스크립트 코드는 작성한 순서대로 구문을 분석함. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄부터는 구문을 분석하지 않음
자바스크립트는 클라이언트 스크립트 언어임

자바스크립트는 서버에서 실행되지 않고 사용자 컴퓨터에서 시행되는 클라이언트 언어임. 서버에서 운영되는 언어에는 PHP, ASP, JSP언어 등이 있음
C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어임. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어임

자바스크립트는 객체 기반의 언어임
자바스크립트는 다양한 라이브러리가 지원되는 언어임
- 자바스크립트를 이용한 라이브러리에는 제이쿼리(JQuery).js, 앵귤러(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>자바스크립트</title>
    <!--외부 파일로 로드하는 방법-->
    <script src="javascript.js"></script>
    <!--스크립트에 기술하는 방법-->
    <script>   
    document.write("javascript")
    </script>
</head>
<body>
<!--태그에 직접 기술하는 방법-->
    <a href="#" onclick="alert('javascript')">클릭</a> <!--alt+b-->
</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>

자바스크립트 오류

코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋습니다. 세미콜론을 쓰지 않고 한 줄에 2개의 코드를 작성할 경우 오류가 발생합니다.

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

코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 읽기 좋습니다.

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

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

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

document.write("welcome!"; (X)
document.write("welcome!"); (O)

변수(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에서 400d으로 변경
    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>
    </head>
    <body>
    <script>
    //Q: 변수 x = 100, 변수 y = 200을 저장한 다음에 출력하세요!

    let x = 100;
    let y = 200;

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

    //Q: 배열을 이용해서 화면에 100과 200을 출력하세요!

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

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

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

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

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

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

    //4. 배열을 선언하지 않고 동시에 데이터를 입력
    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],"<br>");
    }
    document.write("<br>")

    //배열의 합 구하기
    const arr7 =  [100, 200, 300, 400, 500];
    sum = 0
    for(let i = 0; i<arr7.length; i++){
    sum = sum + arr7[i];
    document.write(sum);
    }

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

산술연산자

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

산술연산자 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 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>

대입연산자

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

증감연산자

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

비교연산자

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

비교연산자 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 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>

논리연산자

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

논리연산자 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 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="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값에 숫자 201을 넣고 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>");
        
        //prompt이용
        let num3 = prompt("숫자를 입력해주세요!")
        if(num3 %2 ==0 ){
            document.write("당신이 입력한 숫자는 짝수입니다.");
            document.write("<br><br>");
        }

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

        if(userName){
            document.write(userName+"님 반갑습니다! 방문을 환영합니다")
            document.write("<br><br>");
        }
    </script>
</head>
<body>

</body>
</html>

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

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 num = 200;

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

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

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

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

        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){
if(조건문2){
}
}
.................
}else{
}

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

        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>

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

중첩 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 = "webdiary";
        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;
    case 값4: 코드4;
    break;

    default: 코드5;
}

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.write("생각이 많고 진지해 보이는 이성 타입입니다")
            break;
            case "떡":
            document.write("무드에 약하고 화술과 매너가 좋은 이성 타입입니다")
            break;
            case "수정구슬":
            document.write("정열적이고 열중하는 이성 타입입니다")
            break;
            case "현찰":
            document.write("부드럽고 따듯한 이성 타입입니다")
            break;
            case "반지":
            document.write("상대를 보호해 줄 수 있는 타입 입니다")
            break;
        }
    </script>
</head>
<body>
    
</body>
</html>

switch문2VIEW

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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("존재하지 않는 사이트 입니다.");
}
//alert(url)
if(url){
    location.href = url;
}
    </script>
</head>
<body>
    
</body>
</html>

switch문3VIEW

>!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 "1": case "2": case "3": document.write("스키의 계절 겨울이네요!");
            break;
        }
    </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 = 1;
        while (num2 <= 100) {
            if (num2 % 2 == 0) {
                document.write(num2, "<br>");
            }
            num2++;
        };

        //100보다 작은 수(4의 배수) 출력하기
        let num3 = 1;
        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, "<br>")
            };
            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>

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

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

do while문VIEW

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

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

for in 반복문은 for문과 비슷하게 for 키워드를 사용합니다. 내부 요소에 접근하는 방식에 차이가 있으며 in 키워드를 기준으로 변수와 반복할 대상을 설정합니다.

for( 변수 in 반복할 대상 ){
//실행코드
}

for~in문VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //배열과 반복문
        let arr1 = new Array(100,200,300,400,500);

        //for문
        for(var i=0; i<arr1.length; i++){
            document.write(arr1[i]," ");
        }
        document.write("<br><br>");
        
        //for in문
        for(var i in arr1){
            document.write(arr1[i]," ");
        }
    </script>
</head>
<body>
    
</body>
</html>

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

중첩 for문 1VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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," ");
            }
            document.write(i,"<br>");
        }
        
    </script>
</head>
<body>
    
</body>
</html>

중첩 for문 2 - 구구단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단
        for (let i = 2; i <= 9; i++) {
            for (let j = 1; j <= 9; j++) {
                let sum = i*j;
                document.write(i+"*"+j+"="+sum,"<br>");
            }
            document.write("<br>")
        }
    </script>
</head>
<body>
</body>
</html>

중첩 for문 3 - 테이블 만들기VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let table = "<table border = '1'>";
        let num = 1;
        // let table2 = "</table>";
        //     for(let i= )
        // table += "</table>";
        // for(let i = 0; i<100; i++){
        //     table += "<tr>"
        // }
        for(let i=1; i<=10; i++){
            table += "<tr>";
            for(let j =1; j<=10; j++){
                table += "<td>"+num+"</td>";
                num++;
            }
            table +="</tr>";
        }
        document.write(table);
    </script>
</head>
<body>
    <!-- <table border="1">
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </tbody>
    </table> -->
</body>
</html>

let 변수 = 초깃값;
while(조건식){
    break;
    //자바스크립트 코드;
    //증감식;
}

break문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>
        for(let i = 1; i>=10; i++){
            if(i==6)break;
            document.write(i,">br>");
        }
        document.write("- 끝 -");
    >/script>
>/head>
>body>
    
>/body>
>/html>

for(초깃값; 조건식; 증감식){
continue;
//자바스크립트 코드;
}

continue문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>
            for(let i = 1; i<=10; i++){
                if(i%2==0)continue;
                document.write(i,"<br>");
            }
            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 a = "이것은 빨간색입니다. "

        document.write(a,"<br>");

         //"이것은 빨간색입니다." X10 문자열을 출력하세요♡
         for(i=0; i<10; i++){
             document.write(a);
         }
         document.write("<br>");

         i = 0;
         while(i<10){
            document.write(a);
            i++;
         }
         document.write("<br>");

         i = 0;
         do{
            document.write(a);
            i++;
         }while(i<10)
         document.write("<br>");


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

         //"이것은 검은색입니다." X10 문자열을 출력하세요♡
         let b = "이것은 검은색입니다. "
         for(i=0; i<10; i++){
             document.write(i+1,". ",b);
         }
         document.write("<br>");

          //"이것은 파란색입니다." X10 문자열을 출력하세요♡
          let c = "이것은 파란색입니다. "
         for(i=0; i<10; i++){
             document.write(i+1,". ",c);
         }
         document.write("<br><br>");

         //☆ 함수를 사용하는 이유 ☆
         function colorName(color){
            for(i=0; i<10; i++){
                document.write(i+1,". ","이것은" +color+"입니다. ");
            }
         document.write("<br>");
         }

         colorName("빨간색")
         colorName("검정색")
         colorName("파란색")
         colorName("노랑색")
    </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>
        //선언적 함수
        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(10)

        //콜백함수: 함수 안에서 어떤 특정한 시점에 호출되는 함수. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다.
        function callback(num){
            //for문을 5번 실행
            for(let i= 1; i<=5; i++){
                num(i);
            }
        }
        const func7 = function(i){
            document.write("7. 함수가 실행되었습니다.<br><br>")
        }
        callback(func7);

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

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

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

        //화살표 함수 - 리턴문 function func4(){
        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>

function 함수명(){
//실행함수
}

VIEW

<script>
    //for문이 실행되었습니다.
    // for(let i=0; i<10; i++){
    //     document.write(i+". for문이 실행되었습니다.<br>" );
    // }
    // selector = $(".selector");
    // console.log(selector);
    // selector.css("color", "red");
    // box = $(".box");
    // box.css("color", "red");

    // document.querySelector(".selector").style.color = "red";
    // document.querySelector(".box").style.color = "red";

    // //ID선택자
    // let list = document.getElementById("list"); 
    // //자식 li 선택
    // let listLi = list.getElementsByTagName("li"); 
    // for (let i = 0; i < listLi.length; i++) {
    //     let liArray = listLi[i];
    //     liArray.style.color = "red";
    // }

    // 다중 선택
    // //다중 선택 됨
    // document.querySelector(".box").style.color = "red";
    // //다중 선택 안됨!!
    // document.querySelectorAll(".box").style.color = "red";
    // let box = document.querySelectorAll(".box");
    // for(i=0; i<box.length; i++){
    //     box[i].style.color = "red";
    // }

    // // foreach(콘텐츠/ 인덱스/ array)
    // document.querySelector(".box").forEach(box => {
    //     box.style.color
    // })

    //태그 선택자
    // document.getElementsByTagName("div").style.color = "blue"

    // 다중 선택
    // const selector = $("#selector");
    // console.log(selector);
    // const box = selector.find("box");
    // box.css("color","blue");

    // sol#1 javascript  
    // const selector = document.getElementById("selector");
    // const box = selector.querySelector(".box");
    // box.style.css = "blue";

    // sol#2 javascript
    // const boxAll = document.querySelectorAll(".box");
    // console.log(boxAll);
    // boxAll.forEach(element => {
    //     element.style.color = "blue"
    // });

    // //hide
    // $(".box").hide();
    // document.querySelectorAll(".box").forEach(element => {
    //     element.style.display = "hidden"
    // });

    // //show
    // $(".box").show();
    // document.querySelectorAll(".box").forEach(element => {
    //     element.style.display = "block"
    // });

    // //show클래스 추가
    // $(".box").addClass("show");
    // document.querySelectorAll(".box").forEach(element =>{
    //     element.classList.add("show");
    // });

    // //show클래스 삭제
    // $(".box").removeClass("show");
    // document.querySelectorAll(".box").forEach(element => {
    //     element.classList.remove("show");
    // });

    // // 버튼 클릭하면 글씨 색을 빨간색으로 바꾸기
    // $(".button1").click(function () {
    //     $(".selector").css("color", "red");
    //     $("#list").css("color", "red");
    // });

    // document.querySelector(".button1").addEventListener("click", function(){
    //     document.querySelectorAll(".selector").forEach(element => {
    //         element.style.color = "red";
    //     });
    //     document.querySelectorAll("#list").forEach(element => {
    //         element.style.color = "red";
    //     });
    // })

    //토글
    // $(".button1").click(function(){
    //     $(".box").toggleClass("add");
    // });
    
    // document.querySelector(".button1").addEventListener("click",function(){
    //     document.querySelectorAll(".box").forEach(element=>{
    //         element.classList.toggle("add");
    //     })
    // });

    //마우스엔터
    // $(".box").on("mouseenter",function(){
    //     $(".box").css("color","red");
    // })
    // document.querySelectorAll(".selector").addEventListener

    // document.querySelector(".selector").addEventListener("mouseenter",function(){
    //     this.style.color = "red";
    // })

    // document.querySelectorAll(".box").forEach(element=>{
    //     element.addEventListener("mouseenter",function(){
    //         this.style.color = "red";
    //     })
    // });

    // document.querySelectorAll(".box").forEach(element=>{
    //     element.addEventListener("mouseleave",function(){
    //         this.style.color = "black";
    //     })
    // });

    //헤즈클래스
    // if($(".box").hasClass("add")){
    //     $(".add").css("color","blue");
    // }

    // document.querySelectorAll(".box").forEach(element=>{
    //     if(element.classList.contains("add")){
    //         element.style.color = "blue";
    //     }
    // });

    // if(document.getElementById("selector").classList.contains("add")){
    //     document.querySelector(".selector").style.color = "blue";
    // }

    //append    
    $(".button1").click(function(){
        $(".selector").append("<div class='box'>jQuery vs JavaScript</div>");
        $(".selector").prepend("<div class='box'>jQuery vs JavaScript</div>");
    })
    //appendChild
    document.querySelector(".button1").addEventListener("click",function(){
        let elem = document.getElementById("selector");
        let docu = document.createElement("div");
        elem.appendChild(docu);
    })

</script>

JAVASCRIPT Reference v1.0 </doc>

JavaScript

자바스크립트 기초

자바스크립트 주석

자바스크립트 대소문자

자바스크립트 사용방법

자바스크립트 사용방법 VIEW

자바스크립트 출력방법

자바스크립트 출력방법 VIEW

자바스크립트 오류

변수

변수명

식별자를 만드는 규칙

단어를 조합할 때 규칙

변수 선언

변수 VIEW

변수 유형

변수 유형 VIEW

배열

배열 VIEW

연산자

산술연산자

산술연산자 VIEW

대입연산자

대입연산자 VIEW

증감연산자

증감연산자 VIEW

비교연산자

비교연산자 VIEW

논리연산자

논리연산자 VIEW

조건문

if문

if문VIEW

if else문

if문VIEW

다중 if문

다중 if문1VIEW

다중 if문2VIEW

다중 if문3VIEW

중첩 if문

중첩 if문VIEW

switch문

switch문VIEW

switch문2VIEW

switch문3VIEW

삼항 연산자(삼항 연산자)

삼항 연산자(삼항 연산자)VIEW

반복문

while문

while문VIEW

do-while문

do while문VIEW

for문

for문VIEW

for~in문

for~in문VIEW

중첩 for문

중첩 for문 1VIEW

중첩 for문 2 - 구구단VIEW

중첩 for문 3 - 테이블 만들기VIEW

break문

break문VIEW

continue문

continue문VIEW

함수

함수를 사용하는 이유VIEW

함수 종류VIEW

선언적 함수

VIEW