자바스크립트

자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어입니다.

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 2013년 1월 기준으로, 가장 최근 버전은 자바스크립트 1.8.5이고[3], 파이어폭스 3에서 지원된다. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5이다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다르다.(출처:위키백과)

자바스크립트 언어의 특징

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

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


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

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


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

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


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

자바스크립트를 이용한 언어에는 제이쿼리(jQuery), 앵귤러(Angular)js, 리액트(React)js, 노드(Node)js 등이 있습니다. 이를 통해 다양한 기능을 쉽게 구현할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.


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

C++와 JAVA는 실행되기 전에 변수 타입을 정하는 언어이며, 자바스크립트는 변수 타입이 없는 동적 타입의 언어이며, 자바스크립트 함수는 클로저(Closure)를 정합니다.

자바스크립트 기술적 요소

ECMAScript

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


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

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

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

서버 언어 자바스크립트

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

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

자바스크립트 기초

자바스크립트 주석

일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 코드입니다.

/* .... */ : 여러줄에 주석을 적용하는 경우
// : 한줄에 주석을 적용하는 경우
<!-- --> : HTML 주석
/* .... */ : CSS 주석

다음의 키워드는 자바스크립트에서 사용하기 때문에 사용자가 임의로 사용 할 수 없습니다.

break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while while with class enum export extends import super implements interface let package private protexted public static yield

자바스크립트 사용 방법

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


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 사용방법</title>
    
    <!-- 외부 파일로 로드하는 방법-->
    <script type="text/javascript" src="javascript.js"></script>
    
    <!-- script 태그 사이에 기술하는 방법-->
    <script type="text/javascript">
        document.write("hello");
    </script>
</head>
<body>
    <!-- 태그에 직접 기술하는 방법 -->
    <input type="button" onclick="alert('hello')" value="hello">
</body>
</html>    
          

문자열 처리

자바스크립트에서는 문자열을 구분하기 위해서는 작은 따옴표와 큰 따옴표를 사용합니다.


<script>
  var str1 = "javascript";			//큰 따옴표
  var str2 = 'javascript';			//작은 따옴표
  var str3 = "hello 'javascript'";	//큰 따옴표 안에 작은 따옴표
  var str4 = 'hello "javascript"'; 	//작은 따옴표 안에 큰 따옴표
  var str5 = "hello\njavascript";		//줄바꿈
  var str6 = "hello\'javascript\'";	//작은 따옴표
  var str7 = "hello\"javascript\"";	//큰 따옴표

  document.write(str1);
  document.write("<br>");
  document.write(str2);
  document.write("<br>");
  document.write(str3);
  document.write("<br>");
  document.write(str4);
  document.write("<br>");
  alert(str5);
  alert(str6);
  alert(str7);
</script>
          

변수

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

변수는 변하는 수를 의미하며, 사용 가능 범위에 전역변수, 지역변수, 매게변수, 멤버변수로 나눌 수 있으며, 변수는 식별자로 구분해야 하기 때문에 변수에는 숫자, 문자열, 불린, 함수, 객체 등을 사용할 수 있습니다.

변수 선언

변수를 선언하는 방법
var 변수명;
var 변수명 = 값;

변수명

  • 예약어 : 자바스크립트에서 정해진 단어 즉 자바스크립트 문법을 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드입니다.
  • 식별자 : 사용자가 임의로 사용하는 단어 즉 변수나 함수를 사용할 때 정의하는 키워드입니다.
