Introduction to JavaScript

What in This Chapter

• What is JavaScript?
• What can it really do? typeof
• Basic syntax let
• JavaScript Statements
• How to include JavaScript in an HTML file?
• Strings <script>
console

2
Web Programming
▪Programming for the World Wide Web involves
▪ Server-side programming
▪ Client-side (browser-side) programming
What is JavaScript?
▪A scripting or programming language that allows you to
implement complex things on web pages.
▪JavaScript is used to program the behaviour of web pages (performing
dynamic tasks).
▪JavaScript are scripts (code) that is executed on the client’s browser
instead of the web-server (Client-side scripts).
▪JavaScript is an implementation of the ECMAScript standard.
▪The JavaScript supported in the browsers typically support additional
objects. (e.g. Window, Frame, Form, DOM, object, etc.)
Three layers of web technologies

5
What Javascript can do?
▪ Create interactive user interface in a web page (e.g. menu, pop-up alert, windows)
▪ Displaying timely content updates
▪ Interactive maps
▪ Animated 2D/3D graphics
▪ Scrolling video jukeboxes
▪ Manipulating web content dynamically:
▪ Change the content and style of an element
▪ Replace images on a page without page reload
▪ Hide/Show contents
▪ Validate Data
▪ Make Calculations
Basic Syntax
▪ JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
▪ The script tag takes two important attributes –
▪ Language - This attribute specifies what scripting language you are using. Typically, its value will
be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out
the use of this attribute.
▪ Type - This attribute is recommended to indicate the scripting language in use and its value
should be set to "text/javascript".

<script language = "javascript" type = "text/javascript">

JavaScript code
</script>
JavaScript Statements
▪ JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
▪ The statements are executed, one by one, in the same order as they are written.
▪ Semicolons separate JavaScript statements.

▪ JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.

The following lines are equivalent:

var person = “ANJU";

var person=“ANJU";
JavaScript Primitive Value types
Value Example

Number Any numeric value (e.g., 3, 5.3, or 45e8)

Any string of alphanumeric characters

String (e.g., "Hello, World!", "555-1212" or
"KA12V2B334")

Boolean True or False values only

JavaScript Special Values

Value Example

A special keyword for the null value

Null (no value or empty variable)
Eg: var x = null;
** x has the type ‘object’

A special keyword means that a value

Undefined hasn't even been assigned yet.
Eg: var x;
** x has the type ‘undefined’
JavaScript Variables
▪Variables are containers that hold values.
▪Variables are untyped
▪The initial value for any variable is undefined.
var num; //num = undefined
▪While it is not technically necessary, variable declarations should begin
with the keyword var.
JavaScript Variables Scope
▪ Global Scope <script>
▪ Local Scope x=1 Global scope
var y=2
function
MyFunction()
{
var z Local scope
z=3
// the rest of the
code
}
</script>
JavaScript Expression
▪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
 JavaScript Keywords
▪ JavaScript keywords are
used to identify actions to
be performed.
▪ They are reserved words
that cannot be used as
identifiers (variables, labels
or function names).
JavaScript Comments
▪Code after double slashes // or between /* and */ is treated as a
comment.
▪Comments are ignored, and will not be executed.
▪For examples:
JavaScript Operators
▪Arithmetic Operators
▪Comparison Operators
▪Logical (or Relational) Operators
▪Assignment Operators
▪Conditional (or ternary) Operators

https://www.w3schools.com/js/js_operators.asp
Ternary Operator
▪JavaScript includes special operator called ternary operator :? that
assigns a value to a variable based on some condition. This is like a
short form of if-else condition.
Syntax:<condition> ? <value1> : <value2>;
▪Example: Ternary operator

var a = 10, b = 5;
var c = a > b? a : b; // value of c would be 10
var d = a > b? b : a; // value of d would be 5
How to include JavaScript in an HTML file?
1. Anywhere in the html file between <script></script> tags.

2. As the value of the event handler attributes.

How to include JavaScript in an HTML file?
3. In an external file and refer to it using the SRC
attribute.

Note:
Keeping all code in one place, is always a good habit.
JavaScript Display Possibilities (Output)
• JavaScript can "display" data in different ways:
▪ Writing into an alert box, using window.alert(), window.prompt(),
window.confirm().

▪ Writing into an HTML element, using innerHTML.

Alerts

JavaScript written
An Event inside HTML
Prompts

▪Prompts :This displays a dialog box asking the user to input

