Scribd
Upload
16 views

JavaScript III

Uploaded by

bhukyapraneetha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

JavaScript III

Uploaded by

bhukyapraneetha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Overview

• Event Handling
• Submit event
• JavaScript display properties
• Data validation
Events

Basics Change in state of object

Activities performed by user or by


browser
Event handling: Process of reacting over
the events
Event handlers: JavScript handles HTML
events
Events (Contd.)
Things that happen to HTML elements
Basics
Handles JavaScript interaction with HTML

JavaScript can react on these events

Used in combination with functions

Why events are important:


To control the sequence of activities in response to some
object state
Events (contd.)

Browser User
events Webpage events
loads or Clicking a
unloads button

Pressing any
Resizing a
key on the
window
keyboard
Event Handler attribute
• Basic syntax
<element event = ‘JavaScript’>
<element event = “JavaScript”>
Common HTML Events
Type Event Description

User Events onclick User clicks an HTML element

onchange HTML element has been changed

onmouseover Mouse moves over HTML element

onmousedown Mouse button pressed over element

onmouseout Cursor of mouse leaves element

onmouseup Mouse moves away from HTML element

onmousemove Pressing a key on keyboard


Common HTML Events

Type Event Description

Browser events onload Browser has finished loading the page

onunload Visitor leaves the current webpage, the


browser unloads it

onresize visitor resizes the window of the browser


Common HTML Events
Type Event Description

Keyboard Event onkeydown &


onkeyup User press and then release the key

Form events
To submit the form
onsubmit

onfocus To focus on element

onblur To focus is away from a form element

onchange
To change the value of a form element
onclick

• <element onclick="Script">
HTML • <button onclick="document.getElementById(
'demo').innerHTML =
Date()">Time?</button>

JavaScript object.onclick = function(){function_name()};


onclick (contd.)
• Example in HTML:
<!DOCTYPE html>
<html>
<body>
<button
onclick="document.getElementById('dt').innerHTML
=Date()">Time and Date</button>
<p id="dt"></p>
</body>
</html>
onclick (contd.)
• Example in JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>onclick Event</h2>
<p id="ef"><strong>Try it</strong></p>
<script>
document.getElementById("ef").onclick = function() {eventFunction()};
function eventFunction() {
document.getElementById("ef").innerHTML = "GET IT";
}
</script>
</body>
</html>
onmouseover

<html>
<head>
<h1> JavaScript onmouseover Event </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
onmouseover.htm
function mouseoverevent()
{
alert("Demo of onmouseover");
}

</script>
<p onmouseover="mouseoverevent()"> Keep cursor over text</p>
</body>
</html>
Onfocus
<html>
<head> Javascript onfocus event</head> onfocus.htm
<body>
<h2> Input</h2>
<input type="text" id="a" onfocus="focusevent()"/>
<script>
function focusevent()
{
document.getElementById("a").style.background="pink";
}
</script>
</body>
</html>
onkeydown
<html>
<head> Javascript onkeydown Event</head>
<body>
<h2> Input</h2>
<input type="text" id="a" onkeydown="keydownevent()"/>
<script>
onkeydown.htm
function keydownevent()
{
document.getElementById("a");
alert(“Demo of onkeydown");
}

</script>
</body>
</html>
onload
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page loaded
successfully');">
<script>
document.write("Demonstration of onload");
</script>
</body> onload.htm

</html>
Submit event
onsubmit
Occurs when a form is
Basics
submitted

• In HTML:
 <element
onsubmit=“script_new”>
Syntax
• In JavaScript:
object.onsubmit =
function(){script_new};
onsubmit event (contd.)
• Example
<!DOCTYPE html>
<html>
<body>
<form onsubmit="formFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function formFunction() {
alert("Form submitted");
}
</script>
</body>
</html>
onsubmit event (contd.)
<!DOCTYPE html>
<html>
<body>
<p>onsubmit event</p>

<form id="new_Form">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

<script>
document.getElementById("new_Form").onsubmit = function() {form_Function()};
function form_Function() {
alert("Form submitted");
}
</script>

</body>
</html>
JavaScript Display Properties

• Using different display properties, JavaScript


can display data through writing into
• HTML element: innerHTML
• HTML output: document.write()
• Alert box: window.alert()
Use of innerHTML

• innerHTML:
defines HTML content
Using document.getElementById method
Id attribute defines the HTML element
Use of innerHTML (contd.)
Example
<!DOCTYPE html>
<html>
<body>

<h2>Use of innerHTML</h2>
<p><b>Paragraph content</b></p>

<p id="js"></p>

<script>
document.getElementById("js").innerHTML = "Paragraph
content is changed into the First JavaScript";
</script>

</body>
</html>
Use of document.write()

• Used for testing


• Example:
<!DOCTYPE html>
<html>
<body>

