3. 기본문법(3) - 함수
페이지 정보
작성자 관리자 댓글 0건 조회 1,321회 작성일 22-01-07 20:32본문
3. 기본문법(3) - 함수
함수 : 내장 함수, 사용자 정의함수가 있다.
내장 함수:이미 만들어져 있는 함수
사용자 정의함수 : 사용자가 정의한 함수
1. 사용자정의 함수
사용자 정의함수 형식
function 함수이름(인자){
명령;
명령;
....
}
2. 이벤트함수
onLoad는 내용이 보일 때 함수를 호출한다.
실습 : javascript07.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script type="text/javascript">
function load_msg(){
alert("홈페이지에 오신 것을 환영합니다!!!");
}
</script>
</head>
<body onLoad="load_msg()">
<h1>함수 사용하기</h1>
</body>
</html>
onfocus 는 focus가 오면 처리한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script type="text/javascript">
function load_msg(){
alert("홈페이지에 오신 것을 환영합니다!!!");
}
function eventTest(){
alert("버튼을 클릭하셨네요!!");
}
function getFocus(x){
x.value="하이!!";
}
function outFocus(x){
x.value="안녕 잘가!!";
}
</script>
</head>
<body onLoad="getFocus()">
<!--body onLoad="load_msg()"-->
<h1>함수 사용하기</h1>
<form name="test">
이름 : <input type="text" name="name" onfocus="getFocus(this)" onBlur="outFocus(this)"/><br/>
주소 : <input type="text" name="addr" onfocus="getFocus(this)" onBlur="outFocus(this)"/>
</form>
<input type="button" value="대화상자 열기" onclick="eventTest()"/>
</body>
</html>
이름의 입력창을 선택하면 커서가 보이면서 메세지가 보인다.
대화상자열기를 누르면 아래와 같이 대화상자가 나타난다.
요소(노드) 접근하기
실습 : javascript08.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
</head>
<body>
<header>
<h1 style="color:red">요소(노드) 접근하기</h1>
</header>
<section>
<h2>HTML5에 추가된 요소 </h2>
<ul>
<li>section</li>
<li>article</li>
<li>nav</li>
<li>aside</li>
</ul>
<form name = "test_frm">
<label>이름:
<input type="text" name="name" />
<input type="button" value="전송" onclick="btnClick()"/>
</label>
<div id="test_div"></div>
<div>하이2</div>
</form>
</section>
</body>
</html>
함수를 추가한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script type="text/javascript">
function btnClick(){
var aa = document.getElementsByTagName('div')[0];
aa.innerHTML = "하이1";
}
</script>
</head>
<body>
<header>
<h1 style="color:red">요소(노드) 접근하기</h1>
</header>
<section>
<h2>HTML5에 추가된 요소 </h2>
<ul>
<li>section</li>
<li>article</li>
<li>nav</li>
<li>aside</li>
</ul>
<form name = "test_frm">
<label>이름:
<input type="text" name="name" />
<input type="button" value="전송" onclick="btnClick()"/>
</label>
<div id="test_div"></div>
<div>하이2</div>
</form>
</section>
</body>
</html>
전송버튼을 누르면 div 중 첫번째 것에 "요소1"이 추가된다.
id를 이용하여 요소에 접근한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script type="text/javascript">
function btnClick(){
var aa = document.getElementById("test_div");
aa.innerHTML = "하이!! "+document.test_frm.name.value+"님";
}
</script>
</head>
<body>
<header>
<h1 style="color:red">요소(노드) 접근하기</h1>
</header>
<section>
<h2>HTML5에 추가된 요소 </h2>
<ul>
<li>section</li>
<li>article</li>
<li>nav</li>
<li>aside</li>
</ul>
<form name = "test_frm">
<label>이름:
<input type="text" name="name" />
<input type="button" value="전송" onclick="btnClick()"/>
</label>
<div id="test_div"></div>
<div>하이2</div>
</form>
</section>
</body>
</html>
전송버튼을 누르면, id 들 중에서 test_div 를 찾아 "하이!!"를 추가한다.
크롬 브라우저에서 [F12]키를 누른다. 아래와 같이 개발자 화면이 보이게 된다.
Elements에서 body를 마우스로 클릭하면 아래와 같이 엘리먼트와 연관된 화면이 표시된다.
관련 스타일도 같이 나타난다.
자바스크립트를 이용하여 요소(노드)에 접근하여 스타일을 바꿔보도록 하겠다.
H1 노드에 접근해보록 하겠다.
Console를 선택하고 아래 같이 입력한다.
document.getElementsByTagName('h1'); // h1 노드를 검색하여 보여준다.
댓글목록
등록된 댓글이 없습니다.