Lab 1: Linux, HTML, Python Programming, and Numeric Operations

Objective: Preparing for Lab

Review Lab 0 if you don't remember how to use the lab machines.

After logging into the lab machine and opening a terminal, run labhelp

Objective: Set up for Programming

1. Open a terminal (if you haven't already).
2. Create a directory called lab1 in your cs111 directory. Your programs and the output for this lab will all be saved in the lab1 directory.
3. Copy all the files from the /csci/courses/cs111/handouts/lab1/ directory that end in .py into your lab1 directory.
   (Note: I made a shortcut for cs111 so you don't need to type the long course name.)

Objective: Introduction to the Python Interpreter (15 points)

On our system, you have two main options for writing Python programs:

1. write your programs in a text editor (e.g., emacs) and use the terminal to run Python. This is what I will tend to do in class.

   OR

2. write your programs in IDLE, using its shell to run the programs and then restart the shell to demonstrate your program working.

For your lab work, use IDLE.

Using the Interpreter in Interactive Mode

In a terminal, navigate to your directory for this lab, which you set up earlier. (The directory should be ~/cs111/lab1.)

To open Python's integrated development environment IDLE, use the command idle &

Recall: what does the & allow you to do?

You can use the interpreter in interactive mode to try out expressions before using them in a script. IDLE labels the interactive mode as "Python Shell". In IDLE, the main window--opened by default on start--is the interactive Python interpreter.

Type the following expressions at the Python interpreter prompt, one line at a time, and note what the interpreter returns:

• 26
• 1.414
• 3/4
• 3//4
• 'Hello there!'
• 'Hello ' + 'there!'
• 'Hi' * 4
• 'Hi' + 4
• 3/0
• 3 */ 4
• .1+.1+.1
• print("Hello, world!")

Save the output from the interpreter in a file called interactive_practice.out.
Make sure that this file is saved in the appropriate directory (~/cs111/lab1).
You won't see the file if you try to open the file -- make sure you select all files in the drop down box.

Using the Interpreter in Batch Mode

• Now, still in IDLE, open the file practice.py and execute the program.

  Note that the output from executing practice.py is after all the output from your earlier practice.

• Close IDLE's interactive Python window and re-execute practice.py. This has the net effect of clearing the window so as not to pollute the output you'll print out when you submit the lab.

Save the output from the interpreter in a file called practice.out. Again, make sure that this file is saved in the appropriate directory (~/cs111/lab1).

Objective: Writing Your Own First Programs

• (10 points) Copy practice.py into a file called practice2.py. Modify the program in the following ways:
  1. Change the first two print statements to display a) another expression and value in the first statement and b) that same expression that results in that value in the second statement.
  2. Change the next two print statements to print out another emotion or adjective besides "happy".
  3. Modify the comments at the top of the program appropriately.

  After you are sure that your program works and you have saved your program, start a new IDLE shell by closing the [current] shell and executing your program. Demonstrate that your program works. Save the output from the shell in a file called practice2.out.

• (10 points) Write a Python program called info.py that prints out information about yourself. The info printed should list your name, favorite pop culture icon, favorite color, and favorite dwarf (Sleepy, Sneezy, Happy, Grumpy, Dopey, Bashful, or Doc). Don't forget to document your program appropriately!

  Best practice: Use four separate print statements on four separate lines to print this information.

  The output should look something like:

  Name: Sara Sprenkle
  Favorite pop culture icon: Tina Belcher
  Favorite color: purple
  Favorite dwarf: Doc
  

  After you are sure that your program works and you have saved your program, close the IDLE shell and re-execute the program. Save the output from the shell in a file called info.out.

Objective: Arithmetic Operations in Python

1. (15 pts) This problem has several parts. You will create a program (i.e., a script) in the first step and modify it for each subsequent step. Note how the progression of steps for this problem adheres to the good development practices we dicussed in class. Submit one program and one output file. I'll know you did the steps from your comments.
   1. Create three variables (i, j, and result) to calculate and display result = i² + 3j - 5 for the case where i=7 and j=2. Your code will not look exactly like this formula. Display the result and verify that the result is what you expect. Consider if you were the user of the program and make the program display appropriate output. Put the answer/output in a comment.
   2. Change the name of the variable i to i21. Be sure to change the name everywhere the variable is used. Execute it to verify it still works.
   3. Now edit the Python script again and change the variable name to 21i. What error message do you get? Record in comments the error message and why the error message occurred.
   4. Revert your program back to a correct variable name.
   5. Make sure that a user looking at your program's execution/output would understand what the program did.
