HTML+Java script (기초) 자료형, 함수 참조, 객체 만들기

<최종 화면> 자료형과 기능 메소드, 객체 사용하는 간단 예제

자바스크립트에서 사용하는 자료형의 종류를 알아보자.

변수 선언은 var을 사용한다. (자료형을 var로 사용)

자료형 위치에 var만 사용하는데... 일단 여려 값을 대입하자.

var 변수에 클래스도 넣고, 값 없이도 넣어서 출력해보자.

이제 궁금하던 var 변수들의 자료형은 어떻게 출력이 될까?

숫자는 number, 글자는 string, ture는 boolean, 클래스는 object, 값이 없으면 undefined로 된다.

var은 딱히 자료형이 고정이 아니기 때문에, 처음에 숫자를... 그다음 문자를 참조해도 상관이 없다.

함수도 변수에 참조 가능하다.

함수의 자료형을 출력해보자. function으로 나온다.

문자열은 객체로 인식된다. 길이를 출력하면 5가 나온다.

자바 스크립트는 자바와 관계가 없는 언어이지만, 자바에서 쓰이는 기능 메소드들이 존재한다.

replace 주의점, 한 글자만 변경된다. (자바는 'l'이 모두 'p'로 바뀌지만..)

대문자로 바꿔주는 기능 메소드도 있다.

클래스 즉, 객체를 만들 수 있다.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>variable test</title>
 
    <script>
 
        // 자료형의 종류
        // 1. 수치형 : number - 정수, 실수 // Number와는 다른 자료형
        // 2. 문자형 : string - 한문자, 문자열, '', ""
        // 3. 논리형 : boolean - true, flase
        // 4. 객체형 : object, 내장, 함수, new
        // 5. undefined : 값이 없는 변수
 
        // 변수 선언 문법
        var a;
        a=10;
        document.write(a);
        document.write('<br>');
 
        // 자료형의 구분이 없음
        var b="aaa";
        document.write(b);
        document.write('<br>');
 
        var c=true;
        document.write(c);
        document.write('<br>');
 
        // 여기까지는 기본자료형들...
 
        var d= new Date();
        document.write(d);
        document.write('<br>');
 
        var e;
        document.write(e); //출력 : undefined
        document.write('<br>');
 
        document.write('<hr>');
 
        // 변수의 자료형을 확인해주는 함수
        document.write(typeof(a) + "<br>");
        document.write(typeof(b) + "<br>");
        document.write(typeof(c) + "<br>");
        document.write(typeof(d) + "<br>");
        document.write(typeof(e) + "<br>");
 
        // 아래의 값은 당연히 string임
        var f="1";
        document.write(typeof(f) + "<br>" );
 
        document.write('<hr>');
 
        // 변수는 값이 대입될 때 자료형이 동적으로 결정되므로..
        // 가지고 있는 자료의 type이 변경되는 것도 가능함!!
        // number -> string
        var g =10;
        document.write(g);
        document.write('<br>');
 
        g="kim";
        document.write(g);
        document.write('<br>');
 
        // 심지어 함수도 변수에 참조가 가능함
        var h= function(){
            document.write('hhh 출력');
            document.write('<br>');
        }
 
        document.write(h);
        document.write('<br>');
 
        // 함수를 참조하면 변수명을 통해 함수 기능 호출 가능함
        h();
 
        // 함수의 자료형은?
        document.write(typeof(h));
        document.write('<br>');
 
        // 문자열은 참조형(객체)이 맞음
        var s="Hello";
        document.write(s.length); //멤버를 가지고 있음
        document.write('<br>');
 
        // 자바와 비슷하게 문자열의 기능메소드들이 존재함
        document.write(s.charAt(1));
        document.write('<br>');
 
        // 한글자만 변경됨
        document.write( s.replace('l','p'));
        document.write('<br>');
 
        document.write( s.toUpperCase());
        document.write('<br>');
 
        // 사용자 정의 객체형 //자바의 클래스로 객체만들기!!
        // 자바스크립트는 class라는 문법이 없음!! ((ECMA5버전부터 class생겼음.. 추후 소개)
        var person= {name:"sam", age:20}; //JSON과 비슷
        document.write('<p>');
        document.write('name : '+person.name+' , ');
        document.write('age : '+person.age);
        document.write('</p>');
 
        // 좀더 깊은 객체에 대한 내용은 다음 챕터에서...
        
        // 변수를 사용할 때의 특이한 점... 다음 예제..
 
    </script>
 
</head>
<body>
    
</body>
</html>
 
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글

HTML+ Java script (기초) dialog (0)	2019.12.11
HTML+Java script (기초) 배열 (0)	2019.12.11
HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용 (0)	2019.12.11
HTML+Java script (기초) 연산자, 기능 메소드 알아보기 (0)	2019.12.11
HTML+Java script (기초) 자바스크립트 문법 사용 (<script> 사용부터..) (0)	2019.12.11