script

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






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


Examples



Do not include commas in numbers
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 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)
JavaScript Objects
(Introduction)

Download Report