javascript Reference

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

자바스크립트 언어의 특징

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

자바스크립트 코드는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다. 그리고 대부분의 브라우저에는 자바스크립트 코드를 컴파일(div>li*3(해석하는것))하는 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 : 압타나가 개발한 자바스크립트 실행 환경

자바스크립트 주석

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

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

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

자바스크립트는 대문자와 소문자를 구별합니다. consol와 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/javascript" src="javascript.js"></script>

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

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

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(z);
    console.log(y);
    console.log(x*y);
    console.log(x*y);

  </script>
</head>
<body>

</body>
</html>

변수명

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

식별자 만드는 규칙

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

단어를 조합할 때 규칙

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

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

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

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

지역변수/전역변수 View

<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에 숫자 000 --> 800으로 변경

      document.write ("area 함수 안 <br>")
      document.write(x);
      document.write("<br>");
      document.write(y);
      document.write("<br>");
      document.write(z);
      document.write("<br><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>
<!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>",y,"<br><br>");
     // document.write(y,"<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><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;

    for(var i=0; i<arr4.length; i++){
      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의 배수

    // var x = 100;
    //
    // if (x % 5 == 0){
    //   document.write("변수 x의 숫자는 5의 배수입니다.")
    // } else {
    //   document.write("변수 x의 숫자는 5의 배수가 아닙니다.")
    // }
    //
    // var value = window.prompt("숫자를 입력해주세요.")
    // value = parseInt(value);
    //
    // if( value % 5 === 0){
    //   alert("입력한 숫자는 5의 배수입니다.")
    // } else {
    //   alert("입력한 숫자는 5의 배수가 아닙니다.")
    // }

  </script>
</head>
<body>

</body>
</html>

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

    if( useID == "jeongahstory" && usePW =="1234"){
      alert("환영합니다.");
    } else if(useID == "jeongahstory") {
      alert("비밀번호가 틀렸습니다.")
    } else if(usePW =="1234") {
      alert("아이디가 틀렸습니다.")
    } else {
      alert("다 틀렸습니다. 확인 좀 해봐!")
    }

  </script>
</head>
<body>

</body>
</html>

다중 if문 function 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(){
        //window.onload를 넣으면 script를 순서상관없이 맨아래에 안넣어도 됩니다.
      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을 가지면 실행
braak;
case 값2 :
     //조건을 체크할 변수가 값1을 가지면 실행
braak;
case 값3 :
     //조건을 체크할 변수가 값1을 가지면 실행
braak;
default;
     //해당하는 값을 가지고 있지 않을 때 실행
default;
}

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 type="text/javascript">
    var color = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 좋아하는 색은?")

    switch (color) {
      case "빨강":
        document.write("당신은 빨강처럼 열정적인 사람입니다.");
        break;
      case "파랑":
        document.write("당신은 파랑처럼 시원한 사람입니다.");
        break;
      case "노랑":
        document.write("당신은 노랑처럼 밝은 사람입니다.");
        break;
      case "검정":
        document.write("당신은 검정처럼 강인한 사람입니다.");
        break;
      case "흰색":
        document.write("당신은 흰색처럼 순수한 사람입니다.");
        break;
      default:
        document.write("당신은 색을 볼 줄 모르는군요~ 실망입니다.");
        break;
    }
		//if문으로 변환
    var color2 = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 싫어하는 색은?")

    if (color2 == "빨강") {
      alert("당신은 열정적이지 않군요.");
    } else if (color2 == "파랑" ){
      alert("당신은 털털한 성격이 못되는군요.");
    } else if (color2 == "노랑") {
      alert("당신은 어두운 사람이네요.");
    } else if (color2 == "검정") {
      alert("당신은 순수한 사람이군요.");
    } else if (color2 == "흰색"){
      alert("당신은 순수하지 못한 사람이군요.");
    } else {
      alert("당신은 색을 볼 줄 모르는군요~ 실망입니다.")
    }
  </script>
</head>
<body>

</body>
</html>

switch문 site이동 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://www.daum.net/";
        break;
      case "구글":
        url = "https://www.google.co.kr/?hl=ko";
        break;

      default:
        document.write("그런 사이트는 없습니다.");
        break;
    }
      if(url) {
        location.href = url;
      }

    // //if문으로 변환
    // var site2 = window.prompt("이정아, 한가인, 송혜교, 공유, BTS 중 자주가는 사이트는?")
    // var url2;
    //
    // if (site2 == "이정아"){
    //   url2 = "http://jeongah2651.dothome.co.kr/";
    // } else if (site2 == "한가인") {
    //   url2 = "https://www.facebook.com/official.hangain";
    // } else if (site2 == "송혜교") {
    //   url2 = "http://www.songhyekyo.co.kr/k_home.html";
    // } else if (site2 == "공유") {
    //   url2 = "http://www.soopent.com/bbs/board.php?bo_table=star0101";
    // } else if (site2 == "BTS") {
    //   url2 = "http://bts.ibighit.com/";
    // } 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);


    (number2 % 2 === 0 ) ? alert('짝수입니다.') : alert ('홀수입니다.');

  </script>
</head>
<body>

</body>
</html>

반복되는 부분을 실행하는 제어문입니다.

var변수 = 초기값
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 >= 9) { //실행문 설정
                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++;
        }

        //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(true){
            if(num >= 20){
                break;
            }
            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, "<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++) {
            if (i % 2 == 0) {
                document.write(i, ",");
            }
        }
        document.write("<br>");

        
        for (var i = 0; i <= 100; i+=2) {
                document.write(i, ",");
            }
        
         document.write("<br>");

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

        //for문을 이용해서 1~200까지 출력하기(5와 7의 공통 배수)
        for (var i = 1; 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 = 1; i <= 200; i++) {
            if ( i % 5 == 0 && i % 7 == 0) {
                document.write("<span style='color:black'>" + i + "</span>",",")
            } 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,600,700,800,900,1000);
        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문 : 테이블 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<=10; 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>
