JavaScript Syntax and Semantics. Slide 2 Lecture Overview Core JavaScript Syntax (I will not review...

JavaScriptSyntax and Semantics

Lecture Overview Core JavaScript Syntax (I will not review

every nuance of the language)

JavaScript IS CASE SENSITIVE

Statements (1) Syntax is the set of rules for a language In a programming language,

programming instructions are called statements Compare a programming statement to an

sentence in English A statement expresses a complete

thought Statements are executed by a Web

browser JavaScript statements are terminated by

a semicolon (;)

Statements (2) Statements are composed of:

Values Fixed values are called literals Changing values are called variables

Operators Expressions Keywords Comments

Fixed (Literal) Values Fixed values (literals) are of two types Numbers are written without quotes

Do not include commas in numbers Examples

1.24 84000

Strings are surrounded by quotation marks “Hello World”

Variables Variables are used to store data values that

can change Declare variables with the var keyword

var data type is generic JavaScript is not strongly typed like Java

Type conversion happens on the fly

Variables (Identifiers) Variables are also called identifiers Identifier naming rules are similar to most

languages First character must be a letter, underscore

(_), or dollar sign ($) Subsequent characters may be letters,

digits, underscores, or dollar signs

Variables (Example) Declare a variable named temp

var temp; Store the value 42 in the variable temp

(assignment statement) temp = 42;

var x; // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String

Variables (Scope) Like VB, there are local and global

variables Local variables are declared inside of a

procedure Global variables are declared in a <script> block but outside of a procedure We usually declare these in the <head>block script so they are universally available

Operators The equals sign (=) is the assignment operator Arithmetic operators are +, -, *, / as you would

expect ++ is increment and -- is decrement The + operator is also the string concatenation

operator % is the modulus operator though

http://www.w3schools.com/js/js_operators.asp Operator precedence

http://www.w3schools.com/js/js_arithmetic.asp

http://www.w3schools.com/js/js_operators.asp

http://www.w3schools.com/js/js_operators.asp



Expressions An expression is a combination of

values, variables, and operators The result of an expression is typically

stored in a variable Example to add two numbers. The value

10 is stored in the variable vvar v;v = 5 + 5;

Comments Comments appear differently inside of

JavaScript block that outside of a JavaScript block

The characters // on a line mark the line as a comment

The strings /* and */ mark the begin and end of a multi-line comment

Adding Comments<html> <body>

<script>

// This is a comment.

/* This is a two line

comment */

document.write("Greetings")

</script>

</body>

</html>

Functions (Introduction) They are the same thing as a VB

function or any other programming language function

Functions execute When called by another procedure When implemented as an event handler

Event handlers are discussed later

Declaring a Function function declarations typically appear

in the <head> section Naming rules are the same as for any

identifier Functions execute only when explicitly

called Syntax:

function name(parameter –list) {

statements:

}

Declaring a Function (Example) Declare a function named printMessage<head> <script>function printMessage(msg){

alert(msg); } </script></head>

Calling a Function Functions execute when called

Call functions explicitly from other JavaScript code

Call functions implicitly from an event handler

Calling a Function (Example) From another function or from within

another JavaScript block, call the function with it’s name an parameters

Example:<script> printMessage();</script>

Returning a Value from a Function Call the return statement with an

argument as in

return 0;

Comparisons Similar to VB

== is the test for equality != is the test for inequality The other comparison operators are the

same as in VB

http://www.w3schools.com/js/js_comparisons.asp



Decision-Making Again, conceptually similar to VB

{} mark blocks instead of EndIf if specifies block of code execute, if a specified

condition is true else specifies a block of code execute, if the same

condition is false else if specifies a new condition to test, if the first

condition is false switch specifies many alternative blocks of code to be

executed based on the same condition http://www.w3schools.com/js/js_if_else.asp

http://www.w3schools.com/js/js_if_else.asp


Decision-Making (if) Called a one-way if Use to conditionally execute code when

a condition is true

if (value < 0){

negative = true;

}

Decision-Making (if… else) Called a two-way if Use to conditionally execute code when a

condition is true and another code block when a condition is false

if (value < 0){

negative = true;}else{ negative = false;}

Decision-Making (if… elseif… else) Called a multi-way if Create multiple elseif blocks for

multiple conditions




Loops (Introduction) VB has for loops and while loops JavaScript works similarly although the syntax

differs Again use {} to mark the beginning and

end of the a block while - Executes a block of code while a

condition is true (pretest loop) do/while - also loops through a block of code

while a specified condition is true for - loops through a block of code a number of times (posttest loop)

Loops (while) First test the loop condition and execute the

code block if the condition is true Syntax:

while (x < 10){

x++;}

Loops (do while) Code block executes and then the

condition is tested Loop would execute at least once

Loops (for) A loop variation that can be used when

the number of iterations is known in advance

Statement 1 is executed before the loop starts Statement 2 defines the condition for running

the loop Statement 3 is executed each time after the

loop has executed

Loops (for) Example: for (i = 0; i < 5; i++) { text += "The number is " + i + "<br />";}

Arrays (Introduction) Like VB, arrays are used to store several

values in a single variable You need not redimension arrays.

JavaScript creates elements automatically Use [] as an array subscript instead of

VB’s () Declare an array

var months = [“Jan”, “Feb”, “Mar”, “Apr”];

Arrays (Referencing) Use an array to reference an array

element Same as VB except use [] instead of ()

var month;month = months[0];

Arrays (Properties and Methods) length returns the number of elements

in the array push adds an element to the end of an

array

A Bit About Dates The JavaScript Date object allows you to

work with dates You can

Get parts of a date (month / day / year) Perform date arithmetic Convert strings to dates Convert dates to strings and format them

Dates can be represented in local time or UTC

Constructors and Methods The Date() constructor gets the current

get getDay() gets the day of the week (0-6) getFullYear() gets the 4 digit year getMonth() gets the month of the year There are many other methods See http://www.w3schools.com/jsref/jsref_obj_date.asp

http://www.w3schools.com/jsref/jsref_obj_date.asp

http://www.w3schools.com/jsref/jsref_obj_date.asp

Type Conversion We often need to convert strings to

numbers and back Call parseFloat to convert a string to a

floating-point value Call parseInt to convert a string to an

integral value Both methods accept one function

argument (the string to convert)

Type Conversion (Example)

JavaScript Objects (Introduction)

JavaScript Syntax and Semantics. Slide 2 Lecture Overview Core JavaScript Syntax (I will not review...

Documents

Transcript of JavaScript Syntax and Semantics. Slide 2 Lecture Overview Core JavaScript Syntax (I will not review...