Scribd
Upload
33 views

Javascript Events, Forms & Ajax

This document discusses JavaScript events, forms, and AJAX. It covers basic and advanced event handling techniques, properties of HTML forms, and how to make asynchronous requests with AJAX. The document provides an overview of topics like event propagation, form validation, and manipulating HTTP headers. It concludes with homework assignments to create pages demonstrating a validated form and asynchronous requests with progress indicators.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
33 views

Javascript Events, Forms & Ajax

This document discusses JavaScript events, forms, and AJAX. It covers basic and advanced event handling techniques, properties of HTML forms, and how to make asynchronous requests with AJAX. The document provides an overview of topics like event propagation, form validation, and manipulating HTTP headers. It concludes with homework assignments to create pages demonstrating a validated form and asynchronous requests with progress indicators.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 6

JavaScript Events, Forms & AJAX

Basic Events Handling


General UI implementations : event-driven

Events are not always triggered by user


Basic event handling: HTML attributes or JavaScript properties

<button onClick="alert(typeof this.onclick);"/>

btnMy.onclick = function () { alert(this); };


String attribute value vs. function property JS property names always lower case this and scope chain Event handlers return values

Advanced Event Handling


Adopted with DOM Level 2, except for Internet Explorer Event object parameter or global and its properties

2 phase propagation: capture and bubble stopPropagation() and cancelBubble preventDefault() and returnValue Handler registration: addEventListener / attachEvent
addEventListener() and useCapture Handler scope: not augmented; this keyword in IE Multiple handlers and duplicate registrations Specialized events (mouse, key) have different properties Synthetic events with dispatchEvent / fireEvent

HTML Forms

Submit button or no submit button ?

Difference between HTTP GET and POST


Form properties:action, method, enctype, target, elements Useful events on form elements: click, change, select, focus, blur

Common element properties: type, form, name, value


Useful applications:

validate input values before submit filter keys input (e.g. only digits) dynamically creating select options prepare additional hidden fields

AJAX

What does it stand for ?

(Asynchronous JavaScript and XML)

HTTP scripting alternatives: img, iframe, script XMLHttpRequest, XDomainRequest and ActiveXObject (Msxml2|Microsoft).XMLHTTP 3 steps: create, send, receive Cross-platform object creation open(method, url, async) and send(body) Asynchronous receiving with onreadystatechange and readyState: status, responseText, responseXML

Manipulating headers with setRequestHeader / getResponseHeader; explicit contentType


Other event handlers: onerror, ontimeout, onprogress, onload

Recap and Homework


Create an HTML page with a FORM containing all kinds of form elements and JavaScript validation on submit Create an HTML page that sends asynchronous requests and displays a progress bar while loading response

You might also like