Lecture 9: JavaScript Syntax

Lecture 9: JavaScript Syntax Variables, Data Type, Statements

Variables • Each variable has a name and value • varfirstname = “Guanyu”; • var number = 1; • Variable declaration. To declare a variable, use the var keyword. • var age = 21; //so I can drink.

Variables • Initialization: gives a variable its value for the first time. The value can change later, but it is only initialized once • varlastname = “Tian”; • Assignment: you can set a variable’s value many times. • lastname = “Jordan”; • Age = 50;

Variables • What will happen if you use a variable that has never been declared or initialized?

Data Type • JavaScript has dynamic types. The same variable can be used as different types: • var x; //no data type • var x = 5; //it is a number • x = “Steven” //change to a string • String is data type that stores a series of characters • “google”, “apple”, “microsoft”

Data Type • Numbers: JavaScript has only one type of numbers. Numbers can be written with, or without decimals • var x = 34; • var y = 34.00; • Booleans: have two values: true or false • var x = true; • var y = false;s

Arithmetic Operations • You 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 Operators • Logic 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 operator • 2 === 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 Operators • Greater than (>) • 10 > 5 • Less than (<) • 10 < 5 • Combined comparisons • 10 >= 10 • 10 <= 10

Conditional Statement • Logic 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 Statement • If 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 Statement • Loop 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 Statement • For 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 Conversion • Type conversion means to convert one type of variable into another type. • There are explicit type conversion • var num = 15 • var n = num.toString(); // n is “15”

Type Conversion • Type conversion means to convert one type of variable into another type. • There are explicit type conversion • var num = 15; • var n = num.toString(); // n is “15” • var test = true; • Number(test);

Type Conversion • Implicit 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 Conversion • One 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 Comparison • If 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”);

Array • An 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; index value 0 12 15 1 2 45 3 22

Create and Access An Array • var trees = new Array(“maple”, “ashley”, “oak”); • varcountries = [“America”, “Spain”, “China”]; • Access an array: you refer to an element in an array using the index. varmyCountry = countries[0];

Array Methods and Properties • An 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”);

Lecture 9: JavaScript Syntax