1 Introduction to Javascript
Web Technology-I
Why use client-side
2
programming?
◻ client-side scripting (JavaScript) benefits:
🞑 usability: can modify a page without
having to post back to the server (faster UI)
🞑 efficiency: can make small, quick changes
to page without waiting for server
🞑 event-driven: can respond to user actions
like clicks and key presses
Web Technology-I
What is Javascript?
3
◻ a lightweight programming language
("scripting language")
🞑 used to make web pages interactive
🞑 insert dynamic text into HTML (ex: user
name)
🞑 react to events (ex: page load user click)
🞑 get information about a user's computer
(ex: browser type)
🞑 perform calculations on user's computer
(ex: form validation)
Web Technology-I
Javascript vs Java
4
◻ interpreted, not compiled
◻ more relaxed syntax and rules
🞑 fewer and "looser" data types
🞑 variables don't need to be declared
🞑 errors often silent (few exceptions)
◻ key construct is the function rather
than the class
◻ contained within a web page and
integrates with its HTML/CSS content
Web Technology-I
Ways to define Javascript
5
◻ Internal Javascript
<script language=“javascript”
function myFunction()
>
🞑 On load {
script-statements;
🞑 Event-Driven }
</script>
◻ External Javascript
Web Technology-I
JavaScript in
<body>...</body> section
6
◻ If you need a script to run as the page loads so that
the script generates content in the page,
◻ Then the script goes in the <body> portion of the
document.
<html>
<body>
<script language="javascript" type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Output:-
Hello World
Web Technology-I
Variable
7
◻ Can be declared with var keyword
var no1;
var no1=10;
var name=“KIT”;
<html>
<head> </head>
<body>
<script type="text/javascript">
<!--
var no1=10;
var no2=20;
sum=no1+no2;
document.write("Addition="+sum);
//-->
</script>
</body>
Web Technology-I
</html>
Event-driven programming
8
◻ split breaks apart a string into an array
using a delimiter
🞑 can also be used with regular expressions
(seen later)
◻ join merges an array into a single string,
placing a delimiter between them
Web Technology-I
JavaScript in
<head>...</head> section
9
◻ If you want to have a script run on some event, such as
when a user clicks somewhere, then you will place that
script in the head as follows
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World");
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Hello" />
</body>
Web Technology-I
To fetch html form value in
JavaScript
10
◻ The getElementById() method returns the element
that has the ID attribute with the specified value.
◻ Returns null if no elements with the specified ID
exists.
◻ An ID should be unique within a page.
◻ However, if more than one element with the
specified ID exists, the getElementById() method
returns the first element in the source code.
Synatx:
document.getElementById(‘’Id_name”).value
Web Technology-I
To fetch html form value in
JavaScript
11
<script>
function myFunction()
{
var fnm=document.getElementById(“fname”).value;}
<script>
<form action="">
First name: <input type="text" id="fname" name="fname"
value=""><br>
<input type="button" onclick="sayHello()"
name="button" value="Submit">
</form>
Web Technology-I
JavaScript - RegExp test()
12
Method
◻ The test method searches string for text that
matches regexp.
◻ If it finds a match, it returns true; otherwise, it
returns false.
◻ Syntax: RegExpObject.test( string );
e.g. var regchar=/^[a-zA-Z]*$/;
if(regchar.test(fnm))
var
{
fnm=document.getElementById("fname").value
alert(“You have Entered Alphabet");
} ;
else
{
alert(“You have not Entered Alphabet");
}
Web Technology-I
Return value
13
◻ By default Javascript function return true
value
◻ False:you stay on same page [if some error
message]
◻ True: control passes ahead [next page which
<script>
is mentioned
function in action attribute]
myFunction()
{
alert(“plz enter first name”);
return false;
}
<script>
Web Technology-I
To show Error Message at
Particular Location
14
◻ Changing HTML Content
🞑 The easiest way to modify the content of an
HTML element is by using
the innerHTML property.
🞑 Syntax:document.getElementById(id).innerHT
ML = new HTML
◻ E.g:
document.getElementById("label1").innerHTML="Please Enter
First Name";
Web Technology-I
15
How to Show Error Message at particular location
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
Web Technology-I
focus() Method
16
◻ The focus() method is used to give focus
to an element (if it can be focused).
document.getElementById("mobnum").focus();
Web Technology-I
Browser Date()
17
var d = new Date();
document.getElementById("demo").innerHTML = d;
Web Technology-I
Linking to a JavaScript file:
18
script
<script src="filename.js" type="text/javascript"></script>
◻ script tag should be placed in HTML page's
head part
◻ script code is stored in a separate .js file
◻ JS code can be placed directly in the HTML
file's body or head (like CSS)
Web Technology-I
