javascript Reference

자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다.

자바스크립트 언어의 특징

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

자바스크립트 코드는 작성된 순서대로 구문을 분석합닌다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다. 그리고 대부분의 브라우저에서는 자바스크립트 코드를 컴파일하는 JIT(Just In Time Compiler)가 내장되어 실행속도가 매우 빠르고 웹 애플리케이션을 구현 할 수 있습니다.

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

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

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

C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다. 자바스크립트에서는 객체를 생성한 후에도 프로퍼티와 메서드를 동적으로 추가하거나 삭제할 수 있습니다.

자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.

자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며 뛰어난 효과를 만들어 낼 수 있습니다. 이러한 자바스크립트 라이브러리 언어들을 통해 제이쿼리 뿐만 아니라 센차터치, node.js, 리액트 등 많은 언어를 사용할 수 있습니다.

자바스크립트는 동적 타입의 언어이며 클로저를 정의합니다.

C++와 JAVA는는 실행되기 전에 변수 타입을 정하는 언어이며, 자바스크립트는 변수 타입이 없는 동적 타입의 언어이며, 자바스크립트 함수는 클로저를 정의합니다. 클로저는 변수를 숨기거나 영속성을 보장하는 등 다양한 기능을 구현 할 수 있습니다.

자바스크립트의 기술적 요소

ECMAScript

자바스크립트는 ECMA-262 문서로 공개되고 있으며, 핵심기술은 ECMAScript로 규정되어 있습니다. ECMAScript는 ECMA(Ecma International)라는 조직이 표준화 작업을 하고 있으며, 현재 최신 버전은 ECMAScript 8입니다.

클라이언트 언어 자바스크립트

자바스크립트는 웹 브라우저에서 작동하는 클라이언트 언어입니다. 자바스크립트는 ECMAScript가 규정한 코어 언어와 웹 브라우저 API(Application Program Interface)로 구성되어 있습니다.

Window 인터페이스 : 자바스크립트는 브라우저를 조작하는 기능을 제공
DOM : 자바스크립트는 HTML 문서를 조작하는 기능을 제공
XMLHttpRequest : 자바스크립트는 서버와 비동기로 통신하는 기능을 제공

서버 언어 자바스크립트

웹 서버에서 동작되는 자바스크립트를 서버 측 자바스크립트라고 합니다. 웹 서버를 구현 하는데에는 Perl, PHP, Python, Ruby 등의 프로그래밍 언어가 널리 사용되고 있으며, 최근에는 서버 측 언어로 자바스크립트를 많이 사용하고 있습니다.

Node.js : 구글이 개발한 자바스크립트 실행 환경
Rhino : 모질라가 개발한 자바스크립트 실행 환경
Aptana Jaxer : 압타나가 개발한 자바스크립트 실행 환경

자바스크립트 주석

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

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

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

자바스크립트는 대문자와 소문자를 구별합니다. console와 Console은 각각 다른 문자열로 처리됩니다.

자바스크립트 토큰과 공백문자

프로그램을 구성하는 최소 단위를 토큰(어휘)라고 합니다. 자바스크립트 언어는 프로그램을 실행하기 전에 프로그램을 토큰으로 분해합니다. 이러한 동작을 어휘분석이라고 하며, 이러한 분석을 통해 올바른 프로그램인지 판정합니다. 이 동작을 구문 분석(파싱)이라고 합니다. 토큰은 공백을 넣지 않고 나열하기만 해서는 토큰을 판단 할 수 없습니다. 그래서 프로그래밍 언어에서는 토큰과 토큰 사이에 공백 문자를 통해 구분합니다. 이때 토큰과 토큰 사이에 공백 문자를 여러개 입력해도 공백 문자를 하나만 인식합니다.

자바스크립트 사용방법

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

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

  <!-- Script 태그 사이에 기술하는 방법 -->
  <script>
    document.write("hello")
  </script>
