본문 바로가기

Book

[한빛미디어] 인터넷 프로그래밍 입문 15장 연습문제




[한빛미디어] 인터넷 프로그래밍 입문 15장 연습문제


15장 연습문제(자바스크립트)

서술형문제

1. 자바스크립트가 자바와 다른 점을 중심으로 특징을 아는 대로 서술하시오.

구분

자바

자바스크립트

해석 위치

서버 내의 파서

클라이언트의 브라우저

언어형

컴파일러 방식

인터프리터 방식

존재

HTML 파일과 별도로 존재

HTML 문서 내에 기술

객체 지향

객체 지향 언어

객체 기반 언어

바인딩

정적 바인딩

동적 바인딩

소스

확인 불가능

확인 가능

보안성

있음

없음

변수형

변수, 자료형의 정의가 있고 명확하게 구분

변수의 형을 미리 정의하지 않아도 됨

속도

빠름

느림

사용

어려움

쉬움

운영체제

부분적인 제한

제한 없음

2. 자바스크립트 기본 구조를 쓰시오.

<script language="javascript">

<!--

~~ 자바 스크립트 내용 ~~

// -->

</script>

3. 자바스크립트 작성 시 객체, 속성, 메소드, 함수를 나열할 경우 어떤 구분자를 사용하는가?

▶▶ 마침표(.)

4. 자바스크립트에서 개행을 처리하는 특수문자는 무엇인가?

▶▶ \n

5. 자바스크립트에서 프로그램의 대상이 되는 모든 것을 가리키는 말로 창, 문서, 그림 등을 가리켜 무엇이라고 하는가?

▶▶ 객체

6. 사용자의 행위를 전달하는 시점으로 자바스크립트가 실행되는 시점을 알려주는 역할을 하는 것은 무엇인가?

▶▶ 이벤트 핸들러

7. <script> 태그에 대한 구문 구조의 기본 형태를 설명하라.

<script language="javascript"> // 자바스크립트 버전 표시 ex) <script language="javascript1.2">

<!-- // 생략 부호

~~ 자바 스크립트 내용 ~~

// -->

</script>

8. 자바스크립트에서 사용 가능한 주석의 형태를 설명하라.

한 행을 주석문 처리

- // 주석 처리할 행, 문장

두행 이상에 걸치는 주석문 처리

- /* 주석 처리할 영역 */

실습형문제

1. 내 홈페이지를 즐겨찾기에 추가하기

ㆍ앞에서 배운 내용은 아니지만 간단한 소스로 완성된 결과를 확인해 불 수 있으므로 다음 코드처럼 입력해본다.

<a href=# onclick="window.external.addfavorite('http://www.naver.com','네이버(자바스크립트)')'> 즐겨찾기에 추가!</a>

ㆍ즐겨찾기에 추가하는 소스는 다음 문법에 맞게 작성한다.

window.external.addfavorite('URL주소','사이트명')

ㆍ에디트플러스에서는 결과를 확인할 수 없으므로 인터넷 익스플로러에서 확인한다.

· 키포인트 : 지정한 홈페이지 주소를 즐겨찾기에 추가하도록 한다.

<html>

<head>

<title>내 홈페이지를 즐겨찾기에 등록하기!</title>

<style>a{color:white;text-decoration:none}</style>

</head>

<body bgcolor=black background="images/bg.jpg"

leftmargin=0 topmargin=0>

<table width=800 border=0 cellpadding=0 cellspacing=0>

<tr height=284>

<td background="images/main_01.jpg" valign=bottom>&nbsp;

</td>

</tr>

<tr height=121><td background="images/main_02.jpg" valign=top>

<!-- 종속테이블 시작 -->

<table width=300 border=0><tr><td align=right><br>

<!-- 코딩1 -->

<a HREF=# onclick="window.external.addfavorite('http://www.naver.com','네이버(자바스크립트)')">

즐겨찾기에 추가!</a>

</td></tr></table>

<!-- 종속테이블 끝 -->

</td></tr>

<tr height=195><td>&nbsp;</td></tr></table>

</body>

</html>

2. 압력상자에 메시지 보여주기

<html>

<head>

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

