Lab 7: Javascript

Initial set up

1. You have a file, 'Lab-7-start.zip' in your ICON. Download that. Copy it on your desktop. 
2. Remember to extract the file. Right click on the .zip file and click 'Extract all'. Now, you will have a folder named 'Lab-7-start'.
3. Go to the folder 'Lab-7-start'. 
4. To view the design: Right click on 'start-bean.html' - click 'Open with' - click 'Google chrome'.
5. To view the code: Right click on 'start-bean.html' and click 'Edit with Notepad++'. Now you will see the HTML/Javascript code. 
6. Now, you can edit in two ways:
1. Edit the Notepad++ and view the changes on browser by refreshing it
2. Or, copy all the code in your Notepad++ and paste them here http://codepen.io/pen/ and view the changes interactively. 

Know what you have!

1. Remember this? This is CSS. Click here for a quick intro. This is the place you'll focus if you want to change the styles like background image, colors etc.

<style type="text/css">

    body {background-color:saddlebrown; 

               color:darkorange; 

               font-family:helvetica; 

               text-align:center}

 

    table {margin-left:auto; 

               margin-right:auto; 

               text-align:center; 

               background-color:#993300; 

               border-style:solid; 

               border-color:firebrick; 

               border-width:medium; padding:8px }

</style>

2. Assign variables inside <script> tag which you'll be using in your code.

<script type="text/javascript"> 

       var shots=1; 

       var drink="none"; 

 </script>

3. HTML Forms

form tag: HTML forms are used to collect user input. 

action attribute: The action attribute specifies where to send the form-data when a form is submitted.

<form action="" > 

4. HTML table

The <table> tag defines an HTML table. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. More info on tables.

The <input> tag specifies an input field where the user can enter data. The type attribute specifies the type of <input> element to display. The default type is: text. More info on input tag attributes.

The value attribute is used differently for different input types:

• For "button", "reset", and "submit" - it defines the text on the button
• For "text", "password", and "hidden" - it defines the initial (default) value of the input field
• For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit). 

The onclick attribute fires on a mouse click on the element. Here, on mouse click, shots variable is assigned with value 1. More info on HTML event attribute.

<table>

    <tr>

    <td><input type="button" value="1" onclick='shots=1'/></td>

......

5. More on onclick..

onclick can also be used to define a set of instructions (commonly called as 'function').

<td><input type="button" value="Total" onclick=

          
           'var price;                                        //initialize a variable 'price'

var taxRate=0.088;  //initialize a variable 'taxRate' with a initial value = 0.088

if (drink == "espresso") 

           //'if' is a conditional statement. If the variable drink's value is "espresso", then assign the variable //price to 1.40

  price=1.40; 

.......... 

6. Final note:

document.forms[0].total.value="0.00" means, Get the value of 'total'(variable) from the  <form> element (index 0 - first) in the document. More on DOM (Document Object Model).

7. Now that we have a good idea about HTML/CSS/Javascript, follow the instructions below and modify your initial html document to complete your Lab assignment 7.

1) Put a background image on the page that tiles over the whole page. (2 points) Reference link

2) Write appropriate text for titles and buttons. (2 points)

3) Change all table colors, margins. Change all text colors. (2 points)

4) Change identifiers and variable names to descriptive names. Substitute “drink” and “shots” “espresso” etc. with appropriate names. (3 points for variable names, 1 point for the rest)

5) Change price value. (1 point)

6) Computations must work. (2 points)

7) Transfer the page to the MyWeb server and submit a working web link to the page. (3 points)

In the end, if you click any item (Ice cream/Frozen Yogurt/Cookies) and click 'Total' button, it should give you a result like below: