html은 문서를 순서대로 읽지 않고 한번에 코드를 읽고 변수를 할당한 다음
prompt 와 같이 사용자의 입력을 받는 부분을 먼저 실행한다
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while</title>
<script type="text/javascript">
//자바 배열 : 하나의 이름 같은 자료형의 여러개 데이터의 묶음
//자바 스크립트 배열 : 하나의 이름에 여러 자료형의 데이터의 여러개의 데이터 묶음(자료형 상관 없음)
//자바 스크립트 배열 생성, 배열도 변수에 저장 가능
var arr=new Array();
arr[0] = 10;
arr[1] = 3.14;
arr[2] = true;
arr[3] = "html";
arr[4] = 'A';
arr[5] = null;
//배열 출력 => for문
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br/>");
}
document.write("<hr/>");
var arr2=["김html",20,175,"서울",'C'];
//개선된 for문
for ( var k in arr2) {
document.write(arr2[k]+"<br/>");
}
document.write("<hr/>");
//맵 , json , 객체 형식
var arr3={
make:"Benz",
model:"sClass",
year:2018,
money:"3억"
}
for ( var k in arr3) {
document.write(arr3[k]+"<br/>");
}
document.write("<hr/>");
document.write(arr[3]);
document.write("<hr/>");
document.write(arr2[0]);
document.write("<hr/>");
document.write(arr3.model);
document.write("<hr/>");
document.write(arr3["make"]);
</script>
</head>
<body>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 : function</title>
<script type="text/javascript">
//function = 함수, 자바에서는 메소드
// 재사용,
var num=10;
document.write("1 : "+num);
/*함수 생성*/
/* function test() {
document.write(" * : "+sum);
} */
</script>
<script type="text/javascript">
function test() {
document.write(" * : "+sum);
}
</script>
</head>
<body onload="test()">
<!-- 태그 속성 중 onXXXX는 무조건 자바 스크립트 함수 호출 -->
<!--<body onload="test()"> body를 읽고 난 후
자바 스크립트 test함수 호출 -->
<script type="text/javascript">
document.write("2 : "+num);
</script>
<h2>hi</h2>
<script type="text/javascript">
document.write("3 : "+num);
</script>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<script type="text/javascript">
function test() {
document.write("test() 함수 호출 성공");
}
</script>
</head>
<body>
<h2 align="center">function 연습</h2>
<!-- 버튼을 누르면 test()호출 -->
<button onclick="test()">함수 호출</button>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//선언 함수는 먼저 호출 가능하다
test();
//선언 함수
function test() {
document.write("Hi");
}
function test() {
document.write("Hello");
}
test();
</script>
<script type="text/javascript">
//익명 함수
//익명 함수는 먼저 만들어지지 않는다
//선언 위에 호출하면 오류 발생
var msg = function() {
document.write("Hi2");
}
msg();
var msg = function() {
document.write("Hello2");
}
</script>
<script type="text/javascript">
function test2() {
document.write("Hi3");
}
var test2 = function {
document.write("Hello 3");
}
test2();
</script>
<script type="text/javascript">
var test3 = function {
document.write("Hello 4");
}
function test3() {
document.write("Hi4");
}
test3();
</script>
<script type="text/javascript">
test4();
function test4() {
document.write("Hi5");
}
var test4 = function {
document.write("Hello 5");
}
</script>
<script type="text/javascript">
test5();
var test5 = function {
document.write("Hello 6");
}
function test5() {
document.write("Hi6");
}
</script>
</head>
<body>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<script type="text/javascript">
var num=100;
function add(a,b) {
document.write("결과 : "+(a+b)+"<br/>");
}
function sub(a,b){
return a-b;
}
</script>
</head>
<body>
<h2>
<script type="text/javascript">
document.write("num = "+num+"<br/>");
add(100,200);
add("문자1 ","문자 2");
add("100 ",100);
var k = sub(3000,2000);
document.write("k = "+k);
</script>
</h2>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function: 페이지 이동 , 리 다이렉트 , 포워딩</title>
<script type="text/javascript">
function test(){
location.href="http://www.naver.com";
}
function test2(){
//새로운 윈도우 창 열기 open
open(page,"width=400,height=400");
}
</script>
</head>
<body>
<input type="button" value="이동" onclick="test()"/>
<input type="button" value="이동2" onclick="javascript:location.href='http://fors.tistory.com'"/>
<button onclick="test2('ex01.html')">이동 3</button>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function id 선택지</title>
<!--id 선택자는 중복 할 수 없다. id 해당 태그를 지정하는 역할-->
<script type="text/javascript">
function test1() {
//해당 아이디를 가지고 있는 태그를 찾아서 문자를 삽입
document.getElementById("demo").innerHTML="Id 선택자를 사용해서 글자 삽입 - test1"
}
//태그의 속성 변경(스타일 지정)
function test2() {
//해당 아이디를 가지고 있는 태그를 찾아서 문자를 삽입
document.getElementById("demo2").style.display="none";
}
function test3() {
//해당 아이디를 가지고 있는 태그를 찾아서 문자를 삽입
document.getElementById("demo3").style.fontSize="35px";
}
</script>
</head>
<body>
<h2>id 선택지</h2>
<p id="demo">demo</p>
<p id="demo2">demo 2</p>
<p id="demo3">demo 3</p>
<button onclick="test1()">클릭</button>
<button onclick="test2()">클릭</button>
<button onclick="test3()">클릭</button>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function setRed() {
var box = document.getElementById("box");
box.style.background="red";
}
function setGreen() {
box.style.background="green";
}
function setBlue() {
box.style.background="blue";
}
</script>
</head>
<body>
<button onclick="setRed()">RED</button>
<button onclick="setGreen()">GREEN</button>
<button onclick="setBlue()">BLUE</button>
<div id="box" style="border:1px solid black;
background-color:#ffffff;width:200px;height=200px;">box1
</div>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function : id 선택자</title>
<script type="text/javascript">
function setRed(){
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
box1.style.display="block";
box2.style.display="none";
box3.style.display="none";
}
function setGreen(){
box1.style.display="none";
box2.style.display="block";
box3.style.display="none";
}
function setBlue(){
box1.style.display="none";
box2.style.display="none";
box3.style.display="block";
}
</script>
</head>
<body>
<button onclick="setRed()">RED</button>
<button onclick="setGreen()">GREEN</button>
<button onclick="setBlue()">BLUE</button>
<div id="box1" style="border:1px solid black;display:none;
background-color:#ff0000;width:200px;height:200px;">box1
</div>
<div id="box2" style="border:1px solid black;display:none;
background-color:#00ff00;width:200px;height:200px;">box2
</div>
<div id="box3" style="border:1px solid black;display:none;
background-color:#0000ff;width:200px;height:200px;">box3
</div>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function : id선택자</title>
<script type="text/javascript">
function test1() {
var img = document.getElementById("myimg");
img.src="img/turnon.gif";
}
function test2() {
var img = document.getElementById("myimg");
img.src="img/turnoff.gif";
}
</script>
</head>
<body>
<button onclick="test1()">불 꺼기</button>
<img id="myimg" src="img/turnoff.gif">
<button onclick="test2()">불 끄기</button>
</body>
</html> |
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기</title>
<script type="text/javascript">
function calc_go() {
//value 무조건 문자
//숫자로 변경할때 parseInt()
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var sum = parseInt(num1)+parseInt(num2);
document.getElementById("res").innerHTML=sum;
}
</script>
</head>
<body>
<h2>덧셈 계산기</h2>
<form>
<p>첫번째 수 : <input type="number" id="num1" name="num1"></p>
<p>두번째 수 : <input type="number" id="num2" name="num2"></p>
<input type ="button" value="계산" onclick="calc_go()"/>
<hr/>
<h3>결과 :<span id="res"></span></h3>
</form>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| html 표 추가 삭제 (0) | 2017.12.06 |
|---|---|
| html 예제 (0) | 2017.12.05 |
| 자바스크립트 (0) | 2017.12.04 |
| html table / div / iframe 태그 작성하는 방법 (0) | 2017.12.04 |
| html ul 태그 li 태그 (0) | 2017.12.01 |
댓글