① 소스 내용
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>자바스크립트</title>
<script type="text/javascript">
// 한줄주석
/* 여러줄 주석 */
var no=1; // 오로지 var 타입의 변수만 존재, 일종의 멤버변수
function hello(){
// alert창은 Modal dialog : 경고용으로 사용
alert("안녕~세상아~!!!"); // 내장 함수(메소드)
// DOM(Document Object Model) : HTML을 Tree형태의 객체로 구조화 한 것
// getElementById : Id로 element를 찾아 가지고 온다.
var target = document.getElementById("target");
alert(target);
// innerHTML 같은 id를 갖는 태그안에 '안녕!!!!'을 넣게 된다.
target.innerHTML='안녕!!!!';
}
// gugu div에 계속해서 클릭할 때마다 증가된 숫자가 증가하도록
function add() {
var gugu = document.getElementById('gugu'); // 꼭 쓰도록 하자!!!
if(no%10==0){
gugu.innerHTML += '<h5>ㅋㅋㅋ</h5>';
} else {
gugu.innerHTML += '<input type="button" value="버튼'+no+'" />';
}
no++;
}
</script>
</head>
<body>
<h1 id="target"></h1>
<!--
on으로 시작하는 것은 javascript에서만 사용
javascript는 Event Driven Model : 이벤트가 발생할 경우 행동을 한다.
-->
<input type="button" value="눌러줘!" onclick="hello();"/>
<div id="gugu" onclick="add();" style="border-style: solid;">
0
</div>
</body>
</html>
② 실행 화면
'WEB > JavaScript' 카테고리의 다른 글
| WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0) | 2012.09.13 |
|---|---|
| WEB 3일차 네번째) 자바스크립트의 정규식 (0) | 2012.09.13 |
| WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0) | 2012.09.13 |
| WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0) | 2012.09.13 |
모데스티