JavaScript is a sequence of statements. Every statement is executed by the browser in the order that they are written in. In order to separate these statements a semicolon(;) is used. The semicolon should be at the end of each executable statement. It even lets you place many statements on just one line.

Separation of Statements

BREAKING UP A CODE LINE A code line within a text string can be

broken with a backslash. An example of this is shown below:

document.write("Hello \World!");

This is an example of what not to do when trying to break up a code line:

document.write \("Hello World!");

When using JavaScript, it ignores extra spaces. This means that the extra spaces won’t really space out your end result or webpage. However, this white space can make your script more readable. This is a good idea because your script can be organized in an easy to edit way. It can make it easer to fix when a mistake has been made.

The Truth About White Space

PRACTICE 1 (20%): Create a web page named after this unit

number (21.htm) and demonstrate the following:

Show the word “Hello!” when the web page loads.

Write a sentence that correctly breaks up text with a backslash.

Demonstrate how white space does not affect the script.

Demonstrate your knowledge of HTML using items shown in previous units to write words with different font sizes and colors.

Separation of statements Breaking up a code line The Truth About White Space Practice

Review

JAVASCRIPT COMMENTS Comments can be very beneficial when using

JavaScript. It is important to recognize that comments will not be executed in JavaScript. They are solely to explain the JavaScript and label certain parts of the script so that they are easier to find. When placing single line comments you need to start with”//”.

An example of two comments is shown below:

// Write to a heading:document.getElementById("myH1").innerHTML="Welcome to my Homepage";// Write to a paragraph:document.getElementById("myP").innerHTML="This is my first paragraph.";

In JavaScript there are letters called variables that help store information. Just like in Algebra these letters hold information like x=2. besides holding numbers variables can also hold information in text values such as names and other words. For example, var person="John Doe";.

Some facts about variables are shown below:

Variable names must begin with a letter

Variable names can also begin with $ and _ (but we will not use it)

Variable names are case sensitive (y and Y are different variables)

JavaScript Variables

JAVASCRIPT STRINGS

A string is a variable which stores a series of characters like "John Doe".

A string can be any text inside quotes. You can use single or double quotes:

Some examples are shown below: var carname="Volvo XC60";

var carname='Volvo XC60';

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Examples are shown below: var answer="It's alright";

var answer="He is called 'Johnny'";var answer='He is called "Johnny"';

Add comments to each line added in practice 1 to explain what you did.

Declare variables about your self starting with these and adding as many as you can about yourself:

1. favorite color2. age3. number of slices of pizza I can eat4. least favorite school subject5. what I want to do when I get older Place a comment after each variable explaining it.

Practice 2 (20%):

REVIEW JavaScript Comments JavaScript variables JavaScript Strings Practice

JavaScript has only one type of numbers. Numbers can be written with, or without decimals:

Examples are shown below:

var x1=34.00;      // Written with decimalsvar x2=34;         // Written without decimals

Extra large or extra small numbers can be written with scientific (exponential) notation:

Examples are shown below:

var y=123e5;      // 12300000var z=123e-5;     // 0.00123

Numbers can be used when dealing with any types of quantities you deal with in JavaScript.

JavaScript Numbers

JAVASCRIPT OBJECTS

An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas:

Ex:var person={firstname:"John", lastname:"Doe", id:5566};

The object (person) in the example above has 3 properties: firstname, lastname, and id.

Spaces and line breaks are not important. Your declaration can span multiple lines:

var person={firstname : "John",lastname  : "Doe",id        :  5566};

A function is a block of code that will be executed when "someone" calls it: An example of a function is shown below: <!DOCTYPE html>

<html><head><script>function myFunction(){alert("Hello World!");}</script></head>

<body><button onclick="myFunction()">Try it</button></body></html>

As you can see the function must start with <!DOCTYPE html> and end with </html> in order to work.

JavaScript Functions

PRACTICE 3 (20%): Make a function that creates an object

called person. In the function add as many attributes

as you can think of to the person object. Have all the attributes of the person

print out in an appropriate way.

JavaScript Numbers JavaScript Objects JavaScript Functions Practice

Review

JAVASCRIPT FUNCTION SYNTAX

A function is written as a code block (inside curly { } braces), preceded by the function keyword:

function functionname(){some code to be executed}

The code inside the function will be executed when "someone" calls the function.

The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from "anywhere" by JavaScript code.

Computers love to repeat things. If you set it up right, a computer will do the same thing over and over and over and over again. A for loop is great for telling a computer to do a lot of stuff.

Check out this web site to see how it is done:

http://www.w3schools.com/js/js_loop_for.asp

Loops

USING THE FOR LOOP TO SEE LOTS OF COLORS. You can use the variables to send

information to the HTML page. This technique can work to display many colors. The computer set up many colors based on numbers. In addition to the color pink the computer can also do color FFEBF6. The colors increase based on hex code, but we can stick to 10 base for now.

Create a loop to display as many colors as possible on the page.

Have the HTML use the for loop to fill the page.

Have a large part of the page display different colored text so the screen is completely filled.

Practice 4 (20%):

REVIEW JavaScript Function Syntax Loops Using the for loop to see lots of colors Practice

Using the techniques shown in this unit, a programmer can generate web pages that are customized. In our last unit we made a web page that can be marketable. All the lines that we made can be written using the JavaScript document.write command.

Generating HTML code with JavaScript

PRACTICE 5(20%): Use the techniques learned in this unit

to rewrite the HTML from unit 20 and have the page created using a series of document.write commands.

Write a paragraph to show up on the page explaining what you have done.

Print Hello to page Break up a sentence with backslash Demonstrate how whitespace doesn’t matter Show font size/color

Add comments to previous items Declare 5 or more variables on self Declare another 5 Place a comment after each variable explaining it.

Make function for object person. The function works Function has object for person’s attributes Function prints objects to the screen

Rubric Part 1(5 points each)

RUBRIC PART 2 (5 POINTS EACH) Create a loop to display as many colors

as possible on the page. Have the HTML use the for loop to fill

the page. Have a large part of the page display

different colored text so the screen is completely filled.

Part of a paragraph describing what done

Complete paragraph describing what done

Generating HTML code with JavaScript Practice Rubric 1 Rubric 2

Review