Table of Contents
Intro to UNIX and Simple Web Page Enhancements with JavaScript
First, a CS UNIX / Linux Survival Guide
- All Javascript work in class will be done in Linux.
- CS 175 will be taught in Linux, so you should get used to it.
- Start Firefox and browse this page at http://rockhopper.monmouth.edu/cs/jchung/cs102/cs_102_javascript
- Open a terminal.
Edit files with gvim, nedit, gedit or kate
- “leet hax0r” (elite hacker) level
- vim: a variant of VI
- “hax0r” (hacker) level
- gvim: a GUI-fied version of VI
- Windows notepad user level
- gedit, nedit, kate
Working in a terminal
- In the terminal, you are using a shell or command interpretor or command line interface (CLI).
- What you type in the shell is interpreted as a command.
- Type these commands and note the effects:
ls ls -l ls -lt
- Change the shell's behavior by changing the shell profile.
a) Open a new tab in the terminal (shift-control-t). b) Type this command (don't forget the dot in .profile): gedit .profile (The dot in .profile makes .profile a hidden file in UNIX.) c) In the gedit window, scroll to the end of .profile. Hit <enter> a couple of times to add blank lines at the end of the file. Type in the following lines. Then, save the file and exit gedit: # Run fortune if Linux if [ $(uname) = "Linux" ] then echo /usr/games/fortune 2> /dev/null || /usr/bin/fortune fi d) Start a new terminal. The shell should now give you a fortune cookie each time you open a terminal. (You can also get a fortune by just typing the fortune command in the terminal session.) This demonstrates that changing the shell profile changes the shell's behavior.
Using the mouse in the X Window system
- The left mouse button can be used to copy text to a clipboard. Click and highlight a line of text in Firefox.
- Switch to a terminal window and hit <shift><insert> on the keyboard to paste.
- Can also use the middle mouse button (scroll wheel) to paste.
Managing files
- Basic Unix commands for managing files: ls (list), cp (copy), mv (rename), mkdir (make directory), rm (delete)
- Or just use a GUI file manager like konqueror.
- From the Linux task bar, launch konqueror.
Accessing files on zorak (your M: drive)
- Use ftp
a. In the konqueror address bar, type this: ftp://hawkdom2\your_student_id@zorak b. Enter your hawkmail password and create a konqueror bookmark.
Create a personal Linux help file (.cshelp)
- Want to be made aware of it each time you open a terminal
- Want to display it with the cshelp command
- Want to be able to update it with the cshelpupdate command
a. In a terminal window, type this command again: gedit .profile b. Scroll the blinking cursor down to the end of the file. Hit <enter> a couple of times to add blank lines. Type or copy / paste in the following text: echo Type "cshelp" to view your help file. echo Type "cshelpupdate" to edit your help file. alias cshelp='cat ~/.cshelp' alias cshelpupdate='gedit ~/.cshelp' Save the file and exit gedit. c. In a terminal window, type this command: gedit .cshelp d. Copy and paste the following text into gedit. MY CS LINUX HELP FILE * leet hax0r editors vim, gvim * User-friendly editors gedit * Listing files ls ls -l (list file attributes) ls -lt (list newest files first) * Lock the screen xlock * Logout fast Use "Logout Fast" from IceWM menu or <control><alt><backspace> at the same time * Access floppies, CDs, USB drives Insert floppy, access the /floppy/floppy0 directory Insert CD, access the /cdrom/cdrom0 directory Insert USB drive, access the /usb/usb0 directory * X Window system copy and paste Left mouse button to select and copy Middle mouse button to paste * Access previously used shell commands Press the <up arrow> and <down arrow> keys * File manager Use konqueror ftp to zorak with ftp://hawkdom2\my_student_id@zorak * Chat gaim * Listen to CDs grip * Surf firefox, mozilla, konqueror * Edit my webpage (public_html dir) kompozer, mozilla composer, nvu * Open Word / Excel / Powerpoint files oowriter * Print files from a terminal lpr file_name enscript file_name * Mail a file from a terminal mail -s "my subject" recipient_email_address < file_name
- Save the file and exit gedit. Email me your .cshelp file with the following command:
mail -s "my .cshelp file" jchung@monmouth.edu < .cshelp
Javascript basics
- Javascript programs are embedded in html documents using the <script></script> tag.
<html> <script> // hello world // the classic first program alert("hello world"); </script> </html>
- Syntax is similar to C / C++ / Java.
- Basic popup user input using the prompt statement
- Basic popup output using the alert statement
- Simple variable declaration using the var statement
- Variables are assigned values using the assignment operator, =.
- Default type of variables is string.
- String concatenation is done using the addition operator, +.
- Conversion from a string variable to a numeric variable is done using the eval statement.
- Object-based features: object methods and object properties
- The stringName.length property of the stringName object contains the length of the string.
- The stringName.toUpperCase() method of the stringName object converts the contents of the string to all upper case.
JavaScript lab assignments
JavaScript Lab 1
Due date: Friday, 12/5
(It's important that you complete the following exercise in Linux using gedit. Don't use Windows for this exercise. You can use X Window system cut-and-paste here.)
1. Create separate html files containing the following simple Javascript code examples and save them in your public_html directory:
a. Save as hellojoe.html
<html> <head> <title>Hello Joe</title> </head> <body> <h1>Hello, Joe</h1> <script> // hello Joe // Demonstrate basic variable concepts var greeting; greeting = "Hi there, Joe"; alert(greeting); </script> </body> </html>
b. Save as hellouser.html
<html> <head> <title>Hello User</title> </head> <body> <h1>Hello, User</h1> <script> // hello user // ask user for name var username; username = prompt("What is your name?"); alert(username); </script> </body> </html>
c. Save as concat.html
<html> <head> <title>Concatenation</title> </head> <body> <h1>Concatenation</h1> <script> // concatenation // combining strings var username; username = prompt("What is your name?"); alert("Hello, " + username + "!!"); </script> </body> </html>
d. Save as goodadd.html
<html> <head> <title>Goodadd</title> </head> <body> <h1>The Goodadd</h1> <script> // Goodadd // Demonstrates eval function var meal; //get the cost of the meal from the user meal = prompt("How much was the meal?"); //convert the value to a number meal = eval(meal); var tip = meal * .15; var total = meal + tip; alert ("the meal is $" + meal); alert ("the tip is $" + tip); alert ("Total bill: $" + total); </script> </body> </html>
e. Save as namegame.html
<html> <head> <title>The Name Game</title> </head> <body> <center> <h1>The Name Game</h1> <script> //namegame //plays around with user's name //uses string methods var firstname = ""; var lastname = ""; var numletters = 0; firstname = prompt("Hi, what's your first name?", ""); alert ("That's a nice name, " + firstname); alert ("I think I'll shout it: " + firstname.toUpperCase()); lastname = prompt("So what's your last name, " + firstname + "?"); alert ("Oh. " + firstname + " " + lastname + "."); alert ("Sometimes called " + lastname + ", " + firstname); numletters = firstname.length + lastname.length; alert ("Did you know there are " + numletters + " letters in your name?"); </script> </body> </html>
Using a Linux html editor (suggestion: use kompozer), create a section on your course journal, cs102.html called “Javascript examples” that contain links to the above separate html files.
For the following, we'll look at some simple Javascript examples at
http://www.w3schools.com/js/js_examples.asp
and apply the techniques to your student web pages.
Important: Before doing anything, make a backup copy of your public_html/index.html file. You can use the konqueror file manager to do this or run the following commands in a Terminal.
$ cp public_html/index.html public_html/index.html.bak
JavaScript Lab 2
Due date: Wednesday, 12/10
- Display the day of the week, current date and current time on your student web page using the Javascript Date() function
Using gedit, edit your public_html/index.html file and insert the following lines right after the <body> tag:
<script type="text/javascript"> document.write( "The current date and time: " + Date() ) </script>
- document.write inserts the text The current date and time: and the output from the Javascript Date() function into the current html document.
- The + operator allows you to concatenate two strings together.
Javascript Lab 3
Due date: Wednesday, 12/10
- Display a random quote on your student web page using an external Javascript program.
- references:
- external Javascripts - http://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexample
- random numbers - http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink
1. Using gedit, edit a new file randomquote.js and save it to your public_html directory. The contents of randomquote.js should look like this (copy and paste from here into gedit):
// Display one of 10 random fortunes from Linux 'fortune'. // This returns a random integer between 0 and 9 // and assigns it to the whichQuote variable var whichQuote = Math.round( Math.random() * 9 ); // Create a 10 element string array called 'quote' var quote = new Array(10); // Put each quote in an array element. quote[ 0 ] = "<Run the 'fortune' command in a Terminal, and paste shorter fortunes here>" quote[ 1 ] = ""; quote[ 2 ] = ""; quote[ 3 ] = ""; quote[ 4 ] = ""; quote[ 5 ] = ""; quote[ 6 ] = ""; quote[ 7 ] = ""; quote[ 8 ] = ""; quote[ 9 ] = ""; // Insert the randomly selected quote into the current html document. document.write( "A random quote:<br>" ); document.write( quote[ whichQuote ] );
2. Open a Terminal and run
$ fortune -s -n 90
to display less-than-90-character fortunes. Or copy and paste this command into Terminal to display five short fortunes at a time:
$ for i in $(seq 5); do fortune -s -n 90; echo; done
Copy and paste 10 fortunes that you like into randomquote.js like this:
quote[ 0 ] = "Q: Why did the chicken cross the road?<br>A: He was giving it last rites.";
NOTE: Insert <br> html tags in the quotes to break it up into separate lines. Single (')and double quotation marks (“) have to preceeded by a \ symbol like this:
quote[ 1 ] = "Don\'t look now, but there is a multi-legged creature on your shoulder."; quote[ 2 ] = "Did you know that clones never use mirrors?<br>-- Ambrose Bierce, \"The Devil\'s Dictionary\"";
3. Using gedit, edit your public_html/index.html file and insert the following line somewhere after you inserted the current date in JavaScript Lab 2:
<p><script src="randomquote.js"></script>
This calls the external Javascript, randomquote.js from index.html. Save index.html and reload your page.
Javascript Lab 4
Due date: Wednesday, 12/10
- Randomly choose the image that will be displayed on your page.
- references:
- random numbers - http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink
Find and download at least 2 more clean images into your public_html directory.
Using gedit, edit your public_html/index.html file and find the line that is currently loading an image in your web page. It should contain the
<img src=
or
<img alt= src=
tags.
Substitute the following lines:
<p><script type="text/javascript"> // Get a random integer b/w 0 and 2 and assign to the // whichImg variable. var whichImg = Math.round( Math.random() * 2 ); // Create a 3 element array called 'image' var image = new Array(3); image[ 0 ] = ""; image[ 1 ] = ""; image[ 2 ] = ""; // Use document.write to insert html tags to display a // randomly selected and centered image document.write( "<center><img src=" + image[ whichImg ] + "></center>" ) </script>
Insert your image file names between the quotes after “image[ ] =” like this:
image[ 0 ] = "lolcat1.jpg"; image[ 1 ] = "epicfail1.jpg"; image[ 2 ] = "mydreamcar.jpg";
Save index.html. Reload your homepage to check the result.
Javascript Lab 5
Due date: Wednesday, 12/10
Objective: Create a new page call polarplots.html that contains thumbnail versions of the charts from Spreadsheet lab 5. Moving the mouse pointer over each thumbnail image should display the full size version of the image using JavaScript.
1. Create image files.
Log into your UNIX account. Using the Gnumeric Spreadsheet (run 'gnumeric'), find and open your Excel lab 8 file in your CS 102 folder. If you never completed Excel lab 8, borrow this one:
http://rockhopper.monmouth.edu/~jchung/cs102/sp05/grade/excel/aku/cs102excellab8.xls
Select and save each of the 4 charts as a separate PNG file, e.g. limacon.png, spiral.png, cycloid.png, rose.png . Save them all to your public_html directory.
2. Create thumbnail (small) versions of the image files.
Use konqueror to make copies of the .png files created in step 1. The copies should have ”-small“ appended to the file name, e.g. limacon-small.png, spiral-small.png.
Open a Terminal, and use the 'mogrify' command to shrink a copy of each image down to 20% of its original size: (for example)
$ cd ~/public_html $ mogrify -scale 20% *-small.png
This scales all the small files to 20% of the original size. You can use konqueror to view the large and small versions of the images.
3. Insert JavaScript needed to do the job.
Create a new html file polarplots.html in your public_html directory. Insert something like the following in polarplots.html (This works for 2 images, so you'll have to expand it for your 4 images):
<script language="javascript"> Img1 = new Image Img1.src = "image1.png" Img1s = new Image Img1s.src = "image1-small.png" Img2 = new Image Img2.src = "image2.png" Img2s = new Image Img2s.src = "image2-small.png" function switchimage(imgDocID,imgObjName) { document[imgDocID].src = eval(imgObjName + ".src"); } </script> <a HREF="javascript:void(0)" onmouseover="switchimage('Pic1','Img1');" onmouseout="switchimage('Pic1','Img1s');"> <img src="image1-small.png" name="Pic1"></a> <hr> <a HREF="javascript:void(0)" onmouseover="switchimage('Pic2','Img2');" onmouseout="switchimage('Pic2','Img2s');"> <img src="image2-small.png" name="Pic2"></a>
4. Create a link to polarplots.html
Create the link in your cs102.html (journal).