something.
Confirm
• The confirm returns true and false
• This displays a dialog box with OK and Cancel buttons.
innerHTML
• This updates content inside an HTML element.
Strings
▪ A string variable can store a sequence of alphanumeric characters, spaces and
special characters.
▪ Each character is represented using 16 bit
▪ You can store Chinese characters in a string.
▪ A string can be enclosed by a pair of single quotes (') or double quote (").
▪ Use escaped character sequence to represent special character
(e.g.: \", \n, \t)
▪ The characters of a string cannot be changed.
▪ Strings are case-sensitive.
How to Access String Characters?
▪1. Using Indexes
• treat strings as an array and access the character at the specified
index.
• 2. Using the charAt() Method
• to supply the position of the character to the charAt() method.
Javascript String Methods
Methods Explanation
length Returns the number of characters in a string
indexOf() Returns the index of the first time the specified
character occurs, or -1 if it never occurs, so
with that index you can determine if the string
contains the specified character.
Examples refer to: lastIndexOf() Same as indexOf, only it starts from the right
https://www.programiz.com/javascript/string#methods and moves left.

match() Behaves similar to indexOf and lastIndexOf,

but the match method returns the specified
characters, or "null", instead of a numeric
value.
substr() Returns the characters you specified: (14,7)
returns 7 characters, from the 14th character.

substring() Returns the characters you specified: (7,14)

returns all characters between the 7th and the
14th.

toLowerCase() Converts a string to lower case

toUpperCase() Converts a string to upper case

Thank You
 ICT 0545 Web Technologies
JavaScript Control Flow
JavaScript Control Flow
Part
Part12
Controlling Program Flow
 Program flow is normally linear
 Control Statements can change the program flow
1. Conditional Statements
a. if ….else
b. switch/case
2. Loop Statements
a. for
b. for..in loops through the properties of an object
c. while
d. do…while
1. Conditional Statements
•JavaScript supports conditional statements which are used to
perform different actions based on different conditions.

•JavaScript supports the following forms of if..else statement −

• if statement
• if...else statement
• if...else if... statement

Note:
We use comparison and logical operators in if
conditions.
if Statement
• It is used to execute code based on some specific condition.
•The syntax for a basic if statement is as follows −

if (expression)
{ Statement(s) to be executed if the expression is
true }
Example:
if…else Statement
 The if...else statement checks the condition and executes code in two
ways:
• If condition is true, the code inside if is executed. And, the code inside else is
skipped.
• If condition is false, the code inside if is skipped. Instead, the code inside else is
executed.
 Syntax:
if (expression)
{ Statement(s) to be executed if expression is true }
else
{ Statement(s) to be executed if expression is
false }
Example:
if...else if... statement
• Use else if keyword to check for multiple conditions.
• The syntax for else if statement is: -
if (expression 1)
{ Statement(s) to be executed if expression 1 is true }
else if (expression 2)

{ Statement(s) to be executed if expression 2 is true }

else if (expression 3)

{ Statement(s) to be executed if expression 3 is true }

else
{ Statement(s) to be executed if no expression is true }
Example:
switch/case Statement
• We can replace if…else statement with the switch statement when
we deal with a large number of conditions.
• The objective of a switch statement is to give an expression to
evaluate and several different statements to execute based on the
value of the expression. The interpreter checks each case against
the value of the expression until a match is found. If nothing
matches, a default condition will be used.
• The break statements indicate the end of a particular case.
• Basic syntax:
switch (expression)
{ case choice1: run this code
break;
case choice2: run this code instead
break;
// include as many cases as you like
default: actually, just run this code
Example:
 ICT 0545 Web Technologies
JavaScript Control Flow
JavaScript Control Flow
Part
Part22
2. Loop Statements
 Programming loops are all to do with doing the same thing over and
over again — which is termed iteration in programming.
 Looping statements:
• “while” Loops
• “do … while” Loops
• “for” Loops
• “for/in” Loops*
• “break” statement
• “continue” statement
 while Loop
 The purpose of a while loop is to execute a statement or code block repeatedly as long as an
expression is true. Once the expression becomes false, the loop terminates.
 The syntax of while loop in JavaScript is as follows :

while (expression)
{
Statement(s) to be executed if expression is true
}
Example:
do...while Loop
 The do...while loop is similar to the while loop except that the condition check happens
at the end of the loop
 The syntax for do-while loop in JavaScript is as follows :
do
{
Statement(s) to be executed;
}
while (expression);
Example:
for Loop
 If you want to run the same code over and over again, each time with a different
value.

Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block.
Statement 3 is executed (every time) after the code block has been executed.
Example:
Loop Control
 JavaScript provides break and continue statements. These statements are used to
immediately come out of any loop or to start the next iteration of any loop respectively.
The break statement

.
The break statement, which
was briefly introduced with the
switch statement, is used to
exit a loop early, breaking out
of the enclosing curly braces.
 The continue Statement
When a continue statement is encountered, the program flow moves to the loop check expression immediately and if the
condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.
<html>
<body>
<script type = "text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{ x = x + 1;
if (x == 5)
{ continue; // skip rest of the loop body
} document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>
Learn from the expert!
• Visit the link below and follow step-by-step:
• https://youtu.be/PkZNo7MFNFg?si=EPyyQKBRMUPA8SDx
{The End}

Q&A