반응형
출처 : 장고 부스트스트랩 파이썬 웹개발의 정석 (정말 좋은 책.. 작가님께 과외받고 싶다..)
|
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
|
<!DOCTYPE html>
<html>
<head>
<title> 2toy.net </title>
<link href = "./css.css" rel="stylesheet" type="text/css">
<script type ="text/javascript">
// 덧셈계산 print
function doSum(){
let a = document.getElementById('inputA').value;
let b = document.getElementById('inputB').value;
document.getElementById("valueA").innerHTML = a;
document.getElementById("valueB").innerHTML = b;
document.getElementById("valueC").innerHTML = Number(a) + Number(b);
}
// input에 값을 span에 바로 타이핑시 print
function doInput(){
let id = document.getElementById('id_text').value;
let pass = document.getElementById('pw_text').value;
document.getElementById("va_id").innerHTML = id;
document.getElementById("va_pw").innerHTML = pass;
}
// 현재시간 확인
function realtime(){
alert(new Date());
}
</script>
</head>
<body>
<nav>
<a href = "./index.html">home</a>
<a href = "./blog_list.html">Blog</a>
<a href = "./about_me.html">About Me</a>
</nav>
<h1>Welcome To my Homepage</h1>
<label>a</label>
<input id="inputA" value=1 onkeyup="doSum()">
<label>b</label>
<input id="inputB" value=2 onkeyup="doSum()">
<p>
<span id = "valueA">1</span> + <span id = "valueB">2</span> = <span id ="valueC">3</span>입니다.
</p>
<label>id</label>
<input id ="id_text" onkeyup="doInput()">
<label>pass</label>
<input id ="pw_text" onkeyup="doInput()">
<p>
<span id="va_id"></span> <span id="va_pw"></span>
</p>
<hr/>
<button onclick="realtime()">현재시간</button>
</body>
</html>
|
cs |
js파일 생성해서 자바스크립트 함수를 모아서 호출
js.js
|
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
|
// 덧셈계산 print
function doSum(){
let a = document.getElementById('inputA').value;
let b = document.getElementById('inputB').value;
document.getElementById("valueA").innerHTML = a;
document.getElementById("valueB").innerHTML = b;
document.getElementById("valueC").innerHTML = Number(a) + Number(b);
}
// input에 값을 span에 바로 타이핑시 print
function doInput(){
let id = document.getElementById('id_text').value;
let pass = document.getElementById('pw_text').value;
document.getElementById("va_id").innerHTML = id;
document.getElementById("va_pw").innerHTML = pass;
}
// 현재시간 확인
function realtime(){
alert(new Date());
}
|
cs |
index.html
<script type="text/javascript" src='js.js'></script>
|
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
|
<!DOCTYPE html>
<html>
<head>
<title> 2toy.net </title>
<link href = "./css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src='js.js'></script>
</head>
<body>
<nav>
<a href = "./index.html">home</a>
<a href = "./blog_list.html">Blog</a>
<a href = "./about_me.html">About Me</a>
</nav>
<h1>Welcome To my Homepage</h1>
<label>a</label>
<input id="inputA" value=1 onkeyup="doSum()">
<label>b</label>
<input id="inputB" value=2 onkeyup="doSum()">
<p>
<span id = "valueA">1</span> + <span id = "valueB">2</span> = <span id ="valueC">3</span>입니다.
</p>
<label>id</label>
<input id ="id_text" onkeyup="doInput()">
<label>pass</label>
<input id ="pw_text" onkeyup="doInput()">
<p>
<span id="va_id"></span> <span id="va_pw"></span>
</p>
<hr/>
<button onclick="realtime()">현재시간</button>
</body>
</html>
|
cs |
반응형
'html 자바스크립트 study' 카테고리의 다른 글
| HTML CSS JS 관계 및 예제 (0) | 2023.05.31 |
|---|---|
| Flex CSS 활용 - 웹사이트 레이아웃 예시와 설명 (0) | 2023.05.30 |
| html css 예제 - 웹페이지 만들기 (반응형, 홈페이지) (0) | 2023.05.29 |
| html 기본 구조, 틀 에 대해 알아보자 (0) | 2023.05.28 |
| html 이란? 기본 사용법 및 내용에 대해 알아보자 (0) | 2023.05.27 |