Lecture 12 Regular Expressions and Validate Form in JavaScript

Lecture 12: Regular expressions and
validate Form in JavaScript

Objectives
• Validate data in form
• How to use regular expressions
• How to handle exceptions
• The register application
Validate data in form
SET STYLES FOR ELEMENTS
 You can set styles for components using

 ID
 Card
 Class
4
SET STYLES FOR ELEMENTS ID
 Implementation steps
 Step 1. Use ID to access elements
 Step 2. Use the style attribute to set the style for that
element
var hTieuDe = document.getElementById("hTieuDe");

hTieuDe.style.fontFamily = "arial"
5
DEMO
Xem CSS
6
DEMO
<html >
<head>
<script type="text/javascript">
function xanhButtonClick() {
var pText = document.getElementById("pText");
pText.style.color = "blue";
}
function doButtonClick() {
var pText = document.getElementById("pText");
pText.style.color = "red";
}
</script>
</head>
<body>
<p id="pText">Thiet lap style bang ID</p>
<button onclick="xanhButtonClick();">Xanh</button>
<button onclick="doButtonClick();">Do</button>
</body>
</html>
7
SETS THE STYLE FOR A GROUP OF
ELEMENTS
 The problem arises:
 Want to change styles for multiple elements
<p id = "pText">Thiet lap style cho nhieu thanh phan</p>
<p id = "p1">Thanh phan 1</p>
 Solution:
 Use the getElementsByName or
getElementsByTagName method to get a group of
elements
 Use For loop to iterate over elements
var pAr = document.getElementsByTagName("p");
for (var i = 0; i < pAr.length; i++) {
pAr[i].style.color = "blue";
}
8
IMAGE ROLLOVER
 Image Rollover is the effect of changing the

image when hovering over the image
9
ROLLOVER
 Achieve this effect by handling the

onMouseOver and onMouseOut events for the
img tag
 onMouseOver: event triggered when the user hovers
over the image
 onMouseOut: event is triggered when the user moves
the mouse outside the image
10
DEMO ROLLOVER
<html>
<head>
function onMouseOverEvent() {
document.img_hoa.src = "hoaover.jpg";
}
function onMouseOutEvent() {
document.img_hoa.src = "hoaout.jpg"; Truy cập đến phần
} tử bằng attribute
</script> name
</head><body>
<img name="img_hoa" src="hoaout.jpg"
onmouseover="onMouseOverEvent();"
onmouseout="onMouseOutEvent();" />
</body>
</html>
11
THE PROBLEM ARISES WHEN PERFORMING
ROLLOVER
 Problem: The first time you hover over an image, it
takes a while for the image to load even though the
page has been open for a long time.
 Cause: When the user hovers over the mouse, the
new image is loaded
 Solution: Load the image first
 Technique:
 Create an image object for each image you want to load first
 Assign the path of the image to the src attribute of that image
object
 Explain:
 When encountering the command
imageObject.src=“link_cua_anh”, the image is loaded
underground, the computer continues to execute the commands
after this command.
 This solution does not make website loading slow
13
DEMO LOAD IMAGE
<html><head>
var hoaover = new Image();
var hoaout = new Image();
function loadAnh() {
hoaover.src = "hoaover.jpg";
hoaout.src = "hoaout.jpg";
}
function onMouseOverEvent() {
document.img_hoa.src = hoaover.src
}
function onMouseOutEvent() {
document.img_hoa.src = hoaout.src
}
</script></head>
<body onload = "loadAnh();">
<img name="img_hoa" src="hoaout.jpg"
onmouseover="onMouseOverEvent();"
onmouseout="onMouseOutEvent();" />
</body></html>
14
SLIDE SHOW
 What is Slide Show?

 This is an image effect that appears instead of the
previous image
 There may be a control bar for the user
Thanh điều khiển
15
SLIDE SHOW
 Steps to make Slide Show

 Preload all images
 Event handling for the Next button
 Event handling for the Back button
<body onload = "loadAnh();">

<img id="hoa" src="anh0.jpg" />
<input type="button" value="back" onclick="back();" />
<input type="button" value = "next" onclick="next();"/>
</body>
16
DEMO
var anhAr = [];
var currentIndex=0;
function loadAnh() {
for (var i = 0; i < 6; i++) {
anhAr[i] = new Image();
anhAr[i].src = "anh"+i+".jpg";
}
}
function next() {
if (currentIndex < 4) {
currentIndex++;
document.getElementById("hoa").src = anhAr[currentIndex].src;
}
}
function back() {
if (currentIndex > 0) {
currentIndex--;
document.getElementById("hoa").src = anhAr[currentIndex].src;
}
}
17
DEMO
Ảnh được thay đổi