<h2>Demonstration of document.write</h2>

<p>documernt.write used for testing</p>

<script>
document.write(50*20);
</script>

</body>
</html>
Use of window.alert()
• Display alert box in an alert box
• Example
<!DOCTYPE html>
<html>
<body>

<h1>Demonstration of Alert Box</h1>

<p>Display of alert box</p>


<script>
window.alert(20+30);
</script>

</body>
</html>
Data Validation
Need

To validate
To authenticate user
inappropriate values

To validate name,
To validate form on password, email, date,
client side mobile number, address
and other fields
Data Validation

Functions
Basic validation
To check mandatory fields are
filled in

Data format validation


To check correct form and
value
Not a Number (NaN)
• JavaScript reserved word: number is not a legal
number
Example: let x = 20/ “ABC”;
Output: NaN
• global JavaScript function is NaN() to find out if a
value is a not a number.
Example: let x = 20/ “ABC”;
isNaN(x);
Output: True
Basic Form Validation
function validate()
if( document.aForm.Name.value == "" ) {
alert( "Please provide your name" );
document.aForm.Name.focus() ;
return false;
}
if( document.aForm.EMail.value == "" ) {
alert( "Please provide your Email" );
document.aForm.EMail.focus() ;
return false;
}
if( document.aForm.Zip.value == "" || isNaN( document.aForm.Zip.value ) ||
document.aForm.Zip.value.length != 5 )
alert( "Please provide a zip in the format #####." );
document.aForm.Zip.focus() ;
return false;
}
Data validation
<!DOCTYPE
<html>
<head>
<script>
function validateForm() {
let x = document.forms["mainForm"]["fname"].value;
if (x == "") {
alert(“First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="mainForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Validation
<!DOCTYPE>
<html>
<body>
<h2>Form Validation</h2>
<p>Input a number between 1 and 5:</p>
<input id="num">
<button type="button" onclick="num_Function()">Submit</button>
<p id="para"></p>
<script>
function num_Function() {
let x = document.getElementById("num").value;
Numeric_input.htm
let n;
if (x < 1 || x > 5) {
n = "Invalid input";
} else {
n = "Valid input";
}
document.getElementById("para").innerHTML = n;
}
</script>
</body>
</html>
Form Attributes
Attributes Description

Value Initial value for an input field

Readonly Input field is read-only

maxlength Maximum number of characters

multiple More than one value allowed in input field

pattern Regular expression for an input field

required Input field must be filled out before form submission

autofocus Focus input field automatically


Form Attributes (contd.)
• Example of maxlength

<!DOCTYPE html>
<html>
<body>

<h1>The input maxlength attribute</h1>

<form>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="5"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Form Attributes (contd.)
• Syntax: /pattern/modifiers;
• Google/i
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>pattern attribute</h2>
<form>
<label for="code">Country code:</label>
<input type="text" id="code" name="code" pattern="[A-Za-
z]{3}"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Attributes (contd.)
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>Autofocus attribute</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Password Validation
Must be alphanumeric
Basics
First letter of the password must be capital

Must contain a special character (@, $, !, &, etc)

Password length must be greater than 8 characters

Password fields should not be empty


Password Validation
function verifyPassword() {
var pw = document.getElementById("pswd").value;
//check empty password field
if(pw == "") {
document.getElementById("message").innerHTML = "**Fill the password please!";
return false;
}

//minimum password length validation


if(pw.length < 8) {
document.getElementById("message").innerHTML = "**Password length must be atleast 8 characters";
return false;
}

//maximum length of password validation


if(pw.length > 15) {
document.getElementById("message").innerHTML = "**Password length must not exceed 15 characters";
return false;
} else {
alert("Password is correct");
}
}
Confirm password validation
<script>
function matchPassword() {
var pw1 = document.getElementById("pswd1");
var pw2 = document.getElementById("pswd2");
if(pw1 != pw2)
{
alert("Passwords did not match");
} else {
alert("Password created successfully");
}
}
</script>
Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>

<form name="f1" action="register.jsp" onsubmit="return matchpass()">


Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
Email validation

Basics Must contain the @ and . character

Must be at least one character before and


after the @

Must be at least two characters after .


(dot)
Email validation
Regex

RegExp Object:
Regular expression:
Pattern
Pattern of characters
with Properties and Methods

Syntax Example
/pattern/modifier(s); let pattern = /JavaScript/i;
Email validation
Example
<!DOCTYPE html>
<html>
<body>

<p>Demo of form validation</p>

<form >
E-mail: <input type="email" id=“abc" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-
z]{2,3}$">
<input type="submit">
</form>
<button onclick=“func_validate()">Try it</button>
<p id="demo"></p>
<script>
function func_validate() {
var x = document.getElementById(“abc").pattern;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

You might also like