</head>
<body>
  <!-- 태그에 직접 기술하는 방법 -->
  <input type="button" onclick="alert('hello')"></input>
</body>
</html>

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

변수(variable)

변수는 변하는 수를 의미하며, 하나의 데이터를 저장할 수 있습니다.

var 변수명 = 값;

변수 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 type="text/javascript">
    var x = 10;             //변수 x에 숫자 10을 저장함
    var y = 20;            //변수 y에 숫자 20을 저장함
    var z = "javascript"   //변수 z에 문자 javascript를 저장함
    y = 200;               //변수 y에 값이 20 ---> 200으로 변경

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

    console.log(x);
    console.log(y);
    console.log(z);
    console.log(x*y);
    console.log(x*z);
  </script>
</head>
<body>

</body>
</html>

변수명

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

식별자 만드는 규칙

사용자가 사용할 수 있는 문자 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
첫 글자는 숫자를 사용할 수 없습니다. 첫 글자는 알파벳(a~z, A~Z), 밑줄(_), 달러기호($) 중 하나여야 합니다.
공백을 주면 안됨 : 밑줄(_)은 사용가능, 하이픈(-)은 사용안됨
특수기호를 사용할 수 없습니다.
예약어를 사용할 수 없습니다.

단어를 조합할 때 규칙

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

변수 이름을 지을 때 사용하는 일반적인 규칙

캐멀 노테이션이나 언어스코어 노테이션을 주로 사용합니다.
상수는 대문자로 표현합니다.
논리값은 변수 이름 앞에 is를 사용합니다.
루프 카운더는 i,j,k를 사용합니다.
생성자 이름을 붙일 때는 파스칼 표기법을 사용합니다.

지역변수 : 특정 범위안에서만 사용하는 변수
전역변수 : 모든 영역에서 사용하는 변수
매개변수 : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수 : 클래스 내부에서 만들어지며 주로 객체에서 사용하는 변수

변수 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 type="text/javascript">
    var x = 100;      //변수(전역) x에 숫자 100을 저장
    var y = 200;      //변수(전역) y에 숫자 200을 저장
    var z = 900;      //변수(전역) z에 숫자 900을 저장

    function area(){
      var x = 300;    //변수(지역) x에 숫자 300을 저장
      var y = 400;    //변수(지역) y에 숫자 400을 저장
      y = 600;        //변수(지역) y에 숫자 400 ----> 600으로 변경
      z = 800;        //변수(전역) z에 숫자 900 ----> 800으로 변경

      document.write("area 함수 안<br>");
      document.write(x);
      document.write("<br>");
      document.write(y);
      document.write("<br>");
      document.write(z);
      document.write("<br>");
    }
    area();

    document.write("area 함수 밖<br>");
    document.write(x);
    document.write("<br>");
    document.write(y);
    document.write("<br>");
    document.write(z);
  </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 type="text/javascript">
    //화면에 "javascript" 문자를 출력하세요.
    document.write("javascript");
    document.write("<br><br>");

    //변수를 이용해서 화면에 "jquery" 문자를 출력하세요.
    var str = "jquery";
    document.write(str);
    document.write("<br><br>");

    //함수를 이용해서 화면에 "html" 문자를 출력하세요
    function str2(){
      document.write("html");
      document.write("<br><br>")
    }
    str2();

    //매개 변수를 이용해서 화면에 "CSS" 문자를 출력하세요.
    //전달하는 변수
    function str3(num){
      document.write(num);
      document.write("<br><br>")
    }
    str3("CSS");

    //매개 변수를 이용해서 화면에 "jquery" + "javascript"를 출력하세요.
    function str4(num1, num2){
      document.write(num1, " + " ,num2);
      document.write("<br><br>")
    }
    str4("jquery","javascript");
  </script>
</head>
<body>

</body>
</html>

