Intro to JavaScript Events. JavaScript Events Events in JavaScript let a web page react to some type of input Many different ways to handle events due.

Slides:



Advertisements
Similar presentations
JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
Advertisements

University of Virginia 1 Modern Web Application Development Overview of some newer web applications methods Web 2.0 Ajax fundamentals Ruby on Rails.
AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.
19-Jun-15 Ajax. The hype Ajax (sometimes capitalized as AJAX) stands for Asynchronous JavaScript And XML Ajax is a technique for creating “better, faster,
20-Jun-15 JavaScript and HTML Simple Event Handling.
Ajax Dr Jim Briggs WEBP Ajax1. 2 Ajax Asynchronous JavaScript And XML Method of creating more interactive web applications Moves more of the application.
AJAX (Asynchronous JavaScript and XML) Amit Jain CS 590 – Winter 2008.
JQuery CS 268. What is jQuery? From their web site:
UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.
HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
Interactive Web Application with AJAX
Introduction to AJAX AJAX Keywords: JavaScript and XML
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
JavaScript & jQuery the missing manual Chapter 11
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
CSCI 6962: Server-side Design and Programming Introduction to AJAX.
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
XMLHttpRequest Object When Microsoft Internet Explorer 5.0 introduced a rudimentary level of XML support, an ActiveX library called MSXML was also introduced,
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
Lecture 9: AJAX, Javascript review..  AJAX  Synchronous vs. asynchronous browsing.  Refreshing only “part of a page” from a URL.  Frameworks: Prototype,
Event JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is.
Web Technology Introduction AJAXAJAX. AJAX Outline  What is AJAX?  Benefits  Real world examples  How it works  Code review  Samples.
School of Computing and Information Systems CS 371 Web Application Programming AJAX.
INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant.
Creating Dynamic Webpages
SYST Web Technologies SYST Web Technologies AJAX.
CS50 Week 9 Sam Green ’
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
 AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring.
AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How it works 2.
SE-2840 Dr. Mark L. Hornick 1 Introduction to Ajax Asynchronous Javascript And XML.
 Web pages originally static  Page is delivered exactly as stored on server  Same information displayed for all users, from all contexts  Dynamic.
4. Events are where it happens! Bear Bibeault Yehuda Katz.
Event Handling & AJAX IT210 Web Systems. Question How do we enable users to dynamically interact with a website? Answer: Use mouse and keyboard to trigger.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
Dave Salinas. What is XML? XML stands for eXtensible Markup Language Markup language, like HTML HTML was designed to display data, whereas XML was designed.
AJAX AJAX Asynchronous JavaScript and XML --- MADHAVI
Events Event Handling in JavaScript SoftUni Team Technical Trainers Software University
What is AJAX ? Asynchronous Javascript and XML. Not a stand-alone language or technology. It is a technique that combines a set of known technologies in.
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
AJAX – Asynchronous JavaScript And XML By Kranthi Kiran Nuthi CIS 764 Kansas State University.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
AJAX CS456 Fall Examples Where is AJAX used? Why do we care?
1 AJAX. AJAX – Whatzit? Asynchronous (content loading)‏ Javascript (logic & control)‏ And XML (request handling)‏
Introduction to AJAX MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/4/2016.
Javascript AJAX HTML WEB SERVER Asynchronous. Javascript HTML events DOM – document object model browser internal view of html page compute.
NCCUCS 軟體工程概論 Lecture 5: Ajax, Mashups April 29, 2014.
AJAX. Objectives Understand and apply AJAX Using AJAX in DOJO library.
Ajax SUBMITTED BY NITIN RAMANI C.S.E 3 rd Y 5 th S R.N CS SUBMITTED TO PRO. PUSHPARAJ PATEL SIR.
Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key.
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects.
What is AJAX ? Asynchronous Javascript and XML.
JavaScript and Ajax (Ajax Tutorial)
Not a Language but a series of techniques
AJAX AJAX = Asynchronous JavaScript and XML.
CS 371 Web Application Programming
AJAX – Asynchronous JavaScript and XML
AJAX.
AJAX.
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS
AJAX Robin Burke ECT 360.
ISC440: Web Programming 2 AJAX
JavaScript & jQuery AJAX.
DR. JOHN ABRAHAM PROFESSOR UTPA
<form> Handling
Presentation transcript:

Intro to JavaScript Events

JavaScript Events Events in JavaScript let a web page react to some type of input Many different ways to handle events due to history/vendor differences but we have a generally standard way now Will not cover all event levels Events W3C DOM Standard; attach to HTML elements DOM Levels 0 to 3

