자바스크립트

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

식별자를 만드는 규칙

  1. 사용자가 사용할 수 있는 문자 : 알파벳(a-z, A-Z), 숫자 (0-9), 특수기호('_', '$')
  2. 첫 글자는 숫자를 사용할 수 없습니다.
  3. 공백을 사용할 수 없습니다.
  4. 특수기호는 사용할 수 없습니다.
  5. 키워드를 사용할 수 없습니다.

자바스크립트 언어의 특징

  • 자바스크립트 인터프린터 언어입니다.
    • 자바스크립트 코드는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다. 대부분의 브라우저에는 자바스크립트 코드를 컴파일 하는 JIT가 내장되어 실행속도가 매우 빨리 웹 애플리케이션을 구현 할 수 있습니다.
  • 자바스크립트 클라이언트 스크립트 언어입니다.
    • 자바스크립트는 서버에서 실행되지 않고 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 PHP, JSP, ASP 언어와 비교됩니다.
  • 자바스크립트 객체 기반 언어입니다.
    • C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.
  • 자바스크립트 다양한 라이브러리가 지원되는 언어입니다.
    • 자바스크립트를 이용한 언어에는 다양한 라이브러리 언어들이 있습니다. JQeury, Node.js, Vue.js, React.js, Three.js
  • 자바스크립트 동적 타입의 언어이며 클로저를 정의합니다.
    • C++와 JAVA는 실행되기 전에 변수 타입을 정하는 언어입니다. 자바스크립트는 변수 타입이 없는 동적 타입의 언어이며, 자바스크립트 함수는 클로저를 정의합니다. 클로저는 변수를 숨기거나 연속성을 보장하는 다양한 기능을 구현할 수 있습니다.

자바스크립트 기초

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

자바스크립트 주석

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

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

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

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

날짜 객체 생성 : New date() - (X)
날짜 객체 생성 : new Date() - (O)

자바스크립트 사용방법

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

자바스크립트 사용방법View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript</title>

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

    <!--스크립트에 기술하는 방법-->
    <script>
        document.write("javascript");
    </script>
    

</head>
<body>
    <!--태그에 직접 기술하는 방법-->
    <a href="#" onclick="alert('javascript')">Click</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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript</title>
    <script>
        //콘솔로그를 이용하는 방법
        console.log("javascript 출력1");

        //웹 문서에 출력하는 방법
        document.write("javascript 출력2");

        //경고창 이용하는 방법
        alert("javascript 출력3");

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

변수

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

변수는 변하는 변수를 의미하고, 상수는 변하지 않는 변수 값을 의미합니다.

변수명

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

식별자를 만드는 규칙

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

단어를 조합할 때 규칙

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

키워드

abstract, arguments, await*, boolean break, byte, case, catch, char, class*, const, continue, debugger, default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let* long native new null package private protected public return short static super* switch synchronized this throw throws transient true try typeof var void volatile while with yield

변수 선언

var 변수명 - 값;
let 변수명 - 값;
변수 선언 View
<<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        //변수 선언
        var  x = 100;  //변수 x에 100 숫자를 저장함. 
        var  y = 200;  //변수 y에 200 숫자를 저장함.
        var  z = "javascript";  //변수 z에 javascript 문자를 저장함.

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

        //변수 선언
        let  a = 100;  //변수 x에 100 숫자를 저장함. 
        let  b = 200;  //변수 y에 200 숫자를 저장함.
        let  c = "javascript";  //변수 z에 javascript 문자를 저장함.

        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값이 300에서 400으로 변경
        z = "ES6";  //변수 z값이 javascript에서 ES6으로 변경

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

상수 선언

const 상수명 - 값;
상수 선언 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        //변수 선언
        let x = "100";   //변수 x에 문자 100을 저장
             x = "200";   //변수 x에 문자 100을 200으로 변경

        console.log("변수 x의 값은 : " + x);

         //상수 선언
         const y = "100";   //상수 y에 문자 100을 저장
                    // y = "200";      
        console.log("상수 y의 값은 : " + y);  
    </script> 
</head>
<body>
    
</body>
</html>

변수 종류

지역 변수 : 특정 범위 안에서 사용하는 변수
전역 변수 : 모든 영역에서 사용하는 변수
매개 변수 : 데이터를 전달하기 위한 변수
변수 종류 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        // 변수 선언
        let x = 1000;      //전역변수
        let y = 2000;      //전역변수
        let z = 700;        //전역변수
       
        // 함수 선언
        function fun1(){
            let x = 1000;     //지역변수
            let y = 2000;     //지역변수
            y = 3000;          //지역변수 2000에서 3000으로 변경
            z = 800;            //전역 변수 700에서 800으로 변경

            document.write("함수 선언<br>");
            document.write(x);
            document.write("<br>");
            document.write(y);
            document.write("<br>");
            document.write(z);
            document.write("<br><br>");
        }
        fun1();
        document.write("변수 선언<br>");
        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br><br>");

    </script> 
