Lecture 9: JavaScript Syntax

Variables, Data Type, Statements

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.

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;

VariablesWhat will happen if you use a variable that has never

been declared or initialized?

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”

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

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

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?

Logic OperatorsGreater than (>)

10 > 5

Less than (<)10 < 5

Combined comparisons10 >= 1010 <= 10

Logic OperatorsGreater than (>)

10 > 5

Less than (<)10 < 5

Combined comparisons10 >= 1010 <= 10

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.

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}

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

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);}

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”

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);

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

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?

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”);

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

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];

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”);