식별자를 만드는 규칙
  • 사용자가 사용할 수 있는 문자 알파벳(a~z,A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
  • 첫 글자는 숫자를 사용할 수 없습니다. 첫글자 알파벳(a~z,A~Z), 밑줄(_), 달러기호($) 중 하나여야 합니다.
  • 공백을 주면 안됨 : 밑줄(_) 사용 가능, 하이픈(-) 사용안됨
  • 특수 기호를 사용할 수 없습니다.
  • 키워드(예약어)를 사용 할 수 없습니다.
단어를 조합할 때 규칙
  • 언더스코어 노테이션(스네이크 표기법) : color_top와 같이 중간에 '_'를 사용합니다.
  • 캐멀 노테이션(로어 캐멀 표기법) : colorTop와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
  • 파스칼 노테이션(어퍼 캐멀 표기법) : ColorTop와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.

변수 종류

  • 지역변수 : 특정 범위 안에서만 사용하는 변수
  • 전역변수 : 모든 영역 안에서 사용하는 변수
  • 매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
  • 멤버변수(프로퍼티) : 클래스 내부에서 만들어지면 주로 객체에서 사용하는 변수
지역변수 / 전역변수

  <script>
    var x1 = 1000;		//(전역)변수 x1에 숫자를 1000을 저장
    var x2 = 2000;		//(전역)변수 x2에 숫자를 2000을 저장
    var x3;				//(전역)변수 x3를 선언

    x1 = 100;			//(전역)변수 x1에 숫자를 1000에서 100으로 변경
    x2 = 200;			//(전역)변수 x2에 숫자를 2000에서 200으로 변경

    function func(){
        var x1 = 3000;	//(지역)변수 x1에 숫자를 3000을 저장
        var x2 = 4000;	//(지역)변수 x2에 숫자를 4000을 저장

        x1 = 300;		//(지역)변수 x1에 숫자를 3000에서 300으로 변경
        x2 = 400;		//(지역)변수 x2에 숫자를 4000에서 400으로 변경
        x3 = 500;		//(전역)변수 x3에 숫자를 500을 저장

        document.write("함수 안<br>");
        document.write(x1);
        document.write("<br>");
        document.write(x2);
        document.write("<br>");
        document.write(x3);
        document.write("<br><br>");
    }
    func();

    document.write("함수 밖<br>");
    document.write(x1);
    document.write("<br>");
    document.write(x2);
    document.write("<br>");
    document.write(x3);
</script>
            
매개변수

<script>
    //화면에 숫자 1000을 출력하세요!!
    document.write(1000);
    document.write("<br><br>");

    //화면에 문자 javascript를 출력하세요!!
    document.write("javascript");
    document.write("<br><br>");

    //변수(x1)에 문자열 "html"을 저장하고 출력하세요!!
    var x1 = "html";
    document.write(x1);
    document.write("<br><br>");

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

    //매개변수를 이용해서 화면에 "jQuery"를 출력하세요!!
    function func2(str){
        document.write(str);
        document.write("<br><br>");
    }
    func2("jQuery");

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

변수 유형(자료형)

자료형 설명
숫자 ( Number ) 숫자에는 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다.
문자열 ( String ) "문자", "string" 처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다.
논리 ( Boolean ) 참과 거짓을 나타내는 자료형이며, 오직 true, false로만 표현을 합니다.
특수값 ( null ) null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화 할 때 사용합니다.
특수값 ( undefined ) 변수 선언시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다.
배열 ( array ) 배열 형태의 자료형도 자바스크립에서 사용 할 수 있습니다.
객체 ( Object ) 객체 형태의 자료형도 자바스크립에서 사용 할 수 있습니다.
함수 ( Function ) function은 자바스크립트를 구성하는 기본 단위이며, 자료형으로 변수에 넣을 수 있습니다.

변수 검사


<script>
    var x1 = 30;				//숫자 저장
    var x2 = "30";				//문자열 저장
    var x3 = "javascript";		//문자열 저장
    var x4;						//선언
    var x5 = function(){};		//함수 저장
    var x6 = {};				//객체 저장
    var x7 = Symbol();			//심볼 저장

    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>");
</script>
          

배열

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

배열 선언
배열 사용하는 방법
var 변수명 = [값1, 값2, 값3.....];
배열 사용하는 방식1
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;
배열 사용하는 방식2
var arr2 = new Array(100,200);
배열 사용하는 방식3
var arr3 = [100,200];
배열 예제

  <script>
    //변수 x = 100; 변수 y = 200 저장한 다음 출력해주세요!!
    var x = 100;
    var y = 200;

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

    //배열을 이용해서 화면에 100과 200을 출력하세요!
    var 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을 출력하세요!!
    var arr2 = new Array(100,200);

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

    //배열을 선언하지 않고 100과 200을 출력하세요!!
    var arr3 = [100,200];

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

    //배열의 크기 구하기
    var arr4 = [100,200,300,400,500];

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

    //배열 가져오기
    var arr5 = [100,200,300,400,500];

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

    //배열의 합 구하기
    var arr6 = [100,200,300,400,500];
    var sum = 0;

    for(var i=0; i<arr6.length; i++){
        // sum = 100+200+300+400+500;
        // sum = arr5[0]+arr5[1]+arr5[2]+arr5[3]+arr5[4]
        // sum = arr5[i]+arr5[i]+arr5[i]+arr5[i]+arr5[i]
        sum = sum + arr6[i];
        // 0 	=  0  + 100;
        // 100 = 100 + 200;
        // 300 = 300 + 300;
        // 600 = 600 + 400;
        // 1000= 1000+ 500;
        // 1500
    }
    document.write("<br>");
    document.write(sum);
</script>
          

배열 객체의 메서드 및 속성

종류 설명
join() 배열 객체의 데이터를 문자형 데이터로 출력합니다.
reverse() 배열 객체의 데이터를 반대로 출력합니다.
sort() 배열 객체의 데이터를 오름차순으로 출력합니다.
slice() 배열 객체의 데이터를 인덱스 구간만큼 가져옵니다.
splice() 배열 객체의 지정 데이터를 삭제하고 새 테이터를 삽입합니다.
concat() 배열 객체의 데이터 중 2개의 배열 객체를 하나로 합칩니다.
pop() 배열 객체의 데이터 중 마지막 데이터를 삭제합니다.
push() 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.
shift() 배열 객체의 데이터 중 첫 번째 데이터를 삭제합니다.
unshift() 배열 객체의 첫 번째 인덱스에 새 데이터를 삽입합니다.
length 배열 객체의 데이터 개수를 반환합니다.

연산자

자바스크립트는 다양한 연산자를 통해 계산 작업을 할 수 있습니다.

산술 연산자

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

<script>
    var x = 100;
    var y = 200;

    document.write(x + y); //300
    document.write("<br>");
    document.write(x - y); //-100
    document.write("<br>");
    document.write(x * y); //20000
    document.write("<br>");
    document.write(x / y); //0.5
    document.write("<br>");
    document.write(x % y); //100
    document.write("<br>");
</script>
          

대입 연산자

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

<script>
    var x = 10;
    var	y = 20;

    //x = x + 10;
    //x += 10;
    
    //y = y - 10;
    //y -= 10

    //x = x * 10;
    //x *= 10;

    //y = y / 10;
    //y /= 10;

    //x = x % 10;
    //x %= 10;

    document.write(x);
</script>
          
대입 연산자를 이용한 테이블 만들기

<script>
    var table = "<table border='1'>";
    table += "<tr>";
    table += "<td>1</td><td>2</td><td>3</td>";
    table += "</tr>";
    table += "</table>";

    document.write(table);
    console.log(table);
</script>
          

증감 연산자

종류 예시 설명
++ x = x + 1 x++ 또는 ++x
-- x = x - 1 x-- 또는 --x
증감 연산자

<script>
    var num1 = 10;
    var num2 = 20;
    var result;

    num1--;		//9
    document.write(num1, "<br>");

    num1++;		//10
    document.write(num1, "<br>");

    result = num2++;	//20, 21
    document.write(result, "<br>");
    document.write(num2, "<br>");

    result = ++num2;	//22, 22
    document.write(result, "<br>");
    document.write(num2, "<br>");
</script>
          

비교 연산자

비교 연산자는 비교 할 때 사용하며, 결과 값은 true(참) 또는 false(거짓)로 반환합니다

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

<script>
    var x = 10;
    var y = 20;		//숫자
    var a = 10;
    var b = "20";	//문자열

    document.write(x == y);		//false
    document.write("<br>");
    document.write(x == a);		//true
    document.write("<br>");
    document.write(y == b);		//true
    document.write("<br>");
    document.write(y === b);	//false
    document.write("<br>");
    document.write(x != a);		//false
    document.write("<br>");
    document.write(x !== a);	//false
    document.write("<br>");
    document.write(x > y);		//false
    document.write("<br>");
    document.write(x < y);		//ture
    document.write("<br>");
    document.write(x >= y);		//false
    document.write("<br>");
    document.write(x <= y);		//true
    document.write("<br>");
</script>
          

논리 연산자

종류 예시 설명
&& x && y 둘다 true인 경우 true를 반환합니다.
|| x || y 둘 중의 하나 이상이 true인 경우 true를 반환합니다.
! !x 반대 값을 반환합니다.
논리 연산자

<script>
    var a = 10;
    var b = 20;

    document.write( false || false); 	//false
    document.write("<br>");
    document.write( false || true);     //true
    document.write("<br>");
    document.write( true || true);      //true
    document.write("<br>");

    document.write( false && false);	//false
    document.write("<br>");
    document.write( false && true);		//false
    document.write("<br>");
    document.write( true && true);		//true
    document.write("<br>");

    document.write( !true );					//false
    document.write("<br>");
    document.write( !false );					//ture
    document.write("<br>");

    document.write( a > b && a < b);  			//false;
    document.write("<br>");
    document.write( a > b && a < b && a >= b);  //false;
    document.write("<br>");
    document.write( a > 200 || 50 < b);  		//false;
    document.write("<br>");
    document.write( !(a > 200));  				//true;
    document.write("<br>");
</script>
          

문자 결합 연산자


<script>
    var x1 = 100;			//숫자(number)
    var x2 = "javascript";	//문자(string)
    var x3 = "100";			//문자(string)
    var x4 = "200";			//문자(string)

    document.write(typeof(x1));
    document.write("<br>");
    document.write(x1 + 100);		//숫자 + 숫자
    document.write("<br>");
    document.write(x1 + x2);		//숫자 + 문자
    document.write("<br>");
    document.write(x3 + x4);		//문자 + 문자
    document.write("<br>");
    document.write(x1 + true);		//숫자 + 불린
    document.write("<br>");
    document.write(x1 + null);		//숫자 + 특수값
    document.write("<br>");
    document.write(true + true);	//불린 + 불린
    document.write("<br>");
    document.write(true + false);	//불린 + 불린
    document.write("<br>");
    document.write(true + null);	//불린 + 특수값
    document.write("<br>");

    x1 = "" + x1; 	//숫자를 문자열로 형 변환
    document.write(x1);
    document.write("<br>");
    document.write(typeof(x1));
</script>
          

연산자 우선순위

우선순위 연산자 설명
1 괄호/대괄호 ()[]
2 단항 연산자 !, ++, --
3 곱셈/나눔셈 연산자 *, /, %
4 덧셈/뺄셈 연산자 +, -
5 비교 연산자 >, >=, <, <=
6 비교 연산자 ==, ===, !=, !==
7 논리 곱 연산자 &&
8 논리 합 연산자 ||
9 대입 연산자 =, +=, -=, *=, /=, %=
10 쉼표 ,

연산자 예제

적정 체중 테스트 만들기

<script>
    //적정 체중 = (본인 신장 - 100) * 0.9;

    // var userHegiht = 174; 	//키
    // var userWeight = 90;	//몸무게
    // var normal = (userHegiht - 100) * 0.9;

    var name = prompt("당신의 이름은?","");
    var height = prompt("당신의 키는?", "0");
    var weight = prompt("당신의 몸무게는?", "0");

    var normal = (height - 100) * 0.9;
    var result = weight >= normal - 5 && weight <= normal + 5;
    //console.log(result);
    result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
    document.write(name +"님은 "+ result);
</script>
          
지출 내역 만들기

<script>
    // var price1 = 3000;
    // var price2 = 6000;
    // var price3 = 3000;

    // var total = price1 + price2 + price3;
    // var result =  total > 10000  ? "초과되었습니다." : "돈 관리 잘했어요!";

    var price1 = prompt("당신의 교통비는?");
    var price2 = prompt("당신의 식비는?");
    var price3 = prompt("당신의 음료비?");

    price1 = Number(price1);
    price2 = Number(price2);
    price3 = Number(price3);

    var total = price1 + price2 + price3;
    
    console.log(total);
    var result =  total > 10000  ? total - 10000 + "초과되었습니다." : "돈 관리 잘했어요!";

    document.write(result);
</script>
          

조건문

조건문은 조건식에 따라 참(true)인지, 거짓(false) 인지에 따라 자바스크립트 코드를 제어하는 제어문입니다.

if문

if문 사용하는 방법
if(조건식){
   //실행 코드
}
if문 예제

<script>
    var x = 100;	//변수 x에 숫자를 100을 저장

    if(x > 200){	//변수 x가 200보다 크면 실행(true)
        document.write(x);
    }

    if(x < 200){	//변수 x가 200보다 작으면 실행(true)
        document.write(x,"<br>");
    }

    if(true){	
        document.write(x,"<br>");
    }

    if(false){	
        document.write(x,"<br>");
    }

    //통화량 구분하기
    var min = prompt("당신의 하루 통화량은 몇 분인가요?", "0");
    if(min > 60){
        document.write("당신은 전화를 많이쓰네요~<br>");
    }

    //짝수 구분하기
    var num = prompt("숫자를 입력해 주세요!!<br>", "0");

    if(num % 2 == 0){
        document.write("당신이 입력한 숫자는 짝수입니다.<br>");
    }

    //조건식에 논리형 데이터가 아닌 다른 형이 오는 경우
    //0, null, ""(빈문자), undefined --> true
    var y = 100;

    if(y){
        document.write(y,"<br>");
    }

    var useName = prompt("당신의 이름은 무엇입니다.","");
    if(useName){
        document.write(useName + "님 방갑습니다.");
    }
    //document.write(useName + "님 방갑습니다.");
    
    //if(useName) document.write(useName + "님 방갑습니다.");
</script>
          

if ~ else문

if(조건식){
   //참(true)일 때 실행 코드
} else {
   //거짓(fales)일 때 실행 코드
}
if ~ else문 예제

<script>
    //홀수 짝수 구분하기
    var num = prompt("당신이 좋아하는 숫자는?");

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

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

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

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

    if(result){
        document.write("탈퇴 처리되었습니다.");
    } else {
        document.write("탈퇴 취소되었습니다.");
    }
</script>
          

다중 if문

if(조건){
   //조건이 참일 때 실행코드
} else if(조건) {
   //앞 조건이 거짓일 때 실행코드
} else {
   //앞의 모든 조건이 거짓일 때 실행코드
}
다중 if문 예제

<script>
    var x = 100;
    
    if (x == 90){
        document.write("x의 숫자는 90입니다.");
    } else if (x == 92) {
        document.write("x의 숫자는 92입니다.");
    } else if (x == 93) {
        document.write("x의 숫자는 93입니다.");
    } else if (x == 94) {
        document.write("x의 숫자는 94입니다.");
    } else if (x == 95) {
        document.write("x의 숫자는 95입니다.");
    } else if (x == 96) {
        document.write("x의 숫자는 96입니다.");
    } else if (x == 97) {
        document.write("x의 숫자는 97입니다.");
    } else if (x == 98) {
        document.write("x의 숫자는 98입니다.");
    } else {
        document.write("x의 숫자를 모르겠습니다ㅠㅠ.");
    }
    
    var useID = window.prompt("ID를 입력해주삼");
    var usePW = window.prompt("PW쓰삼");
    
    if (useID == "jjgodcom" && usePW == "1234"){
        alert("반갑소!");
    } else if (useID == "jjgodcom"){
        alert("패스워드가 틀렸습니다.");
    } else {
        alert("틀렸습니다.")
    }
</script>
          

switch문

해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.

switch(조건을 체크할 변수){
case 값1:
      //조건을 체크할 변수가 '값1'을 가지면 실행
break;
case 값2:
      //조건을 체크할 변수가 '값2'을 가지면 실행
break;
case 값3:
      //조건을 체크할 변수가 '값3'을 가지면 실행
break;
case 값4:
      //조건을 체크할 변수가 '값4'을 가지면 실행
break;
default:
      //해당되는 갑슬 가지고 있지 않을 경우 실행
break; }
switch문 예제1

<script>
    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;
        case "흰색"   :
            document.write("흰색을 선택해?!?!?");
            break;
        default :
            document.write("당신은 색을 볼 줄 모르는군요!");
            break;
    }