</head>
<body>
    
</body>
</html>
매개 변수 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        // 웹 문서에 "javascript" 문자열을 출력하시오.
        document.write("javascript");
        document.write("<br><br>");

        // 변수를 이용해서 웹 문서에 "javascript2" 문자열을 출력하시오. (데이터 저장)
        let x1 = "javascript2"
        document.write(x1);
        document.write("<br><br>");

        // 함수를 이용해서 웹 문서에 "javascript3" 문자열을 출력하시오. (실행문 저장)
        function fun1(){
            let x1 = "javascript3"
            document.write(x1);
            document.write("<br><br>");
        }
        fun1();

        // 함수와 매개변수(전달되는 변수)를 이용해서 웹 문서에 "javascript4"문자열을 출력하시오.
        function fun2(x2){
            document.write(x2);
            document.write("<br><br>");
        }
        fun2("javascript4");

        // 함수와 매개변수(전달되는 변수)를 이용해서 웹 문서에 "javascript5"문자열을 출력하시오. 
        function fun3(str1, str2){
            document.write(str1, str2);
        }
        fun3("javascript","5");
        
    </script> 
</head>
<body>
    
</body>
</html>

변수 유형

숫자 : 숫자 형태
문자열 : 문자 형태
논리값 : 참(true)과 거짓(false)
특수값 : null, undefined
객체 : 객체 형태
함수 : 함수 형태
변수 유형 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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 = {}     //변수에 객체를 저장

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

배열

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

배열 선언

var 변수명 = [값1, 값2, 값3...........]
배열View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        //변수 x = 100, y = 200 저장한 다음 웹 문서에 출력해주세요!
        let x = 100;
        let y = 200;

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

        //배열을 이용해서 화면에 100과 200을 출력해주세요!
        const arr1 = new Array();      //배열 선언
        arr1[0] = 100;     //첫 번째 배열 저장소에 100을 저장
        arr1[1] = 200;     //두 번째 배열 저장소에 200을 저장

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

        //배열을 선언과 동시에 초기화하여 100과 200을 출력해주세요!  
        const arr2 = new Array(100, 200);

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

        //배열을 선언하지 않고 100과 200을 출력해주세요!
        const arr3 = [100, 200] //각진 가로는 배열을 의미

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

        //배열의 크기 구하기


        const arr4 = [100, 200, 300, 400, 500];

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

        //배열 데이터 가져오기
        const arr5 = [100, 200, 300, 400, 500];

        for( var i = 0; i<arr5.length; i++ ){
            document.write(arr5[i]);
        }

        //배열 데이터 합 구하기
        const arr6 = [100, 200, 300, 400, 500];
        let sum = 0;

        //sum = 100 + 200 + 300 + 400 + 500 
        //sum = arr6[0] + arr6[1] + arr6[2] + arr6[3] + arr6[4] 
        //sum = arr6[i] + arr6[i] + arr6[i] + arr6[i] + arr6[i] 

        for( var i = 0; i<arr6.length; i++){
            // 0, 0<5
            // 1, 1<5
            // 2, 2<5
            // 3, 3<5
            // 4, 4<5
            // 5, 5=5 조건이 맞지 않아 실행되지 않음
            sum = sum + arr6[i];
            //0 = 0 + 100
            //100 = 100 + 200
            //300 = 300 + 300
            //600 = 600 + 400
            //1000 = 1000 + 500
            //1500    
        }

        document.write("<br><br>")
         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*=10 x = x * 10
/= x/=10 x = x / 10
%= x%=10 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 반대 값을 반환합니다.

연산자 우선순위

순위 연산자 설명
1 괄호/대괄호 (),[]
2 단항 연산자 !, ++, --
3 곱셈/나눗셈 연산자 *, /, %
4 덧셈/뺄셈 연산자 +,-
5 비교 연산자 >,>=,<,<=
6 비교 연산자 ==,===,!=,!==
7 논리 곱 연산자 &&
8 논리 합 연산자 ||
9 대입 연산자 =, +=, -=, *=, /=, %=
10 쉼표 ,
적정체중View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        //적정 체중 (174 - 100) * 0.9
        // let userHeight = 174;
        // let userWeight = 90;
        // let normal = (userHeight - 100) * 0.9;

        let name = prompt("당신의 이름은 무엇입니까?", "")
        let height = prompt("당신의 키는 얼마인가요?", "")
        let weight = prompt("당신의 몸무게는 얼마인가요?", "")

        let normal = (height - 100) * 0.9;

        document.write(name+"님의 정상 체중은"+normal+"입니다.");
    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        // const price1 = 3000;
        // const price2 = 4000;
        // const price3 = 2000;

        // let total = price1 + price2 + price3
        // let result = total  > 10000 ? "돈을 너무 많이 사용했습니다." : "돈을 잘 관리 했네요!"  

        // document.write(result);

        // document.write("당신이 오늘 사용한 지출은 " + total +"원 입니다.")

        let userPrice1 = prompt("오늘 당신의 교통비는?", "");
        let userPrice2 = prompt("오늘 당신의 식비는?", "");
        let userPrice3 = prompt("오늘 당신의 음료비는?", "");

        userPrice1 = Number(userPrice1)
        userPrice2 = Number(userPrice2)
        userPrice3 = Number(userPrice3)

        let total = userPrice1 + userPrice2 + userPrice3;
        let result = total  > 10000 ? "돈을 너무 많이 사용했습니다.":"돈을 잘 관리 했네요!"
     
        document.write(result);

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

