CTI It130 Lecture Notes 4.

Lecture Summary 4

Prepared by: Anthony Larrain

Introduction to JavaScript

HTML is a markup language.
JavaScript is a programming language.
A programming language is a collection of words and symbols that can be combined specifying instructions that a computer can execute.
You can use the JavaScript language to add Dynamic content to your web pages.
Dynamic webpages can change their appearance each time you visit the page or when the user interacts with the page.
A static page looks the same and behaves the same each time you load it in the browser.
With HTML we can only write static pages.
To use JavaScript in your web pages you embed the JavaScript code in the HTML file between an openning and closing script tag.

First Example

<html> <head> <title> Greetings</title> </head> <body> <h3>First JavaScript Example</h3> <script type="text/javascript"> var name = prompt("Enter your name", ""); document.write("Greetings " + name + ", welcome to my page."); </script> <p>Here you will find all sorts of far out and groovy stuff I am into.</p> </body> </html>

greet.html

Basic Terms and Features

JavaScript is case sensitive

document and Document,

Are different words.

Each statement should end with a semicolon ';'
The words involved in writing the script are called identifiers.
Identifiers fall into three categories.

Words that we make up ... name.
Words that have special meaning in the language. These are called reserved words or key words. var
Words that other programmers make up. document prompt write

A sequence of characters enclode in quotes " " is called a String.

"Enter your name"

is an example of a String

The word prompt is a built-in word that comes with the JavaScript language that you can use to pop-up a window to get data from the user.
The word prompt is an example of a function.
Typically you can identify a function by noticing the parentheses following a name.

     prompt(.......

A function carries out a tasks. In this case pop-up a dialog box and return the information back into the program.
The symbol = is called the assignment operator. This is not the equal symbol from Math.
The purpose of the assignment operator is to give a variable a value.
A variable is a name used to store a value. You can think of a variable as a way to name the data your program will use. Since data needs to be stored in the computers memory, a variable is a way to name that memory location.
The following statement

var name = prompt("Enter your name", "");

will

Create a variable called name
Pop-up a dialog box that asks for your name.
Return the string that you enter and assign it to variable name

A variable can be used multiple times. For example the above script could have been written.

greet2.html

The following command allows you to write text to the HTML document using Javascript.

 document.write("Hello Class");

The symbol ' + ' has multiple meanings in JavaScript. One usage is for string concatenation.

 document.write("Hello " + "Class");

When an operand to plus is a variable the value of the variable is used not the variable itself.

 var name = "Class";
 document.write("Hello " + name);

The above would display

 Hello Class

Not

 Hello name

Since the document.write(... command will write text to then HTML file, you can add HTML tags to the text.

document.write("<p>Hello Class</p>);

JavaScript Variables

A variable is a location in computer memory that contains data.
The name of a Javascript variable must begin with a letter or the underscore character ' _ ' and consist entirely of letters,digits or the underscore character.
Variable names cannot contain spaces.
Valid variable names.

temperature   count    my_old_school     just4u

Invalid variable names.

2cool4school    #lookout      first number

To declare a variable we use the reserved word var
```
var temperature;
```
To give a variable a value we use the assignment operator

temperature = 68.99

Arithmetic Operators

Can use arithmetic operators to perform computations on number or variables.

+   addition
-   subtraction
*   multiplication
/   division
%   remainder

Examples

var first, second, result;

first  = 10;
second = 5;

result = first + second     // result is 15

result = first + 10         // result is 20

result = first / second     // result is 2

result = second * 3         // result is 15

result = result + 1         // result is 16

result = first % 8          // result is 2

When performing computations must beware of precedence or order of operations

Evaluate the operators within parentheses first. If parentheses are nested, evaluate the operators in the inner most pair first.
Next do, multiplication, division and modulus in the order they appear from left to right.
Then do, Addition and subtraction from left to right.

Examples

var first, second, result;

first  = 10;
second = 5;

result = first + 3 * 4    // result is 22

result = (first + 3) * 4  // result is 52

Temperature Program

Write a Javascript program that prompts the user for a temperature in Fahrenheit and converts it to Celsius. The formula is

celsius = 5/9 * (fahrenheit - 32)

The Program

<html> <head> <title> Javascript to convert Fahrenheit to Celsius</title> </head> <body style="background:orange"> <h2 style="color:maroon;font-family:verdana">Fahrenheit to Celsius Converter</h2> <script type="text/javascript"> var fahrenheit, celsius; fahrenheit = prompt("Enter temperature in Fahrenheit", ""); celsius = (5/9) * (fahrenheit - 32); document.write(fahrenheit + "F converted to Celsius is " + celsius); </script> </body> </html>

temperature1.html

The Internet and the Web