공부하는 블로그

(JavaScript) 자바 스크립트 시작하기 본문

Develop/JavaScript

(JavaScript) 자바 스크립트 시작하기

모아&모지리 2018. 2. 20. 09:59
1
2
3
4
5
6
7
8
9
10
11
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
        alert('Hello world');
    </script>
</head>
<body>
</body>
</html>
cs


alert 창 띄우기


1
2
3
4
5
6
7
8
9
10
11
12
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
        alert(52 > 273);
        alert(52 < 273);
    </script>
</head>
<body>
</body>
</html>
cs

<Boolean 타입>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
        //변수를 선언 합니다.
        var pi;
 
        // 변수에 값을 할당합니다.
        pi = 3.14;
 
        // 변수를 선언하고 초기화 합니다. (한번에 가능)
 
        var pi = 3.14
    </script>
</head>
<body>
</body>
</html>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
        //자바스크립트의 기본 자료형
        var stringVar ='String';
        var numberVar = 273;
        var booleanVar = true;
        var functionVar = function(){};
        var objectVar = {};
    </script>
</head>
<body>
</body>
</html>
cs


프로그램은 여러 명령문의 집합이며, JavaScript의 경우 한 명령문은 세미콜론(;)으로 구분한다. 모든 명령문을 순차적으로 처리한다면, 원하는 결과를 얻을 수 없다. 어떠한 조건에 의해 처리하거나 건너뛰어야 할 명령문이 존재하고, 또는 반복되는 명령문을 100줄 작성하기 보다는 반복하기 위한 어떠한 제어가 필요하게 된다. 이처럼 개발자가 실행해야 하는 명령문을 제어하기 위해 사용하는 것을 제어문이라고 한다.


구분

문법

예제

블록문

{}

각 제어문의 명령문을 그룹화할 때 사용함

조건문

if...else문

Java와 동일

switch...case문

Java와 동일

반복문

for문

Java와 동일

for...in문

var obj = new Object();

obj.name = "이동하";

obj.telnumber = "xxx-xxxx-xxxx";

for(var i in obj) {

alert("attribute :: "+i);

}

do...while문

Java와 동일

while문

Java와 동일

label문

var a = 1;

outerloop: 

for(var i=0; i<10;i++){

inloop:

for(var j=0; j<10; j++) {

if(i==0) {

                 break inloop;

             }else if(i == 1) {

                 break outerloop;       

             }

}

a++;

}

alert(a);

break문

Java와 동일

continue문

Java와 동일

with문

권장하지 않음

예외처리문

throw문

try{

throw "오류내용";

}catch (e){

alert(e);

}

try...catch문

throw문 참고.

[표 8] JavaScript 제어문



1     함수 (Function)

함수란 잘 정의된 한 가지 기능을 수행하는 프로그램의 논리적인 일부분으로, 프로그램은 여러 함수의 집합과도 같다고 할 수 있다. 함수는 기능의 유형에 따라 개발자가 전달해줘야 하는 파라미터(이하 인자)와 처리한 결과를 전달하는 반환값이 존재할 수 있다. 이는 절차적인 프로그램에서 주로 사용되었으며, 객체지향적인 프로그램인 경우 이러한 함수를 객체의 행위로서 정의함으로써 중복된 함수를 제거하고, 재사용이 가능하도록 설계되었다. JavaScript는 객체지향 언어로 되도록 함수의 사용을 피하고, 객체의 행위로써 함수를 정의하여 사용해야 하며, 이때 객체에 선언된 함수는 메서드라고 칭한다.

또한 JavaScript는 함수를 Function 객체라고 한다.


1.1    정의

1.1.1     정의 방식

함수의 정의는 아래와 같이 두 가지 방식으로 가능하다.

1)    일반적인 정의 방식

마지막에 정의된 내용만 사용할 수 있다. 이 방식은 동일한 함수명에 주의하여 사용해야 한다.

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
 
        function aFunc() {
            alert("aFunc Before");
        }
            aFunc(); // "aFunc After" 출력
        function aFunc() {
            alert("aFunc After");
        }
        aFunc(); // "aFunc After" 출력
 
    </script>
</head>
<body>
</body>
</html>
cs

1)    선언적인 정의 방식

function 자료형의 리터럴을 사용하여 함수를 정의할 수 있다.

이 경우는 함수의 정의된 내용이 변수에 지정되므로, 정의된 내용을 순간 마다 변경하여 사용할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!Doctype html>
<html>
<head>
    <title> </title>
    <script> 
 
    var bFunc = function() {
        alert("bFunc Before");
    };
            bFunc(); //"bFunc Before" 출력
    bFunc = function() {
        alert("bFunc After");
    };
        bFunc(); // "aFunc After" 출력
 
    </script>
</head>
<body>
</body>
</html>

cs


저작자표시

'Develop > JavaScript' 카테고리의 다른 글

arguments 객체  (0) 2018.02.20
(JavaScript)현재 시간을 구하는 방법  (0) 2018.02.20
CallBack(콜백)함수 이해하기  (0) 2018.02.06
[JavaScript] 시간출력하기  (0) 2018.01.30
자바스크립트(java script)란?  (0) 2018.01.30
'Develop/JavaScript' Related Articles more