Online Live Class
Course name:
Web Engineering
Presented by
Shirin Aktar
Lecturer, Dept. of CSE
Dhaka City College
1
Chapter-4
2
JavaScript
JavaScript is a Scripting Language .
JavaScript is a scripting or programming language
that allows you to implement complex features on
web pages .
Invented in 1995 at Netscape Corporation (LiveScript)
All modern HTML pages are using JavaScript .
3
Why use javascript
Adding interactive behavior to web pages
Creating web and mobile apps.
JavaScript gives HTML designers a programming tool .
JavaScript can dynamically modify an HTML page .
JavaScript can react to user input .
JavaScript can validate user input .
JavaScript can be used to create cookies .
4
Scripting Language
All scripting languages are programming languages. The
scripting language is basically a language where
instructions are written for a run time environment.
Scripting languages can be divided into two categories:
1) Server-Side Scripting Languages
2) Client-Side Scripting Languages
5
Server-side script
Executed by the web server only when a user requests a
document.
Then a document is sent to the user’s computer.
Complete all processing in the server and send plain pages
to the client.
Example: Perl, PHP and Python .
6
Client-side script
When client makes the request the HTML and all
scripts will be downloaded into your browser and
then the resulted HTML will be displayed in the
browser is called client-side script.
Example: JavaScript, VBScript.
7
Example
8
JavaScript Statement
JavaScript can be inserted into document by using the Script tag.
<html>
Tells where the JavaScript starts
<body>
<script type =“text/javascript” >
document.write(“Hello World!”);
</script> Commands for writing output to a page
</body>
Tells where the JavaScript ends
</html> 9
Places to put JavaScript code
1. Between the body tag of html.
2. Between the head tag of html.
3. In .js file (external JavaScript)
10
Between the body tag
<html>
<body>
<script type =“text/javascript” >
document.write(“Hello World!”);
</script>
</body>
</html>
11
Internal JavaScript
<html>
<head>
<script>
………JavaScript code ……..
</script>
</head>
<body>
………code ……..
</body>
</html>
12
External JavaScript File
<html>
<head>
<script type=“text/javascript” src=“filename.js”>
</script>
</head>
<body>
</body>
</html>
13
External JavaScript File (Cont.)
Let's create an external JavaScript file that prints Hello Javatpoint in a alert
dialog box.
message.js
function msg(){ <html>
alert("Hello Javatpoint"); <head>
} <script type="text/javascript" src="message.js"></sc
ript>
Let's include the JavaScript file </head>
<body>
into html page. <p>Welcome to JavaScript</p>
<form>
It calls the JavaScript function on <input type="button" value="click" onclick="msg()"/>
button click.
</form>
index.html </body> 14
</html>
JavaScript Output
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
15
Using document.write()
For testing purposes, it is convenient to
use document.write()
16
Using window.alert()
17
Using innerHTML
One of many JavaScript HTML methods
is getElementById().
This example uses the method to "find" an HTML
element (with id="demo") and changes the element
content (innerHTML) to "Hello JavaScript"
18
Using innerHTML(Cont.)
19
Using innerHTML(cont.)
20
Thank you
21
