16장 연습문제(변수,연산자,사용자 정의 함수)

서술형문제

1. 변수명은 반드시 무엇으로 시작해야 하는가?

▶▶ 영문자 또는 ‘_’

2. 변수의 종류를 아는 대로 나열하시오.

▶▶ 지역변수, 전역변수, 배열변수, 객체변수

3. HTML, CSS, JS, ASP를 순서대로 저장하는 배열 변수 edu를 생성하는 소스를 한 줄로 쓰시오.

▶▶ var edu = new Array("HTML","CSS","JS","ASP")

4. I=I+1과 같이 사용할 수 있는 증감 연산자를 쓰시오.

▶▶ I++

5. 조건 연산자의 기본 문법을 쓰고 설명하시오.

▶▶ 변수명=(조건식)?명령1:명령2

조건식이 참일 경우 명령1 실행, 거짓일 경우 명령2 실행

6. 자기자신 객체를 나타내는 예약어는 무엇인가?

▶▶ this

실습형문제

1. 버튼의 이름 알려주기

· 키포인트 : 매겨변수가 없는 함수가 다섯 개 만들어져 있다. 매개변수가 있는 함수 하나로 정의하여 호출해본다.

<html>

<head>

<title> 매개 변수가 있는 함수 (this)</title>

<script language="JavaScript">

<!--

function clickButton(btnValue){

alert(btnValue.value+"을 클릭했군요~")

}

//-->

</script>

</head>

<body>

<center><img src="totoro.jpg"><br><br>

<input type="button" value="메이" onclick=clickButton(this)>&nbsp;

<input type="button" value="동그리" onclick=clickButton(this)>&nbsp;

<input type="button" value="사츠키" onclick=clickButton(this)>&nbsp;

<input type="button" value="토토로" onclick=clickButton(this)>&nbsp;

<input type="button" value="칸타" onclick=clickButton(this)>&nbsp;

</center>

</body>

</html>

2. 주제별 명언 표시하기

<html>

<head>

<title> 오늘의 명언 </title>

<style>

a{text-decoration:none}

a:hover{font-size:12pt}

</style>

<script language="JavaScript">

<!--

function defaultMsg(){

form1.msg.value="원하는 명언에 마우스를 올려보세요~"

}

function sayingMsg(text){

form1.msg.value=text

}

saying1="Don\'t forget that a person\'s greatest emotional need is to feel appreciated.\n \n사람이 가장 필요로 하는 감정은 다른 이들이 당신에게 고맙다고 느끼는 그것이다."

saying2="Don\'t use time or words carelessly. Neither can be retrieved. \n\n시간이나 말을 함부로 사용하지 말라 둘 다 다시는 주워 담을 수 없다 ."

saying3="Life is not a race, but a journey to be savored each step of the way. \n\n인생은 경주가 아니라 그 길의 한 걸음 한 걸음을 음미하는 여행이다 "

saying4="Yesterday is History, Tomorrow is a Mystery, and Today is a gift; that\'s why we call it - the Present... \n\n 어제는 역사이고, 내일은 미스테리이며, 그리고 오늘은 선물이다 그렇기에 우리는 현재(present)를 선물(present)이라고 말한다 "

//-->

</script>

</head>

<body bgcolor=#999999 text=#e4e4e4 link=white vlink=white leftmargin=50 topmargin=50>

<h3 align=center>주제별 명언</h3>

<!-- 코딩1 -->

<center><form name="form1">

<textarea cols="60" rows="6" name="msg">원하는 명언에 마우스를 올려보세요~</textarea><br><br>

<a href="http://www.naver.com" onmouseover="sayingMsg(saying1)" onmouseout="defaultMsg()">고마움</a>

<a href="http://www.naver.com" onmouseover="sayingMsg(saying2)" onmouseout="defaultMsg()">시간</a>

<a href="http://www.naver.com" onmouseover="sayingMsg(saying3)" onmouseout="defaultMsg()">인생</a>

<a href="http://www.naver.com" onmouseover="sayingMsg(saying4)" onmouseout="defaultMsg()">오늘</a>

</center>

</body>

</html>

ㆍ표시할 명언은 변수로 저장

ㆍ여러줄 입력 상자에 기본으로 표시할 문자를 defaulfMsg() 함수로 정의

ㆍ링크 문자에 마우스를 올리면 해당 명언이 나타나도록 sayingMsg(text) 함수 생성

· 키포인트 : 마우스를 올릴 때 실행되는 함수와 마우스가 빠져나갈 때 실행되는 함수 두 개로 제작하여 주제별 명언 표시 문서를 제작해본다.

심화 연습 문제

1. 고양이 앨범에 롤오버 이미지 적용하기

<html>

<head>

<title> 고양이 앨범 : 인덱스 번호로 객체 다루기</title>

<script language=javascript>

var p=new Array()  //배열변수 생성

p[0]='images/cat0.jpg'  //배열변수에 큰 그림의 경로 저장

p[1]='images/cat1.jpg'

p[2]='images/cat2.jpg'

p[3]='images/cat3.jpg'

function overImg(i)  //onmouseover시 실행될 함수

{

document.images[0].src=p[i]

}

function defaultImg() //onmouseout시 실행될 함수

{

document.images[0].src=p[0]

}

</script>

</head>

<body link=black vlink=black>

<center>

<h2>고양이 앨범</h2>

<center><img src="images/cat0.jpg" border=1 width="600" height="450"><br><br></center>

<!-- 코딩 -->

<img src="images/cat1.gif" width=70 height=70 border=1 hspace=10 vspace=10 onmouseover="overImg(1)" onmouseout="defaultImg()">

<img src="images/cat2.gif" width=70 height=70 border=1 hspace=10 vspace=10 onmouseover="overImg(2)" onmouseout="defaultImg()">

<img src="images/cat3.gif" width=70 height=70 border=1 hspace=10 vspace=10 onmouseover="overImg(3)" onmouseout="defaultImg()">

<script language=javascript>

//코딩 : <head>태그 사이에 기록하면 에러 발생!

n=document.images.length

n1=document.images[0].src

n2=document.images[n-1].src

alert("그림의 개수는 " + n +"개 \n\n 첫번째 그림의 경로는  "+n1 + " \n\n 마지막 그림의 경로는 " +n2)

</script>

</center>

</body>

</html>

ㆍ메시지 창에 그림의 개수와 경로가 표시되도록 설정

ㆍ큰 그림을 배열 변수로 저장

ㆍonmouseover 때 실행될 함수와 onmouseout 때 실행될 함수 제작

ㆍ조각 그림에 마우스를 올릴면 큰 그림이 보이고, 마우스가 빠져나가면 원래 그림으로 돌아가도록 <img> 태그에 이벤트핸들러와 함수 지정

· 키포인트 : 배열을 선언하여 그림 파일명을 저장한 다음 롤오버 이미지에 적용해본다.