2018. 10. 14. 20:26 javascript

javascript 기초(변수, 자료형, 연산자)

javascript 문장은 block { } 으로 묶을 수 있음

1
2
3
4
{
    document.write("자바스크립트 기초");
    document.write("<h1>자바스크립트 기초</h1>");    
}
cs

대소문자 구별

공백문자 무시


// 주석

/* 주석 */


변수

var x;

x=10;

- 문자로 시작 (숫자시작 안됨)

- $, _ 로 시작 가능

- 대소문자 구별

- 자료형 없이 변수선언. 자료형은 값이 입력될 때 자동으로 결정됨.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 변수선언</title>
        <script>
            document.write("***변수선언 후 변수에 값 입력<br>");
            var x;
            x = "자바스크립트";
            document.write(x + "<br><br>");
 
            document.write("***변수선언하면서 동시에 변수에 값 입력<br>");
            var x = 10;
            document.write(x + "<br><br>");
 
            document.write("***한줄에 여러개의 변수선언 및 값 입력<br>");
            var a = "javascript", b = 10000, c = "기초";
            document.write(a + "<br>" + b + "<br>" + c + "<br>");
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs


자료형

- number : 정수, 실수

- string : 문자, 텍스트

- boolean : true, false

- object : 객체

- undefined : 값이 정의 안된 상태

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 자료형</title>
        <script>
            document.write("*** number 자료형<br>");            
            var a = 12345.0;    // 실수
            var b = 12345;      // 정수
            var c = 123e5;      // 12300000
            var d = 123e-5;     // 0.00123
            document.write("typeof a : " + typeof a + "<br>");
            document.write(a + "<br>" + b + "<br>" + c + "<br>" + d + "<br><br>");
            
            document.write("*** string 자료형<br>");            
            var a = "abcdefghijklmnopqrstuvwxyz";    // string
            var b = " 알파벳"
            document.write("typeof a : " + typeof a + "<br>");
            document.write("a + b : " + a + b + "<br>");
            document.write("a.length : " + a.length + "<br>");
            document.write("a.toUpperCase : " + a.toUpperCase() + "<br>");
            document.write("a.replace : " + a.replace("b", "BB") + "<br>");
            document.write("a.charAt(7) : " + a.charAt(7) + "<br><br>");
            
            document.write("*** boolean 자료형<br>");            
            var a = (100 > 1);  // true
            var b = (100 < 1);  // false
            document.write("typeof a : " + typeof a + "<br>");
            document.write(a + "<br>" + b + "<br><br>");
            
            document.write("*** object 자료형<br>");            
            var a = { name: "apple", color: "red", price: 1000 }; // 속성, 동작을 묶어서 지정 
            document.write("typeof a : " + typeof a + "<br>"); 
            document.write("이름 : " + a.name + "<br>");
            document.write("색상 : " + a.color + "<br>");
            document.write("가격 : " + a.price + "<br><br>");
            
            document.write("*** undefined 자료형<br>");            
            var x;              // 변수값 미지정
            document.write("typeof x : " + typeof x + "<br>");
            document.write(x + "<br><br>");           
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs


연산자

1) 산술 연산자

+  -  *  /

%(나머지), 

++(증가), 

--(감소)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 산술 연산자</title>
        <script>
            var a = 1000, b = 5.3, c = 100, d=10, e, f=100;
            document.write("a + b = "+ (a+b) + "<br>");
            document.write("a - b = "+ (a-b) + "<br>");
            document.write("a * b = "+ (a*b) + "<br>");
            document.write("a / b = "+ (a/b) + "<br>");
            document.write("a % b = "+ (a%b) + "<br><br>");
            document.write("++c = "+ (++c) + "<br>");
            document.write("--c = "+ (--c) + "<br><br>");
            // ++d 는 d의 값을 1증가 후 사용
            // d++ 은 d의 값 사용 후 1증가
            document.write("[e = d++] : e = "+ (e=d++) + "<br>");
            document.write("d = "+ d + "<br><br>");
            document.write("[e = ++f] : e = "+ (e=++f) + "<br>");
            document.write("f = "+ f + "<br><br>");   
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs

