JavaScript Missing Manual, Ch. 2

800 views

Published on

JavaScript Missing Manual, Ch. 2

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
800
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Missing Manual, Ch. 2

  1. 1. JavaScript: The Missing Manual Chapter 2: The Grammar of JavaScript Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
  2. 2. Statements <ul><li>JavaScript statement: </li></ul><ul><ul><li>a basic programming unit, usually representing a single step in a JavaScript program </li></ul></ul><ul><ul><li>combine statements to create a JavaScript program </li></ul></ul><ul><ul><li>each statement ends with a semicolon </li></ul></ul><ul><ul><ul><li>like a period at the end of a sentence </li></ul></ul></ul>Copyright 2010
  3. 3. Commands <ul><li>Commands are usually called functions or methods </li></ul><ul><ul><li>like verbs in a sentence, commands get things done </li></ul></ul><ul><li>Examples: </li></ul><ul><li>alert(); </li></ul><ul><li>document.write(); </li></ul><ul><li>Chapter 3 will focus on functions . </li></ul>Copyright 2010
  4. 4. Types of Data <ul><li>In JavaScript the three most common types of data are: </li></ul><ul><ul><li>numbers </li></ul></ul><ul><ul><li>strings </li></ul></ul><ul><ul><li>Boolean </li></ul></ul>Copyright 2010
  5. 5. Numbers <ul><li>a number is used for counting or calculating </li></ul><ul><li>Example: </li></ul><ul><li>document.write(5 + 15) </li></ul><ul><li>Result: </li></ul><ul><li>20 is written to the page </li></ul>Copyright 2010
  6. 6. Strings <ul><li>A string is simply a series of letters and other symbols enclosed inside of quote marks </li></ul><ul><ul><li>you can use either single or double quotes </li></ul></ul><ul><ul><ul><li>‘ Welcome back!’ </li></ul></ul></ul><ul><ul><ul><li>“ Welcome back!” </li></ul></ul></ul>Copyright 2010
  7. 7. Booleans <ul><li>A Boolean value is either true or false </li></ul><ul><ul><li>typically used to make decisions </li></ul></ul><ul><li>Example: </li></ul><ul><ul><li>The visitor filled in the “name” textbox . . . </li></ul></ul><ul><ul><li>true or false? </li></ul></ul>Copyright 2010
  8. 8. Variables <ul><li>A variable is a way to store information so that you can use and manipulate it </li></ul><ul><ul><li>variables hold information that can vary </li></ul></ul><ul><li>Think of a variable as a container or basket </li></ul><ul><ul><li>the container remains the same even if you change the contents of the container </li></ul></ul>Copyright 2010
  9. 9. Creating a Variable <ul><li>Two-step process: </li></ul><ul><ul><li>declare the variable </li></ul></ul><ul><ul><li>name the variable </li></ul></ul><ul><li>Example: </li></ul><ul><li>var score; </li></ul>Copyright 2010
  10. 10. Creating a Variable <ul><li>Rules: A variable name . . . </li></ul><ul><ul><li>must begin with a letter, $, or _ </li></ul></ul><ul><ul><li>can only contain letters, numbers, $, and _ </li></ul></ul><ul><ul><li>is case sensitive </li></ul></ul><ul><ul><li>must not be the same as a keyword (reserved words) </li></ul></ul><ul><ul><ul><li>Google “JavaScript keywords” </li></ul></ul></ul>Copyright 2010
  11. 11. Using Variables <ul><li>Once a variable is created you can store any type of data that you’d like in it </li></ul><ul><li>var score; </li></ul><ul><li>var name_first; </li></ul><ul><li>score = 0; </li></ul><ul><li>name_first = “Peter”; </li></ul>Copyright 2010
  12. 12. Using Variables <ul><li>Once a variable is created you can store any type of data that you’d like in it </li></ul><ul><li>var score; </li></ul><ul><li>score = 0; </li></ul><ul><li>var score = 0; </li></ul>Copyright 2010 assignment operator
  13. 13. Data Types & Variables <ul><li>Operator – a symbol or word that can change one or more values into something else </li></ul><ul><ul><li>used to modify data </li></ul></ul>Copyright 2010
  14. 14. Basic Math <ul><li>Math Operators: </li></ul>Copyright 2010 Result Example Operator 3 15 / 5 / 50 5 * 10 * 20 25 - 5 - 30 5 + 25 +
  15. 15. Order of Operations <ul><li>Some operations take precedence over others . . . </li></ul><ul><li>Multiplication (*) and division (/) </li></ul><ul><li> takes precedence over </li></ul><ul><li>addition (+) and subtraction (-) </li></ul>Copyright 2010
  16. 16. Order of Operations <ul><li>Use parentheses to group operations </li></ul><ul><li>Example: </li></ul><ul><li>4 + 5 * 10 result: 54 </li></ul><ul><li>(4 + 5) * 10 result: 90 </li></ul>Copyright 2010
  17. 17. Combining Strings <ul><li>Concatenation – combining strings by using the + operator </li></ul><ul><li>var name_first = “Peter”; </li></ul><ul><li>var name_last = “Kery”; </li></ul><ul><li>var full_name = name_first + name_last; </li></ul>Copyright 2010
  18. 18. Combining Numbers & Strings Copyright 2010
  19. 19. Changing the Values in Variables <ul><li>Example: </li></ul><ul><li>var score = 0; </li></ul><ul><li>score = score + 100; </li></ul>Copyright 2010
  20. 20. Shortcuts for Performing Math Copyright 2010 score = score + 1; score ++; ++ score = score / 10; score /= 10; /= score = score * 10; score *= 10; *= score = score - 1; score --; -- score = score - 10; score -= 10; -= score = score + 10; score += 10; += Alternate Example Operator
  21. 21. Tutorial #1 <ul><li>Using variables to create messages: </li></ul><ul><li>open file 2.1.html </li></ul><ul><li>add a <script> element </li></ul><ul><li>create two variables for first and last name </li></ul><ul><li>add three document.write statements to print out the full name in a paragraph </li></ul><ul><ul><li>2.1.html </li></ul></ul>Copyright 2010
  22. 22. Tutorial #2 <ul><li>Asking for information: </li></ul><ul><li>open file 2.2.html </li></ul><ul><li>add a prompt() command to first script: </li></ul><ul><li>var name = prompt(“What is your ► name?”, “”); </li></ul><ul><li>2.2.html </li></ul>Copyright 2010
  23. 23. Tutorial #2 <ul><li>Asking for information (continued): </li></ul><ul><li>add a document.write statement to second script: </li></ul><ul><li>document.write(“<p>Welcome” + ► </li></ul><ul><li>name + “</p>” ); </li></ul><ul><li>2.2.html </li></ul>Copyright 2010
  24. 24. Arrays Copyright 2010
  25. 25. Creating an Array Copyright 2010
  26. 26. Assessing Items in an Array Copyright 2010
  27. 27. Adding Items to an Array Copyright 2010
  28. 28. Deleting Items from an Array Copyright 2010
  29. 29. Adding & Deleting with splice() Copyright 2010
  30. 30. Tutorial #3 <ul><li>Writing to a Web page using arrays </li></ul><ul><li>2.3.html </li></ul>Copyright 2010
  31. 31. Comments <ul><li>A comment is simply a line or more of notes </li></ul><ul><ul><li>interpreter ignores comments </li></ul></ul><ul><ul><li>useful reminders for how the script works </li></ul></ul>Copyright 2010
  32. 32. Comments <ul><li>Styles: </li></ul><ul><li>// This is a comment. </li></ul><ul><li>/* </li></ul><ul><li>This is also a comment </li></ul><ul><li>that covers multiple lines </li></ul><ul><li>*/ </li></ul>Copyright 2010
  33. 33. Comments <ul><li>Examples: </li></ul><ul><li>// create a variable for first name. </li></ul><ul><li>var name_first; // remember no SINs </li></ul><ul><li>/* </li></ul><ul><li>The purpose of this script </li></ul><ul><li>is to capture the visitors name </li></ul><ul><li>and print it back to the page. </li></ul><ul><li>*/ </li></ul>Copyright 2010
  34. 34. JavaScript <ul><li>blah, blah, blah . . . </li></ul>Copyright 2010

×