조건문

if문

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

if(조건식){
     //실행코드 }
if문 View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        const num = 300;   //변수에 숫자 100을 저장

        //변수 num의 값이 200보다 크면 실행(true)
        if( num > 200 ){
            document.write(num);
            document.write("<br><br>");
        }
        if( true ){
            document.write(num);
            document.write("<br><br>");
        }


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

        if( num2 % 2 == 0 ){
            document.write("당신이 입력한 숫자는 짝수입니다.");
        }
    </script>
</head>
<body>
    
</body>
</html>

if-else

두개의 값을 비교하여 코드를 별개로 실행합니다.

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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=="1234"){
            document.write("환영합니다.<br><br>");
        } else {
            document.write("아이디 또는 비밀번호를 확인해주세요.<br><br>");
        }

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

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

다중 if문

if(조건식){
//참일 때 실행 코드
} else if {
//앞 조건이 거짓일 때 실행 코드
} else if {
//앞 조건이 거짓일 때 실행 코드
} else if {
//앞 조건이 거짓일 때 실행 코드
} else {
//앞 조건이 모든 조건이 거짓일 때 실행 코드
}
다중 if문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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("해당 파일이 없습니다.")
       }

       //짝수 홀수 구하기
       let num = prompt("숫자를 적어주세요!!");

       if( num % 2 == 0 ){
           document.write("짝수입니다.")
       } else if ( num % 2 == 1 ) {
            document.write("홀수입니다.")
       } else {
           document.write("숫자를 써주세요.")
       }

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

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

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

중첩 if문

