Introduction to Computers

Introduction to Computers- 2nd exam- 授課教授：李錫智

1. <html> <head> <title>Double the Number</title> </head> <body> <p> <input type="button" value="Double the number:" onclick=“ num = parseFloat(document.getElementById('numberBox').value); document.getElementById('numberBox').value = 2 * num;" /> </p> <p> <input type="text" id="numberBox" size="10" value="2" /> </p> </body> </html>

(a) If you click the button once, what is the displayed value? Ans: 4 (b) If you click the button twice, what is the displayed value? Ans:8 (c) If you click the button n times, what is the displayed value? Ans:2n+1

2. Develop a web page with two buttons and two text boxes. One button, labeled by “get square”, enables the value entered from text box A to be squared and the result to be displayed in test box B. The other button, labeled by “get square root”, enables the value entered from text box B to be square-rooted and the result to be displayed in text box A. The size of each box is 4. No default values are associated with the boxes. (a) Show your program without using functions. (b) Show your program using two functions, one for each button. The function for the first button is named as getx2 and the function for the second button is named as getsqrt.

2. (a) Without using functions Ans: <html> <head> <title>Test_2</title> </head> <body> <p> <input type="text" id="textbox_A" size="4" value="" /> </p> <input type="button" value="get square" onclick="squ=document.getElementById('textbox_A').value; squ=parseFloat(squ); squ=squ*squ; document.getElementById('textbox_B').value=squ;"/>

<input type="button" value="get square root" onclick=“ squroot= document.getElementById('textbox_B').value; squroot=parseFloat(squroot); squroot=Math.sqrt(squroot); document.getElementById('textbox_A').value=squroot;"/> <p> <input type="text" id="textbox_B" size="4" value="" /> </p> </body> </html>

2. (b) using two functions (getx2、getsqrt) Ans: <html> <head> <title>Test_2</title> <script type="text/javascript"> function getx2() { varsqu; squ=document.getElementById('textbox_A').value; squ=parseFloat(squ); squ=squ*squ; document.getElementById('textbox_B').value=squ; }

function getsqrt() • { • varsquroot; • squroot=document.getElementById('textbox_B').value; • squroot=parseFloat(squroot); • squroot=Math.sqrt(squroot); • document.getElementById('textbox_A').value=squroot; • } • </script> • </head>

<body> • <p> • <input type="text" id="textbox_A" size="4" value="" /> • </p> • <input type="button" value="get square" onclick="getx2();"/> • • <input type="button" value="get square root" onclick="getsqrt()"/> • <p> • <input type="text" id="textbox_B" size="4" value="" /> • </p> • </body> • </html>

<html> • <head> • <title>Swap Page</title> • <script type="text/javascript"> • function Swap() • { • temp = document.getElementById('box1').value; • document.getElementById('box1').value= • document.getElementById('box2').value; • document.getElementById('box2').value = temp; • } • </script> • </head>

<body> • <div style="text-align:center"> • <input type="text" id="box1" size="10" value="foobar" /> • <input type="text" id="box2" size="10" value="bizbaz" /> • <br /> • <input type="button" value="Swap Contents" • onclick="Swap();" /> • </div> • </body> • </html>

(a) Please show the page on the screen before any user input. Ans: (b) What happens when the user hit the button after he/she enters 20 and 40, respectively, in text box1 and text box2? Ans:

Suppose that you are going to arrange the students in a class in sequence from youngest to oldest. You must organize a line that begins with the youngest person and continues in ascending order according to age. Describe an algorithm for completing this task. Ans: 1. 假設此sequence有n個students排成一排，編號由1~n 2. 令i=1 3. 先假定第i個student是最年輕的，往後比較出生年月日，比第i個student年輕的便跟他交換位置，一直比較到第n個student，則第i個位置就是最年輕的student 4.i=i+1，如果i=n則結束，否則回到(3)

Suppose that you are going to merge two sequences of numbers, sequence A and sequence B, into sequence C. Both sequence A and sequence B were sorted in ascending order. It is required that sequence C be also sorted in ascending order. Describe an algorithm for completing this task. • Ans: • Sequence A與SequenceB分別排成兩排，位置由1開始編號，i用來表示sequence A的位置，j 表示sequence B的位置，k表示sequence C的位置(以C[ k ]代表) • 令i=1、j=1、k=1 • 比較A的第i個位置的值(以A[i]表示)與B的第j個位置的值(以B[j]表示)，如果A[ i ]≦B[ j ]，則將A[ i ]放入C[k]，並執行i=i+1與k=k+1，即往後移一個位置，同理如果A[i]>B[ j ]，則將B[ j ]放入C[ k ]，並執行j=j+1與k=k+1 • 重複(3)，直到i大於sequence A的最後一個位置，或是j大於sequenceB的最後一個位置 • 將另一個sequence剩餘的number直接複製到C[ k ]的後面

<html> • <head> • <title> Picture Fun </title> • <script type="text/javascript"> • function ChangeImage(imgSource) • { • document.getElementById('faceImg').src = imgSource; • } • </script> • </head> • <body> • <div style="text-align:center"> • <h2>How do you feel today?</h2> • <img id="faceImg" src="happy.gif" alt="face image" /> • <br /><br />

<input type="button" value="I feel happy" • onclick="ChangeImage('happy.gif');" /> • • <input type="button" value="I feel sad" • onclick="ChangeImage('sad.gif');" /> • • <input type="button" value="I feel sleepy" • onclick="ChangeImage('sleepy.gif');" /> • • <input type="button" value="I feel angry" • onclick="ChangeImage('angry.gif');" /> • </div> • </body> • </html>

(a) What happens if the user hits the “I feel happy” button? Ans: 如果happy.gif存在的話，它會顯現在下圖紅框的部分，否則只會顯示face image (b) What happens if the user hits the “I feel sleepy” button? Ans: 如果sleepy.gif存在的話，它會顯現在下圖紅框的部分，否則只會顯示face image

Suppose you want to compute the function value f(x) = x2 + 2x + 3. You write a web page for doing this. The value of x is entered via a text box named “box for x”. After the click of a button named “click for f(x)”, the value of x is retrieved from the text box, f(x) is computed, and the result is displayed in another text box named “box for f(x)”. It is required that a function call is used for the onclick part of the button, and the function should be named as funCalc. The size of each text box is 5 and their default value is 0. Please show your program.

Ans: <html> <head> <title>Test_7</title> <script type="text/javascript"> function funCalc() { temp=document.getElementById('box for x').value; temp=parseFloat(temp); result=temp*temp+2*temp+3; document.getElementById('box for f(x)').value=result; } </script> </head>

<body> <p> <input type="text" id="box for x" size="5" value="0" /> </p> <input type="button" value="click for f(x)" onclick="funCalc()"/> <p> <input type="text" id="box for f(x)" size="5" value="0" /> </p> </body> </html>

Introduction to Computers - 2 nd exam-