데이터 타입	원시 타입	숫자(Number)	숫자에는 정수와 실수를 구분하지 않고 사용합니다.
		문자열(String)	문자열은 문자를 사용하는 집합입니다.
		논리값(Boolean)	논리값은 참과 거짓을 표현하기 위해 사용하는 값입니다..
		특수값(null)	null은 아무런 값이 없는 경우를 의미합니다.
		특수값(undefined)	undefined은 정의되지 않은 상태를 의미합니다.
		심벌(symbol)	심벌은 자기 자신을 제외한 유일한 값입니다.
	객체 타입

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

배열(array)

var 변수명 = [값1, 값2, 값3, 값4.....];

배열 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 type="text/javascript">
    //변수를 이용해서 x=100, y=200 을 출력하세요.
    var x = 100;
    var y = 200;

    document.write(x,"<br>");
    document.write(y);
    document.write("<br><br>");    //br 요롱켕 두가지로 쓸수있음

    //배열을 선언해서 x=100, y=200 을 출력하세요.
    var arr1 = new Array();
    arr1[0] = 100;
    arr1[1] = 200;

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

    //배열선언과 동시에 초기화하여 출력하세요.
    var arr2 = new Array(100,200,300);

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

    //배열의 크기 구하기
    var arr3 = new Array(100,200,300,400,500);

    document.write(arr3.length,"<br><br>")

    //for문을 이용한 배열의 크기 합 구하기
    var arr4 = new Array(100,200,300,400,500,600,700,800,900,1000);
    var sum = 0;

    // arr4[0] = 100;
    // arr4[1] = 200;
    // arr4[2] = 300;
    // arr4[3] = 400;
    // arr4[4] = 500;
    // arr4[5] = 600;
    // arr4[6] = 700;
    // arr4[7] = 800;
    // arr4[8] = 900;
    // arr4[9] = 1000;

    alert(arr4.length)
    for(var i=0; i<arr4.length; i++){
         // i=0; 0<10; 0
         // i=1; 1<10; 1
         // i=2; 2<10; 2
         // i=3; 3<10; 3
         // i=4; 4<10; 4
         // i=5; 5<10; 5
         // i=6; 6<10; 6
         // i=7; 7<10; 7
         // i=8; 8<10; 8
         // i=9; 9<10; 9
         // i=10; 10=10; X
    sum = sum + arr4[i];
    }
    document.write(sum);

  </script>
</head>
<body>

</body>
</html>

산술 연산자

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

복합 연산자

연산자	예시	설명
`+=`	x = x + 10	x+=10
`-=`	x = x - 10	x-=10
`*=`	x = x * 10	x*=10
`/=`	x = x / 10	x/=10
`%=`	x = x % 10	x%=10

증감 연산자

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

비교 연산자

연산자	예시	설명
`==`	x == y	좌변과 우변의 값이 같을 경우에 true
`===`	x === y	좌변과 우변의 값이 같거나 데이터형도 같을 경우에 true
`!=`	x != y	좌변과 우변의 값이 같지 않을 경우에 true
`!==`	x !== y	좌변과 우변의 값이 같지 않을 경우, 또는 데이터형이 다른 경우에 true
`>`	x > y	좌변이 우변보다 클 경우에 true
`<`	x < y	좌변이 우변보다 작을 경우에 true
`>=`	x >= y	좌변이 우변보다 크거나 같은 경우에 true
`<=`	x <= y	좌변이 우변보다 작거나 같은 경우에 true

논리 연산자

연산자	예시	설명
`&&`	x && y	(and) 둘다 true인 경우 true
`\|\|`	x \|\| y	(or) 둘 중의 하나 이상이 ture 이면 true
`!`	!x	(not) 식이 false인 경우 true

비트 연산자

연산자	예시	설명
`&`	x & y	x와 y의 비트 단위 AND
`\|`	x \| y	x와 y의 비트 단위 OR
`^`	x ^ y	x와 y의 비트 단위 XOR
`~`	x ~ y	x를 비트 단위로 NOT
`>>`	x >> 2	x를 2비트만큼 왼쪽으로 이동
`<<`	x << 2	x를 2비트만큼 오른쪽으로 이동

