Java程序辅导
C C++ Java Python Processing编程在线培训 程序编写 软件开发 视频讲解
C C++ Java Python Processing编程在线培训 程序编写 软件开发 视频讲解
In this lab's exercises, you will
Use JavaScript as a client-side programming language inserted in Web pages;
Creating a web page containing some JavaScript
Creating an interactive web page using a form and JavaScript
This exercise is to use JavaScript to add the current time to a page. For the convenience of viewers of your personal web page, add a short piece of text telling them what the current time is. You can also add the current date. Try to work out how to do this yourself first and only then use the detailed instructions which follow if you have trouble.
Create a directory called lab07 under your ~/WWW/CITS1231 directory. Launch Expression Web, and save a copy of one of your personal web pages as ex1 in your lab07 directory.
First try using document.write() as in lectures to add some text at the desired place in the web page. Remember to insert it in a JavaScript element using the correct syntax.
Use the following JavaScript to store the current date and time object in a variable:
var today=new Date();
In order to extract the hours and the minutes of the current time use the methods today.getHours() and today.getMinutes().
There are similar methods for the day of the month getDate, the month number getMonth and the year getYear. As an optional extra you can use an array, or alternatively a series of conditional tests, to display the name of the month.
Note that the time and date displayed here will be the local time of the viewer when they download the web page into their browser.
Design and build a web page with a form to collect a name and address of a purchaser and a name and address for delivery. Provide a button which copies the purchaser's address into the area for the delivery address. Once again, only follow the detailed instructions if you really need to.
First construct the form with the four input objects. You might like to use text areas for the two addresses. Set out the form and page clearly using headings, tables and styles for the benefit of the user.
Also, make sure that you set out your HTML source clearly and add comments if that would help anyone reading your code.
Next, add a submit (or "purchase") button and a reset button. To help you develop the form use the server-side script available at as the destination. It will tell you what variables your form has sent and what values it has given to each.
Check that the submission works correctly. Please use sensible names for your input objects as they are used by the server program. For example, use "pur_name", "pur_addr", "del_name", "del_addr".
Now we are ready to add a button which copies the address across from the first text area to the other.
Place a button in a sensible place and decide what text to put on it.
Next we need to identify the two text areas so we can access their values: you will need to use id attributes.
Now we need to define a JavaScript function which can copy a value across. Place the function in a JavaScript element. Start with a function which sets the attribute "value" of the document element with id="del_addr" to "31 Stirling Highway" as follows:
document.getElementById("del_addr").setAttribute("value","31 Stirling Highway");Note that to do this you will have to have an object, hopefully your delivery address text area, with that id.
Now replace the fixed address of UWA in that statement by getting the attribute "value" from the object with id="pur_addr". Use the method getAttribute("value") after locating that element.
Finally we must call your function from an appropriate event handler on your new button. Just add onclick="copyAddress()", if that is the name of your function, to the button.
Good luck!
Use a JavaScript loop and array to construct and fill in a table.
Suppose that I have a list of documents: title.pdf, pref.pdf, cts.pdf, intro.pdf, backgd.pdf, open.pdf and that I want to put these on the Web with links in a table on a front page.
I want you to design that front page for me with the table. It will have three columns: document number, name and a URL which links to the document. For each document there is a row as follows:
| document number | name | URL |
| 1 | title.pdf | |
| 2 | pref.pdf |
As I am going to often want to add more documents and change their order, I want you to use a JavaScript function to make the table from an array as follows:
["title","pref","cts","intro","backgd","open"]
When I need to update my list of documents, I just want to have to change this array. Your JavaScript should do everything else to update my table.
As before, please try to do this yourself and only read the following instructions or ask your tutor if you really need to.
Step 1: design the web page with a fixed example table and no use of JavaScript. Get the table's style right.
Step 2: Now we are going to replace all the rows of the table apart from the top row by ones generated by JavaScript document.write(). Use the following code to get four rows all the same.
<script type="text/javascript">
for(var i=0;i<4;i++){
document.write("<tr>");
document.write("<td> row number </td>");
document.write("<td> test.pdf </td>");
document.write("<td> put url here with a link </td>");
document.write("</tr>");
}
</script>
Step 3: See if you can replace the fixed text "row number" by some expression involving the variable i so that the rows are numbered correctly. Try "<td>"+i+"</td>" to start with although it is not quite correct.
Step 4: Add a variable for the short file name sfn="test" and use it to construct values for a long file name string (i.e. "test.pdf") and the URL.
Step 5: Fix up the URL cell with link. Recall that you will need to use single quotes. You should end up with something like: "<td><a href='"+url+"'>"+url+"</td>"
Step 6: Now define a JavaScript array before the loop:
var dns=["title","pref","cts","intro","backgd","open"];
Step 7: See if you can replace the fixed name "test" by dns[i] to get correct entries, at least for four rows.
Step 8: Finally, we need to make sure that the number of rows in the table, which depends on the number of times we go through the loop, matches the size of the dns array. In order to find that out from the array dns directly we use the length attribute of the array: dns.length. See if you can work out where to put this code.
Did you get there? Test it by varying the contents of the dns array. Well done!
Put together some of the ideas from the earlier exercises to make a web page which displays your class timetable for the current week (i.e. the week that you view the page).
Something like the following would be good:
| Mon 20 | Tue 21 | Wed 22 | Thu 23 | Fri 24 | ||
| 9am | WT Lab | 9am | ||||
| 10am | WT Lab | SED Lect | Java Lect | 10am | ||
| 11am | WT Lab | 11am |
Note that to do this you will need some programming skill, some time and to look up some JavaScript constructs.
Again, here is a good opportunity for you to
Note, if you try to use the code in the lecture notes, it is better to write the code up again for getting yourself familiarise with the syntax of HTML and CSS. Moreover, cut and paste from the powerpoint program will give you problems, as the quotation marks in powerpoint are not recognised in plain text files. This subtle difference of the quotation marks may make you think that the lecture examples do not work. So if you do cut and paste, make sure to replace all the quotation marks by the just entering normal quotation marks through the keyboard.
Website Feedback:
wei(at)csse(dot)uwa(dot)edu(dot)au