Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec.
Sarah Mohammed
JavaScript Syntax and Statements
JavaScript syntax is the set of rules, how JavaScript programs are constructed.
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by the computer.
In a programming language, these program instructions are called statements.
JavaScript is a programming language.
JavaScript statements are separated by semicolons:
Example
var x, y, z;
x = 5;
y = 6;
z = x + y;
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
JavaScript Values
The JavaScript syntax defines two types of values: Fixed values and
variable values.
Fixed values are called literals. Variable values are called variables.
Page 1
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
JavaScript Literals
The most important rules for writing fixed values are:
Numbers are written with or without decimals:
10.50
1001
Strings are text, written within double or single quotes:
"John Doe"
'John Doe'
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the var keyword to declare 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:
var x;
x = 6;
JavaScript variables are containers for storing data values.
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
Page 2
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
JavaScript uses an assignment operator ( = ) to assign values to variables.
In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to"
operator.
var x, y;
x = 5;
y = 6;
The "equal to" operator is written like == in JavaScript.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
The += assignment operator can also be used to add (concatenate) strings:
Example
txt1 = "What a very ";
txt1 += "nice day";
The result of txt1 will be:
What a very nice day
- When used on strings, the + operator is called the concatenation operator.
- Adding two numbers will return the sum, but adding a number and a string
will return a string
- Multiplication (*) and division (/) have higher precedence than addition (+) and
subtraction (-).
- When using parentheses, the operations inside the parentheses are computed first.
Page 3
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
JavaScript Comparison Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
JavaScript Logical Operators
Operator Description
&& logical and
|| logical or
! logical not
JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
5 * 10
Page 4
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
Expressions can also contain variable values:
x * 10
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
"John" + " " + "Doe"
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Here is a list of some of the keywords you will learn about:
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the
debugging function
do ... while Executes a block of statements, and repeats the block, while a
condition is true
for Marks a block of statements to be executed, as long as a condition
is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a
condition
return Exits a function
switch Marks a block of statements to be executed, depending on
different cases
try ... catch Implements error handling to a block of statements
var Declares a variable
Page 5
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
JavaScript keywords are reserved words. Reserved words cannot be used
as names for variables.
JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it more
readable.
JavaScript comments can also be used to prevent execution, when
testing alternative code.
Code after double slashes // or between /* and */ is treated as a comment.
Single Line Comments
Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).
This example uses a single line comment at the end of each line to explain
the code:
var x = 5; // Declare x, give it the value of 5
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
Page 6
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
[Link]("myH").innerHTML = "My First Page";
[Link]("myP").innerHTML = "My first paragraph.";
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names
(age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _ (but we will not use it in this tutorial)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names
JavaScript identifiers are case-sensitive.
Numbers are not allowed as the first character.
This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables.
var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret VAR or Var as the keyword var.
Page 7
Experiment 2. Dr. Saja Dheyaa Khudhur & Assist. Lec. Sarah Mohammed
JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than
80 characters.
If a JavaScript statement does not fit on one line, the best place to break it,
is after an operator:
Example
[Link]("demo").innerHTML =
"Hello Dolly!";
Discussion
Theoretical Questions:
1. What are JavaScript statements, and how are they separated?
2. Explain the difference between == and === in JavaScript.
3. List and describe the three types of JavaScript comments.
4. What are JavaScript identifiers, and what rules must they follow?
5. Why is JavaScript considered case-sensitive? Give an example.
Practical Questions:
1. Write JavaScript code to declare two variables, a and b, assign them values of 10
and 20, respectively, and then display their sum.
2. Create a JavaScript statement that concatenates two strings, "Hello" and "World",
with a space between them, and assigns the result to a variable. Display the
concatenated result in the console.
3. Using JavaScript, create a variable to store your name and use a comment line to
explain what the variable represents.
4. Write a JavaScript code snippet that declares three variables: x, y, and result.
Assign values to x and y and then use JavaScript arithmetic operators to calculate
their product and store it in result. Display result on the web page
using [Link]("output").innerHTML. Include comments to
explain each line of your code.
Page 8