연산자 우선순위

우선순위	연산자	설명
1	`()` `[]`	괄호/대괄호
2	`!` `~` `++` `--`	부정/증감연산자
3	`*` `/` `%`	곱셈/나눔셈 연산자
4	`+` `-`	덧셈/뺄셈 연산자
5	`<<` `>>` `>>>`	비트 단위의 시프트 연산자
6	`>` `>` `>=` `>=`	관계 연산자
7	`==` `!=` `===` `!==`	관계 연산자
8	`&`	비트 단위 논니 곱 연산자
9	`\|`	비트 단위 논니 부정 연산자
10	`^`	비트 단위 논니 합 연산자
11	`&&`	논리 곱 연산자
12	`\|\|`	논리 합 연산자
13	`?:`	조건부 연산자
14	`=` `+=` `-=` `*=` `/=` `%=` `<<=` `>>=` `>>>=` `&=` `^=` `\|=`	대입/할당 연산자
15	`,`	쉼표

조건문은 말 그대로 조건에 맞으며 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.

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 type="text/javascript">
    var x = 100;

    if( x % 2 == 0 ){
      document.write("변수 x는 짝수입니다.");
    }

    var value = window.prompt("숫자를 입력해주세요.");
    value = parseInt(value);

    if(value % 2 === 0){
      alert("입력한 숫자는 짝수입니다.");
    }
  </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 type="text/javascript">
    var x = 100;

    if( x % 2 === 0){
      document.write("변수 x의 숫자는 짝수입니다.")
    }
    else {
      document.write("변수 x의 숫자는 홀수입니다.")
    }

    var value  = window.prompt("숫자를 입력하세요.");
    value = parseInt(value);

    if(value % 2 === 0){
      alert("입력한 숫자는 짝수입니다.");
    }
    else {
      alert("입력한 숫자는 홀수입니다.");
    }

		//5의 배수
    if(value % 5 === 0){
      alert("입력한 숫자는 5의 배수입니다.");
    }
  </script>
</head>
<body>

</body>
</html>

if(조건){
      //실행코드
} else if(조건){
      //앞 조건이 거짓일 때 실행코드
} else if(조건){
      //앞 조건이 거짓일 때 실행코드
} else 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 type="text/javascript">
    var useID = window.prompt("아이디를 입력하세요.")
    var usePW = window.prompt("비밀번호를 입력하세요.")

    if(useID == "YangAReum" && usePW == "1517"){
      alert("환영합니다.");
    }  else if( useID == "YangAReum") {
      alert("비밀번호가 틀렸습니다.");
    }  else if( usePW == "YangAReum") {
      alert("아이디가 틀렸습니다.");
    }  else {
      alert("모두 틀렸습니다. 다시한번 확인해주세요.");
    }
  </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 type="text/javascript">
    window.onload = function(){
      document.getElementById("button").onclick = function(){
        //수축기 혈압(최고 혈압)을 변수에 저장.
        var hp = parseFloat(document.getElementById("highpressure").value);
        //이완기 혈압(최저 혈압)을 변수에 저장
        var lp = parseFloat(document.getElementById("lowpressure").value);
        //판정 결과를 내보낼 HTML 요소
        var judgement = document.getElementById("judgement")

        if( hp<120 && lp<80){
          judgement.innerHTML = "당신의 혈압은 정상입니다.";
        } else if (hp<139 && lp<89){
          judgement.innerHTML = "당신의 혈압은 다소 높습니다.";
        } else {
          judgement.innerHTML = "당신은 고혈압입니다.";
        }
      };
    };
  </script>
