Scribd
Upload
54 views18 pages

Javascript

The document provides an introduction to JavaScript, highlighting its benefits for client-side programming such as improved usability and efficiency. It explains JavaScript's characteristics, including its lightweight nature, event-driven capabilities, and differences from Java. Additionally, it covers how to define JavaScript within HTML, manipulate HTML elements, and handle user interactions through various methods and functions.

Uploaded by

Shekhar Jalane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
54 views18 pages

Javascript

The document provides an introduction to JavaScript, highlighting its benefits for client-side programming such as improved usability and efficiency. It explains JavaScript's characteristics, including its lightweight nature, event-driven capabilities, and differences from Java. Additionally, it covers how to define JavaScript within HTML, manipulate HTML elements, and handle user interactions through various methods and functions.

Uploaded by

Shekhar Jalane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like