JavaScript
Introduction
• Object-oriented scripting language that is dynamic, weakly
typed and has first-class functions.
• used in the form of client-side JavaScript, implemented as part
of a web browser in order to provide enhanced user interfaces
and dynamic websites
JavaScript:
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
Writing to The HTML Document
• The HTML <script> tag is used to insert a JavaScript into an HTML page.
Example
• The example below writes a <p> element with current date information to the
HTML document:
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
Statements
• A statement is a section of
Examples:
JavaScript that can be
Last_name = “Dunn”;
evaluated by a Web browser
x = 10 ;
• A script is simply a collection
y = x*x ;
of statements
Programming Tips
Recommended:
• It is a good idea to end each a = 3;
b = 4;
program statement with a Acceptable:
a = 3; b = 4;
semi-colon; Wrong:
a =
3;
• Although this is not
necessary, it will prevent
coding errors
Variables
• A variable is a name associated with a piece of data
• Variables allow you to store and manipulate data in your
programs
• Think of a variable as a mailbox which holds a specific piece of
information
Variables
• In JavaScript variables are • Example:
created using the keyword var
• var x = 10;
• var y = 17;
• var color = “red”;
• var name = “Katie”;
Variables
• It is vitally important to distinguish between the name of the
variable and the value of the variable
• For example, in the expression var color=“red”, color is the
name of the variable and red is the value. In other words, color is
the name of the box while red is what is inside the box
Data Types
Primitive Data Types
• Numbers
• Strings
Boolean (True, False)
Composite Data Types
• Arrays
• Objects
Primitive Data Types
• Numbers - A number can be either an integer or a decimal
• Strings - A string is a sequence of letters or numbers enclosed in
single or double quotes
• Boolean - True or False
Variables & Data Types
• JavaScript is untyped; It does not have explicit data types
• For instance, there is no way to specify that a particular
variable represents an integer, string, or real number
• The same variable can have different data types in different
contexts
Implicit Data Types
• Although JavaScript does not have explicit data types, it does
have implicit data types
• If you have an expression which combines two numbers, it will
evaluate to a number
• If you have an expression which combines a string and a
number, it will evaluate to a string
Example: Variables
var x = 4; Ans = x + y;
Ans => 15
var y = 11;
Ans = z + x;
var z = “cat”; Ans => cat4
var q = “17”; Ans = x + q;
Ans => 417
More Examples
var x = 4; Ans = x + y + z;
Ans => 15cat
var y = 11;
Ans = q + x + y;
var z = “cat”; Ans => 17411
var q = “17”;
Variable Names
• JavaScript is case sensitive
• Variable names cannot contain spaces, punctuation, or start with
a digit
• Variable names cannot be reserved words
Programming Tips
• It is bad practice to change the implicit type of a variable. If a
variable is initialized as a number, it should always be used as
an number.
• Choose meaningful variable names
Operators
+ Addition == Equality
- Subtraction != Inequality
* Multiplication ! Logical NOT
/ Division && Logical AND
% Modulus || Logical OR
++ Increment ? Conditional
-- Decrement Selection
Aggregate Assignments
• Aggregate assignments provide a shortcut by combining the
assignment operator with some other operation
• The += operator performs addition and assignment
• The expression x = x + 7 is equivalent to the expression x += 7
Increment and Decrement
• Both the increment (++) and x = 10; x = 10;
decrement (- -) operator y = ++ x; z = x ++;
come in two forms: prefix and
postfix y = 11
• These two forms yield z = 10
different results x = 11 in both cases
Control Structures
• There are three basic types of control structures in JavaScript:
the if statement, the while loop, and the for loop
• Each control structure manipulates a block of JavaScript
expressions beginning with { and ending with }
The If Statement
If ( x = = 10)
• The if statement allows { y = x*x;
}
JavaScript programmers to a else
{ x = 0;
make decision }
• Use an if statement whenever
you come to a “fork” in the
program
Repeat Loops
• A repeat loop is a group of statements that is repeated until a
specified condition is met
• Repeat loops are very powerful programming tools; They allow
for more efficient program design and are ideally suited for
working with arrays
The While Loop
• The while loop is used to
count = 0;
execute a block of code while
while (count <= 10) {
a certain condition is true
document.write(count);
count++;
}
The For Loop
• The for loop is used when there is a need to have a counter of
some kind
• The counter is initialized before the loop starts, tested after each
iteration to see if it is below a target value, and finally updated
at the end of the loop
Example: For Loop
// Print the numbers 1 through i=1 initializes the counter
10
i<=10 is the target
for (i=1; i<= 10; i++) value
document.write(i);
i++ updates the
counter at the end
of the loop
Example: For Loop
<SCRIPT <SCRIPT
LANGUAGE= LANGUAGE=
"JavaScript"> "JavaScript">
document.write("1");
document.write("2");
for (i=1; i<=5; i++)
document.write("3");
document.write(i);
document.write("4");
document.write("5");
</SCRIPT>
Functions
• Functions are a collection of JavaScript statement that performs
a specified task
• Functions are used whenever it is necessary to repeat an
operation
Functions
• Functions have inputs and outputs
• The inputs are passed into the function and are known as
arguments or parameters
• Think of a function as a “black box” which performs an
operation
Defining Functions
• The most common way to define a function is with the function
statement.
• The function statement consists of the function keyword
followed by the name of the function, a comma-separated list of
parameter names in parentheses, and the statements which
contain the body of the function enclosed in curly braces
Example: Function
function square(x)
{return x*x;} Name of Function: square
z = 3; Input/Argument: x
sqr_z = square(z);
Output: x*x
Example: Function
function sum_of_squares(num1,num2)
{return (num1*num1) + (num2*num2);}
function sum_of_squares(num1,num2)
{return (square(num1) + square(num2));}
