Html session 12 theory:
Life Cycle of an Event
An event’s life starts when the user performs an action to interact with the Web page. It finally ends when the event handler provides a response to the user’s action. The steps involved in the life cycle of an event are as follows:
The user performs an action to raise an event.
The event object is updated to determine the event state.
The event is fired.
The event bubbling occurs as the event bubbles through the elements of the hierarchy.
The event handler is invoked that performs the specified actions.
12.14.4 Keyboard Events
Keyboard events are the events that occur when a key or a combination of keys are pressed or released from a keyboard. These events occur for all keys of a keyboard.
The different keyboard events are as follows:
Onkeydown
Occurs when a key is pressed down.
Onkeyup
Occurs when the key is released.
Onkeypress
Occurs when a key is pressed and released.
Introduction to JavaScript
function numericonly()
{
if(!event.keyCode >=48 && event.keyCode<=57))
event.returnValue=false;
}
function countWords()
{
var message = document.getElementByID(‘txtMessage’).value;
message= message.replace(/\s+/g, ‘ ‘);
var numberOfWords = message.split(‘ ‘).length;
document.getElementById(‘txtTrack’).value = words Remaining:
‘ +
eval(50 - numberOfWords);
if(numberOfWords > 50)
alert(“too many words.’);
}
In the code, the function numericOnly()declares an event handler function, numericOnly(). The event.keyCode checks if the Unicode character of the entered key is greater than 48 and less than 57. This checks that only numeric values are entered. It also declares an event handler function, countWords(). It retrieves the text specified in the txtMessage control. split()function splits the specified string when a space is encountered and returns the length after splitting. It also calculates and displays the number of remaining words to complete the count of 50 words. If the number of words is greater than 50, an alert box is displayed.
Mouse Events
Mouse events occur when the user clicks the mouse button. Table 12.6 lists the mouse events.
<!DOCTYPE HTML>
<html>
<head>
<title> Reservation </title>
<script src=”form.js”>
</script>
</head>
<body>
<h2> Hotel Reservation Form</h2>
<form id=”frmreservation”>
<table>
<tr>
<td> <label for=”txtName”>Name:</label></td>
<td> <input id=”txtName” type=”text” /></td>
</tr>
<tr>
<td> Arrival Date: </td>
<td> <input id=”txtArrival” type=”text” /></td>
</tr>
<tr>
<td> Departure Date: </td>
<td> <input id=”txtDeparture” type=”text” /></td>
</tr>
<tr>
<td> Number of Person: </td>
<td> <input id=”txtPerson” type=”text” maxlength=”3”
size=”3”></td>
</tr>
<tr>
<td> <img id=”imgSubmit” width=”120px” height=”30px”
src=”submit.jpg” alt=”Submit”,
onmousedown=”showImage(this, ‘submitdown.jpg’);”
onmouseup=”showImage(this,
‘submit.jpg’);”,onclick=”frmReservation.submit();”/>
</td>
<td> <img id=”imgSubmit” width=”120px” height=”30px”
src=”reset.jpg” alt=”Reset”,
onmousedown=”showImage(this, ‘resetdown.jpg’);”
onmouseup=”showImage(this,
‘reset.jpg’);”,onclick=”frmReservation.reset();”/>
</td>
</tr>
</table>
</form>
</body>
</html>
It will also display the submit.jpg image when the mouse is released from Submit button. It also submits the form data when the Submit button is clicked. Further it displays the image when Reset button is clicked and it displays the reset.jpg image when the mouse is released from Reset button. It will reset the form data when the Reset button is clicked.
Code Snippet 9 demonstrates the loading of images in a JavaScript file.
Code Snippet 9:
function showImage(object,url)
{
object.src=url;
}
Focus and Selection Events
The focus events determine the activation of various elements that uses the input element. It allows you to set or reset focus for different input elements. The selection events occur when an element or a part of an element within a Web page is selected. Table 12.7 lists the focus and selection events.
onfocus Occurs when an element receives focus
onblur Occurs when an element loses focus
onselectstart Occurs when the selection of an element starts
onselect Occurs when the present selection changes
ondragstart Occurs when the selected element is moved
<!DOCTYPE HTML>
<html>
<head>
<title> Reservation </title>
<script>
function showStyle(field)
{
field.style.backgroundColor = ‘#FFFFCC’;
}
function hideStyle(field)
{
field.style.backgroundColor = ‘#FFFFFF’;
}
function setFontStyle(field)
{
field.style.fontWeight = ‘bold’;
field.style.fontFamily = ‘Arial’;
}
</script>
</head>
<body>
<h2> Feedback Form</h2>
<form id=”frmreservation”>
<table>
<tr>
<td> <label for=”txtName”>Name:</label></td>
<td> <input id=”txtName” type=”text” onfocus=”showStyle(this
);” onblur=”hideStyle(this);” onselect=setFontStyle(
this); />
</td>
</tr>
<tr>
<td> <label for=”txtEmail”>E-mail:</label></td>
<td> <input id=”txtEmail” type=”text” onfocus=”showStyle(this);”
onblur=”hideStyle(this);” onselect=setFontStyle(this); />
</td>
</tr>
<tr>
<td> <label for=”txtComment”>Comment:</label></td>
<td> <textarea id=”txtComment” cols=”15” rows=”3”
onfocus=”showStyle(this);” onblur=”hideStyle(this);”
onselect=setFontStyle(this);> </textarea>
</td>
</tr>
<tr>
<td> <input id=”btnSubmit” type=”button” type=”button”
value=”Submit” /></td>
<td> <input id=”btnReset” type=”reset” /></td>
</tr>
</table>
</form>
</body>
</html>
In the code, a specified style is displayed when the element receives and loses focus. It also displays the specified font style when the element is selected. It also declares an event handler function and specifies the background color for the field. It sets the font style for text to bold and the text should appear in Arial font.
jQuery
jQuery is a short and fast JavaScript library developed by John Resig in 2006 with a wonderful slogan: Write less and do more. It simplified the client side scripting of HTML. jQuery also simplifies HTML files animation, event handling, traversing, and developing AJAX based Web applications. It helps in rapid Web application development. jQuery is designed for simplifying several tasks by writing lesser code. The following are the key features supported by jQuery:
Event Handling: jQuery has a smart way to capture a wide range of events, such as user clicks a link, without making the HTML code complex with event handlers.
Animations: jQuery has many built-in animation effects that the user can use while developing their Web sites.
DOM Manipulation: jQuery easily selects, traverses, and modifies DOM by using the cross-browser open source selector engine named Sizzle.
Cross Browser Support: jQuery has a support for cross-browser and works well with the following browsers:
Internet Explorer 6 and above
Firefox 2.0 and above
Safari 3.0 and above
Chrome
Opera 9.0 and above
Lightweight: jQuery has a lightweight library of 19 KB size.
AJAX Support: jQuery helps you to develop feature-rich and responsive Web sites by using AJAX technologies.
Latest Technology: jQuery supports basic XPath syntax and CSS3 selectors.
Using jQuery Library
There is an easy way to use jQuery library. To work with jQuery perform the following steps:
1-Download the jQuery library from the http://jquery.com/ Web site
2-Place the jquery-1.7.2.min.js file in the current directory of the Web site
The user can include jQuery library in their file.
Code Snippet 11 shows how to use a jQuery library.
<!DOCTYPE HTML>
<html>
<head>
<title>The jQuery Example</title>
// Using jQuery library
<script src=”jquery-1.7.2.min.js”>
// The user can add our JavaScript code here
</script>
Calling jQuery Library Functions
Users can do many tasks while jQuery is reading or manipulating the DOM object. The users can add the events only when the DOM object is ready. If the user wants the event on their page then the user has to call the event in the $(document).ready() function. All the content inside the event will be loaded as soon as the DOM is loaded but before the contents of the page are loaded. The users also register the ready event for the document. Place the jquery-1.7.2.min.js file in the current directory and specify the location of this file in the src attribute.
Code Snippet 12 shows how to call jQuery library function and ready event in DOM.
<!DOCTYPE HTML>
<html>
<head>
<title>The jQuery Example</title>
<script src=” jquery-1.7.2.min.js”>
</script>
<script>
$(document).ready(function() {
$(“div”).click(function() {
alert(“Welcome to the jQuery world!”);
});
});
</script>
</head>
<body>
<div id=”firstdiv”>
Click on the text to view a dialog box.
</div>
</body>
</html>
The code includes the jQuery library and also registers the ready event for the document. The ready event contains the click function that calls the click event.
jQuery Mobile
jQuery mobile is a Web User Interface (UI) development framework that allows the user to build mobile Web applications that works on tablets and smartphones. The jQuery mobile framework provides many facilities that include XML DOM and HTML manipulation and traversing, performing server communication, handling events, image effects, and animation for Web pages. The basic features of jQuery mobile are as follows:
Simplicity
This framework is easy to use and allows developing Web pages by using markup driven with minimum or no JavaScript.
Accessibility
The framework supports Accessible Rich Internet Applications (ARIA) that helps to develop Web pages accessible to visitors with disabilities.
Enhancements and Degradation
The jQuery mobile is influenced by the latest HTML5, JavaScript, and CSS3.
Themes
This framework provides themes that allow the user to provide their own styling.
Smaller Size
The size for jQuery mobile framework is smaller for CSS it is 6KB and for JavaScript library it is 12KB.
For executing the jQuery mobile, you have to download the Opera Mobile Emulator from the http://www.opera.com/developer/tools/mobile/ Web site. Download the emulator and install it on your machine and then write the code in the Coffee cup editor. Code Snippet 13 shows an example of a jQuery mobile.
Code Snippet 13:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=”stylesheet” href=”jquery.mobile-1.0a3.min.css” />
<script src=”jquery-1.5.min.js”></script>
<script src=”jquery.mobile-1.0a3.min.js”></script>
</head>
<body>
<div data-role=”page”>
<div data-role=”header”>
<h1>Car Rental</h1>
</div>
<div data-role=”content”>
<p>Choose from the listed car models</p>
<ul data-role=”listview” data-inset=”true”>
<li><a href=”#”>Ford</a></li>
<li><a href=”#”>Ferrari</a></li>
<li><a href=”#”>BMW</a></li>
<li><a href=”#”>Toyota</a></li>
<li><a href=”#”>Mercedes-Benz</a></li>
</ul>
</div>
<div data-role=”footer”>
<h4>© DriveCars 2012.</h4>
</div>
</div>
</body>
</html>
The jQuery mobile application should have the following three files:
CSS file
jQuery library
jQuery Mobile library
In the code, three files are included the CSS (jquery.mobile-1.0a3.min. css), jQuery library (jquery-1.5.min.js), and the jQuery mobile library (jquery.mobile-1.0a3.min.js). A user can also download the jQuery libraries from http://code.jquery.com/ Web site.
The jQuery Mobile takes HTML tags and renders them on mobile devices. To work with this, HTML has to make use of data attributes. jQuery use these attributes as indicators for rendering it on the Web pages. jQuery also looks for div using a particular data-role values such as page, content, header, and footer are used in this code. There are multiple div blocks added to the code for page, content, header, and footer. Similarly, to display the different car models a data-role listview is added to enhance the look and feel of the mobile Web page.
A user need to install the Opera Mobile Emulator from the Opera Web site.
After installing the Opera Mobile Emulator, perform the following steps to apply settings to the emulator:
Select All Programs Opera Mobile Emulator Opera Mobile Emulator.
The Opera Mobile Emulator dialog box will be displayed.
In the Profile tab, select the Samsung Galaxy Tab.
In the Resolution drop-down, select the WVGA Portrait(480x800).
Click Update.
Click Launch. The Samsung Galaxy tab is displayed.
For executing the jQuery mobile code given in Code Snippet 12 in the CoffeeCup editor, perform the following steps:
Add the Opera Mobile Emulator in the CoffeeCup editor by clicking Tools Additional Browsers Test with Additional Browser 1 and give the location of the Opera Mobile Emulator installed on your system. After adding the emulator, you can see the emulator added to the additional browsers list.
Open the jQuery file in the CoffeeCup editor and save.
Click Tools Additional Browser Test with Additional Browser 1.
Opera Mobile Emulator.
No comments:
Post a Comment