Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains 2 components

Size: px
Start display at page:

Download "Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains 2 components"

Transcription

1 Module 5 JavaScript, AJAX, and jquery Module 5 Contains 2 components Both the Individual and Group portion are due on Monday October 30 th Start early on this module One of the most time consuming modules in the course Read the WIKI before starting along with a few JavaScript and jquery tutorials Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Module 5 JavaScript Scripting language to add interactivity to HTML pages Java and JavaScript are completely different languages AJAX Asynchronous JavaScript and XML (AJAX) Allows for retrieval of data from web servers in the background jquery JavaScript library Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

2 JavaScript Popular scripting language widely supported in browsers to add interaction Pop-Up Windows User Input Forms Calculations Special Effects Implementation of the ECMAScript language Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping JavaScript JavaScript is a prototyped-based scripting language Dynamic, weakly typed Interpreted language You do not compile it Uses prototypes instead of classes for inheritance Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

3 Is JavaScript like Java? Java and JavaScript are similar like Car and Carpet are similar Two completely different languages with different concepts Java is compiled, JavaScript is interpreted Java is object-oriented, JavaScript is prototyped based Java requires strict typing, JavaScript allows for dynamic typing Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping JavaScript Basics Declare a variable with var var foo = JS is fun ; Variables are objects Define a function with function function foo() { //Some JS code here } Functions are also objects Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

4 Writing a JavaScript Program JavaScript programs can either be placed directly into the HTML file or can be saved in external files You can place JavaScript anywhere within the HTML file: within the <HEAD> tags or the <BODY> tags Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Using the <SCRIPT> Tag <script src= url ></script> SRC property is required only if you place your program in a separate file <script> script commands and comments </script> Older versions of HTML (before 5) used a slightly different format <script type= text/javascript > This is no longer necessary, simply use <script> Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

5 JavaScript Example (part 1) <!DOCTYPE html> <html> <head><title>my JavaScript Example</title> <script> function MsgBox(textstring) { alert(textstring); } </script> Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping JavaScript Example (part 2) <body> <form> <INPUT NAME="text1" TYPE=Text> <INPUT NAME="submit" TYPE=Button VALUE="Show Me" onclick="msgbox(form.text1.value) > </form> </body> </html> Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

6 JavaScript Example <!DOCTYPE html> <html> <head><title>my JavaScript Example</title> <script> function MsgBox(textstring) { alert(textstring); } </script> </head> <body> <form> <INPUT NAME="text1" TYPE=Text> <INPUT NAME="submit" TYPE=Button VALUE="Show Me" onclick="msgbox(form.text1.value) > </form> </body> </html> Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping JavaScript Event Listeners We can control events in a more granular way using Event Listeners Event Listeners allow for custom behavior for every element document.getelementbyid("hello").addeventlistener("click",msgbox, false); Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

7 JavaScript Additional Information The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials Additional JS tutorials utorials Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping JavaScript Debugging JSHint is a great resources to help debug your code Tools for browsers also exist Firefox Firebug extension Chrome and Safari WebkitInspector comes bundled with the browser Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

8 JavaScript Examples Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping AJAX Stands for Asynchronous JavaScript and XML Development technique for creating interactive web applications Not a new Technology but more of a Pattern Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

9 Motivation for AJAX Web pages always RELOAD and never get UPDATED Users wait for the entire page to load even if a single piece of data is needed Single request/response restrictions Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Components HTML (or XHTML) and CSS Presenting information Document Object Model Dynamic display and interaction with the information XMLHttpRequest object Retrieving data ASYNCHRONOUSLY from the web server. Javascript Binding everything together Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

10 The DOM Document Object Model (DOM): platform- and language-independent way to represent XML Adopts a tree-based representation W3C standard, supported by modern browsers JavaScript uses DOM to manipulate content To process user events To process server responses (via XMLHttpRequest) Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping The DOM Unlike other programming languages, JavaScript understands HTML and can directly access it JavaScript uses the HTML Document Object Model to manipulate HTML The DOM is a hierarchy of HTML things Use the DOM to build an address to refer to HTML elements in a web page Levels of the DOM are dot-separated in the syntax Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

11 DOM Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Accessing the DOM Example Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

12 Web Application and AJAX Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Request Processing Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

13 Asynchronous processing - XMLHttpRequest Allows to execute an HTTP request in background Callbacks kick back into Javascript Code Supported in all standard browsers Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Using XMLHttpRequest First you must create the XMLHttpRequest Object in JavaScript Example var xmlhttp = new XMLHttpRequest(); Older browsers might require different syntax For example (Internet Explorer versions <9) var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); We will not worry about JS compatibility with IE < 9 in this course Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

