javascript syntax and semantics. slide 2 lecture overview core javascript syntax (i will not review...
Post on 04-Jan-2016
224 Views
Preview:
TRANSCRIPT
JavaScriptSyntax and Semantics
Slide 2
Lecture Overview Core JavaScript Syntax (I will not review
every nuance of the language)
Slide 3
JavaScript IS CASE SENSITIVE
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 (;)
Slide 5
Statements (2) Statements are composed of:
Values Fixed values are called literals Changing values are called variables
Operators Expressions Keywords Comments
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”
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
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
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 undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String
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 <script> block but outside of a procedure We usually declare these in the <head>block script so they are universally available
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
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 vvar v;v = 5 + 5;
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
Slide 14
Adding Comments<html> <body>
<script>
// This is a comment.
/* This is a two line
comment */
document.write("Greetings")
</script>
</body>
</html>
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
Slide 16
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:
}
Slide 17
Declaring a Function (Example) Declare a function named printMessage<head> <script>function printMessage(msg){
alert(msg); } </script></head>
Slide 18
Calling a Function Functions execute when called
Call functions explicitly from other JavaScript code
Call functions implicitly from an event handler
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:<script> printMessage();</script>
Slide 20
Returning a Value from a Function Call the return statement with an
argument as in
return 0;
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
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
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;
}
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;}
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
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)
Slide 27
Loops (while) First test the loop condition and execute the
code block if the condition is true Syntax:
while (x < 10){
x++;}
Slide 28
Loops (do while) Code block executes and then the
condition is tested Loop would execute at least once
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
Slide 30
Loops (for) Example: for (i = 0; i < 5; i++) { text += "The number is " + i + "<br />";}
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”];
Slide 32
Arrays (Referencing) Use an array to reference an array
element Same as VB except use [] instead of ()
var month;month = months[0];
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
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
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
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)
Slide 37
Type Conversion (Example)
Slide 38
JavaScript Objects (Introduction)
top related