<style type="text/css">

body

{

scrollbar-face-color: #dedede; /*스크롤 이동탭 내부색*/

scrollbar-shadow-color: #cccccc; /*오른쪽,하단 테두리색*/

scrollbar-highlight-color: #ffffff; /*왼쪽,상단 테두리색*/

scrollbar-3dlight-color: #dedede; /*좌측,상단 바깥 테두리색*/

scrollbar-darkshadow-color: #ffffff; /*우측,하단 바깥 테두리색*/

scrollbar-track-color: #f0f0f0; /*스크롤바 내부색*/

scrollbar-arrow-color: #dedede /*이동버튼 화살표색*/

}

textarea{border:1 solid #dedede}

a{color:black; text-decoration:none}

a:hover{font-size:12pt;}

</style>

</head>

<body text=gray>

<table width=100% height=100% border=0>

<tr>

<td>

<!-- 종속테이블 시작 -->

<table width=450 height=380 background="box.jpg" align=center>

<tr>

<td>

<h3 align=center>오늘의 명언</h3>

<center><!-- 코딩1 -->

<textarea name="saying" rows="8" cols="40">아래 글자에 마우스를 올려보세요~</textarea><br><br>

<!-- 코딩2 -->

<a href=# onmouseover="saying.value='당신이 어디에 있는지, 어디를 향해 가고 있는지도 모를 정도로 바쁘게 살진 말라.'" onmouseout="saying.value='아래 글자에 마우스를 올려보세요~'">한글</a> &nbsp;&nbsp;&nbsp;

<!-- 코딩3 -->

<a href=# onmouseover="saying.value='Don\'t run through life so fast that you forget not only where you\'ve been but also where you are going. '" onmouseout="saying.value='아래 글자에 마우스를 올려보세요~'">영문</a> <br><br>

</center></td></tr></table></td></tr></table></body></html>

ㆍ<textarea> 태그의 이름을 saying으로 지정

ㆍ<a> 태그에 마우스가 올라오면 saying 객체의 value 속성을 변경하도록 지정

ㆍ마우스가 올라올 때 나타나는 문자는 소스의 주석 문자로 사용

ㆍ마우스가 벗어나면 원래 상태로 복구

· 키포인트 : 하이퍼링크 문자에 마우스를 올리면 여러 줄 입력상자의 메시지가 변하도록 한다.

심화 연습 문제

1. 문제 정답 확인하기

~ 상단 생략 ~

<tr>

<td bgcolor=F8DAA8 colspan=2 background="images/coffee_bg.gif">

<div><br><br>

<!-- 설명 시작 ********************************** -->

커피라는 말의 뿌리는 에티오피아의 카파(caffa)라는 말에서 찾을 수 있다.

카파란 아랍어로 무슨 뜻을 가진 말일가?<br>

<!-- 코딩1 -->

<a href=# onclick="ans1.value='힘'">[정답보기]</a>

<input type="text" name="ans1"><br><br>

카파가 아라비아에서 'qahwa' (와인의 아랍어)가 되고 터키에 건너와 '카베(kqhve)'로 유럽에 건너가 '카페(cafe)', 미국에서는 '커피', 일본에서는 무엇이라 불려지는가?<br>

<!-- 코딩2 -->

<a href=# onclick="ans2.value='고히'">[정답보기]</a>

<input type="text" name="ans2"><br><br>

<!-- 코딩3 -->

<center><a href=# onclick="ans1.value='';ans2.value=''">[다시 풀기]</a></center>

<!-- 설명 끝 ********************************** -->

~ 이하 생략 ~

ㆍ<!--코딩1-->: 입력상자의 이름을 ans1로 지정하고 [정답보기] 문자를 클릭하면 입력상자에 정답 ‘힘’이 표시되게 설정

ㆍ<!--코딩2-->: <!--코딩1-->과 같은 방식으로 만들고 정답은 ‘고히’로 표시되게 설정

ㆍ<!--코딩3-->: [다시 풀기] 문자를 선택하면 입력상자에 입력된 값을 제거하고 초기화시킴

· 키포인트 : 입력 상자에 문제의 정답을 출력한다.