3rd Quarter Topic

INTRODUCTION TO
JAVASCRIPT
 WHAT IS JAVASCRIPT?
• JavaScript was designed to add interactivity to HTML
pages
• JavaScript is a scripting language (a scripting language is
a lightweight programming language)
• A JavaScript consists of lines of executable computer
code
• JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a
 Are Java and JavaScript the Same?

•NO!
•Java and JavaScript are two completely different
languages in both concept and design!
•Java is a powerful and much more complex
programming language - in the same category as
C and C++.
Ending Statements With a Semicolon?
•With traditional programming languages, like C++
and Java, each code statement has to end with a
semicolon (;).
•Many programmers continue this habit when
writing JavaScript, but in general, semicolons are
optional! However, semicolons are required if you
want to put more than one statement on a single
line.
A JavaScript variable is simply a name of
storage location. There are two types of
variables in JavaScript : local variable and
global variable.
There are some rules while declaring a
JavaScript variable (also known as
identifiers).
1.Name must start with a letter (a to z or A to Z), underscore( _ ),
or dollar( $ ) sign.
2.After first letter we can use digits (0 to 9), for example value1.
3.JavaScript variables are case sensitive, for example x and X are
different variables.
1.var x = 10;
2. var 123=30;
3.var _value="sonoo";
4. var *aa=320;
 VARIABLES IN JAVASCRIPT
var, const, let
• var — The most common variable. Can be reassigned
but only accessed within a function. Variables defined
with var move to the top when code is executed.
• const — Can not be reassigned and not accessible
before they appear within the code.
• let — Similar to const, however, let variable can be
reassigned but not re-declared.
JavaScript local variable
A JavaScript local variable is declared
inside block or function. It is accessible
within the function or block only. For
example:
<script>
function abc(){
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any
function. A variable i.e. declared outside the function or
declared with window object is known as global variable.
For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
 Data Types
• Numbers — var age = 23
• Variables — var x
• Text (strings) — var a = “ste"
• Operations — var b = 1 + 2 + 3 3 of 24
• True or false statements — var c = true
• Constant numbers — const PI = 3.14
• Objects — var name = {firstName:"John",
lastName:”Doe"}
 JavaScript Operators
•Basic Operators
+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator, operations within brackets are executed earlier than
those outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers Operators
 Operator Description Example Result

+ Addition x=2 4

y=2

x+y

- Subtraction x=5 3

Arithmetic Operators y=2

x-y

* Multiplication x=5 20

y=4

x*y

/ Division 15/5 3

5/2 2,5

% Modulus (division remainder) 5%2 1

10%8 2

10%2 0

++ Increment x=5 x=6

x++

-- Decrement x=5 x=4

x--
 Comparison Operators
== — 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
? — Ternary operator
 Operator Description Example

== is equal to 5==8 returns false

=== is equal to (checks for both value and type) x=5

y="5"

Comparison Operators
x==y returns true

x===y returns false

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal to 5>=8 returns false

<= is less than or equal to 5<=8 returns true

 Operator Example Is The Same As

= x=y x=y

Assignment Operators
+= 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
 Operator Description Example

&& and x=6

y=3

Logical (x < 10 && y > 1) returns true

Operators
|| or x=6

y=3

(x==5 || y==5) returns false

! not x=6

y=3

!(x==y) returns true

JavaScript provides 3 places to put the
JavaScript code:

• within body tag,

• within head tag and
• external JavaScript file.
1) JavaScript Example : code between the body
tag
In the above example, we have displayed
the dynamic content using JavaScript. Let’s
see the simple example of JavaScript that
displays alert dialog box.
<body>
<script>
alert(“Welcome to JavaScript!")
</script>
<body>
2) JavaScript Example : code between the head tag
Let’s see the same example of displaying alert dialog box of
JavaScript that is contained inside the head tag.
In this example, we are creating a function msg(). To create
function in JavaScript, you need to write function with
function_name as given below.
To call function, you need to work on event. Here we are using
onclick event to call msg() function.

<head>
<script > <body>
function msg(){ <p>Welcome to Javascript</p>
alert("Hello Hawking"); <form>
} <input type="button" value="click" onclick="msg()"/>
</script> </form>
</head> </body>
3. External JavaScript file
We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in
several html pages.
An external JavaScript file must be saved by .js extension. It is
recommended to embed all JavaScript files into a single file. It increases
the speed of the webpage.

Let’s include the JavaScript file into html page. It calls

Let’s create an external the JavaScript function on button click.
JavaScript file that prints Hello
Javatpoint in a alert dialog box.
<head>
<script src="message.js"></script>
message.js
</head>
function msg(){
alert("Hello Hawking");
} <form>
<input type="button" value="click" onclick="msg
()"/>
</form>
JavaScript Popup Boxes
• Alert Box
• An alert box is often used if you want to make sure information comes
through to the user.
• When an alert box pops up, the user will have to click "OK" to proceed.
<script>
alert("Hello Hawking!")
</script>
JavaScript Popup Boxes - 2
• Confirm Box
• A confirm box is often used if you want the user to verify or accept
something.
• When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.
JavaScript Popup
• Prompt Box
Boxes - 3
• A prompt box is often used if you want the user to input a value
before entering a page.
• When a prompt box pops up, the user will have to click either
"OK" or "Cancel" to proceed after entering an input value.
• If the user clicks "OK“, the box returns the input value. If the
user clicks "Cancel“, the box returns null.
 JavaScript Structure
The structure of JavaScript is composed of a
program, syntax, and statement. A computer
program has a list of instructions to be
performed by the computer. The syntax is the
set of rules on how JavaScript programs are
constructed, and specific program instructions
are called statements.
<DOCTYPE html>
<html>
The example on the left shows a
<!DOCTYPE HTML>
<html>
program that used HTML and
<head>
<title> Internal JavaScript </title>
JavaScript as the language. Inside
</head> program
the program , you will see the
<body>
<h1> My first Web Page</h1>
syntax that instructs that once
<p> My first Paragraph</p>
the web page is loaded, an alert
<script>
window.alert(5 + 6);
window will appear with number
syntax
</script>
11 as message, while statement
</body> statements shows how number 11 will
</html>
appear in the web page.
 JavaScript Statements
Statements are used in JavaScript to control its
program flow. All written JavaScript codes are
commonly comprised of various separate
statements. Statements describe what the
script will do and how it will be done. JavaScript
statement are composed of : values, operators,
expressions, keywords and comments.
Example:
This statements tells the browser to write “Hello World.” inside an HTMl
element with id=“sample”

Statement:
document.getElementById(“sample”).innerHTML=“Hello
World.”;

Output:
Hello World