</script>
          
switch문 예제2

<script>
    var site = window.prompt("네이버, 다음, 구글, 네이트 중 자주 가는 사이트는?");
    var url;
    
    switch(site){
        case "네이버" :
            url ="www.naver.com";
            break;
        case "다음" :
            url ="www.daum.net";
            break;
        case "구글" :
            url ="www.goggle.co.kr";
            break;
        case "네이트" :
            url ="www.nate.com";
            break;
        
        default :
            document.write("그런 사이트는 없따!")
    }
    if(url){
        location.href="http://"+ url;
    }
</script>
          

조건문 연산자

조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다.

(조건) ? (참일 때 실행하는 코드) : (거짓일 때 실행하는 코드)
조건문 연산자 예제

<script>
    //if - else
    var value = window.prompt("숫자를 입력해주세요");
    value = parseInt(value);    //숫자로 인식할 수 있도록 형 변환
    
    if(value % 2 == 0){
        alert("짝수입니다.");
    } else {
        alert("홀수입니다.");
    }
    
    //조건 연산자
    var value2 = window.prompt("숫자를 입력해주세요");
        value2 = parseInt(value);    //숫자로 인식할 수 있도록 형 변환
    
    (value2 % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
</script>
          

반복문

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

while문

var 변수 = 초기합
while(조건식) {
    실행문;
    증감식;
}
while문 예제1

<script>
    var count = 0;
    while(true){
        count++;
        document.write(count);
        document.write("<br>");
        
        if(count > 9){
            break;
        }
    }
</script>
          
while문 예제2(100보다 작은 숫자에서 4의 배수 6의배수를 출력하기)

<script>
    //100보다 작은 숫자에서 4의 배수 6의 배수 출력하기
    //초기값설정 
    var i = 1;
    
    while(i<=100){      //i가 100보다 작거나 같을 때까지 반복 실행합니다.
        if(i%4 == 0 && i%6 == 0){
            document.write(i,"<br>");
        }
        i++;
    }
</script>
          
while문 예제3(100보다 작은 숫자에서 짝수는 빨간색 홀수는 파란색 출력하기)

<script>
    //100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
    var i = 100;
    while(i>0){
        if(i%2 == 0){
            document.write("<span style='color:blue;'>"+ i +"</span>","<br>");
        } else {
            document.write("<span style='color:red;'>"+ i +"</span>","<br>");
        }
        i--;
    }
</script>
          

do while문

while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행분을 실행하고 조건식을 검사합니다.

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

<script>
    var count = 0;
    do{
        count++;
        document.write(count,"<br>")
    }while(count<9);
</script>
          

for문

for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문 입니다.

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

0-100까지 반복을 한다면, 다음과 같이 표현합니다.

for(var i=0; i<100; i++){
    //반복코드
}
초기값 설정 : var i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행 되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100; 조건에 맞으면 실행됩니다.
증감값 설정 : i++; 조건에 맞으면 1씩 증가됩니다.
for문 예제1

<script>
//        //0~100까지 출력
//        for(var i=0; i<=100; i++){
//            document.write("숫자"+i,"<br>");
//        }
//        //1-100까지 출력
//        for(var i=1; i<=100; i++){
//            document.write("숫자"+i,"<br>");
//        }
//        //1-100중에서 짝수만 출력
//        for(var i=0; i<=100;  i+=2){
//            document.write("숫자"+i,"<br>");
//        }
    //1-100중에서 홀수만 출력
    for(var i=1; i<=100;  i+=2){
        document.write("숫자"+i,"<br>");
    }
</script>
          
for문 예제2(5의 배수는 파랑색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력)

<script>
    //1~100까지 출력
    for(var i=1; i<=100; i++){
        //5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력하기
        
        if(i%5 == 0 && i%7!==0){    //5의 배수이고 7의 배수가 아닌 경우
            document.write("<span style='color:blue'>"+i+"</span>","<br>");
        } else if(i%7 == 0 && i%5!==0){     //7의 배수이고 5의 배수가 아닌 경우
            document.write("<span style='color:red'>"+i+"</span>","<br>");
        } else if(i%5 == 0 && i%7 == 0){    //7의 배수이고 5의 배수인 경우
            document.write("<span style='color:black'>"+i+"</span>","<br>");
        }
    }
</script>
          
for문 예제3(배열의 합 구하기)

<script>
    var arr = new Array(100,200,300,400,500,600,700,800);
    var sum = 0;
                    //8 = i<8
    for(var i=0; i<arr.length; i++){
        sum = sum + arr[i];
//             0  =  0  + arr[0]=(100);
//            100 = 100 + arr[1]=(200);
//            300 = 300 + arr[2]=(300);
//            600 = 600 + arr[3]=(400);
//            1000 = 1000 + arr[4]=(500);
    }
    document.write(sum);
</script>
          

다중 for문

for문 안에 for문이 있는 형태입니다.

for(var i=0; i<100; i++){
    for(var j=0; j<100; j++){
        //실행 코드
    }
}
다중 for문

<script>
    for(var i=0; i<8; i++){
        for(var j=0; j<9; j++){
            var num1 = i + 2;
            var num2 = j + 1;
            var sum = num1 + num2;
            document.write( num1 + "X" + num2 + "=" + sum);
            document.write("<br>");
        }
    }
//        var i * j = sum
//            2 * 1 = 2       3 * 1 = 3
//            2 * 2 = 4       3 * 2 = 6
//            2 * 3 = 6       
//            2 * 4 = 8
//
//        i = 2,3,4,5,6,7,8,9
//        j = 1,2,3,4,5,6,7,8,9
</script>
          
다중 for문을 이용한 테이블 만들기

<script>
    var num = 1;
    var t = "<table border='1'>"; //테이블 시작 태그
    
    for(var i=1; i<=10; i++){
        t += "<tr>";
        
        for(var k=1; k<=10; k++){
            t += "<td>" + num +"</td>";
            num++;
        }
        
        t +="</tr>";
    }
    t += "</table>";
    
    document.write(t);
</script>
          

break문 continue

break문 continue문은 반복문을 제어하는 명령어입니다.

break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다.
continue문 : 코드 실행 중에 continue를 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다
break문 continue

<script>
    var count = 0;
    while(true){
        count++;
        if(count == 3){
            continue;
        }
        document.write(count,"<br>");
        
        if(count > 9){
            break;
        }
    }
</script>
          

함수

함수는 하나의 실행문을 저장하여 사용할 수 있습니다.

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

함수를 사용하는 이유

<script>
//    for문으로 
//    1. 블랙입니다.
//    2. 블랙입니다.
//    3. 블랙입니다.
//    ....
//    100. 블랙입니다.

//        for(var i=0; i<=100; i++){
//            document.write(i+".블랙입니다","<br><br>");
//       }
    
//    for문으로 
//    1. 블루입니다.
//    2. 블루입니다.
//    3. 블루입니다.
//    ....
//    100. 블루입니다.
    
//        for(var i=0; i<=100; i++){
//            document.write(i+ ".블루입니다", "<br><br>")
//        }

//    for문으로 
//    1. 레드입니다.
//    2. 레드입니다.
//    3. 레드입니다.
//    ....
//    100. 레드입니다.
    
//        for(var i=0; i<=100; i++){
//            document.write(i+ ".레드입니다", "<br><br>")
//        }
    
    function Show(name){
        for(var i=0; i<=100; i++){
        document.write(i+"." + name +"입니다","<br>");
        }
    }
    
    Show("수호");
    Show("시현");
    Show("레드");

</script>
          

함수의 사용 형태

함수는 사용 형태에 따라 익명함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 잇는 함수로 구분이 됩니다.

함수의 사용 형태

<script>
    //    for문으로 
    //    1. 블랙입니다.
    //    2. 블랙입니다.
    //    3. 블랙입니다.
    //    ....
    //    100. 블랙입니다.
    
    //        for(var i=0; i<=100; i++){
    //            document.write(i+".블랙입니다","<br><br>");
    //       }
            
    //    for문으로 
    //    1. 블루입니다.
    //    2. 블루입니다.
    //    3. 블루입니다.
    //    ....
    //    100. 블루입니다.
            
    //        for(var i=0; i<=100; i++){
    //            document.write(i+ ".블루입니다", "<br><br>")
    //        }
    
    //    for문으로 
    //    1. 레드입니다.
    //    2. 레드입니다.
    //    3. 레드입니다.
    //    ....
    //    100. 레드입니다.
            
    //        for(var i=0; i<=100; i++){
    //            document.write(i+ ".레드입니다", "<br><br>")
    //        }
            
            function Show(name){
                for(var i=0; i<=100; i++){
                document.write(i+"." + name +"입니다","<br>");
                }
            }
            
            Show("수호");
            Show("시현");
            Show("레드");
        
        </script>

        <script>
            //선언적 함수 : 일반적인 함수의 형태이며, 함수 이름을 설정하고 함수를 호출 해야 합니다.
            function fun1(){
                document.write("fun1이 실행되었습니다.");
                document.write("<br>");
            }
    
            fun1();
            fun1();
            
            //익명 함수 : 변수 안에 함수가 들어간 형태로 함수의 이름이 존재하지 않어 익명함수라고 부릅니다.
            var fun2 = function(){
                document.write("fun2이 실행되었습니다.");
                document.write("<br>");
            }
            
            fun2();
            fun2();
            
            //매개 변수가 있는 함수 : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우
            function fun3(name){
                document.write(name+ "실행되었습니다.");
                document.write("<br>");
            }
            
            fun3("fun3");
            fun3("fun3");
            
            //리턴값이 잇는 함수
            function fun4(){
                var now = new Date();      //현제 시간을 구해오는 객체 데이터
                var hour = now.getHours(); //현제 시간에서 시(hour)를 변수에 할당
                return hour;
            }
            
            var value = fun4();
            document.write(value);
</script>
          

객체

객체는 데이터와 연산 작업을 담고 있는 기본족인 자바스크립트 기능 입니다.

객체가 가지고 있는 기본 상태 값을 속성이라고 하고 객체가 할 수 있는 행동들을 매서드라고 합니다. 객체는 내장 객체, 브라우저 객체, 문서 객체로 나누어집니다.

속성 : 객체가 가지고 있는 기본적인 상태 값 및 속성(ex: color, width)
매서드 : 객체가 할 수 있는 동작 및 행동(ex: color 색을 변경, width값을 변경)

문서 객체

문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 좁은 의미로는 doucment 객체와 관련된 객체의 집합입니다.

브라우저 객체

브라우저 객체 모델(Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미합니다.

Window 객체

브라우저 위치

<script>
    var x = window.screenX;
    var y = window.screenY;

    alert("현제 브라우저의 좌표 값 :" + x + "," + y);
</script>
          
컨텐츠 영역 크기 구하기

<script>
    var x = window.innerWidth;
    var y = window.innerHeight;
    
    alert("현재 컨텐츠 영역의 크기 :" + x +"," + y);
</script>
          
타이머 설정

<script>
      //setInterval(); : 지정한 시간마다 함수를 실행 <--> ClearInterval();
      //setTimeOut();  : 지정한 시간 후 한번만 실행  <--> ClearTimeOut();
      
      function func(){
          document.write("setInterval이 실행되었습니다.");
          document.write("<br>");
      }
      
      setInterval(func,1000);
</script>
          

navigator 객체

브라우저 속성 알아내기

<script>
    document.write("appCodeName: "+navigator.appCodeName,"<br />");
    document.write("appName: "+navigator.appName,"<br />");
    document.write("appVersion: "+navigator.appVersion,"<br />");
    document.write("language: "+navigator.language,"<br />");
    document.write("product: "+navigator.product,"<br />");
    document.write("platform: "+navigator.platform,"<br />");
    document.write("userAgent: "+navigator.userAgent,"<br />");
</script>
          
운영체제 및 스크린 정보

<script>
    function info1(){
          /* 브라우저 및 운영체제 종합정보를 반환후 모두 소문자로 바꿉니다.*/
          var os=navigator.userAgent.toLowerCase();
      
          /*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
          var info_wrap=document.getElementById("info_wrap");
    
          /*navigator객체를 이용해 반환받은 정보에 다음과 같은 문자가 포함되어 있으면  운영체제 명을 지정한 요소 사이에 텍스트로 출력합니다.*/
          if(os.indexOf('windows')>=0){
              info_wrap.innerHTML="윈도우";
          }else if(os.indexOf('macintosh')>=0){
              info_wrap.innerHTML="메킨토시";
          }else if(os.indexOf('iphone')>=0){
              info_wrap.innerHTML="아이폰";
          }else if(os.indexOf('android')>=0){
              info_wrap.innerHTML="안드로이드";
          }
    }
    function info2(){
          /*스크린 너비와 높이 값을 가져와 각각의 변수에 저장합니다.*/
          var sc_w=screen.width;
          var sc_h=screen.height;
    
          /*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/      
          var info_wrap=document.getElementById("info_wrap");
    
          /*스크린 너비와 높이 값을 지정한 요소에 텍스트로 출력합니다. */
          info_wrap.innerHTML=sc_w+"X"+sc_h;
    
          //3초 후에 스크린 정보를 지웁니다.
          //setTimeout("info_wrap.innerHTML=''",3000); 
    }	
</script>
          

screen 객체

화면 크기 알아내기

<script>
    document.write("width:" + screen.width,"<br>");
    document.write("height:" + screen.height,"<br>");
    document.write("availWidth:" + screen.availWidth,"<br>");
    document.write("availHeight:" + screen.availHeight,"<br>");
    document.write("colorDepth:" + screen.colorDepth,"<br>");
</script>
          

메서드 정리

정리가 필요한거만 정리함

HTML DOM

메서드 설명
document.getElementById("id"); 지정된 id 속성을 가진 요소를 반환한다.
document.getElementsByClassName("class"); 지정된 class 속성을 가진 요소를 반환한다.
document.getElementsByName("name"); 지정된 name 속성을 가진 요소를 반환한다.
document.getElementsByTagName("li"); 지정된 태그 이름을 가진 문서의 모든 요소를 반환
.value; 값 속성은 속성의 값을 설정하거나 반환한다.
.src 이미지의 src 속성 값을 설정하거나 반환한다.
.innerHTML HTML 내용을 설정하거나 반환한다.
document.write("text") HTML 표현식 또는 JavaScript 코드를 문서에 기록한다.

날짜 객체 - Date()

날짜 및 시간 작업에 사용된다.

메서드 설명
new Date(); year, month, day, hours, minutes, seconds, milliseconds 요소를 반환한다.
now.getFullYear() 연도를 반환합니다.
now.getMonth() 월(0-11)을 반환합니다.
now.getDate() 월의 일(1~31일)을 반환합니다.
now.getHours() 시간(0-23)을 반환합니다.
now.getMinutes() 분(0-59)을 반환합니다.
now.getSeconds() 초(0-59)를 반환합니다.

charAt()

charAt() 메서드는 문자열의 지정된 인덱스에 있는 문자를 반환한다.


<script>
function myFunction() {
    var str = "HELLO WORLD";
    var res = str.charAt(0) // H가 출력됨
}
</script>
          

toUpperCase()

topperCase() 메서드는 문자열을 대문자로 변환한다.


<script>
function myFunction() {
    var str = "Hello World!";
    var res = str.toUpperCase();
    document.getElementById("demo").innerHTML = res;
    // HELLO WORLD! 가 출력됨
}
</script>
          

.toLocaleString()

toLocaleString() 로케일 설정을 사용하여 날짜 객체를 문자열로 변환한다.


<script>
function myFunction() {
    var d = new Date();
    var n = d.toLocaleString();
    document.getElementById("demo").innerHTML = n;
    // 2021. 2. 1. 오후 9:07:55 이 출력된다.
}
</script>
          

eval()

eval() 인수를 평가하거나 실행한다.


<script>
function myFunction() {
    var x = 10;
    var y = 20;
    var a = eval("x * y") + "<br>";
    var b = eval("2 + 2") + "<br>";
    var c = eval("x + 17") + "<br>";

    var res = a + b + c;
    document.getElementById("demo").innerHTML = res;
    //200, 4, 27
}
</script>
          

정규식


<script>
// 모든 l을 bbb로 치환해라 
// 여기서 g는 글로벌을 뜻함
document.write("str.replace('l','bbb')) 정규식 g => "+str.replace(/l/g,'bbb'));
document.write("
"); // 여기서 i는 대소문자 구분하지 않음을 뜻함 document.write("str.replace('l','bbb')) 정규식 gi => "+str.replace(/l/gi,'bbb')); // 영문자와 숫자는 '' 로 replace 후 길이가 0 이면 OK // 아니면 영문자와 숫자가 아닌값이 있다는 의미 id.replace(/[a-z.0-9]/gi,'').length > 0 // ** Password // => 길이(4이상), 숫자와 특수문자 반드시포함 // => 특수문자 : HTML 특수문자 리스트표 참고 (http://kor.pe.kr/util/4/charmap2.htm) password.replace(/[!-*]/gi,'').length >= pLength alert(' Password는 특수문자를 반드시 1개 이상 포함해야 됩니다 ~~'); password.replace(/[0-9.!-*]/gi,'').length > 0 alert(' Password는 숫자와 특수문자로만 입력하세요 ~~'); //한글과 영문만 허용 name.replace(/[a-z.가-힇]/gi,'').length > 0 alert(' Name은 한글과 영문으로만 입력하세요 ~~'); </script>

test