sau khi nhấn Next
19
Validate data in form
Data validation is the process of ensuring that computer input is clean,
correct, and useful.
Typical validation tasks are:
 has the user filled in all required fields?
 has the user entered a valid date?
 has the user entered text in a numeric field?
 Data validation is to ensure correct input to a computer application.
 Deployed in many different ways.
 Server side validation is performed by a web server, after input has
been sent to the server.
 Client side validation is performed by a web browser, before input is
sent to a web server.
Example: check form field is empty
Can use required attribute

CONTROLS
 JavaScript provides controls for user interaction

 Select Box
 CheckBox
 Radio Button
 Form
22
ATTRIBUTE NAME
 Some elements are defined with a name attribute

(for example, checkbox controls, radio buttons,
etc.)
 You can use the attribute name to access a group
of elements with the same attribute name value
 Distinguish between id and name
 id is unique, each id represents 1 element
 Multiple elements have the same attribute name value,
each name value represents a group of elements
 Use the getElementsByName(name) method to get
an array of elements with the same name attribute
23
DEMO USES ATTRIBUTE NAME TO ACCESS A
GROUP OF ELEMENTS
<html>
<body >
<input type="checkbox" name="test" value="how"/>
<input type="checkbox" name="test" value="are"/>
<input type="checkbox" name="test" value="you"/>
<input type="checkbox" name="test" value="?"/>
var ckAr = document.getElementsByName("test");
var str = "";
for (var i = 0; i < ckAr.length; i++) {
str = str + " "+ ckAr[i].value
}
alert(str);
</script>
</body>
</html>
24
SELECT BOX
 Select Box
<select id="country">
<option selected="selected">Viet Nam</option>
<option value="Anh">Anh</option>
<option value="My">My</option>
</select>>
 On Firefox, access the selected value of the

Select Box using the value attribute
document.getElementById("country").value
 On Firefox, it is also possible to set the selected

value for the Select box using JavaScript
document.getElementById("country").value = "Mỹ"
25
DEMO SELECT BOX
<html ><head>
function chonQuocGiaClick(){
var name = document.getElementById("country").value;
alert(name);
}
</script>
</head>
<body>
<select id="country">
</select>
<input type ="button" value="Chọn Quốc Gia"
onclick="chonQuocGiaClick()" />
</body></html>
26
DEMO SETTING VALUE FOR SELECT
BOX
<body>
<p><input type="button" value="Chau A" onclick= "chauAClick();" />
<input type="button" value="Chau Au" onclick="chauAuClick();"/>
<input type="button" value="Chau My" onclick="chauMy();" /> </p>
<p><select id="country">
</select></p>
</body>
Click vào
Chau Au
Click vào
Chau My
27
DEMO SETTING VALUE FOR SELECT
BOX
function chauAClick() {
document.getElementById("country").value = "Viet Nam";
}
function chauAuClick() {
document.getElementById("country").value = "Anh";
}
function chauMy() {
document.getElementById("country").value = "My";
}
</script>
<body>
<p><input type="button" value="Chau A" onclick= "chauAClick();" />
<input type="button" value="Chau Au" onclick="chauAuClick();"/>
<input type="button" value="Chau My" onclick="chauMy();" /> </p>
<p><select id="country">
</select></p> 28
CHECKBOX
 Used for user selection

 CheckBox has two states: selected and
unselected
<input type="checkbox" value ="Kem que"

name="ckKem" checked="checked" />
 In JavaScript, use the CheckBox's checked

property to define and set the checkbox's state
 Value checked = true: CheckBox is selected
 Value checked = false: CheckBox is not checked
29
DEMO CHECKBOX
<html >
<body>
Cac loai kem trong cua hang:<br />
<input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br />
<input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br />
<input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br />
<input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br />
<input type="button" onclick="chonKem();" value="Chon kem" />
<p id="pKemDaChon"></p>
</body></html>
Ứng dụng liệt kê