Event Handlers to HTML Attributes We can add an event handler to a HTML element onkeydown, onkeyup, onkeypress onclick, onmouseover, onmouseout, onmousedown, onmouseup Others… <div id="myDiv" onmouseover="changeColor(this,'red');" onmouseout="changeColor(this,'black');"> Hello there function addOne() { var el = document.theForm.myTextBox; el.value = parseInt(el.value) + 1; } function changeColor(el, col) { el.style.color = col; }

DOM Event Handlers HTML element event handlers fine for elements, not good for the entire webpage if it means adding handlers to every single element Various DOM Event Handlers Complicated by different methods for different browsers and different versions var btn = document.theForm.myButton; if (typeof addEventListener === "function") { btn.addEventListener("click", addOne, false); // Compliant browsers } else { btn.attachEvent("onclick", addOne);// IE8 and lower } function addOne() { var el = document.theForm.myTextBox; el.value = parseInt(el.value) + 1; }

Evolution – Make a event utility In file eventutility.js: var eventUtility = { addEvent : (function() { if (typeof addEventListener === "function") { return function(obj, evt, fn) { obj.addEventListener(evt, fn, false); }; } else { return function(obj, evt, fn) { obj.attachEvent("on" + evt, fn); }; } }()), removeEvent : (function() { if (typeof addEventListener === "function") { return function(obj, evt, fn) { obj.removeEventListener(evt, fn, false); }; } else { return function(obj, evt, fn) { obj.detachEvent("on" + evt, fn); }; } }()) };

HTML / JavaScript Code var btn = document.theForm.myButton; eventUtility.addEvent(btn, "click", addOne); function addOne() { var el = document.theForm.myTextBox; el.value = parseInt(el.value) + 1; }

Accessing the Event Target Use event.type and event.target to determine the event and target of the event var btn = document.theForm.myButton; eventUtility.addEvent(btn, "click", eventHandler); function eventHandler(event) { alert(event.type); event.target.style.backgroundColor = "green"; }

Event Target Can use the same event handler for multiple targets var btn = document.theForm.myButton; eventUtility.addEvent(btn, "click", eventHandler); var txt = document.theForm.text0; eventUtility.addEvent(txt, "keypress", eventHandler); function eventHandler(event) { if (event.type == "keypress") { document.theForm.myTextBox.value = parseInt(document.theForm.myTextBox.value) + 1; } else if (event.type == "click") { alert("You clicked on " + event.target.id); }

AJAX Term invented by Jesse Garrett, 2005, “Ajax: A New Approach to Web Applications” Asynchronous JavaScript + XML Although XML still used, other formats also used as well In general, the use of JavaScript to send and receive data using HTTP without reloading the page Allows for dynamic pages without clunky submit/reload paradigm

AJAX and the XHR Object XHR = XMLHttpRequest Object Originated as a component, XmlHttp, in Microsoft’s MSXML Library Still necessary if you’re programming for old versions of IE Built into modern browsers Despite the XML name you can retrieve more than XML and is commonly used with plaintext Must be used with a HTTP server Creating an XHR object: var xhr = new XMLHttpRequest();

XHR Object Call the open method xhr.open("GET", "info.txt", true); Asynchronously retrieve “info.txt” from the same website/port, can also use POST Five ready states 0: Object created but not initialized 1: Object initialized but request not sent 2: Request sent 3: Response received from HTTP server 4: Requested data fully received Same response codes as HTTP 2xx = Success, 4xx = Client Error, 5xx = Server Error

Sample XHR Code This is a test Testing var xhr = new XMLHttpRequest(); xhr.open("GET", "info.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { alert("response received: " + xhr.responseText); } xhr.send(null);

Ajax POST Use POST requests to send data and receive a response; couple with events for dynamic page Suggestion goes here from server var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { processResponse(xhr.responseText); } var txt = document.theForm.text1; eventUtility.addEvent(txt, "keyup", eventHandler); // When we press a key send to the server like it is a // and wait for a response function eventHandler(event) { var data = "myTextBox=" + encodeURIComponent(document.theForm.myTextBox.value) + "&otherParameter=someValue"; xhr.open("POST", "ajax_test.php"); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); } // Display response from server in DIV function processResponse(responseData) { var el = document.getElementById("suggestion"); el.innerHTML = " " + responseData + " "; }

Ajax Server Side PHP <?php if (isset($_REQUEST['myTextBox'])) { // Normally you would do some more interesting lookup than this // canned example $txt= strtolower($_REQUEST['myTextBox']); if (strlen($txt)>0) { $firstLetter = $txt[0]; if ($firstLetter == 'a') print "Alfred"; else if ($firstLetter == 'k') print "Kenrick"; else if ($firstLetter == 'b') print "Bob"; else if ($firstLetter == 'j') print "Jose"; } else print ""; } else print ""; ?>