Embed Size (px)
DESCRIPTION
JavaScript Missing Manual, Ch. 2
Citation preview
JavaScript:JavaScript:The Missing The Missing ManualManual
Chapter 2:Chapter 2:The Grammar of JavaScriptThe Grammar of JavaScript
Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
StatementsStatementsJavaScript statement:JavaScript statement:
a basic programming unit, usually a basic programming unit, usually representing a single step in a JavaScript representing a single step in a JavaScript programprogram
combine statements to create a JavaScript combine statements to create a JavaScript programprogram
each statement ends with a semicoloneach statement ends with a semicolon like a period at the end of a sentencelike a period at the end of a sentence
Copyright 2010
CommandsCommands
Commands are usually called Commands are usually called functionsfunctions or or methodsmethods like verbs in a sentence, commands get things donelike verbs in a sentence, commands get things done
Examples:Examples:alert();alert();
document.write();document.write();
Chapter 3 will focus on Chapter 3 will focus on functionsfunctions..
Copyright 2010
Types of DataTypes of Data
In JavaScript the three most common types In JavaScript the three most common types of data are:of data are: numbersnumbers stringsstrings BooleanBoolean
Copyright 2010
NumbersNumbersa a numbernumber is used for counting or is used for counting or
calculatingcalculating
Example:Example:document.write(5 + 15)document.write(5 + 15)
Result:Result:20 is written to the page20 is written to the page
Copyright 2010
StringsStrings
A A stringstring is simply a series of letters and is simply a series of letters and other symbols enclosed inside of quote other symbols enclosed inside of quote marksmarks you can use either single or double quotesyou can use either single or double quotes
‘‘Welcome back!’Welcome back!’
““Welcome back!”Welcome back!”
Copyright 2010
BooleansBooleans
A A BooleanBoolean value is either true or false value is either true or false typically used to make decisionstypically used to make decisions
Example:Example:The visitor filled in the “name” textbox . . .The visitor filled in the “name” textbox . . . true or false?true or false?
Copyright 2010
VariablesVariables
A A variablevariable is a way to store information so is a way to store information so that you can use and manipulate itthat you can use and manipulate it variables variables hold information that can varyhold information that can vary
Think of a variable as a container or basketThink of a variable as a container or basket the container remains the same even if you the container remains the same even if you
change the contents of the containerchange the contents of the container
Copyright 2010
Creating a VariableCreating a Variable
Two-step process:Two-step process: declaredeclare the variable the variable namename the variable the variable
Example:Example:
var score;var score;
Copyright 2010
Creating a VariableCreating a Variable
Rules: A variable name . . .Rules: A variable name . . . must begin with a letter, $, or _must begin with a letter, $, or _ can only contain letters, numbers, $, and _can only contain letters, numbers, $, and _ is case sensitiveis case sensitive must not be the same as a keyword must not be the same as a keyword
(reserved words)(reserved words) Google “JavaScript keywords”Google “JavaScript keywords”
Copyright 2010
Using VariablesUsing VariablesOnce a variable is created you can store Once a variable is created you can store
any type of data that you’d like in itany type of data that you’d like in it
var score;var score;
var name_first;var name_first;score = 0;score = 0;name_first = “Peter”;name_first = “Peter”;
Copyright 2010
Using VariablesUsing VariablesOnce a variable is created you can store Once a variable is created you can store
any type of data that you’d like in itany type of data that you’d like in it
var score;var score;
score = 0;score = 0;
var score = 0;var score = 0;
Copyright 2010
assignment operator
Data Types & VariablesData Types & Variables
OperatorOperator – a symbol or word that can – a symbol or word that can change one or more values into change one or more values into something elsesomething else used to modify dataused to modify data
Copyright 2010
Basic MathBasic Math
Math Operators:Math Operators:
Copyright 2010
OperatorOperator ExampleExample ResultResult
++ 5 + 255 + 25 3030
-- 25 - 525 - 5 2020
** 5 * 105 * 10 5050
// 15 / 515 / 5 33
Order of OperationsOrder of Operations
Some operations take precedence over Some operations take precedence over others . . .others . . .
Multiplication (*) and division (/)Multiplication (*) and division (/)
takes precedence overtakes precedence over
addition (+) and subtraction (-)addition (+) and subtraction (-)
Copyright 2010
Order of OperationsOrder of Operations
Use parentheses to group operationsUse parentheses to group operations
Example:Example:4 + 5 * 104 + 5 * 10 result: 54result: 54
(4 + 5) * 10(4 + 5) * 10 result: 90result: 90
Copyright 2010
Combining StringsCombining Strings
ConcatenationConcatenation – combining strings by – combining strings by using the + operatorusing the + operator
var name_first = “Peter”;var name_first = “Peter”;
var name_last = “Kery”;var name_last = “Kery”;
var full_name = name_first + name_last;var full_name = name_first + name_last;
Copyright 2010
Combining Numbers & Combining Numbers & StringsStrings
Copyright 2010
Changing the Values in Changing the Values in VariablesVariables
Example:Example:var score = 0;var score = 0;
score = score + 100;score = score + 100;
Copyright 2010
Shortcuts for Performing Shortcuts for Performing MathMath
Copyright 2010
OperatorOperator ExampleExample AlternateAlternate
+=+= score += 10;score += 10; score = score + 10;score = score + 10;
-=-= score -= 10;score -= 10; score = score - 10;score = score - 10;
*=*= score *= 10;score *= 10; score = score * 10;score = score * 10;
/=/= score /= 10;score /= 10; score = score / 10;score = score / 10;
++++ score ++;score ++; score = score + 1;score = score + 1;
---- score --;score --; score = score - 1;score = score - 1;
Tutorial #1Tutorial #1
Using variables to create messages:Using variables to create messages:1.1. open file 2.1.htmlopen file 2.1.html
2.2. add a <script> elementadd a <script> element
3.3. create two variables for first and last namecreate two variables for first and last name
4.4. add three document.write statements to print add three document.write statements to print out the full name in a paragraphout the full name in a paragraph
2.1.html2.1.html
Copyright 2010
Tutorial #2Tutorial #2Asking for information:Asking for information:1.1. open file 2.2.htmlopen file 2.2.html2.2. add a prompt() command to first script: add a prompt() command to first script:
var name = prompt(“What is your var name = prompt(“What is your ►► name?”, “”);name?”, “”);
2.2.html2.2.html
Copyright 2010
Tutorial #2Tutorial #2
Asking for information (continued):Asking for information (continued):3.3. add a document.write statement to second add a document.write statement to second
script:script:
document.write(“<p>Welcome” + document.write(“<p>Welcome” + ►►
name + “</p>”name + “</p>”););
2.2.html2.2.html
Copyright 2010
ArraysArrays
Copyright 2010
Creating an ArrayCreating an Array
Copyright 2010
Assessing Items in an Assessing Items in an ArrayArray
Copyright 2010
Adding Items to an ArrayAdding Items to an Array
Copyright 2010
Deleting Items from an Deleting Items from an ArrayArray
Copyright 2010
Adding & Deleting with Adding & Deleting with splice()splice()
Copyright 2010
Tutorial #3Tutorial #3
Writing to a Web page using arraysWriting to a Web page using arrays
2.3.html2.3.html
Copyright 2010
CommentsComments
A A commentcomment is simply a line or more of is simply a line or more of notesnotes interpreter ignores commentsinterpreter ignores comments useful reminders for how the script worksuseful reminders for how the script works
Copyright 2010
CommentsComments
Styles:Styles:// This is a comment.// This is a comment.
/*/*
This is also a commentThis is also a comment
that covers multiple linesthat covers multiple lines
*/*/
Copyright 2010
CommentsCommentsExamples:Examples:
// create a variable for first name.// create a variable for first name.var name_first; // remember no SINsvar name_first; // remember no SINs
/*/*The purpose of this scriptThe purpose of this scriptis to capture the visitors nameis to capture the visitors nameand print it back to the page.and print it back to the page.
*/*/
Copyright 2010
JavaScriptJavaScript blah, blah, blah . . .blah, blah, blah . . .
Copyright 2010
