JavaScript Syntax 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 Operators 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 JavaScript is not strongly typed like Java 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 In a programming language, variables are used to store data values. JavaScript uses the var keyword to define variables. An equal sign is used to assign values to variables. In this example, x is defined as a variable. Then, x is assigned (given) the value 6:
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 (a number) 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
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
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;
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
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 http://www.w3schools.com/js/js_if_else.asp
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
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)