하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

3. 기본문법(3) - 함수

페이지 정보

작성자 관리자 댓글 0건 조회 507회 작성일 22-01-07 20:32

본문

3. 기본문법(3) - 함수

함수 : 내장 함수, 사용자 정의함수가 있다.

내장 함수:이미 만들어져 있는 함수

사용자 정의함수 : 사용자가 정의한 함수


1. 사용자정의 함수


사용자 정의함수 형식


function 함수이름(인자){

명령;

명령;

....

}


실습 : javascript06.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 연습</title>
<script type="text/javascript">
function gugudan(a){
for(i=1; i <=9; i++){
document.write(a + "*"+ i+"="+a*i+"<br/>");
}
}
</script>
</head>
<body>
<h1>함수 사용하기</h1>
<script>
var aa = prompt("출력하고자 하는 구구단을 입력하세요!!");
gugudan(aa);
</script>
</body>
</html>


1.PNG


2.PNG



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>




3.PNG



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>


이름의 입력창을 선택하면 커서가 보이면서 메세지가 보인다.


4.PNG


5.PNG


대화상자열기를 누르면 아래와 같이 대화상자가 나타난다.


6.PNG

요소(노드) 접근하기 


실습 : 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>



7.PNG


함수를 추가한다.


<!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"이 추가된다.


8.PNG


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 를 찾아 "하이!!"를 추가한다.

9.PNG

크롬 브라우저에서 [F12]키를 누른다. 아래와 같이 개발자 화면이 보이게 된다.


10.PNG


Elements에서 body를 마우스로 클릭하면 아래와 같이 엘리먼트와 연관된 화면이 표시된다.

관련 스타일도 같이 나타난다.


11.PNG



자바스크립트를 이용하여 요소(노드)에 접근하여 스타일을 바꿔보도록 하겠다.



12.PNG


H1 노드에 접근해보록 하겠다.

Console를 선택하고 아래 같이 입력한다.


document.getElementsByTagName('h1'); // h1 노드를 검색하여 보여준다.


13.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.