if(조건식){
     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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        let userID = "webstoryboy";
        let userPW = "1234";

        let id = prompt("아이디를 입력해주세요.","");
        let pw = prompt("비밀번호를 입력해주세요.","");

        if( userID == id ){
            //아이디가 맞다면
            if(userPW == pw) {
                //비밀번호가 맞다면
                document.write(id + "님 반갑습니다.");
            } else {
                document.write("비밀번호가 틀렸습니다.");
            }
        } else {
            //아이디가 틀리면
            document.write("아이디가 일치하지 않습니다.");
        }
    </script>
</head>
<body>
    
</body>
</html>

switch문

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
사이트 이동하기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        let site = prompt("네이버, 다음, 구글, 네이트 중 자주가는 사이트는?");

        switch(site){
            case "네이버" : 
                url = "https://www.naver.com/"
            break;
            case "다음" : 
                url = "https://www.daum.net/"
            break;
            case "구글" : 
                url = "https://www.google.co.kr/"
            break;
            case "네이트" : 
                url = "https://www.nate.com/"
            break;
            default :
            document.write("사이트가 존재하지 않습니다.")
            break;
        }
        console.log(url);

        // if(url){
        //     location.href = url;
        // }
        if(url) location.href = url;

        let site2 = prompt("방은영, 김길록, 서경민, 홍예라 중 자주가는 사이트는?");
        let url2;

        if( site2 == "방은영"){
            url2 == "http://mine002.dothome.co.kr/"
        } else if ( site == "김길록"){
            url2 = "http://loga301.dothome.co.kr/"
        } else if ( site == "서경민"){
            url2 = "http://mr1011.dothome.co.kr/"
        } else if ( site == "홍예라"){
            url2 = "http://dpfk1994.dothome.co.kr/"
        } else {
            document.write("그런 사이트는 없습니다.")
        }
        if(url2) location.href = url2;

    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript</title>
    <script>
        //변수(num) 100의 값을 짝수 홀수인지 출력해주세요.
        let num = 100;

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

        //조건연산자
        ( num % 2==0 ) ? document.write("짝수입니다.") : document.write("홀수입니다.")
    </script>
</head>
<body>
    
</body>
</html>

반복문

while문

while 문은 조건식을 만족할 때 까지 반복적으로 실행하는 반복문입니다.

var 변수 = 초기값;
while(조건식){
    실행문;
    증감식;
}
while문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript18</title>
    <script>
        //100보다 작은 수 출력하기 
        let num = 0;  //초기값
        while(true){
            if(num>=100){     //실행문
                break;
            }
            num++;      //증감식
            document.write(num+"<br>");
        }

        //100보다 작은수에서 짝수만 출력하기 
        let num2 = 1;
        while(num2<=100){
           if(num2%2==0){
               document.write(num2+"<br>");
           }
            num2++;
        }

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

        //1-100까지 짝수는 파란색으로 홀수는 빨간색으로 출력하세요.
        let num4 = 1;


        while ( num4 <= 100){
            if(num4 % 2 == 0 ){
                document.write("<span style = 'color:blue'>"+num4+"</span>");
            } else{
                document.write("<span style = 'color:red'>"+num4+"</span>");
            }
            num4++;
        }
    </script>
</head>
<body>
    
</body>
</html>

do while

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

var 변수 = 초기값;
do{
    실행문;
    증감식;
} while(조건식)
do whileView
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript18</title>
    <script>
        //while문을 이용해서 1-20까지 출력하세요.
        let num1 = 0;
        while(num1 < 20){
            num1++;
            document.write(num1);
        }
        document.write("<br><br>");

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

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

for문

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

1-100까지 실행하는 반복문

for( var i=0; i<100; i++){
     //실행코드
} 초깃값 설정 : var i=0 : 초기 시작값을 0으로 설정하고 초깃값은 한 번 실행되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100 : 조건에 맞으면 실행됩니다. 증감값 설정 : 조건에 맞으면 1씩 증가됩니다.
for문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript20</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문을 이용해서 0부터 100까지 출력하세요.
        for(var i=0; i<=100; i++){
            document.write(i);
        }
        document.write("<br><br>");

        //for문을 이용해서 1부터 100까지 출력하세요.
        for(var i=1; i<=100; i++){
            document.write(i);
        }
        document.write("<br><br>");

        //for문을 이용해서 1부터 100중에서 짝수만 출력하세요.
        for(var i=2; i<=100; i+=2){
            document.write(i);
        }
        document.write("<br><br>");

         //for문을 이용해서 5의 배수는 파란색으로 7의 배수는 빨간색으로 출력하세요.
         for(var i=1; i<=100; i++){
             if ( i % 5==0){
                document.write("<span style = 'color:blue'>"+i+"</span>");
             } 
             if ( i % 7==0){
                document.write("<span style = 'color:red'>"+i+"</span>");
             } 
        }
        document.write("<br><br>");

        //for 문을 이용해서 1~100 중 5의배수는 파란색, 7의배수는 빨간색, 공통배수는 검은색으로 출력하기
        for(var i=1; i<=100; i++){
            if(i%5 ==0  && i %7 ==0){
                document.write("<span style='color:black'>"+i+"</span>")
            }
            if(i %5 ==0 && i % 7 != 0){
                document.write("<span style='color:blue'>"+i+"</span>")
            }
            if(i %7 ==0 && i % 5 != 0){
                document.write("<span style='color:red'>"+i+"</span>")
            }
        }
        document.write("<br><br>");

        //배열과 반복문
        let arr1 = new Array(100, 200, 300, 400, 500);

        //배열의 갯수 구하기
        document.write(arr1.length,"<br>");

        //배열의 데이터 구하기
        for(var i=0; i<arr1.length; i++){
            document.write(arr1[i],"<br>");
        }

        //배열 데이터의 합 구하기
        let sum = 0; 
        for(var i=0; i<arr1.length; i++){
            sum = sum + arr1[i];
                // i = 0, 1, 2, 3, 4
                // arr1[0], arr1[1], arr1[2], arr1[3], arr1[4]
                // 100, 200, 300, 400, 500
                // sum = sum + arr1[i]
                //                        100
                // 100 = 100 + 200
                // 300 = 300 + 300
                // 600 = 600 + 400
                // 1000 = 1000 + 500
                // 1500
        }
        document.write(sum);

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

for in문

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

for(변수 in 반복할 대상){      //실행코드 }
for in문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript20</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문이 있는 형태입니다.

for(var i=0; i<100; i++){
    for(var i=0; j< j++)
         //실행코드
    }
}
중첩 for문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript20</title>
    <script>
        //for문을 이용해서 1-10까지 출력하세요.
        for (var i=1; i<=10; i++){
            document.write(i);
        }
        document.write("<br><br>");

        //중첩 for문을 이용해서 1-10까지 출력하세요.
        for (var i=1; i<=10; i++){
            for (var j=1; j<=10; j++ ){
                document.write(i +"."+ j, "<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>
구구단 만들기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript23</title>
    <script>
        //구구단을 출력하세요.

        // num1 2~9 for(var i=2; i<=9; i++)
        // num2 1~9 for(var j=1; j<=9; j++)
        // num1 * num2 = sum
        // 2 * 1 = 2
        // 2 * 2 = 4
        // 2 * 3 = 6
        // 2 * 4 = 8

        // 3 * 1 = 3
        // 3 * 2 = 6
        // 3 * 3 = 9
        // 3 * 4 = 12

        for(var i=2; i<=9; i++){
            for(var j=1; j<=9; j++){
                let sum = i * j;
                document.write( i +"*"+ j +"="+ sum);
                document.write("<br>");
            }
        }


    </script>
</head>
<body>
    
</body>
</html>
테이블 만들기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript24</title>
    <script>
        let num = 1;
        let table = "<table border='1'>";

            for( var i=1; i<=10; i++ ){
                table += "<tr>";

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

                table += "</tr>";
            }


            table += "</table>";

        document.write(table);
        console.log(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문/continue문

break문/continue문View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript25</title>
    <script>
        //while문을 이용해서 1~20까지 출력해주세요.
        let num = 0;  //초기값
        while(true){
            if(num>=20){   
                break;
            }
            num++;   
            document.write("숫자"+num,"<br>");
        }

        //for문을 이용해서 1~20까지 출력해주세요.
        for(var i=1; i<=20; i++){
            document.write("숫자"+i, "<br>");
        }

        //break문과 continue문
        var count = 0;
        while(true){
            count++;
            if( count == 3 ){
                continue;
            }
            document.write("카운트"+ count, "<br>");
            if (count > 19){
                break;
            }
        }

    </script>
</head>
<body>

</body>
</html>

함수

함수는 하나의 실행문을 저장하는 저장소입니다.

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

함수에서 쓰는 용어

  • 매개변수 : 함수에 데이터를 넘기기 위한 변수
  • 리턴 값 : 함수를 실행하고 나서 나오는 결과값
  • 콜백함수 : 함수에 매개변수로 함수를 전달할 때 사용하는 함수
  • 호출 : 함수 내부를 실행시킬 때 호출이라고 표현
함수View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript26</title>
    <script>
        //이것은 빨간색1-10 입니다.
        for(var i=1; i<=10; i++){
            document.write("이것은 빨간색"+i+" 입니다.", "<br>");
        }

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

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



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


    </script>
</head>
<body>

</body>
</html>

선언적 함수

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

익명함수

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

매개변수가 있는 함수

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

리턴값이 있는 함수

function 함수 이름(){
     //실행코드
     return 리턴값;
}
var 변수 = 함수명();

화살표 함수

() => {
     //실행문
}
함수의 유형View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript27</title>
    <script>
        //선언적 함수
        function func1(){
            document.write("1. 함수가 실행되었습니다.", "<br><br>")
        }
        func1();

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

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

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

        //화살표 함수
        func5 = () => {
            document.write("5. 함수가 실행되었습니다.","<br><br>")
        }
        func5();

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

        //화살표 함수(리턴문)
        const func7 = () => {
            let str = "7. 함수가 실행되었습니다.";
            return str;
        }
        document.write(func7());
    </script>
</head>
<body>

</body>
</html>

객체

객체란 데이터와 연산 작업을 담고 있는 기본적인 기능이며, 메서드와 속성으로 이루어져 있습니다.

매서드 : 객체가 할 수 있는 동작 값
속성 : 객체의 기본 데이터 값
객체View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript28</title>
    <script>
        //배열선언, 100, 200 출력
        let arr1 = new Array();
        arr1[0] = 100;
        arr1[1] = 100;

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

         //배열을 선언과 동시에 데이터를 넣는 방법으로 출력(100,200)
         let arr2 = new Array(100, 200);
        document.write(arr2[0], "<br>");
        document.write(arr2[1], "<br><br>");

        //배열을 선언하지 않고 바로 데이터를 넣는 방법으로 출력(100,200)
        let arr3 = [100, 200];
        document.write(arr3[0], "<br>");
        document.write(arr3[1], "<br><br>");

        //객체 선언 100, 200 출력
        let obj1 = new Object();
        obj1[0] = 100;
        obj1[1] = 200;

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

        //객체 선언 100, 200 출력
        let obj2 = new Object();
        obj2.a = 100;
        obj2.b = 200;

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

        //객체 선언하고 데이터를 넣는 방법
        let obj3 = {};
        obj3.a = 100;
        obj3.b = 200;

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

        //객체 선언과 동시에 데이터를 넣는 방법
        let obj4 = {'a':100, 'b':200};
        document.write(obj4.a, "<br>");
        document.write(obj4.b, "<br><br>");

        //객체와 배열
        let obj5 = new Object();
        obj5.a = [100, 200];
        obj5.b = "자바스크립트";

        document.write(obj5.a, "<br>");
        document.write(obj5.b, "<br>");
        document.write(obj5.a[0], "<br>");
        document.write(obj5.a[1], "<br><br>");

        //객체와 배열 속성과 메서드를 사전에 정의하여 객체 생성하기
        let obj6 = {
            a : [100, 200],
            b : "자바스크립트",
            c : function(){
                document.write("자바스크립트가 실행되었습니다.<br>");
            },
            d : function(){
                document.write(this.b + "가 실행되었습니다.") 
            }
        };
        document.write(obj6.a,'<br>');
        document.write(obj6.a[0],'<br>');
        document.write(obj6.a[1],'<br>');
        document.write(obj6.b,'<br>');
        // document.write(obj6.c,'<br>'); X
        obj6.c();
        obj6.d();
        document.write("<br><br>");

        //객체 생성자 표기법
        //함수를 이용하면 여러개의 객체를 생성, 객체의 이름 대신 this 키워드를 사용
        function obj7(a,b){
            this.a = a;
            this.b = b;
            this.c = function(){
                return a * b;
            }
        }
        let result1 = new obj7(100, 200);
        let result2 = new obj7("자바스크립트", "제이쿼리");

        document.write(result1.a, "<br>");
        document.write(result1.b, "<br>");
        document.write(result2.a, "<br>");
        document.write(result2.b, "<br>");
        document.write(result1.c(), "<br>"); //곱하기 값 출력



    </script>
</head>
<body>

</body>
</html>

기타

Date 객체

Date 객체View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript29</title>
    <script>
        let today = new Date();    //날짜 객체를 생성하고 변수에 저장
        let nowMonth = today.getMonth();     //현재 월욜 변수에 저장
        let nowDate = today.getDate();      //현재 일을 변수에 저장
        let nowDay = today.getDay();        //현재 요일을 변수에 저장
        let nowFullYear = today.getFullYear();      //현재 년도를 변수에 저장
        let nowHoures = today.getHours();      //현재 시간을 변수에 저장
        let nowMinutes = today.getMinutes();      //현재 분을 변수에 저장
        let nowSeconds = today.getSeconds();      //현재 초를 변수에 저장
        let nowMilliseconds = today.getMilliseconds();      //현재 초(1/1000초 단위)를 변수에 저장
        let nowTime = today.getTime();      //1970년 1월 1일 자정 이후에 초 정보를 저장

        var nowDateString = today.toDateString();               //날짜를 문자열로 변수에 저장
        var nowGMTString = today.toGMTString();                 //날짜를 문자열로 변수에 저장
        var nowLocaleDateString = today.toLocaleDateString();   //날짜를 문자열로 변수에 저장
        var nowLocaleString = today.toLocaleString();           //날짜를 문자열로 변수에 저장
        var nowLocaleTimeString = today.toLocaleTimeString();   //날짜를 문자열로 변수에 저장
        var nowString = today.toString();                       //날짜를 문자열로 변수에 저장
        var nowTimeString = today.toTimeString();               //날짜를 문자열로 변수에 저장
        var nowUTCString = today.toUTCString();                 //날짜를 문자열로 변수에 저장


        document.write(today, "<br>");
        document.write("현재 월[.getMonth] : " + nowMonth, "<br>");
        document.write("현재 일[.getDate] : " + nowDate, "<br>");
        document.write("현재 요일[.getDay] : " + nowDay, "<br>");
        document.write("현재 년도[.getFullYear] : " + nowFullYear, "<br>");
        document.write("현재 시간[.getHoures] : " + nowHoures, "<br>");
        document.write("현재 분[.getMinutes] : " + nowMinutes, "<br>");
        document.write("현재 초[.getSeconds] : " + nowSeconds, "<br>");
        document.write("현재 초[.getMilliseconds] : " + nowMilliseconds, "<br>");
        document.write("현재 초[.getTime] : " + nowTime, "<br><br>");

        document.write("날짜 문자열[toDateString()] : " + nowDateString,"<br>");
        document.write("날짜 문자열[toGMTString()] : " + nowGMTString,"<br>");
        document.write("날짜 문자열[toLocaleDateString()] : " + nowLocaleDateString,"<br>");
        document.write("날짜 문자열[toLocaleString()] : " + nowLocaleString,"<br>");
        document.write("날짜 문자열[toLocaleTimeString()] : " + nowLocaleTimeString,"<br>");
        document.write("날짜 문자열[toString()] : " + nowString,"<br>");
        document.write("날짜 문자열[toTimeString()] : " + nowTimeString,"<br>");
        document.write("날짜 문자열[toUTCString()] : " + nowUTCString,"<br>");
    </script>
</head>
<body>

</body>
</html>
현재 시간 구하기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript30</title>
    
</head>
<body>
    <div id="clock"></div>

    <script>
        let clock = document.getElementById("clock");

        setInterval(function(){
            clock.innerHTML = new Date().toLocaleString();
        },1000);
    </script>
</body>
</html>
D-dayView
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript30</title>
    
</head>
<body>

    <script>
        //1분 = 1000(ms)
        //1분 60초 = 1000 * 60 // 60,000
        //1시간(60분) = 1000 * 60 * 60 //3,6000,000
        //1일(60분 * 24) = 1000 * 60 * 60 * 24 //86,400,000

        window.onload = function(){
            let today = new Date();
            let dDay = new Date("February 27, 2020");

            let interval = today.getTime() - dDay.getTime();
            interval = Math.floor( interval / (1000 * 60 * 60 * 24));

            document.write("앞으로 수료일은 "+interval+"일 남았습니다.");
        };
    </script>
</body>
</html>
마지막 접속시간 구하기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript32</title>
    
</head>
<body>
    <div>당신의 마지막 접속 시간은 : <span id="last"></span></div>
    <script>
        window.onload = function(){
            let today = new Date();
            let year = today.getFullYear();
            let month = today.getMonth();
            let date = today.getDate();
            let hour = today.getHours();
            let min = today.getMinutes();
            var ampm = "";
            if( hour < 12 ){
                ampm = " 오전"
            } else {
                ampm = " 오후"
            }
            let last = year +"."+(month+1)+"."+date+" "+ (hour % 12) +":"+min+ampm; 

            document.getElementById("last").innerHTML = last;
        }
    </script>
</body>
</html>

string 객체

string 객체View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript33</title>
    
</head>
<body>
    <script>
        let text = "hello I'm soool, I'm not a student";

        document.write(text,"<br>");
        document.write("인덱스(6)에 저장된 문자[charAt(6)] : " + text.charAt(6),"<br>");
        document.write("주어진 값과 왼쪽부터 일치하는 인덱스[indexOf(a)] : " + text.indexOf("a"),"<br>");
        document.write("문자열 인덱스 30부터 주어진 값과 왼쪽부터 일치하는 인덱스[indexOf('a',30)] : " + text.indexOf("a",30),"<br>");
        document.write("주어진 값과 오른쪽부터 일치하는 인덱스[indexOf(a)] : " + text.lastIndexOf("a"),"<br>");
        document.write("문자열 인덱스 30부터 주어진 값과 오른쪽부터 일치하는 인덱스[indexOf('a',30)] : " + text.lastIndexOf("a",30),"<br>");
        document.write("인덱스 11부터 12글자 반환[substr()] : " + text.substr(11,12),"<br>");
        document.write("인덱스 11부터 23까지 반환[substring()] : " + text.substring(11,23),"<br>");
        document.write("문자열 교체[replace()] : " + text.replace("webstoryboy","webs"),"<br>");
        document.write("문자열 일치 후 문자열 반환[match()] : " + text.match("webstoryboy"),"<br>");
        document.write("문자열 일치 후 인덱스 반환[search()] : " + text.search("webstoryboy"),"<br>");
        document.write("소문자 변경[toLowerCase()] : " + text.toLowerCase(),"<br>");
        document.write("대문자 변경[toUpperCase()] : " + text.toUpperCase(),"<br>");
    </script>
</body>
</html>
span태그로 변경하기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript34</title>
    <style>
        span {text-decoration: underline;}
    </style>
</head>
<body>
    <h1 id="h1">편안함이 끝나고 궁핍이 시작될 때 인생의 가르침이 시작된다.</h1>

    <script>
        let text = document.getElementById("h1").textContent;

        let spanText = text.split(" ").join("</span> <span>") //한 단어씩 띄어쓰기
        spanText = "<span>" + spanText + "</span>" ;

        let spanText2 = text.split("").join("</span> <span>") //한 글자씩 띄어쓰기
        spanText2 = "<span>" + spanText2 + "</span>";


        document.write(spanText,"<br>");
        document.write(spanText2);
    </script>
</body>
</html>
substringView
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript35</title>

</head>
<body>
    <script>
        let userName = prompt("영문이름을 입력하세요.","");
        let userNumber = prompt("핸드폰 번호를 입력하세요.","");

        let upper = userName.toUpperCase();
        let star = userNumber.substring(0, userNumber.length-4)+"****";

        document.write(upper,"<br>")
        document.write(star,"<br>")
    </script>
</body>
</html>
이메일 유효성 검사View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript36</title>

</head>
<body>
    <script>
        let userEmail = prompt("당신의 이메일 주소는?", "");
        let arrUrl = (".co.kr", ".com", ".net", ".or.kr", ".go.kr");

        let check1 = false;
        let check2 = false;

        if( userEmail.indexOf("@")>0 ) check1 = true;

        for(let i=0; i<arrUrl.length; i++){
            if(userEmail.indexOf(arrUrl[i])>0 ) check2 = true;
        }

        if (check1 && check2){
            document.write("이메일 형식이 맞습니다.");
        } else {
            document.write("이메일 형식이 맞지 않습니다.");
        }
    </script>
</body>
</html>
Math 객체View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript37</title>

</head>
<body>
    <script>
        let numMax = Math.max(100,-100);
        let numMin = Math.min(100,-100);
        let numRound = Math.round(1.234567);
        let numFloor = Math.floor(1.234567);
        let numRandom = Math.random(10);
        let numPI = Math.PI;

        document.write("최대값(Math.max()] : " + numMax, "<br>")
        document.write("최소값(Math.min()] : " + numMin, "<br>")
        document.write("반올림(Math.round()] : " + numRound, "<br>")
        document.write("소수점 삭제(Math.floor()] : " + numFloor, "<br>")
        document.write("랜덤숫자(Math.random()] : " + numRandom, "<br>")
        document.write("원주율(Math.PI()] : " + numPI, "<br>")
    </script>
</body>
</html>
숫자 차이값 구하기 / 랜덤숫자 구하기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript38</title>
    <script>
        //두 숫자의 차이 구하기
        let num1 = parseInt(prompt("첫 번째 숫자를 입력해주세요","0"));
        let num2 = parseInt(prompt("두 번째 숫자를 입력해주세요","0"));

        document.write("두 숫자의 차이는 "+Math.abs(num1-num2)+ "입니다.");

        //1초에 한번씩 랜덤 숫자 구하기
        setInterval(function(){
            let num = Math.floor(Math.random() * 100);
            document.write(num+"<br>");
        }, 1000);
    </script>
</head>
<body>
    
</body>
</html>

브라우저 객체

브라우저 위치/크기View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript39</title>
    <script>
        //브라우저 위치
        let nowScreenX = window.screenX;
        let nowScreenY = window.screenY;

        document.write("현재 브라우저의 X축 좌표값 : " + nowScreenX, "px<br>");
        document.write("현재 브라우저의 Y축 좌표값 : " + nowScreenY, "px<br>");

        //브라우저 크기
        let nowInnerWidth = window.innerWidth;
        let nowInnerHeight = window.innerHeight;

        document.write("현재 브라우저의 가로 값 :" + nowInnerWidth, "px<br>")
        document.write("현재 브라우저의 세로 값 :" + nowInnerHeight, "px<br>")
    </script>
</head>
<body>
    
</body>
</html>
윈도우 팝업
window.open(URL, Name, Option, Replace)
setInterval

일정한 시간마다 함수를 반복해서 실행합니다.

setInterval(함수, 시간)
setTimeout()

일정한 시간 후 함수를 한 번만 실행합니다.

setTimeout(함수, 시간)

navigator 객체

navigator 매서드View
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript41</title>
    <script>
        var nowAppCodeName = navigator.appCodeName;
        var nowAppName = navigator.appName;
        var nowAppVersion = navigator.appVersion;
        var nowCookieEnabled = navigator.cookieEnabled;
        var nowLanguage = navigator.language;
        var nowOnLine = navigator.onLine;
        var nowPlatform = navigator.platform;
        var nowProduct = navigator.product;
        var nowUserAgent = navigator.userAgent;
        
        document.write("브라우저의 코드명[navigator.appCodeName] : " + nowAppCodeName, "<br>");
        document.write("브라우저의 이름[navigator.appName] : " + nowAppName, "<br>");
        document.write("브라우저의 버전[navigator.appVersion] : " + nowAppVersion, "<br>");
        document.write("쿠키 사용 가능 여부[navigator.cookieEnabled] : " + nowCookieEnabled, "<br>");
        document.write("브라우저에서 사용되는 언어[navigator.language] : " + nowLanguage, "<br>");
        document.write("온라인인지 여부[navigator.onLine] : " + nowOnLine, "<br>");
        document.write("플랫폼 정보[navigator.platform] : " + nowPlatform, "<br>");
        document.write("브라우저 엔진 이름[navigator.product] : " + nowProduct, "<br>");
        document.write("운영체제 정보[navigator.userAgent] : " + nowUserAgent, "<br>");
    </script>
</head>
<body>
    
</body>
</html>

test

testView
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        //화면에 "자바스크립트1" 출력해주세요!
        document.write("자바스크립트1");
        document.write("<br><br>");

        //변수를 만들어서 "자바스크립트2" 출력해주세요!
        let x1 = "자바스크립트2"
        document.write(x1);
        document.write("<br><br>");

        //상수를 만들어서 "자바스크립트3" 출력해주세요!
        const y = "자바스크립트3";
        document.write(y);
        document.write("<br><br>");

        //함수를 만들어서 "자바스크립트4" 출력해주세요!
        function fun1(){
            let x1 = "자바스크립트4"
            document.write(x1);
            document.write("<br><br>");
        }
        fun1();

        //함수와 매개변수 하나를 만들어서 "자바스크립트5" 출력해주세요!
        function fun2(x2){
            document.write(x2);
            document.write("<br><br>");
        }
        fun2("자바스크립트5");

        //함수와 변수 두개를 만들어서 "자바스크립트6" 출력해주세요!
        function fun3(str1, str2){
            document.write(str1, str2);
            document.write("<br><br>");
        }
        fun3("자바스크립트","6");
        

        //배열을 만들어서 "자바스크립트7" 출력해주세요!
        const arr1 = new Array();     
        arr1[0] ="자바스크립트7";     

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

        //배열을 선언과 동시에 초기화해서 "자바스크립트", "8" 출력해주세요!
        const arr2 = new Array("자바스크립트", "8");

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

        //배열을 선언하지 않고 동시에 초기화해서 "자바스크립트", "9" 출력해주세요!
        const arr3 = ["자바스크립트", "9"] 

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

        //배열을 "자""바""스""크""립""트""10" 을 저장하고 출력해주세요!
        const arr5 = ["자","바","스","크","립","트","10"];

        for( var i = 0; i<arr5.length; i++ ){
        document.write(arr5[i]);
}
    </script> 
</head>
<body>
    
</body>
</html>