====== 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: 

<code>
      ls

      ls -l

      ls -lt
</code>

    * Change the shell's behavior by changing the shell profile.

<code> 
      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.
</code>

==== 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 

<code>
       a. In the konqueror address bar, type this:

           ftp://hawkdom2\your_student_id@zorak

       b. Enter your hawkmail password and create a konqueror bookmark.
</code>

==== 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 

<code>
    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
</code>

  * 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//

<code>
 <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>
</code>

b. Save as //hellouser.html//

<code>
 <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>
</code>

c. Save as //concat.html//

<code>
 <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>
</code>

d. Save as //goodadd.html//

<code>
 <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>
</code>

e. Save as //namegame.html//

<code>
 <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>
</code>

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
          * reference: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date 

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
                * arrays - http://www.w3schools.com/js/tryit.asp?filename=tryjs_array
                * 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//):

<code>
   // 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 ] );
</code>


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:
                * arrays - http://www.w3schools.com/js/tryit.asp?filename=tryjs_array
                * 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:

<code>
   <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>
</code>


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):

<code>
   <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>
</code>

4. Create a link to polarplots.html

Create the link in your //cs102.html// (journal).

----