Separation of Statements

1. Separation of Statements • 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.

2. 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!");

3. The Truth About White Space • 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.

4. 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.

5. Review • Separation of statements • Breaking up a code line • The Truth About White Space • Practice

6. 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.";

7. JavaScript Variables • 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)

8. 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"';

9. Practice 2 (20%): • 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: • favorite color • age • number of slices of pizza I can eat • least favorite school subject • what I want to do when I get older • Place a comment after each variable explaining it.

10. Review • JavaScript Comments • JavaScript variables • JavaScript Strings • Practice

11. JavaScript Numbers • 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.

12. 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};

13. JavaScript Functions • 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.

14. 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.

15. Review • JavaScript Numbers • JavaScript Objects • JavaScript Functions • Practice

16. 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.

17. Loops • 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

18. 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.

19. Practice 4 (20%): • 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.

20. Review • JavaScript Function Syntax • Loops • Using the for loop to see lots of colors • Practice

21. Generating HTML code with JavaScript • 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.

22. 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.

23. Rubric Part 1(5 points each) • 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

24. 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

25. Review • Generating HTML code with JavaScript • Practice • Rubric 1 • Rubric 2