14 Using XMLHttpRequest Transferring data to Server Open() to initialize connection to Server Send() to send the actual Data Example (POST) xmlhttp.open("post", "/query.cgi,true); Example (GET) xmlhttp.open("get","hello.txt",true); xmlhttp.send(null); Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping What happens after sending data? XMLHttpRequest contacts the server and retrieves the data Can take indeterminate amount of time Create an Event Listener to determine when the object has finished loading with the data we are interested in Specifically listen for the load event to occur Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

15 Events of interest xmlhttp.addeventlistener("load,mycallbackfunction,false); Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Using XMLHttpRequest Parse and display data responsexml DOM-structured object responsetext One complete string Examples var namenode = requester.responsexml.getelementsbytagname("name")[0]; var nametextnode = namenode.childnodes[0]; From an event function mycallback(event) { alert( The response + event.target.responsetext); } Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

16 AJAX Example <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.open("get","hello.txt",true); xmlhttp.addeventlistener("load,mycallback,false); xmlhttp.send(null); function mycallback(event) { alert( The response + event.target.responsetext); } </script> Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Interaction between Components Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

17 AJAX Example Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping jquery Simplify your JavaScript Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

18 What is jquery? A framework for Client Side JavaScript Frameworks provide useful alternatives for common programming tasks, creating functionality which may not be available or cumbersome to use within a language. An open source project, maintained by a group of developers, with a very active support base and thorough, well written documentation. Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping What jquery is not A substitute for knowing JavaScript jquery is extraordinarily useful, but you should still know how JavaScript works and how to use it correctly. This means more than Googling a tutorial and calling yourself an expert. A solve all There is still plenty of functionality built into JavaScript that should be utilized! Don t turn every project into a quest to jquery-ize the problem, use jquery where it makes sense. Create solutions in environments where they belong. Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

19 What is available with jquery? Cross browser support and detection AJAX functions CSS functions DOM manipulation DOM transversal Attribute manipulation Event detection and handling JavaScript animation Hundreds of plugins for pre-built user interfaces, advanced animations, form validation, etc Expandable functionality using custom plugins Small foot print Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping The jquery/$ Object Represented by both $ and jquery To use jquery only, use jquery.noconflict(), for other frameworks that use $ By default,$ represents the jquery object. When combined with a selector, can represent multiple DOM Elements Used with all jquery functions. Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

20 jquery basic syntax $(selector).action() jquery Examples $ sign used to access jquery Selector finds the HTML element(s) An action is performed on the element(s) Examples $(this).hide() //hides current element $( p ).hide() //hides all <p> elements $(.test ).hide() //hides all elements with class= test $( #test ).hide() //hides the element with id= test Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping jquery & AJAX jquery has a series of functions which provide a common interface for AJAX, no matter what browser you are using Most of the upper level AJAX functions have a common layout: $.func(url[,params][,callback]), [ ] optional url: string representing server target params: names and values to send to server callback: function executed on successful communication. Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

21 jquery AJAX Functions $.func(url[,params][,callback]) $.get $.getjson $.getifmodified $.getscript $.post $(selector), inject HTML load loadifmodified $(selector), ajaxsetup alts ajaxcomplete ajaxerror ajaxsend ajaxstart ajaxstop ajaxsuccess $.ajax, $.ajaxsetup async beforesend complete contenttype data datatype error global ifmodified processdata success timeout type url Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Example Show/Hide the old way <a href="#" onclick="toggle_visibility('foo');">click here to toggle visibility of #foo</a> function toggle_visibility(id) { var e = document.getelementbyid(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

22 Example Show/Hide with jquery $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); }); Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping Example Ajax the old way function GetXmlHttpObject(handler) { var objxmlhttp = null; //Holds the local xmlhttp object instance } //Depending on the browser, try to create the xmlhttp object if (is_ie){ var strobjname = (is_ie5)? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; try{ objxmlhttp = new ActiveXObject(strObjName); objxmlhttp.onreadystatechange = handler; } catch(e){ //Object creation errored alert('verify that activescripting and activex controls are enabled'); return; } } else{ // Mozilla Netscape Safari objxmlhttp = new XMLHttpRequest(); objxmlhttp.onload = handler; objxmlhttp.onerror = handler; } //Return the instantiated object return objxmlhttp; Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

23 Example Ajax with jquery $.get("update_actions.aspx", {st: "yes", f: $(this).attr("id")} ); Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping jquery Examples Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

24 Calendar Examples Extensible Networking Platform CSE 330 Creative Programming and Rapid Prototyping

Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains an Individual and Group component

Module 5 JavaScript, AJAX, and jquery. Module 5. Module 5 Contains an Individual and Group component Module 5 JavaScript, AJAX, and jquery Module 5 Contains an Individual and Group component Both are due on Wednesday October 24 th Start early on this module One of the most time consuming modules in the

More information

JavaScript, jquery & AJAX

JavaScript, jquery & AJAX JavaScript, jquery & AJAX What is JavaScript? An interpreted programming language with object oriented capabilities. Not Java! Originally called LiveScript, changed to JavaScript as a marketing ploy by

More information

TIME SCHEDULE MODULE TOPICS PERIODS. HTML Document Object Model (DOM) and javascript Object Notation (JSON)

TIME SCHEDULE MODULE TOPICS PERIODS. HTML Document Object Model (DOM) and javascript Object Notation (JSON) COURSE TITLE : ADVANCED WEB DESIGN COURSE CODE : 5262 COURSE CATEGORY : A PERIODS/WEEK : 4 PERIODS/SEMESTER : 52 CREDITS : 4 TIME SCHEDULE MODULE TOPICS PERIODS 1 HTML Document Object Model (DOM) and javascript

More information

User Interaction: jquery

User Interaction: jquery User Interaction: jquery Assoc. Professor Donald J. Patterson INF 133 Fall 2012 1 jquery A JavaScript Library Cross-browser Free (beer & speech) It supports manipulating HTML elements (DOM) animations

More information

AJAX: Introduction CISC 282 November 27, 2018

AJAX: Introduction CISC 282 November 27, 2018 AJAX: Introduction CISC 282 November 27, 2018 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

2/6/2012. Rich Internet Applications. What is Ajax? Defining AJAX. Asynchronous JavaScript and XML Term coined in 2005 by Jesse James Garrett

2/6/2012. Rich Internet Applications. What is Ajax? Defining AJAX. Asynchronous JavaScript and XML Term coined in 2005 by Jesse James Garrett What is Ajax? Asynchronous JavaScript and XML Term coined in 2005 by Jesse James Garrett http://www.adaptivepath.com/ideas/essays/archives /000385.php Ajax isn t really new, and isn t a single technology

More information

An Introduction to AJAX. By : I. Moamin Abughazaleh

An Introduction to AJAX. By : I. Moamin Abughazaleh An Introduction to AJAX By : I. Moamin Abughazaleh How HTTP works? Page 2 / 25 Classical HTTP Process Page 3 / 25 1. The visitor requests a page 2. The server send the entire HTML, CSS and Javascript code

More information

A.A. 2008/09. What is Ajax?

A.A. 2008/09. What is Ajax? Internet t Software Technologies AJAX IMCNE A.A. 2008/09 Gabriele Cecchetti What is Ajax? AJAX stands for Asynchronous JavaScript And XML. AJAX is a type of programming made popular in 2005 by Google (with

More information

AJAX(Asynchronous Javascript + XML) Creating client-side dynamic Web pages

AJAX(Asynchronous Javascript + XML) Creating client-side dynamic Web pages AJAX(Asynchronous Javascript + XML) Creating client-side dynamic Web pages AJAX = Asynchronous JavaScript and XML.AJAX is not a new programming language, but a new way to use existing standards. AJAX is

More information

XMLHttpRequest. CS144: Web Applications

XMLHttpRequest. CS144: Web Applications XMLHttpRequest http://oak.cs.ucla.edu/cs144/examples/google-suggest.html Q: What is going on behind the scene? What events does it monitor? What does it do when

More information

Index. Boolean value, 282

Index. Boolean value, 282 Index A AJAX events global level ajaxcomplete, 317 ajaxerror, 316 ajaxsend, 316 ajaxstart, 316 ajaxstop, 317 ajaxsuccess, 316 order of triggering code implementation, 317 display list, 321 flowchart, 322

More information

Lesson 12: JavaScript and AJAX

Lesson 12: JavaScript and AJAX Lesson 12: JavaScript and AJAX Objectives Define fundamental AJAX elements and procedures Diagram common interactions among JavaScript, XML and XHTML Identify key XML structures and restrictions in relation

More information

Session 16. JavaScript Part 1. Reading

Session 16. JavaScript Part 1. Reading Session 16 JavaScript Part 1 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript / p W3C www.w3.org/tr/rec-html40/interact/scripts.html Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/

More information

AJAX: The Basics CISC 282 March 25, 2014

AJAX: The Basics CISC 282 March 25, 2014 AJAX: The Basics CISC 282 March 25, 2014 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the browser

More information

Session 6. JavaScript Part 1. Reading

Session 6. JavaScript Part 1. Reading Session 6 JavaScript Part 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/ JavaScript Debugging www.w3schools.com/js/js_debugging.asp

More information

AJAX: The Basics CISC 282 November 22, 2017

AJAX: The Basics CISC 282 November 22, 2017 AJAX: The Basics CISC 282 November 22, 2017 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the

More information

CITS1231 Web Technologies. Ajax and Web 2.0 Turning clunky website into interactive mashups

CITS1231 Web Technologies. Ajax and Web 2.0 Turning clunky website into interactive mashups CITS1231 Web Technologies Ajax and Web 2.0 Turning clunky website into interactive mashups What is Ajax? Shorthand for Asynchronous JavaScript and XML. Coined by Jesse James Garrett of Adaptive Path. Helps

More information

Ajax Ajax Ajax = Asynchronous JavaScript and XML Using a set of methods built in to JavaScript to transfer data between the browser and a server in the background Reduces the amount of data that must be

More information

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery. HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets

More information

AJAX. Introduction. AJAX: Asynchronous JavaScript and XML

AJAX. Introduction. AJAX: Asynchronous JavaScript and XML AJAX 1 2 Introduction AJAX: Asynchronous JavaScript and XML Popular in 2005 by Google Create interactive web applications Exchange small amounts of data with the server behind the scenes No need to reload

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript? Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of

More information

Index. Ray Nicholus 2016 R. Nicholus, Beyond jquery, DOI /

Index. Ray Nicholus 2016 R. Nicholus, Beyond jquery, DOI / Index A addclass() method, 2 addeventlistener, 154, 156 AJAX communication, 20 asynchronous operations, 110 expected and unexpected responses, 111 HTTP, 110 web sockets, 111 AJAX requests DELETE requests,

More information

Copyright Descriptor Systems, Course materials may not be reproduced in whole or in part without prior written consent of Joel Barnum

Copyright Descriptor Systems, Course materials may not be reproduced in whole or in part without prior written consent of Joel Barnum Ajax The notion of asynchronous request processing using the XMLHttpRequest object has been around for several years, but the term "AJAX" was coined by Jesse James Garrett of Adaptive Path. You can read

More information

AJAX ASYNCHRONOUS JAVASCRIPT AND XML. Laura Farinetti - DAUIN

AJAX ASYNCHRONOUS JAVASCRIPT AND XML. Laura Farinetti - DAUIN AJAX ASYNCHRONOUS JAVASCRIPT AND XML Laura Farinetti - DAUIN Rich-client asynchronous transactions In 2005, Jesse James Garrett wrote an online article titled Ajax: A New Approach to Web Applications (www.adaptivepath.com/ideas/essays/archives/000

More information

CISC 1600 Lecture 2.4 Introduction to JavaScript

CISC 1600 Lecture 2.4 Introduction to JavaScript CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java

More information

Outline. Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages

Outline. Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages JavaScript CMPT 281 Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages Announcements Layout with tables Assignment 3 JavaScript Resources Resources Why JavaScript?

More information

Web Programming Step by Step

Web Programming Step by Step Web Programming Step by Step Lecture 19 Ajax Reading: 10.1-10.2 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. Synchronous web communication

More information

,

, Weekdays:- 1½ hrs / 3 days Fastrack:- 1½hrs / Day [Class Room and Online] ISO 9001:2015 CERTIFIED ADMEC Multimedia Institute www.admecindia.co.in 9911782350, 9811818122 Welcome to one of the highly professional

More information

Ajax Ajax Ajax = Asynchronous JavaScript and XML Using a set of methods built in to JavaScript to transfer data between the browser and a server in the background Reduces the amount of data that must be

More information

AJAX Programming Chris Seddon

AJAX Programming Chris Seddon AJAX Programming Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 What is Ajax? "Asynchronous JavaScript and XML" Originally described in 2005 by Jesse

More information

Client Side JavaScript and AJAX

Client Side JavaScript and AJAX Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is

More information

Contents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services

Contents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services Ajax Contents 1. Overview of Ajax 2. Using Ajax directly 3. jquery and Ajax 4. Consuming RESTful services Demos folder: Demos\14-Ajax 2 1. Overview of Ajax What is Ajax? Traditional Web applications Ajax

More information

INF5750. Introduction to JavaScript and Node.js

INF5750. Introduction to JavaScript and Node.js INF5750 Introduction to JavaScript and Node.js Outline Introduction to JavaScript Language basics Introduction to Node.js Tips and tools for working with JS and Node.js What is JavaScript? Built as scripting

More information

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages

Module7: AJAX. Click, wait, and refresh user interaction. Synchronous request/response communication model. Page-driven: Workflow is based on pages INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module7: Objectives/Outline Objectives Outline Understand the role of Learn how to use in your web applications Rich User Experience

More information

Outline. AJAX for Libraries. Jason A. Clark Head of Digital Access and Web Services Montana State University Libraries

Outline. AJAX for Libraries. Jason A. Clark Head of Digital Access and Web Services Montana State University Libraries AJAX for Libraries Jason A. Clark Head of Digital Access and Web Services Montana State University Libraries Karen A. Coombs Head of Web Services University of Houston Libraries Outline 1. What you re

More information

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation

More information

JavaScript Programming

JavaScript Programming JavaScript Programming Course ISI-1337B - 5 Days - Instructor-led, Hands on Introduction Today, JavaScript is used in almost 90% of all websites, including the most heavilytrafficked sites like Google,

More information

Fall Semester (081) Module7: AJAX

Fall Semester (081) Module7: AJAX INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module7: AJAX Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.edu.sa

More information

AJAX. Lab. de Bases de Dados e Aplicações Web MIEIC, FEUP 2010/11. Sérgio Nunes

AJAX. Lab. de Bases de Dados e Aplicações Web MIEIC, FEUP 2010/11. Sérgio Nunes AJAX Lab. de Bases de Dados e Aplicações Web MIEIC, FEUP 2010/11 Sérgio Nunes Server calls from web pages using JavaScript call HTTP data Motivation The traditional request-response cycle in web applications

More information

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation

More information

UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser?

UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser? UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? A 1: A text editor is a program that helps you write plain text (without any formatting) and save it to a file. A good example is

More information

Session 11. Ajax. Reading & Reference

Session 11. Ajax. Reading & Reference Session 11 Ajax Reference XMLHttpRequest object Reading & Reference en.wikipedia.org/wiki/xmlhttprequest Specification developer.mozilla.org/en-us/docs/web/api/xmlhttprequest JavaScript (6th Edition) by

More information

Client-side Debugging. Gary Bettencourt

Client-side Debugging. Gary Bettencourt Client-side Debugging Gary Bettencourt Overview What is client-side debugging Tool overview Simple & Advanced techniques Debugging on Mobile devices Overview Client debugging involves more then just debugging

More information

AJAX Workshop. Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries

AJAX Workshop. Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries AJAX Workshop Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries Outline 1. What you re in for 2. What s AJAX? 3. Why AJAX? 4. Look at some AJAX examples

More information

Wakanda Architecture. Wakanda is made up of three main components: Wakanda Server Wakanda Studio Wakanda Client Framework

Wakanda Architecture. Wakanda is made up of three main components: Wakanda Server Wakanda Studio Wakanda Client Framework Wakanda Architecture Wakanda is made up of three main components: Wakanda Server Wakanda Studio Wakanda Client Framework Note: For a more general overview of Wakanda, please see What is Wakanda?) Wakanda

More information

The course is supplemented by numerous hands-on labs that help attendees reinforce their theoretical knowledge of the learned material.

The course is supplemented by numerous hands-on labs that help attendees reinforce their theoretical knowledge of the learned material. Lincoln Land Community College Capital City Training Center 130 West Mason Springfield, IL 62702 217-782-7436 www.llcc.edu/cctc WA2442 Introduction to JavaScript Objectives This intensive training course

More information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of

More information

BEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from

BEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google

More information

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective

More information

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end

More information

5/19/2015. Objectives. JavaScript, Sixth Edition. Introduction to the World Wide Web (cont d.) Introduction to the World Wide Web

5/19/2015. Objectives. JavaScript, Sixth Edition. Introduction to the World Wide Web (cont d.) Introduction to the World Wide Web Objectives JavaScript, Sixth Edition Chapter 1 Introduction to JavaScript When you complete this chapter, you will be able to: Explain the history of the World Wide Web Describe the difference between

More information

AngularJS AN INTRODUCTION. Introduction to the AngularJS framework

AngularJS AN INTRODUCTION. Introduction to the AngularJS framework AngularJS AN INTRODUCTION Introduction to the AngularJS framework AngularJS Javascript framework for writing frontend web apps DOM manipulation, input validation, server communication, URL management,

More information

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012

More information

Using Development Tools to Examine Webpages

Using Development Tools to Examine Webpages Chapter 9 Using Development Tools to Examine Webpages Skills you will learn: For this tutorial, we will use the developer tools in Firefox. However, these are quite similar to the developer tools found

More information

Asynchronous JavaScript + XML (Ajax)

Asynchronous JavaScript + XML (Ajax) Asynchronous JavaScript + XML (Ajax) CSE 190 M (Web Programming), Spring 2008 University of Washington References: w3schools, Wikipedia Except where otherwise noted, the contents of this presentation are

More information

Session 18. jquery - Ajax. Reference. Tutorials. jquery Methods. Session 18 jquery and Ajax 10/31/ Robert Kelly,

Session 18. jquery - Ajax. Reference. Tutorials. jquery Methods. Session 18 jquery and Ajax 10/31/ Robert Kelly, Session 18 jquery - Ajax 1 Tutorials Reference http://learn.jquery.com/ajax/ http://www.w3schools.com/jquery/jquery_ajax_intro.asp jquery Methods http://www.w3schools.com/jquery/jquery_ref_ajax.asp 2 10/31/2018

More information

Ajax- XMLHttpResponse. Returns a value such as ArrayBuffer, Blob, Document, JavaScript object, or a DOMString, based on the value of

Ajax- XMLHttpResponse. Returns a value such as ArrayBuffer, Blob, Document, JavaScript object, or a DOMString, based on the value of Ajax- XMLHttpResponse XMLHttpResponse - A Read only field Returns a value such as ArrayBuffer, Blob, Document, JavaScript object, or a DOMString, based on the value of XMLHttpRequest.responseType. This

More information

CS7026. Introduction to jquery

CS7026. Introduction to jquery CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based

More information

Web Application Security

Web Application Security Web Application Security Rajendra Kachhwaha rajendra1983@gmail.com September 23, 2015 Lecture 13: 1/ 18 Outline Introduction to AJAX: 1 What is AJAX 2 Why & When use AJAX 3 What is an AJAX Web Application

More information

Intro To Javascript. Intro to Web Development

Intro To Javascript. Intro to Web Development Intro To Javascript Intro to Web Development Preamble I don't like JavaScript But with JS your feelings don't matter. Browsers don't work well with any other language so you have to write code that either:

More information

<form>. input elements. </form>

<form>. input elements. </form> CS 183 4/8/2010 A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-down menus, radio buttons,

More information

Working with Javascript Building Responsive Library apps

Working with Javascript Building Responsive Library apps Working with Javascript Building Responsive Library apps Computers in Libraries April 15, 2010 Arlington, VA Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview

More information

CodeValue. C ollege. Prerequisites: Basic knowledge of web development and especially JavaScript.

CodeValue. C ollege. Prerequisites: Basic knowledge of web development and especially JavaScript. Course Syllabuses Introduction to AngularJS Length: 3 days Prerequisites: Basic knowledge of web development and especially JavaScript. Objectives: Students will learn to take advantage of AngularJS and

More information

CSC Javascript

CSC Javascript CSC 4800 Javascript See book! Javascript Syntax How to embed javascript between from an external file In an event handler URL - bookmarklet

More information

Comprehensive AngularJS Programming (5 Days)

Comprehensive AngularJS Programming (5 Days) www.peaklearningllc.com S103 Comprehensive AngularJS Programming (5 Days) The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop

More information

JavaScript: Introduction, Types

JavaScript: Introduction, Types JavaScript: Introduction, Types Computer Science and Engineering College of Engineering The Ohio State University Lecture 19 History Developed by Netscape "LiveScript", then renamed "JavaScript" Nothing

More information

Introduction to AJAX Bringing Interactivity & Intuitiveness Into Web Applications. By : Bhanwar Gupta SD-Team-Member Jsoft Solutions

Introduction to AJAX Bringing Interactivity & Intuitiveness Into Web Applications. By : Bhanwar Gupta SD-Team-Member Jsoft Solutions Introduction to AJAX Bringing Interactivity & Intuitiveness Into Web Applications By : Bhanwar Gupta SD-Team-Member Jsoft Solutions Applications today You have two basic choices: Desktop applications and

More information

Welcome to CS50 section! This is Week 10 :(

Welcome to CS50 section! This is Week 10 :( Welcome to CS50 section! This is Week 10 :( This is our last section! Final project dates Official proposals: due this Friday at noon Status report: due Monday, Nov 28 at noon Hackathon: Thursday, Dec

More information

GRITS AJAX & GWT. Trey Roby. GRITS 5/14/09 Roby - 1

GRITS AJAX & GWT. Trey Roby. GRITS 5/14/09 Roby - 1 AJAX & GWT Trey Roby GRITS 5/14/09 Roby - 1 1 Change The Web is Changing Things we never imagined Central to people s lives Great Opportunity GRITS 5/14/09 Roby - 2 2 A Very Brief History of Computing

More information

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017)

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,

More information

WebApp development. Outline. Web app structure. HTML basics. 1. Fundamentals of a web app / website. Tiberiu Vilcu

WebApp development. Outline. Web app structure. HTML basics. 1. Fundamentals of a web app / website. Tiberiu Vilcu Outline WebApp development Tiberiu Vilcu Prepared for EECS 411 Sugih Jamin 20 September 2017 1 2 Web app structure HTML basics Back-end: Web server Database / data storage Front-end: HTML page CSS JavaScript

More information

AJAX and PHP AJAX. Christian Wenz,

AJAX and PHP AJAX. Christian Wenz, AJAX and PHP Christian Wenz, AJAX A Dutch soccer team A cleaner Two characters from Iliad A city in Canada A mountain in Colorado... Asynchronous JavaScript + XML 1 1 What is AJAX?

More information

CGS 3066: Spring 2015 JavaScript Reference

CGS 3066: Spring 2015 JavaScript Reference CGS 3066: Spring 2015 JavaScript Reference Can also be used as a study guide. Only covers topics discussed in class. 1 Introduction JavaScript is a scripting language produced by Netscape for use within

More information

HTML5 MOCK TEST HTML5 MOCK TEST I

HTML5 MOCK TEST HTML5 MOCK TEST I http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your

More information

Etanova Enterprise Solutions

Etanova Enterprise Solutions Etanova Enterprise Solutions Front End Development» 2018-09-23 http://www.etanova.com/technologies/front-end-development Contents HTML 5... 6 Rich Internet Applications... 6 Web Browser Hardware Acceleration...

More information

The Discussion of Cross-platform Mobile Application Development Based on Phone Gap Method Limei Cui

The Discussion of Cross-platform Mobile Application Development Based on Phone Gap Method Limei Cui 6th International Conference on Sensor Network and Computer Engineering (ICSNCE 2016) The Discussion of Cross-platform Mobile Application Development Based on Phone Gap Method Limei Cui Qujing Normal University,

More information

JavaScript is described in detail in many books on the subject, and there is excellent tutorial material at

JavaScript is described in detail in many books on the subject, and there is excellent tutorial material at JavaScript (last updated April 15, 2013: LSS) JavaScript is a scripting language, specifically for use on web pages. It runs within the browser (that is to say, it is a client- side scripting language),

More information

Jquery Manually Set Checkbox Checked Or Not

Jquery Manually Set Checkbox Checked Or Not Jquery Manually Set Checkbox Checked Or Not Working Second Time jquery code to set checkbox element to checked not working. Apr 09 I forced a loop to show checked state after the second menu item in the

More information

Programming in HTML5 with JavaScript and CSS3

Programming in HTML5 with JavaScript and CSS3 20480 - Programming in HTML5 with JavaScript and CSS3 Duration: 5 days Course Price: $2,975 Software Assurance Eligible Course Description Course Overview This training course provides an introduction

More information

10.1 Overview of Ajax

10.1 Overview of Ajax 10.1 Overview of Ajax - History - Possibility began with the nonstandard iframe element, which appeared in IE4 and Netscape 4 - An iframe element could be made invisible and could be used to send asynchronous

More information

Javascript. Many examples from Kyle Simpson: Scope and Closures

Javascript. Many examples from Kyle Simpson: Scope and Closures Javascript Many examples from Kyle Simpson: Scope and Closures What is JavaScript? Not related to Java (except that syntax is C/Java- like) Created by Brendan Eich at Netscape later standardized through

More information

AJAX: Rich Internet Applications

AJAX: Rich Internet Applications AJAX: Rich Internet Applications Web Programming Uta Priss ZELL, Ostfalia University 2013 Web Programming AJAX Slide 1/27 Outline Rich Internet Applications AJAX AJAX example Conclusion More AJAX Search

More information

COURSE 20480B: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

COURSE 20480B: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 ABOUT THIS COURSE This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into

More information

footer, header, nav, section. search. ! Better Accessibility.! Cleaner Code. ! Smarter Storage.! Better Interactions.

footer, header, nav, section. search. ! Better Accessibility.! Cleaner Code. ! Smarter Storage.! Better Interactions. By Sruthi!!!! HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. The current version

More information

E ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161

E ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161 A element, 108 accessing objects within HTML, using JavaScript, 27 28, 28 activatediv()/deactivatediv(), 114 115, 115 ActiveXObject, AJAX and, 132, 140 adding information to page dynamically, 30, 30,

More information

Programming in HTML5 with JavaScript and CSS3

Programming in HTML5 with JavaScript and CSS3 Programming in HTML5 with JavaScript and CSS3 20480B; 5 days, Instructor-led Course Description This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic

More information

Ajax. Ronald J. Glotzbach

Ajax. Ronald J. Glotzbach Ajax Ronald J. Glotzbach What is AJAX? Asynchronous JavaScript and XML Ajax is not a technology Ajax mixes well known programming techniques in an uncommon way Enables web builders to create more appealing

More information

Web Programming Paper Solution (Chapter wise)

Web Programming Paper Solution (Chapter wise) What is valid XML document? Design an XML document for address book If in XML document All tags are properly closed All tags are properly nested They have a single root element XML document forms XML tree

More information

Term Paper. P r o f. D r. E d u a r d H e i n d l. H o c h s c h u l e F u r t w a n g e n U n i v e r s i t y. P r e s e n t e d T o :

Term Paper. P r o f. D r. E d u a r d H e i n d l. H o c h s c h u l e F u r t w a n g e n U n i v e r s i t y. P r e s e n t e d T o : Version: 0.1 Date: 02.05.2009 Author(s): Doddy Satyasree AJAX Person responsable: Doddy Satyasree Language: English Term Paper History Version Status Date 0.1 Draft Version created 02.05.2009 0.2 Final

More information

Jquery.ajax Call Returns Status Code Of 200 But Fires Jquery Error

Jquery.ajax Call Returns Status Code Of 200 But Fires Jquery Error Jquery.ajax Call Returns Status Code Of 200 But Fires Jquery Error The request returns http 200 OK, but the xhr status is 0, error. jquery Ajax Request to get JSON data fires error event to make an ajax

More information

CIW 1D CIW JavaScript Specialist.

CIW 1D CIW JavaScript Specialist. CIW 1D0-635 CIW JavaScript Specialist http://killexams.com/exam-detail/1d0-635 Answer: A QUESTION: 51 Jane has created a file with commonly used JavaScript functions and saved it as "allfunctions.js" in

More information

CSE 154 LECTURE 26: JAVASCRIPT FRAMEWORKS

CSE 154 LECTURE 26: JAVASCRIPT FRAMEWORKS CSE 154 LECTURE 26: JAVASCRIPT FRAMEWORKS Why Frameworks? JavaScript is a powerful language, but it has many flaws: the DOM can be clunky to use the same code doesn't always work the same way in every

More information

jquery and AJAX

jquery and AJAX jquery and AJAX http://www.flickr.com/photos/pmarkham/3165964414/ Dynamic HTML (DHTML) Manipulating the web page's structure is essential for creating a highly responsive UI Two main approaches Manipulate

More information

JavaScript. jquery and other frameworks. Jacobo Aragunde Pérez. blogs.igalia.com/jaragunde

JavaScript. jquery and other frameworks. Jacobo Aragunde Pérez. blogs.igalia.com/jaragunde JavaScript static void _f_do_barnacle_install_properties(gobjectclass *gobject_class) { GParamSpec *pspec; /* Party code attribute */ pspec = g_param_spec_uint64 (F_DO_BARNACLE_CODE, jquery and other frameworks

More information

But before understanding the Selenium WebDriver concept, we need to know about the Selenium first.

But before understanding the Selenium WebDriver concept, we need to know about the Selenium first. As per the today s scenario, companies not only desire to test software adequately, but they also want to get the work done as quickly and thoroughly as possible. To accomplish this goal, organizations

More information

Web 2.0 Käyttöliittymätekniikat

Web 2.0 Käyttöliittymätekniikat Web 2.0 Käyttöliittymätekniikat ELKOM 07 Sami Ekblad Projektipäällikkö Oy IT Mill Ltd What is Web 2.0? Social side: user generated contents: comments, opinions, images, users own the data The Long Tail:

More information

Web Design and Application Development

Web Design and Application Development Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 01 A. Al-Tamimi 1 Lecture Overview

More information

Sections and Articles

Sections and Articles Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems

More information

INTRODUCTION TO JAVASCRIPT

INTRODUCTION TO JAVASCRIPT INTRODUCTION TO JAVASCRIPT Overview This course is designed to accommodate website designers who have some experience in building web pages. Lessons familiarize students with the ins and outs of basic

More information