2. (10 pts) How do you measure, measure a year? The musical Rent asks how you would measure a year and suggests love as the metric. Since we don't have a primitive data type that represents love, we'll measure a year in minutes. Write a program that computes (or calculates) the number of minutes in a year and plugs it into part of the chorus of Seasons Of Love.

   Note: do not recompute the number of minutes each time it is used in the chorus. Compute the minutes once and save it in a variable that you use in the print statements.

   Output should look like (which is not exactly the same as the actual song's lyrics):

   525600 minutes, 525600 moments so dear.
   525600 minutes - how do you measure, measure a year? 
   

3. (15 pts) MLB Hall of Famers. Rickey Henderson was voted into the Major League Baseball Hall of Fame in 2009. At one time Henderson was the career leader in three major offensive categories: runs, stolen bases, and walks. (Barry Bonds passed him in walks.)

   Henderson stole 1406 bases and was caught 335 times. Lou Brock is second with 938 stolen bases and 307 caught stealing.

   Calculate and display Henderson's and Brock's successful base stealing percentages. Then, display the difference in their percentages.

   Think about how to model the problem. What are you given? What do you need to represent? Create variables for what you need to model (and think about their data types). What do you need to output?

   Note: The calculated numbers are not very pretty when displayed. We'll learn how to format the output more nicely later this term.

Objective: Using a Text Editor and Creating an HTML File (25)

We're going to create a web page using a simple text editor. Creating web pages isn't all or even most of what a computer scientist does. However, the Web is a great venue for a computer scientist to share her work with the world! (Or to create resources and information for her students.)

Use you're newly learned Unix command skills to do the following:

1. Open a new terminal. We want one terminal to be on a lab machine. The other terminal is going to be on the computer science department's web server.
2. ssh into the computer science department's web server using
   ssh -XY cs.wlu.edu

   You don't need to include your username because it's the same.

   You are now in your home directory of the web server. View the contents of your home directory. Note that you don't have a cs111 directory because this is a different server.

3. Create a public_html directory. This is where you will put files that you want others to see on the Internet.
4. Go into your newly created public_html directory and view its contents (which should be nothing).
5. Copy the example.css, example.html, and example.gif files from your lab machine to the web server. (What? How?!?)
   • In the terminal on your lab machine, go into your ~/cs111/lab0 directory.
   • Confirm that you have those files in your directory. If not, copy those files from /csci/courses/cs111/handouts/lab0

     This step was supposed to be done during lab0, when we did the part of the lab starting with the slide titled "New Copy Task".

   • Copy all the files that start with example to your public_html directory on the web server, using
     scp example* username@cs.wlu.edu:public_html

     Make sure to change username to your username.

   • Similarly to before, answer yes to the questions and then enter your password (which you won't be able to see).
6. Open another tab in your browser so that you can switch between the lab instructions and your work. Point your browser at the location: https://cs.wlu.edu/~yourusername/example.html
   You should see the example web page. If you get an error message in the browser window, ask for help. If no one is around and the error message is a "permission denied" message, try executing this command in a terminal, in the public_html directory:
   chmod o+r *
   and then reloading the page. This command means "change modifiers" and is giving others read permission on those files.
7. Point your browser at the location: https://cs.wlu.edu/~yourusername/
   What do you see?
8. Copy example.html into a file named index.html. Now, point your browser to the location: https://cs.wlu.edu/~yourusername/
   What do you see?

   (For now, just recognize that index.html hides the contents of your web directory and is the default file that the web server "serves" when someone accesses a directory.)

9. Type emacs index.html &
   Possible problems:
   • If emacs opens with a "split" screen, click on the screen you want (likely the top one), then hit Ctrl+x 1. (Note that you are no longer holding down control when you hit 1.)
   • emacs may open by default on a "scratch" file. Under the "Buffers" menu, select index.html

10. Look at the file and compare it to what you saw in the browser. How are things related? For example, when you look at certain text in the HTML file, what does it look like in the browser? Or, look at it the other way: look for text you see in the browser. How is that marked up (the M in HTML) in the HTML document?

    There are some elements in the file that are just meant to give you a pretty starting point for your web pages that you don't need to understand. You can safely ignore them.

11. Edit the file so that the title (between the <title> and </title> tags) and the top-level heading (between the <h1> and </h1> tags) say Your Name's Web Page instead of Example Web Page. Save the file. Reload the page in the browser.
    How cool is that?
12. In your web browser, view the source for the web page. You can do this by right-clicking on the page and then you'll see "View Page Source" or something similar. Viewing the source is another way to help you find errors in your HTML.

    In another tab in your browser, go to the W&L web page or another page of your choice, and view its source. Anyone can view any page's HTML source!

13. Add two more links to the page.
    1. The first link will be to the CSCI111 student sitting to your right--perhaps that person is across the aisle. If you're in the rightmost chair, you'll link to the leftmost person in the row behind you. If you're the back, rightmost person, you'll link to the leftmost person in the front row.

       Find out the person's full name, username, and year (for all but first years) to create the link. The text for the link should include the student's full name and year, e.g, "Class of 2026" too.

       In the end, we will have created a "ring" of CSCI111 students!

    2. The second link will be to some online news article about computer science. See the Extra Credit page for ideas on how to find such an article. You may want to search for an article after lab, depending on your time constraints because we still have a lot to do in this lab.

    Note the pattern of the links in the HTML file. How would you create a link to CNN? (You will perform similar activities throughout the course. You'll look at example code that does something similar to what you want to do, copy the code, and modify the code to do what you want.)

14. Next, add an image to your web page. Find an image from the web. Yes, you are likely violating some copyrights, but it's for educational use, so you should be okay.

    This gets a little tricky, but we'll try.

    1. In your terminal on the web server, make sure you're in your public_html directory.
    2. Get the URL of your image. Typically, you can right-click on an image and there is an option to "View the Image in its own tab" or similar functionality. Copy that URL.
    3. Back in the terminal on the web server, run the command
       wget the-url-you-just-copied

       wget is a non interactive network downloader. We're using it to get an image by its URL.

    4. View the contents of your directory. It should now contain the image.
    5. If the image has an "ugly" name, rename it using the mv command, for example: mv original_ugly_name.jpg newname.jpg Make sure that the image name has the same extension as the original name. Make sure that the image was sasved in the appropriate directory.
15. Change the image (img) tag in your web page to display this image. The alt attribute is used by screenreaders to describe the image to blind people. If you want to change the size of the image, use the width attribute, e.g., width="300" would make the width of the image 300 pixels.
16. Don't forget to update the information at the bottom of the page as well, to give yourself credit for your work.

    Note that you didn't need any fancy software to create a nice web page! I create my web pages for the course in a similar manner.

Finishing up: What to turn in for this lab

You should be in the terminal (not the Python shell) to execute the following commands. You should be in your cs111/ directory.

1. If you're not already, go into your cs111 directory. Create the printable file of your lab using the command:
   createPrintableLab <labname>
   In this case, the lab name is lab1.

   Putting it all together, the command you should execute is
   createPrintableLab lab1

   The script createPrintableLab creates a condensed version of your lab in a postscript file called lab1.ps and then converts the file to pdf in lab1.pdf. To save paper, the script puts two pages on a piece of paper. The script also highlights the Python code appropriately.

   View the compiled printout using the command evince lab1.ps &
   evince allows you to view postscript files, which are suitable for printing. You should verify that the file "looks correct", i.e., no "garbage characters" and that your file is not be more than a few pages. Otherwise, you're printing too much. See the instructor or student assistant if you're having trouble.

   Review your printout with Professor Sprenkle before moving on OR, complete the next step and let her know that you have submitted your file so she can check it out.
   If you make changes to your files, you should run the script to create a printable lab and the turnin script.

   Cleanup: emacs, jEdit, and IDLE may make backup files. The backup files have an "~" appended to the name of your file. When printing, if you see any files that end in ~, tell us and we will help you delete the files. Don't worry if you don't have these files.

2. Submit your lab1 directory to your turnin directory so that I can see your files by running the command turnin lab1
   If everything is set up correctly, you copied your lab1 directory PLUS the printable lab as a PDF into your turnin directory. If you run the script again, it will create a backup of the previous submission and copy your current directory.
3. Print out your lab submission. Open up evince again using evince lab1.ps Select the print icon and choose to print to HPLaserJetIntroLab (If you're in the advanced lab, choose HPLaserJetAdvancedLab. It should be the default printer selected if you're in the lab.)
4. Write out and sign the honor pledge on the print out. Staple all pages together.

Labs are due at the beginning of Friday's class. The electronic version should be in the turnin directory before 9:40 a.m. on Friday.

Ask well before the deadline if you need help turning in your assignment!

Grading (100 pts)

• Using IDLE: 15 pts
• Python programs: 60 pts
• Web page: 25 pts