[Javascript] DAY 05

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
<!DOCTYPE html>
<html>
<head>
    <title>동적으로 테이블 만들기</title>
    <script type="text/javascript">
        
        function makeFriends() {
            var myFriends = window.prompt("친구가 몇 명인가요?", "");
 
            // use createElement();
            for (var i = 0; i < parseInt(myFriends); i++) {
                var textBox = document.createElement("input");
                var newLine = document.createElement("br");
 
                // textBox type(x) --> textBox.type(o)
                textBox.type = "text";
 
                // use appendChild();
                document.body.appendChild(textBox);
                document.body.appendChild(newLine);
            }
        }
 
    </script>
</head>
<!-- onload는 바로 불러오겠다라는 뜻? -->
<body onload = "makeFriends()">
    <h2>내 친구 나열하기</h2>
</body>
</html>
Colored by Color Scripter
cs

Program

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>
<head>
    <title>방문할 때마다 변하는 이미지</title>
    <script type="text/javascript">
        
        var imgArray = new Array();
        imgArray[0] = "cr_churaumi.jpg";
        imgArray[1] = "cr_okinawa.jpg";
        imgArray[2] = "cr_kouri.jpg";
 
        function showImage() {
            // round는 index 0부터 계산함; 사진이 3장이므로 0, 1, 2
            var imgNum = Math.round(Math.random() * 2);
            var objImg = document.getElementById("introImg");
            objImg.src = imgArray[imgNum];
 
            // F5(새로고침)을 누르지 않아도 자동으로 넘어가게 하는 함수
            setTimeout(showImage, 1000);
        }
 
    </script>
</head>
<body onload = "showImage()">
    <img id = "introImg" border ="0">
</body>
</html>
Colored by Color Scripter
cs

---day01

HTML

* Hyper Text Markup Language

* HyperText : Webpage 이동할 수 있도록 만들어진 문장

<Head>

* Html 문서의 시작과 끝을 표시

* <HEAD> 태그는 HTML 문서에 대한 정보를 표시하는 데 사용

* CSS, 자바스크립트를 작성하는 부분

* <TITLE> : HTML 문서의 제목을 표시하는 역할

<TITLE.HTML>

<html>

<head>

</head>

<body>

내가 처음 만든 HTML 문서!

</body>

</html>

* HTML

키워드 : 블로그가 검색포털에 의해 노출되는 핵심단어

포스팅 : 블로그에 글이나 사진, 동영상 등을 게시하는 것

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
<!DOCTYPE html>
<html>
<head>
    <title>example7</title>
    <script type="text/javascript">
        function previewString() {
            var objResult = document.getElementById("result");
            var objText = document.getElementById("tbString");
            var objFontColor = document.getElementById("fontColor");
            var objFontSize = document.getElementById("fontSize");
            var objOptions = document.getElementsByName("fontOption");        // 배열로 넘어온다.
 
            // Id, Name, TagName을 통해서 연동할 수 있다.
            // id는 1개를 가져올 때 쓰고, Name은 여러개를 연동할 때 쓴다고 보면 된다.
 
            // processing(가공)
            var targetString = objText.value; // superman 값을 읽어옴
            alert(targetString.value);
 
            targetString = targetString.fontcolor(
                objFontColor.options[objFontColor.selectedIndex].value     // selectedIndex : 위치값 얻어옴
            );
 
            targetString = targetString.fontsize(
                objFontSize.options[objFontSize.selectedIndex].value
            );
 
            if(objOptions[0].checked) {
                targetString = targetString.strike();    // String 객체에 strike() - 취소선 라는 메소드가 있음
                alert("0");
            }
 
            if(objOptions[1].checked) {
                targetString = targetString.big();
                alert("1");
            }
 
            if(objOptions[2].checked) {
                targetString = targetString.small();
                alert("2");
            }
 
            if(objOptions[3].checked) {
                targetString = targetString.bold();
                alert("3");
            }
 
            if(objOptions[4].checked) {
                targetString = targetString.italics();
                alert("4");
            }
 
            if(objOptions[5].checked) {
                targetString = targetString.sup();
                alert("5");
            }
 
            if(objOptions[6].checked) {
                targetString = targetString.sub();
                alert("6");
            }
 
            if(objOptions[7].checked) {
                targetString = targetString.toLowerCase();
                alert("7");
            }
 
            if(objOptions[8].checked) {
                targetString = targetString.toUpperCase();
                alert("8");
            }
 
            objResult.innerHTML = targetString;
 
    }
 
    </script>
</head>
<body style = "line-height: 200%">
 
        <!-- id는 변수라고 생각하면 된다 -->
        <input type="text" id="tbString">
        <input type="button" value ="미리보기" onclick="previewString()"><br>
        색상:        
        <select id = "fontColor">
            <!-- 값을 지정할 때 value를 쓴다 -->
            <option value = "red">빨강</option>
            <option value = "green">초록</option>
            <option value = "blue">파랑</option>
        </select><br>
        크기:
        <select id = "fontSize">
            <option value ="1">1</option>        
            <option value ="2">2</option>
            <option value ="3">3</option>
            <option value ="4">4</option>
            <option value ="5">5</option>
            <option value ="6">6</option>
        </select><br>
        <input type="checkbox" name="fontOption">취소선
        <input type="checkbox" name="fontOption">크게
        <input type="checkbox" name="fontOption">작게
        <input type="checkbox" name="fontOption">두껍게
        <input type="checkbox" name="fontOption">기울임<br>
        <input type="checkbox" name="fontOption">위첨자
        <input type="checkbox" name="fontOption">아래첨자
        <input type="checkbox" name="fontOption">소문자로
        <input type="checkbox" name="fontOption">대문자로
    
    <!-- 공간만 확보한 것 -->