</head>
<body>
  <p>수축기 혈압(최고 혈압) : <input type="number" id="highpressure"></p>
  <p>이완기 혈압(최저 혈압) : <input type="number" id="lowpressure"></p>
  <p id="judgement">이곳에 판정 결과가 표시됩니다.</p>
  <input type="button" id="button" value="확인하기">
</body>
</html>

switch (조건을 체크할 변수){
    case 값1 :
      //조건을 체크하라 변수가 값1을 가지면 실행
    break;
    case 값2 :
      //조건을 체크하라 변수가 값2을 가지면 실행
    break;
    case 값3 :
      //조건을 체크하라 변수가 값3을 가지면 실행
    break;
    default;
      //해당하는 값을 가지고 있지 않을 때 실행
    break;
}

배열 View

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 type="text/javascript">
    // var site = window.prompt("네이버, 다음, 구글 중 자주가는 사이트는?")
    // var url;
    //
    // switch (site) {
    //   case "네이버":
    //     url = "https://www.naver.com/";
    //     break;
    //   case "다음":
    //     url = "https://daum.net/";
    //     break;
    //   case "구글":
    //     url = "https://www.google.co.kr/";
    //     break;
    //   default:
    //     document.write("그런 사이트는 없습니다.");
    //     break;
    // }
    //
    // if(url) {
    //   location.href = url;
    // }

    //if문으로 전환
    var site2 = window.prompt("김세희, 최한비, 하지헌, 이혜인, 이성희 중 자주가는 사이트는?")
    var url2;

    if( site2 == "김세희"){
      url2 = "http://tpgmll125.dothome.co.kr/";
    } else if (site2 == "최한비"){
      url2 = "http://bibibigcom.dothome.co.kr/";
    } else if (site2 == "하지헌"){
      url2 = "http://qwlgjs.dothome.co.kr/";
    } else if (site2 == "이혜인"){
      url2 = "http://leehye1204.dothome.co.kr/";
    } else {
      alert("그런 주소는 있지 않습니다.")
    }
    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 type="text/javascript">
    //if ~ else 사용해서 홀수, 짝수 구분하기
    var number = window.prompt("숫자를 입력해주세요.");
    number = parseInt(number);

    if( number % 2 === 0){
      alert('짝수입니다.');
    } else {
      alert('홀수입니다.');
    }

    //조건 연산자
    var number2 = window.prompt("숫자를 입력해주세요.");
    number2 = parseInt(number2);

    ( number % 2 === 0 ) ? alert('짝수입니다') : alert('홀수입니다.');
  </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">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <script type="text/javascript">
    //10보다 작은 수 출력하기
    var num = 0;      //초기값 설정
    while (true){
      if( num > 8 ){  //실행문 설정
        break;
      }
      num++;          //증감값 설정

      document.write(num, ",");
    }

    document.write("<br>");
    //1~100까지 출력하기
    var num2 = 0;
    while (true){
      if( num2 >= 100 ){
        break;
      }
      num2++;
      document.write(num2, ",");
    }

    document.write("<br>");
    // 1~100까지 짝수만 출력하기
    var num3 = 1;
    while (num3 <= 100){
      if( num3 % 2 == 0){
        document.write(num3,",");
      }
      num3++;
    }

    document.write("<br>");
    // 1~100까지 4의 배수와 6의 배수 출력하기
    var num4 = 1;
    while (num4 <= 100) {
      if( num4 % 4 == 0 || num4 % 6 == 0){
        document.write(num4,",");
      }
      num4++;
    }

    document.write("<br>");
    // 1~100까지 짝수는 파란색 홀수는 빨간색으로 출력하기
    var 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=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <script type="text/javascript">
    //while문을 이용해서 1~20 까지 출력하세요

    var num = 0;
      while( num <= 19 ){
      num++;
      document.write(num, ",");
    }

    document.write("<br>");
    //do while문을 이용해서 1~20까지 출력하세요
    var 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">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <script type="text/javascript">
    //화면에 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>");

    //for문을 이용해서 0~100까지 출력해주세요
    for(var i=0; i<=100; i++){
      document.write(i,",");
    }

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

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

    document.write("<br>");
    //for문을 이용해서 1~200까지 5와 7의 공통배수만 출력하세요
    for (var i=0; i<=200; i++) {
      if( i % 5 == 0 && i % 7 == 0){
        document.write(i,",");
      }
    }
      
    document.write("<br>");
    //for문을 이용해서 1~200까지 출력하세요
    //5의 배수는 파란색 7의 배수는 빨간색 5와7의 공통배수는 검은색으로 출력하세요
    for(var i=0; i<=200; i++) {
        if( i % 5 == 0 && i % 7 == 0){
            document.write(i,",");
        } else if( i % 5 == 0 ){
            document.write("<span style='color:blue'>"+i+"</span>",",");
        } else if( i % 7 == 0 ){
            document.write("<span style='color:red'>"+i+"</span>",",");
        }
    }
      
    document.write("<br>");
    //100+200+300+400+500의 합을 구하세요.
    var arr1 = new Array(100,200,300,400,500);
    var sum = 0;
      
    for(var i=0; i<arr1.length; i++){
        //총 합이 나온다. document.write(i);
        sum = sum + arr1[i]
    }
    document.write(sum);

  </script>
