ls
ls -l
ls -lt
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.
a. In the konqueror address bar, type this:
ftp://hawkdom2\your_student_id@zorak
b. Enter your hawkmail password and create a konqueror bookmark.
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
mail -s "my .cshelp file" jchung@monmouth.edu < .cshelp
<html>
<script>
// hello world
// the classic first program
alert("hello world");
</script>
</html>
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
Due date: Wednesday, 12/10
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>
Due date: Wednesday, 12/10
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.
Due date: Wednesday, 12/10
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.
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).