lecture 9: javascript syntax
DESCRIPTION
Lecture 9: JavaScript Syntax. Variables, Data Type, Statements. Variables. Each variable has a name and value var firstname = “ Guanyu ”; var number = 1; Variable declaration. To declare a variable, use the var keyword. var age = 21; //so I can drink. . Variables. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/1.jpg)
Lecture 9: JavaScript Syntax
Variables, Data Type, Statements
![Page 2: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/2.jpg)
VariablesEach variable has a name and value
var firstname = “Guanyu”;var number = 1;
Variable declaration. To declare a variable, use the var keyword.var age = 21; //so I can drink.
![Page 3: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/3.jpg)
VariablesInitialization: gives a variable its value for the first time.
The value can change later, but it is only initialized oncevar lastname = “Tian”;
Assignment: you can set a variable’s value many times.lastname = “Jordan”;Age = 50;
![Page 4: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/4.jpg)
VariablesWhat will happen if you use a variable that has never
been declared or initialized?
![Page 5: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/5.jpg)
Data TypeJavaScript has dynamic types. The same variable can be
used as different types:var x; //no data typevar x = 5; //it is a numberx = “Steven” //change to a string
String is data type that stores a series of characters“google”, “apple”, “microsoft”
![Page 6: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/6.jpg)
Data TypeNumbers: JavaScript has only one type of numbers.
Numbers can be written with, or without decimalsvar x = 34;var y = 34.00;
Booleans: have two values: true or falsevar x = true;var y = false;s
![Page 7: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/7.jpg)
Arithmetic OperationsYou can do many operations
+, -, *, /, %.
Precedence: if you have more than one operator, those operators are worked out in a particular order.10 + 2 / 2 + 4 * 2(10 + 2) / 2 + 4 * 2
![Page 8: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/8.jpg)
Logic OperatorsLogic Operators works on booleans. They are used to
compare two values, on the left and right of the operator, to produce a boolean value.
Equality: use the double or triple equals operator2 === 3, what is the result?2 !== 3, what is the result?
Strings containing a number and a number are not equal‘10’ = ==10, what is the result?
![Page 9: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/9.jpg)
Logic OperatorsGreater than (>)
10 > 5
Less than (<)10 < 5
Combined comparisons10 >= 1010 <= 10
![Page 10: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/10.jpg)
Logic OperatorsGreater than (>)
10 > 5
Less than (<)10 < 5
Combined comparisons10 >= 1010 <= 10
![Page 11: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/11.jpg)
Conditional StatementLogic is used to make decisions in code.
You choose to run one piece of code depending on the logic comparison result. This logic comparison is called a conditional statement
If statement: if some condition is true, run a block of code; otherwise, run another block of code.
![Page 12: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/12.jpg)
Conditional StatementIf statement: if ( 10 > 5 ){ //run the code here}
If … else… statement:if( 10 > 5 ){ //run the code here } else{ //run a different piece of code here}
![Page 13: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/13.jpg)
Loop StatementLoop is a way of repeating the same block of code over
and over.
While loop: repeats a block of code while a condition is true.var counter = 1;while(counter < 10){
alert(counter); counter++; //counter = counter + 1;}
![Page 14: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/14.jpg)
For StatementFor loop: it combines three semicolon-separated pieces
information between the parentheses: initialization, condition and a final expression.
for(var counter = 1; counter < 10; counter++){
alert(counter);}
![Page 15: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/15.jpg)
Type ConversionType conversion means to convert one type of variable
into another type.
There are explicit type conversionvar num = 15var n = num.toString(); // n is “15”
![Page 16: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/16.jpg)
Type ConversionType conversion means to convert one type of variable
into another type.
There are explicit type conversionvar num = 15;var n = num.toString(); // n is “15”
var test = true;Number(test);
![Page 17: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/17.jpg)
Type ConversionImplicit conversion: automatically convert one type of
variable to another type
For *, -, /, %, >, <, each of these operator will automatically convert its operands to Number if they are not of this type.
For example:window.alert(“5” – 2); //display 3
![Page 18: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/18.jpg)
Type ConversionOne exception is the + operator: if either of the operands
of the + operator are of type String, then the non-String operand will automatically be converted to String, and then the two strings will be concatenated.
For example, alert(“5” + 3);
What is the result?
![Page 19: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/19.jpg)
String ComparisonIf both operands to one of relational operators or of ==
and != are String, then lexicographic string comparison is performed.
e.g: if(“fsu” == “fsu”) alert(“fsu”); if( “fsu” > “fau”) alert(“fau”);
![Page 20: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/20.jpg)
ArrayAn array is used to store multiple values in a single
variable.
An array is just one variable that contains a list of values. e.g., var numbers = new Array(); numbers[0] = 12; numbers[1] = 15; numbers[2] = 45; numbers[3] = 22;
124522
15
0123
index
value
![Page 21: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/21.jpg)
Create and Access An Arrayvar trees = new Array(“maple”, “ashley”, “oak”);var countries = [“America”, “Spain”, “China”];
Access an array: you refer to an element in an array using the index.
var myCountry = countries[0];
![Page 22: Lecture 9: JavaScript Syntax](https://reader035.vdocument.in/reader035/viewer/2022062323/568165d2550346895dd8e176/html5/thumbnails/22.jpg)
Array Methods and PropertiesAn array has predefined properties and methods: e.g: //the number of elements in an array named countries. alert(countries.length);
//find the index of a particular element in an array. alert(countries.indexOf(“China”);