ps. 문자열에서는 +가 문자열의 결합


2) 대입 연산자

a += b; 는 a = a + b; 와 같다 

a -= b; 는 a = a - b; 와 같다 

a *= b; 는 a = a * b; 와 같다 

a /= b; 는 a = a / b; 와 같다 

a %= b; 는 a = a % b; 와 같다 


3) 비교 연산자

논리문에서 값을 비교하여 true, false 출력

== : 값이 같을 때 true, 아니면 false

=== : 값, 자료형 모두 같을 때 true, 아니면 false

!= : 값이 다를 때 true, 아니면 false

!== : 값, 자료형 모두 다를 때 true, 아니면 false

> : 클때 true, 아니면 false

< : 작을 때 true, 아니면 false

>= :크거나 같을 때 true, 아니면 false

<= : 크거나 같을 때 true, 아니면 false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 비교 연산자</title>
        <script>
            var a = 100, b = 200, c = "100";
            document.write("a == b : " + (a==b) + "<br>");
            document.write("a != b : " + (a!=b) + "<br>");
            document.write("a === c : " + (a===c) + "<br>");
            document.write("a !== c : " + (a!==c) + "<br>");
            document.write("a < b : " + (a<b) + "<br>");
            document.write("a > b : " + (a>b) + "<br>");
            document.write("a >= b : " + (a>=b) + "<br>");
            document.write("a <= b : " + (a<=b) + "<br>");            
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs


4) 논리 연산자

여러개의 조건을 조합하여 true, false 리턴.

a && b : a, b 모두 true이면 true, 아니면 false

a || b : a, b 중 한개라도 true이면 true, 아니면 false

!a : a가 true이면 false, 아니면 true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 논리 연산자</title>
        <script>
            var a = 100, b = 200;
            document.write("(a==100)&&(b==200) : " + ((a==100)&&(b==200)) + "<br>");
            document.write("(a==100)&&(b==500) : " + ((a==100)&&(b==500)) + "<br>");
            document.write("(a==100)||(b==500) : " + ((a==100)||(b==500)) + "<br>");
            document.write("(a==500)||(b==500) : " + ((a==500)||(b==500)) + "<br>");
            document.write("!(a==500)||(b==500) : " + !((a==500)||(b==500)) + "<br>");
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs


5) 조건 연산자

(조건) ? 실행문1 : 실행문2;

조건이 true 이면 ? 실행문1 실행 : 

조건이 false 이면 ? 실행문2 실행 ;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 조건 연산자</title>
        <script>
            var a = 100, b;
            b = (a > 10) ? "100이상" : "100이하"; 
            document.write(b);
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs


6) 연산자 우선순위

우선순위 높은 연산자순. 우선순위 높은 연산자일수록 먼저 실행.

3 + 4 * 5 = 23


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>자바스크립트 연산자 우선순위</title>
        <script>
            var result = 78 * 96 + 3;
            document.write(result);
            document.write("<br/>");
            // Output:
            // 7491
            result = 78 * (9 + 3);
            document.write(result);
            document.write("<br/>");
            // Output:
            // 936
            var num = 10;
            if(5 == num / 2 && (2 + 2 * num).toString() === "22") {
                document.write(true);
            }
            // Output:
            // true
        </script>
    </head>
    <body>
    </body>
</html>
cs


javascript 기초.

저작자표시

'javascript' 카테고리의 다른 글

javascript 조건문(conditional statement)  (0) 2018.10.15
javascript 기초2(자료형 변환, html요소 접근)  (0) 2018.10.14
javascript 삽입 위치  (0) 2018.10.14
posted by 해에게서소년에게

티스토리툴바