MCS-170 The Nature of Computer Science

Chapter 4

1. Dynamic Web Pages Using JavaScript

Overview

Dynamic vs Static Pages
Programming Languages
Using JavaScript to write HTML text
Variables
Prompting for User Input

2. Dynamic vs Static Pages

HTML tags, when formatted on a browser, create a static page - once formatted the page never changes.
1995 Brendan Eich, of Netscape Communications Corporation, developed a simple programming language called JavaScript, whcih would allow dynamic changes to a page based on user input.

3. Programming Language

Language with statements (instructions) that a computer can execute.
General Purpose Programming Language: Instructions to control a wide variety of computer activities, provides greatest set of tools for solving a range of tasks: word processing, spreadsheets, audio/video, database, scientific modeling, etc. (Java, C++, C)

Special Purpose Language: Instructions in a narrow range of applicability to solve a particular task. JavaScript is desgned to allow real-time modification to Web pages.

4. Using JavaScript

Start with a normal HTML page
JavaScript instructions are designated with a new Tag: <script> </script>

JavaScript instructions go between these tags
<script> tag has attribute of type="text/javascript"
Every JavaScript instruction must end with a semi-colon

Example

<html>
    <head>
       <title> My First JavaScript Page </title>
    </head>

               <body>
                           <h1> Here is some JavaScript-generated text: </h1>
                           <script type="text/javascript">
                               document.write("<i> Message generated on-the-fly</i> ");
                           </script>
                       </body>
                     </html>

Here's how it looks -- jsEx1.html

5. Our First JavaScript Statement (instruction)

document.write("<i>Message generated on-the-fly</i>");
Used to write HTML code to a Web page
Has same result as if we typed in the HTML code directly
document.write is a JavaScript function -- it takes whatever is in the parentheses as input and carries out an action, in this case formatting the HTML code on the page.

6. Variables

Variables are used to reference storage spaces for data
Computer Memory as "Storage Boxes"
Variable name is used to refer to a box. Use the name to put info in box and to get it back out.

variables

Variable Declaration - creates space in memory for variable
Variable Initialization - puts a value into space for first time
Variable Assignment - puts new value into space
Variable Reference - retrieves value from space
Example

<script type="text/javascript">

    var name;                                     // Declaration
name = "bugs";                            // Initialization
    document.write("<i> Hello " + name + " </i> ");   // Reference
</script>

Concatenation -- we can join together several "strings" by using the "+" symbol.

7. Prompts for User Input

Use prompt() function to get user input
Two parameters: prompt("Question to User", "Default text for input");
Example:

<script type="text/javascript">
       name = prompt("Please enter your name", "name goes here");
       document.write("Hello " + name + ", how are you?");
       feeling = prompt("Please enter how you are feeling", "");
       document.write("<p>Try smiling while you are " + feeling +".</p>");
    </script>

Here's how it works on a page -- simpleProg.html