</head>
<body>

</body>
</html>

다중 for문 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 type="text/javascript">
      
//      (2~9)   (1~9)
//      num1 *  num2 = sum
//      2 * 1 = 2
//      2 * 2 = 4
//      2 * 3 = 6
//      2 * 4 = 8
//      2 * 5 = 10
//      2 * 6 = 12
//      2 * 7 = 14
//      2 * 8 = 16
//      2 * 9 = 18
      
      for (var i = 2; i<=9; i++){
          for (var j = 1; j<=9; j++){
              console.log("i : "+i);
              console.log("j :"+j);
              
              var sum = i * j;
              
              document.write(i + "X" + j + "=" + sum);
              document.write("<br>");
        }
      }
      
      
  </script>
</head>
<body>

</body>
</html>

다중 for문 : Table 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 type="text/javascript">
    var table = "<table border='1'>";
    var num = 1;
      
    for(var i=1; i<=100; i++){
        table += "<tr>";
        
        for(var j=1; j<=100; j++){
            table += "<td>"+num+"</td>";
            num++;
        }
        
        table += "</tr>";
    }
      
    table += "</table>";      
    
    document.write(table);
  </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 type="text/javascript">
      var count = 1;
      while(true){
          count++;
          
          if(count == 10){
              continue;
          }
          document.write(count+"번째 실행");
          document.write("<br>");
          
          if(count>20){
              break;
          }
      }
  </script>
</head>
<body>
</body>
</html>

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

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

함수를 사용하는 이유 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script type="text/javascript">
//         for(var i=1; i<=100; i++){
//             document.write(i+". 블랙입니다<br>");
//         }
        
//         for(var i=1; i<=100; i++){
//             document.write(i+". 레드입니다<br>");
//         }
        
//         for(var i=1; i<=100; i++){
//             document.write(i+". 블루입니다<br>");
//         }
        
            function showName(name){
                for(var i=1; i<=100; i++){
                    document.write(i+". " + name + "입니다.<br>");
                }
            }
            
            showName("블랙");
            showName("레드");
            showName("블루");
        
        
        
    </script>
</head>
<body>
    
</body>
</html>

함수의 형태 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script type="text/javascript">
        //변수안에 함수가 들어간 것.
        //선언적 함수
        function func1(){
            document.write("function1이 실행되었습니다.<br><br>");
        }
        func1();
        
        //익명 함수
        var func2 = function(){
            document.write("function2이 실행되었습니다.<br><br>");
        }
        func2();
        
        //매개변수가 있는 함수
        function func3(name){
            document.write(name);
        }
        func3("function3이 실행되었습니다.<br><br>");
        
        //리턴값이 있는 함수
        function func4(){
            var str = "function4이 실행되었습니다.<br><br>";
            return str;
        }
        var value = func4();
        document.write(value);
    </script>
