1. JavaScript Syntax and Semantics

2. Slide 2 Lecture Overview Core JavaScript Syntax (I will not review every nuance of the language)

3. Slide 3 JavaScript IS CASE SENSITIVE

4. Slide 4 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 (;)

5. Slide 5 Statements (2) Statements are composed of: Values Fixed values are called literals Changing values are called variables Operators Expressions Keywords Comments

6. Slide 6 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”

7. Slide 7 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

8. Slide 8 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

9. Slide 9 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 undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String

10. Slide 10 Variables (Scope) Like VB, there are local and global variables Local variables are declared inside of a procedure Global variables are declared in a block but outside of a procedure We usually declare these in the block script so they are universally available

11. Slide 11 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

12. Slide 12 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 v var v; v = 5 + 5;

13. Slide 13 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

14. Slide 14 Adding Comments // This is a comment. /* This is a two line comment */ document.write("Greetings")

15. Slide 15 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

16. Slide 16 Declaring a Function function declarations typically appear in the section Naming rules are the same as for any identifier Functions execute only when explicitly called Syntax: function name(parameter –list) { statements: }

17. Slide 17 Declaring a Function (Example) Declare a function named printMessage function printMessage(msg) { alert(msg); }

18. Slide 18 Calling a Function Functions execute when called Call functions explicitly from other JavaScript code Call functions implicitly from an event handler

19. Slide 19 Calling a Function (Example) From another function or from within another JavaScript block, call the function with it’s name an parameters Example: printMessage();

20. Slide 20 Returning a Value from a Function Call the return statement with an argument as in return 0;

21. Slide 21 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

22. Slide 22 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

23. Slide 23 Decision-Making ( if ) Called a one-way if Use to conditionally execute code when a condition is true if (value < 0) { negative = true; }

24. Slide 24 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; }

25. Slide 25 Decision-Making ( if… elseif… else ) Called a multi-way if Create multiple elseif blocks for multiple conditions http://www.w3schools.com/js/js_if_else.asp

26. Slide 26 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)

27. Slide 27 Loops ( while ) First test the loop condition and execute the code block if the condition is true Syntax: while (x < 10) { x++; }

28. Slide 28 Loops ( do while ) Code block executes and then the condition is tested Loop would execute at least once

29. Slide 29 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

30. Slide 30 Loops ( for ) Example: for (i = 0; i "; }

31. Slide 31 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”];

32. Slide 32 Arrays (Referencing) Use an array to reference an array element Same as VB except use [] instead of () var month; month = months[0];

33. Slide 33 Arrays (Properties and Methods) length returns the number of elements in the array push adds an element to the end of an array

34. Slide 34 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

35. Slide 35 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

36. Slide 36 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)

37. Slide 37 Type Conversion (Example)

38. Slide 38 JavaScript Objects (Introduction)