Javascript
Javascript
1
JavaScript
• Brendan Eich developed JavaScript, a computer language,
in May 1995.
• JavaScript was first implemented in Netscape Navigator,
the most popular browser at the time.
• Client-side technology
–Embedded in your HTML page
–Interpreted by the Web browser
3
JavaScript Allows Interactivity
• Improve appearance
– Especially graphics
– Visual feedback
• Site navigation
• Perform calculations
• Validation of input
4
Scripting
• <script> tag
• JavaScript can be implemented using JavaScript statements
that are placed within the <script>... </script> HTML tags in a
web page.
<script ...>
JavaScript code
</script>
SYNTAX:
6
The First Script
OUTPUT
7
JavaScript - Placement in HTML File
• There is a flexibility given to include JavaScript
code anywhere in an HTML document. However
the most preferred ways to include JavaScript in
an HTML file are as follows −
1. Script in <head>...</head> section.
2. Script in <body>...</body> section.
3. Script in <body>...</body> and <head>...</head>
sections.
4. Script in an external file and then include in
<head>...</head> section.
8
JavaScript – When is Executed?
• JavaScript code is executed during the page
loading or when the browser fires an event
– All statements are executed at page loading
– Some statements just define functions that can be
called later.
10
JS - VARIABLES
• Variables are named containers.
• Syntax:
<script type="text/javascript">
var name = "Ali";
var money;
money = 2000.50;
</script>
• variable names should not start with a numeral (0-9). They must begin with a
letter or an underscore character.
11
JS – VARIABLES
• 4 Ways to Declare a JavaScript Variable:
1. var •Always declare JavaScript variables with
var,let, or const.
2. let
•The var keyword is used in all JavaScript code
3. const from 1995 to 2015.
• Syntax:
<!– or // are treated as a one-line JS comment
Multi-line comments start with /* and end with */.
14
JS – OPERATORS
1. ARITHMATIC OPERATORS
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
15
2. ASSIGNMENT OPERATORS
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
16
3. COMPARISION & LOGICAL 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
17
4. Ternary Operator:
• : ? Operator :
It is like the short form of the if-else
condition.
Syntax:
• Y = condition? A : B
• where A and B are values and if condition is
true then Y = A otherwise Y = B.
• Example:
• Y = (6>5) ? 6 : 5 therefore Y = 6 18
5. typeof Operator :
19
Standard Popup Boxes
1. alert
2. confirm
3. prompt.
20
Standard Popup Boxes
Alert Box
Syntax:
alert("your Alert here");
21
Standard Popup Boxes
Prompt Box
Syntax:
prompt("your Prompt here");
22
Standard Popup Boxes
Confirm Box
Syntax:
confirm("your query here");
23
One Example
<html>
<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>
</html>
24
<html>
<head>
<script type = "text/javascript">
function f1() {
alert("Hello World")
}
function f2() {
confirm("confirm here")
}
function f3() {
prompt("prompt here")
}
</script>
</head>
<body>
<input type = "button" onclick = "f1()" value = "alert" />
<input type = "button" onclick = "f2()" value = "confirm" />
<input type = "button" onclick = "f3()" value = "prompt" />
</body>
</html> 25