COMP1710/Labs : COMP1710 : Laboratory 7 : JavaScript

COMP1710 : Laboratory 7 : JavaScript

Version of the lab from 2004 (detailed description of a validated form)

Correction : Some tips

1. Objectives

This week lab is about Javascript. The tasks is to adapt some existing scripts to different situation : set up a rollover picture, check the content of a form, switch from one CSS to another ...

If you want to be ready for it, read (and experiment with) the text book "The Web Wizard's Guide to JavaScript"

Additional reference :

2. Tasks

2.0 Task0

Make sure you have read the text book, or the online slides

As usual now, create a directory named LABn_Uxxxxxxx where you will put today work. Include an index.html file that will link directly or indirectly to all the html pages you will create. There should be a link to that page in all the pages you will create. There should be your name and a mailto link to your email at the bottom of all your pages.

Important : you should make sure to include a special page named source.html or log.html with the list of media you used in your lab, with the type of modification you have done. Please read the rule about borrowing data in the context of COMP1710 labs and assignment

2.1 Task1 Write a Form to generate the HTML code for a link

Create a form that will generate the code for an HTML link with some control and/or reformatting of fields

Minimum set of elements in the form, with the validation scheme for each element

Hint: http://escience.anu.edu.au/lecture/comp1710/HTML/linkTwoParts.en.html

Hint 2 : Start building an HTML page with a form and its fields and then ad some javascript functions and event handlers one by one.

Use 'alert' windows or HyperEdit software to debug your javascript code (HyperEdit allows you to display the content of a chosen variable)

A) A text field for the URL

Check that the field is filled, and that the URL has the following format :
protocol://serverName/something
where

'protocol' is either http or ftp
serverName contain at least one dot in it
'://' and '/' are present

Display a warning if there is an issue (with the explanation)
Delete any space (no need for a warning : just clean the field)

Hint: listing3.2

B) A text field for the link label (what is visible to the user)

Check that the field is filled
Display a warning if there is an issue (with the explanation)
Delete space at the beginning and the end

Hint: listing3.1 and ('while' loop + 'String' methods)

C) 3 text fields for the 'name', the 'id' and the 'target' attributes

Check that they contains only alphanumeric characters
Display a warning if there is an issue (with the explanation)
Delete any space.

Hint: listing3.3

D) A select Menu

That propose to encapsulate the link into a choice of 'nothing', in a paragraph (between <p> and </p>), or as header of level 1 to 6

Hint: listing3.6

E) A text area

It will contain the generated HTML code

F) An small image used as a button

When you move your mouse over it, the various fields are checked, and if everything is OK, the generated code is written/updated into the text area

G) A button that open a new window with the page pointed by the URL when you click on it

Function : let the user check the validity of the link by looking at the web site in a different window.
Hint :

http://escience.anu.edu.au/lecture/comp1710/HTML/linkTwoParts2.en.html

http://wps.aw.com/wps/media/objects/58/60015/overview/jsbasics.html (Build a page with document.write() part)

H) A button that rewrite the following <P> element with what the link will look like

The previous text area would display the HTML code, this action should display the interpreted HTML

Hint : listing5.1.inP.html

2.2 Task2

Create two web pages and use JavaScript to detect a KeyPress event. Yo uwill then be able to swicth between the two pages whenever the keyboard space bar is pressed.

Hint : look at almost any page from the lecture notes. Note that this code is a bit old and dirty. You would rather clean it or find a better solution.

2.3 Task3

There are "just" two compulsory task in this lab, in order to deal with different student experience with programming, but if you are confident , explore the 'extra work' part

3. Conclusion

This lab was an introduction to client side programming. You should be able to use Javascript in HTML pages to validate a form, or do other basic tasks, not presented in the lab, like image swapping (rollover), display of the date and time ...

4. Extra work

Prepare a web page and, at least, two different CSS for that page. Give a way to switch from one CSS to the other.

Hints:

5. Summary to get 3 marks for this lab session

This week, you may follow exactly the same process as previous weeks to upload your work, or chose to ftp to liskov to do so.

If there is an issue with partch, you may use iwaki instead.

N.B. : For more information about the uploading and access to partch/iwaki/liskov server, please consult

http://liskov.anu.edu.au/ and http://tsg/twiki/bin/view/Documentation/StudentSettingUpWebPages

