1. JavaScript Adding active content to websites

2. Goals Understand structure of JavaScript Understand rules of coding Add active content to WebPages Add functions to WebPages

3. JavaScript Programming language to add interactive content to pages Validate forms Utilize cookies Control browser functions Inform users

4. JavaScript Script should be placed in the section of the page JS is not HTML, you will need to make the browser aware of the code by using tag  and

5. JavaScript Rules  End each line with a semicolon ;  Text must be enclosed in quotes “ “  JS is case sensitive Upper and lower case letters are NOT the same JS is incredibly sensitive to mistakes, be extremely cautious!

6. JavaScript document.write("Welcome to my world!!!"); This will write Welcome to my world!!! In your page Not so exciting, but this can be used to write code to your page, creating massive pages with little coding massive pages with little coding

7. JavaScript JS uses variables in order to store data and execute code JS is case sensitive  Upper case and lower case are seen differently Myvariable <> myvariable <>MyVariable Use same syntax throughout

8. JavaScript Popup boxes  Not popup windows, that is a breach of netiquette Alert Confirm Prompt

9. JavaScript Alert  Used to inform user of something important Confirm  Used to confirm information, typically to redirect user to acceptable page Prompt  Used to gain information from user for use in document

10. JavaScript Alert  Alert(“text goes here”) Confirm  Confirm(“text goes here”) Prompt  Prompt(“text goes here”, “default value”)

11. JavaScript Confirms are typically written as if statements  If statements are standard programming when a choice needs to be made  If OK is selected TRUE is registered  If CANCEL is selected FALSE is registered Prompt boxes are typically used to store information in a variable

12. JavaScript Variable  Place to store information for later use Example  Username=prompt(“Enter Name”, “Name”);  Document.write(“Welcome” +username +“!”); 2 nd example  name=“my first name”;  myname=tom;  Document.write(myname);

13. JavaScript Use the equal sign (=) to assign a value to a variable  Variable can be used for input, output and mathematical operations To compare variable, use a double equal sign (==)

14. JavaScript Other comparing operators !=Not equal <Less than >Greater than <=Less than or equal to >=Greater than or equal to

15. JavaScript If statements  if (condition) {action1} else {action2} Example if (confirm("Are you home?")) {alert("Welcome Home")} else{alert("Go Away!")}; If statements can also be “nested” if (confirm("Are you home?")) {alert("Welcome Home")} else{if (confirm("Do you want to come in?")) {alert("Welcome to your new home!")} else{alert("Go Away!")};};

16. JavaScript Logical Operators  AND ( && )  Both conditions must be true if (condition && condition) {action}  OR ( || )  Either condition must be true if (condition || condition) {action}  NOT ( ! )  Inverts result of condition if (!(condition)) {action}

17. JavaScript Functions  Pre-set event that allows a script action to take place on or after specific event JS events will happen as soon as the page loads unless written in a function function myfunction() { alert(“Welcome Home!”);} Later in the page <input type=“button” value=“Press Once” onclick=“myfunction()”>

18. JavaScript General form function functionname(variable1, variable2…) { JS for actual function; }

19. JavaScript Events  JS actions are referred to as events

20. JavaScript onmouseover and onmouseout are mainly used in animating buttons  Can only be used in conjunction with tags  Idea for use Idea for use Create simple images (buttons, arrows, words) for links onclick will cause an action to happen with user action

21. JavaScript Animated Buttons  Two steps onmouseover onmouseout  Animation can only be applied to links

22. JavaScript Loops  Causes an action to happen a pre- determined amount of times  Two types For While

23. JavaScript For  Used when you know exactly how many times an action should happen While  Used to do an action until some requirement is met

24. JavaScript For for (variable=startvalue; variable<=endvalue; variable=variable+incrementfactor) { JS goes here } Helpful for writing large HTML tables that require user input  Idea: prompt box to define variable, for to give specific range of data

25. JavaScript While while (variable<=endvalue) { JS goes here } Also helpful for large tables, better suited when user input is not needed

26. JavaScript Break  Stops a loop at a specific point if (value==0) {break}; Continue  A skip in a loop for (value=-50; value "); }

27. JavaScript Array  Automatically define large amount of variables Value1=10 Value2=20 Value3=30 …. Value1000=10000 value=new Array; for (number=1; number<=100; number=number+1) { value[number]=number* 10};

28. JavaScript The name of the array, new Array, is critical  Array must be capitalized