những loại kem
được chọn
30
DEMO CHECKBOX
<html ><head>
function chonKem() {
var str = "Nhung loai kem ban da chon la:<br/>";
var kemAr = document.getElementsByName("ckKem");
for (var i = 0; i < kemAr.length; i++) {
if (kemAr[i].checked) {
str= str + kemAr[i].value +"<br/>"
}
}
document.getElementById("pKemDaChon").innerHTML = str;
}
</script>
</head><body>
Cac loai kem trong cua hang:<br />
<input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br />
<input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br />
<input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br />
<input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br />
<input type="button" onclick="chonKem();" value="Chon kem" />
<p id="pKemDaChon"></p></body></html>
31
RADIO BUTTON
 Used for user selection

 CheckBox has two states: selected and
unselected
 Usually used in groups, in the group only one
Radio is selected
<input type="radio" value="Lon" name="rdSize" checked/>Lon<br />

<input type="radio" value="Vua" name="rdSize" />Vua<br />
<input type="radio" value="Nho" name="rdSize" />Nho<br />
 Radios with the same name belong to the same

group
32
DEMO RADIO BUTTON
Hiển thị loại kem

được chọn
33
DEMO RADIO BUTTON
var size="";
var sizeAr = document.getElementsByName("rdSize");
for (var i = 0; i < sizeAr.length; i++) {
if (sizeAr[i].checked) {
size = sizeAr[i].value;
}
}
str = str + "Kich thuoc ban da chon la: " + size;
document.getElementById("pKichThuocDaChon").innerHTML = size;
Hay chon kich thuoc kem:<br />

<input type="radio" value="Lon" name="rdSize" checked/>Lon<br />
<input type="radio" value="Vua" name="rdSize" />Vua<br />
<input type="radio" value="Nho" name="rdSize" />Nho<br />
Kich thuoc ban da chon la:
<p id="pKichThuocDaChon"></p>
34
How to use regular expressions
How to create and use regular expression
• A regular expression defines a pattern that can be
searched for in a string. This pattern is stored in a
regular expression object.
• To create a regular expression object, you can use
the RegExp constructor function or use regular
expression literal.
(cont.)
(cont.)
How to create regular expression patterns
(cont.)
(cont.)
(cont.)
(cont.)
Regular expressions for data validation
Regular expressions for data validation
(cont.)
How to handle exceptions
Concept of Exception
• An exception is an abnormal condition that arise
out of an extraordinary situation disrupting the
flow of program instruction.
• In programs, exceptions can
occur due to any of the following
reasons:
– Programming errors
– Client code errors
– Errors beyond the control of a
program
Handle checked exception
• Two ways handle checked exception:

– Throw the exception to the calling method
– Catch the exception and handle it
Why you need to handle an exception?
• If you don’t handle an exception:

– Program maybe crash
– User may be lost their data
– Some resource can’t reuse
How to create and throw Error objects
How to create and throw Error objects (cont.)
How to use try catch statement to handle
exceptions
• The syntax of the try statement
try {statements}
catch(errorName) {statements}
[finally {statements}]
exceptions (cont.)
exceptions (cont.)
The Register application
• The HTML Code
Summary
• A regular expression defines a pattern that can be searched for
in a string. This pattern is stored in a regular expression object.
• To create a regular expression object, you can use the RegExp
constructor function or use regular expression literal.
• An exception is an abnormal condition that arise out of
an extraordinary situation disrupting the flow of program
instruction.

Lecture 12 Regular Expressions and Validate Form in JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 12 Regular Expressions and Validate Form in JavaScript

Uploaded by

Copyright:

Available Formats

Lecture 12: Regular expressions and

validate Form in JavaScript

 You can set styles for components using

var hTieuDe = document.getElementById("hTieuDe");

 Image Rollover is the effect of changing the

 Achieve this effect by handling the

 What is Slide Show?

Thanh điều khiển

 Steps to make Slide Show

<body onload = "loadAnh();">

Ảnh được thay đổi

Can use required attribute

 JavaScript provides controls for user interaction

 Some elements are defined with a name attribute

 On Firefox, access the selected value of the

 On Firefox, it is also possible to set the selected

 Used for user selection

<input type="checkbox" value ="Kem que"

 In JavaScript, use the CheckBox's checked

Ứng dụng liệt kê

 Used for user selection

<input type="radio" value="Lon" name="rdSize" checked/>Lon<br />

 Radios with the same name belong to the same

Hiển thị loại kem

Hay chon kich thuoc kem:<br />

• Two ways handle checked exception:

• If you don’t handle an exception:

You might also like