</head>
<body>
    
</body>
</html>

객체(object)란 변수와 함수를 그룹화한 것을 말하며, 자바스크립트에서는 객체를 생성하는 방법은 객체 리터럴을 사용하는 방법과 생성자라는 함수를 사용하는 방법이 있습니다.

객체 리터럴로 생성하는 방법 / 생성자로 생성하는 방법 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script type="text/javascript">
        //1. 객체를 생성한 후 속성(변수)와 메서드(함수)를 축약형으로 표기하는 방법
        var book = {};
        
        book.name = "javascript";
        book.page = 760;
        book.company = "Gilbery";
        
        console.log(book.name);
        
        //2. 객체를 생성한 후 속성(변수)와 메서드(함수)를 객체 생성자로 표기하는 방법
        //객체 생성자 표기법
        //var book2 = new Array();
        var book2 = new Object();
        
        book2.name = "jquery";
        book2.page = 500;
        book2.company = "Gilbert";
        
        console.log(book2.name);
        
        //3. 속성과 메서드를 사전에 정의하여 객체를 생성하는 방법(객체 리터럴)
        var book3 = {
            name: "html",
            page: 400,
            company: "YangAReum"
        }
        
        console.log(book3.name);
        //in 연산자로 프로터티가 있는지 확인하기
        console.log("page" in book3);
        console.log("house" in book3);
        
        //객체 리터럴 예제 (원을 표현하는 객체)
        var circle = {
            center: {x:1.0, y:2.0},  //원의 중점을 표현하는 객체
            radius: 2.5             //원의 반지름
        }
        console.log(circle.center.x);
        
        //객체 리터럴 예제 (회원 정보를 표현하는 객체)
        var person = {
            name: "양아름",
            age: 26,
            sex: "여자",
            married: false
        }
        console.log(person.name, person.age)
        
        
        //생성자를 생성하는 방법
        //함수를 이용하면 여러개의 객체를 생성할 수 있습니다.
        //이때는 객체의 이름대신 this 라는 키워드를 사용합니다. ★
        function book4(name,page,company){
            this.name = name;
            this.page = name;
            this.company = company;
        }
        var book4 = new book4("HTML5",555,"Gilbert");
        
        console.log(book4.name);
        
    </script>
</head>
<body>
    
</body>
</html>

Javascript Reference v1.0 </doc>

자바스크립트

자바스크립트 언어의 특징

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

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

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

자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.

자바스크립트는 동적 타입의 언어이며 클로저를 정의합니다.

자바스크립트의 기술적 요소

ECMAScript

클라이언트 언어 자바스크립트

서버 언어 자바스크립트

자바스크립트 기초

자바스크립트 주석

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

자바스크립트 토큰과 공백문자

자바스크립트 사용방법

자바스크립트 사용방법 View

변수

변수(variable)

변수 View

변수명

식별자 만드는 규칙

단어를 조합할 때 규칙

변수 이름을 지을 때 사용하는 일반적인 규칙

변수의 종류

변수 View

매개변수 View

변수의 유형(데이터 타입)

배열

배열(array)

배열 View

연산자

산술 연산자

복합 연산자

증감 연산자

비교 연산자

논리 연산자

비트 연산자

연산자 우선순위

조건문

if문

View

if~else문

View

다중 if문

View

View

switch문

배열 View

View

조건부 연산자

View

반복문

while문

while문 view

do while문

do while문 view

for문

for문 view

다중 for문

다중 for문 view

다중 for문 : Table view

break문 continue문

view

함수

함수를 사용하는 이유 view

함수의 형태 view

객체

객체 리터럴로 생성하는 방법 / 생성자로 생성하는 방법 view

이벤트