</html>

break문 continue문 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">
    <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. 블랙이니다.
//         2. 블랙입니다.
//         ...
//         10. 블랙입니다.
        
//       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">
    <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">
      //선언적 함수
        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>
    <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. 객체를 생성한 후 속성(변수)와 메서드(함수)를 축약형으로 표기하는 방법
        var book = {}; // []:배열 , {}:객체생성
        
        book.name = "javascript";
        book.page = 760;
        book.company = "Gilbert";
        
        console.log(book.name);  //결과: javascript
        
        //2. 객체를 생성한 후 속성(변수)와 메서드(함수)를 객체 생성자로 표기하는 방법
        // 객체 생성자 표기법
        //var book2 = new Array();
        var book2 = new Object();
        
        book2.name ="jquery";
        book2.page = 500;
        book2.company = "Gilbert";
        
        console.log(book2.name);  //결과: jquery
        
        //3. 속성과 메서드를 사전에 정의하여 객체를 생성하는 방법
        // 객체 리터럴
        var book3 = {
            name: "html",
            page: 400,
            company: "webs"
        }
        console.log(book3.name);   // 결과: html
        
        //in 연산자로 프로터티가 있는지 확인하기
        console.log("page" in book3);  // 있으면 "true"라고 나온다.console
        console.log("house" in book3);  // 없으면 "false"라고 나온다.console
        
        //객체 리터럴 예제(원을 표현하는 객체);
        var circle = {
            center: {x:1.0, y:2.0},     //원의 중점을 표현하는 객체
            radius: 2.5                 //원의 반지름을 표현하는 객체
        }
        console.log(circle.center.x);     //결과: 1
        
        //객체 리터럴 예제(회원 정보를 표현하는 객체)
        var person = {
            name: "이정아",
            age: 28,
            sex: "여자",
            married: false
        }
        console.log(person.name, person.age);  //결과: 이정아 28
        
        //생성자를 생성하는 방법
        //함수를 이용하면 여러개의 객체를 생성할 수 있습니다.
        //이때는 객체의 이름대신 this 키워드를 사용합니다.
        function book4(name,page,company){
            this.name = name;
            this.page = page;
            this.company = company;
        }
        var book4 = new book4("HTML5",555,"Gilbert");
        
        console.log(book4.name);  //결과: HTML5
        
    </script>
</head>

<body>

</body>
</html>

javascript Reference v1.0 </doc>

자바스크립트

자바스크립트 언어의 특징

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

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

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

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

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

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

ECMAScript

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

서버 언어 자바스크립트

자바스크립트 기초

자바스크립트 주석

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

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

자바스크립트 사용방법 View

변수(variable)

변수 View

변수명

식별자 만드는 규칙

단어를 조합할 때 규칙

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

변수의 종류

지역변수/전역변수 View

매개변수 View

변수의 유형

배열

배열(array)

매개변수 View

연산자

산술 연산자

복합 연산자

증감 연산자

비교 연산자

논리 연산자

비트 연산자

연산자 우선순위

조건문

if문

지역변수/전역변수 View

if~else문

지역변수/전역변수 View

다중 if문

다중 if문 View

다중 if문 function View

switch문

switch문 조건체크 View

switch문 site이동 View

조건부 연산자

배열 View

반복문

while문

반복문 View

do while문

do while문 View

for문

for문 View

다중 for문

다중 for문 : 구구단 View

다중 for문 : 테이블 View

break문 continue문

break문 continue문 View

함수

함수를 사용하는 이유 View

함수의 형태 View

객체

객체 리터럴(숫자),생성자로 생성하는 방법 View

이벤트