Create a directory which name is LAB7_Uxxxxxxx where xxxxxxx is your student id.
Within that directory, put the deliverables describe for this lab (see above)
Zip that directory and its contents. ( If everything is working well, the name of the zip file should be LAB7_Uxxxxxxx.zip where xxxxxxx is your ... )
open a Terminal application (within the Hard Disk / Application / Utilities)
Change your directory into the one which your zip file is in
- type cd, then a space
- drag and drop the icon of the directory that contain your zip file on the Terminal window
- press return
- type 'ls', then <return> and you will see the list of files in that directory, one of them being your zip file
Copy your file on the DCS student server 'partch' using scp
type 'scp LAB7_Uxxxxxxx.zip uxxxxxxx@partch.anu.edu.au:public_html' then <return>
You will be asked your password, the usual one. please pay attention : xxxxxxx is your student ID
Connect to the server, go to the right directory, unzip your file
- type 'ssh uxxxxxxx@partch.anu.edu.au' then <return>
  You will be asked to confirm that you want to start a secure connection, and then your password, the usual one,
- type 'cd public_html' then <return>
- type 'unzip LAB7_Uxxxxxxx.zip' then <return>
- type 'chmod -R 755 LAB7_Uxxxxxxx' then <return>
- type 'cd LAB7_Uxxxxxxx' then <return>
- type 'ls' then <return>
  check that you see a list of your file and subdirectories
take a web browser and check that your work is visible on
http://liskov.anu.edu.au/~uxxxxxxx/LAB7_Uxxxxxxx/
Keep reading up to the end : you still have to send an email with the working URL ...
- if not, there must probably be some uppercase/lowercase issue, or something like that. Make sure to send a clean URL by mail or else your lab won't be marked
- another issue could be that your account had not been properly created. Log into streams, wait for 10 min and try again.
- if it is still not working, check again, then check again, then send a mail to consultant@cs.anu.edu.au with a detailed description of what you have done.
Summary of the Shell Session (yellow part are what you have to type, each time validated by a press of the <return> key

> scp LAB7_U4032266.zip u4032266@partch.anu.edu.au:public_html
   The authenticity of host 'partch.anu.edu.au (150.203.24.13)' can't be established.
   RSA key fingerprint is c8:ad:18:32:da:37:6f:d5:72:ab:c9:8b:8e:e7:f2:59.
   Are you sure you want to continue connecting (yes/no)? yes
   Warning: Permanently added 'partch.anu.edu.au' (RSA) to the list of known hosts.
   u4032266@partch.anu.edu.au's password:  your passwd here 
   LAB7_U4032266.zip                        4% 344KB   13.7KB/s 09:46 ETA
   LAB7_U4032266.zip                      100% 8404KB   8.7KB/s   16:01                                                                                                                   100% 8404KB   8.7KB/s   16:01    

   >  ssh u4032266@partch.anu.edu.au
u4032266@partch.anu.edu.au's password:  your passwd here 

partch:~> cd public_html
partch:~/public_html> ls
 LAB7_U4032266.zip
partch:~/public_html> unzip LAB7_U4032266.zip
Archive:  LAB7_U4032266.zip
   creating: LAB7_U4032266/
   creating: LAB7_U4032266/testweb/
  inflating: LAB7_U4032266/testweb/back.gif  
  inflating: LAB7_U4032266/testweb/background.gif  
  inflating: LAB7_U4032266/testweb/forward.gif  
   creating: LAB7_U4032266/testweb/fullsize/
  inflating: LAB7_U4032266/testweb/fullsize/2004_04_17_10.02.20.jpg  
  .....
  >

Send an email to both Pascal.Vuylsteker@anu.edu.au and to your tutor such that
- The "Subject" of the email start with "COMP1710_LABn_Uxxxxxxx" (without the double quotes, all uppercase, with underscores, and where xxx... !)
- The content of the mail is
  - Some polite greetings, like "G'Day Mate, my first has been published at the following address :
    http://liskov.anu.edu.au/~uxxxxxxx/LAB7_Uxxxxxxx/
  - Make sure that the URL is working and point to your work !!!!!

Notes

If you want to learn more about scp
http://support.real-time.com/linux/web/scp.html
http://www.monkey.org/ssh/mac-osx.html
Please, send only one mail if the lecturer is also the tutor !!!
Make sure that your 'From' address is either the official ANU address (uxxxxxxx@anu.edu.au or FirstName.Surname@anu.edu.au) or start with FirstName.Surname@
Send an email to yourself first if you want to check that everything is all-right.
Always CC the email to yourself and check that you are able to properly unzip the attached file.
Marking scheme
- If you achieve to sent properly (Subject, greeting, zip file attached ...) an email and the web site contain something
- If you do most of the work and send it properly, you get 2 marks.
- If you do EVERYTHING properly and send it properly, you'll get up to 3 marks for this lab.
- To be valid, the submission has to be send the very latest 48 hours after the end the Laboratory in which you are enrolled.But you should never wait till the last minute !