<br>    <span id="result"></span>
</body>
</html>
Colored by Color Scripter
cs

웹계산기구현

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <char metaset = "utf-8">
    <style type="text/css">
 
        .blueText { color: blue; }
        .greenText { color: green; }
        .redText { color: red; }
 
        input[type=button] {
            width: 50px;
            height: 50px;
            font-size: 22px;
        }
 
        input[type=text] {
            text-align: right;
            font-size: 20px;
        }
 
    </style>
 
    <script type="text/javascript">
 
        var flag = false;    // 초기값 0
        var isExpOn = false;
 
        var num1 = "0";
        var num2 = "0";
        var res = new Array;
        var textValue ="0";
 
        // id가 exp인 요소를 찾아 값 초기화
        function init() {
            if(flag == true) {
                flag = false;
                cal.exp.value = '0';                
            }
        }
 
        function setInfo(num) {
            // 수식 담을 변수 선언
 
            if(!isExpOn) {
                num1 = document.getElementById("exp");
 
            }
            
            if(isExpOn) {
                num2 = document.getElementById("exp");
            }
 
            if(num != "^") {
 
                if(num1.value == "0") {
                    num1.value = "";
                    flag = true;    // 이제 값이 들어온다는 뜻
                }
 
                if(!isExpOn) { num1.value += num; }
                
            }
 
        }
 
        function operate() {            // =
 
            // 우항 담을 변수 선언
            var temp;
 
            
 
 
            num1 = document.getElementById("exp");
                
            if(num1.value.indexOf('^') != -1) {
                res = num1.value.split('^');
 
                res[0] = eval(res[0]);
                res[1] = eval(res[1]);
 
                temp = Math.pow(res[0], res[1]);        
                num1.value = temp;
            }
 
            num1.value = eval(num1.value);
        }
 
        function square(value) {
            textValue = document.getElementById("exp");
            textValue.value = textValue.value + value;
        }
 
        function ssacotan(term) {
            var temp = null;
 
            temp = document.getElementById("exp");
            temp.value = eval(temp.value);
 
            if(term == "+/-") {
                temp.value = -(temp.value);
                num1.value = temp.value;
            }
            if(term == "sin") {
                temp.value = Math.sin(temp.value);
            }
 
            if(term == "cos") {
                temp.value = Math.cos(temp.value);
            }
 
            if(term == "tan") {
                temp.value = Math.tan(temp.value);
            }
        }
 
/*        function exponent(expo) {    // expo == '^'
            var isNext = false;
            var num2 = null;
            var res = null;
            if(isNext == false) {
                var temp = null;
                temp = document.getElementById("exp");
                temp.value = eval(temp.value);
                
                isNext = true;                
            }
            if(isNext == true) {    
                num2 = document.getElementById("exp");
                num2.value = eval(num2.value);
                res.value = eval(Math.pow(temp.value, num.value));
                /*temp.value = Math.pow(temp.value, num2);
                isNext = false;
            }
        }*/
 
 
    </script>
<body>
    <form name = "cal">
    <table>
        <tr>
            <td colspan="6"><input type="text" id="exp" name="exp" disabled="disabled" size="21" value="0"></td>
        </tr>
        <!-- Clear    = -->
        <tr>
            <!-- 클릭했을 때 reset 됨 -->
            <td colspan="3"><input type="button" style="width: 160px" value="Clear" onclick="init()"></td>
            <td colspan="3"><input type="button" style="width: 104px" value="="
                                                                     id="result" onclick="operate()"></td>
        </tr>
        <!-- 1 2 3    x    x^y -->
        <tr>
            <td><input type="button" class="blueText" value="1" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="2" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="3" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="+" class="greenText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="x^y" name="^" class="redText" onclick="square(this.name)"></td>
        </tr>
        <!-- 4 5 6    -    sin -->
        <tr>
            <td><input type="button" class="blueText" value="4" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="5" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="6" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="-" class="greenText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="sin" class="redText" onclick="ssacotan(this.value)"></td>
        </tr>
        <!-- 7 8 9    *    cos -->
        <tr>
            <td><input type="button" class="blueText" value="7" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="8" onclick="setInfo(this.value)"></td>
            <td><input type="button" class="blueText" value="9" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="*" class="greenText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="cos" class="redText" onclick="ssacotan(this.value)"></td>
        </tr>
        <!-- 0 +/- .    /    tan -->
        <tr>
            <td><input type="button" value="0"      class="blueText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="+/-" class="blueText" onclick="ssacotan(this.value)"></td>
            <td><input type="button" value="."   class="blueText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="/"   class="greenText" onclick="setInfo(this.value)"></td>
            <td><input type="button" value="tan" class="redText" onclick="ssacotan(this.value)"></td>
        </tr>
    </table></form>
</body>
</html>
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

티스토리툴바