Client-side Web Engineering From HTML to AJAX

Size: px
Start display at page:

Download "Client-side Web Engineering From HTML to AJAX"

Transcription

1 Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions HTML/XHTML/DHTML, CCS, JavaScript (including AJAX), ActiveXScript, etc. Plug-ins: Adobe Flash, QuickTime, etc. Java Applet running inside the browser Tools and techniques for creating nonbrowser based client applications Standalone RSS Reader, Google Desktop, Java WebStart, J2EE web client applications, etc. Emphasis: Dynamic browser-based web applications January 23, 2008 Nick Duan 2 1

2 HTML as a presentation language HTML serves two purposes Collecting user input to server (HTML Form) Formatting and presenting of data content from server (the rest of HTML) Basic Web browser functions HTTP client responsible for manage communications between client and server HTML parser responsible for converting textual string to graphical objects (e.g. VBControl in Visual Basic, or Swing object in Java) HTML graphic engine responsible for rending the graphic objects January 23, 2008 Nick Duan 3 Converting HTML text into Document Objects Text stream <html> <head> <title> <body> </body> </html> HTML Parser Document Objects document image form area input button text Graphic engine Document objects are programming constructs defined in the same containment hierarchy as the HTML structure W3C standard: Document Object Model (DOM) for HTML and XML) January 23, 2008 Nick Duan 4 2

3 What is JavaScript? JavaScript is not Java. Invented by Netscape in mid 90s. The latest version is 1.6 JavaScript is a scripting language, initially designed to support user interactions with document objects Provide APIs to access and manipulate document objects. Now a standard supported by all major browser vendors Embedded in HTML pages, extensible to include userspecified functions and libraries Interpreted as the page is loaded Save time and bandwidth for simple manipulations (Data validation, simple math and other functions) A JavaScript program is embedded in a single HTML page, and is executed within the browser when that page is rendered It is not strong-typed, but is case-sensitive. January 23, 2008 Nick Duan 5 JavaScript Example <HTML> <HEAD> <TITLE>Calculator Example</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function a_plus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a+b form.ans.value = c // End --> </SCRIPT> </HEAD> <H1>Calculator Example</H2> <TABLE> <TR> <TD><input type=text size=4 value=12 name="a"> </TD> A JavaScript program is defined as a set of functions within the <script> element embedded in the <head> element of the same HTML page Invocation of JavaScript functions are either during loading the page or via user events generated in an HTML form. Most DOM objects contains one or more event handlers <TD width=30><input type="button" value=" + " onclick="a_plus_b(this.form)"> <input type="button" value=" - " size="20" onclick="a_minus_b(this.form)"> January 23, 2008 Nick Duan 6 3

4 JavaScript as an OO language Standard global objects Array, Boolean, Date, Error, Number, Object, String, Each has its own properties and methods Global functions Object constructors, eval, decodeurl, encodeurl, parseint, Statements if.. else, for, while, do.. while, function, Operators +, -, *, /, ++, --,, &, >>, <<,. January 23, 2008 Nick Duan 7 The JavaScript object hierarchy Standard Global Objects Object BOM Objects Array String Math Error Window Navigator Location History document Frame Plugin MineType form link anchor area image DOM Objects textarea text button password checkbox select January 23, 2008 Nick Duan 8 4

5 Accessing DOM objects Use document as the default document of the HTML page (since one document object per page) Define the first hyperlink in the HTML page <A href= next.html name = next >next</a> Access the link object via the document object as a property document.links[0].onclick = verify; Same as Note: document.links[ next ] is an invalid expression <A href= next.html name = next onclick= verify(); >next</a> Since the initial HTML construct is fixed, you should be able to access any DOM object via the form document.x.y.z Dynamicity: to obtain/change values of the objects, or add or remove objects of the page January 23, 2008 Nick Duan 9 JavaScript Applications Two major purposes: I. Build HTML dynamically when page is loaded II. Monitor user events and take action Classes of applications 1. Customizing web pages 2. Making web pages more dynamic 3. Validating user input in HTML forms 4. Manipulating cookies 5. Interacting with frames 6. Create Asynchronous JavaScript and XML applications (AJAX) January 23, 2008 Nick Duan 10 5

6 What is AJAX A suite of development technique for creating fine-tuned interactive web applications at the document component level (instead of a the page level) The term was introduced by Jesse James Garrett in early 2005, but the underlying technologies are much older: New JavaScript object - XMLHttpRequest (initially invented by Microsoft in IE5, now a standard of W3C) XML (used as the data transfer format) DOM, CSS, etc. January 23, 2008 Nick Duan 11 Web Client Converting HTML text into Document Objects HTML Page with JavaScript Program document XMLHttpRequest Document Objects XML or other structure Web Server image form area input button text HTML Web Server XMLHttpRequest is able to make remote connections to a different web server. It can be considered as an embedded web client XML (HTML as being a subset of XML) is primarily used as the payload format for XMLHttpRequest January 23, 2008 Nick Duan 12 6

7 The XMLHttpRequest Object Event Handler: onreadystatechange; State constants: UNSENT = 0; OPENED = 1; HEADERS_RECEIVED = 2; LOADING = 3; DONE = 4; Read-only Attribute: readystate responsetext responsexml status statustext Methods open (in DOMString method, in DOMString url); open (in DOMString method, in DOMString url, in boolean async); open (in DOMString method, in DOMString url, in boolean async, in DOMString user); open (in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); setrequestheader (in DOMString header, in DOMString value); send(); send(in DOMString data); send(in Document data); abort(); getallresponseheaders(); getresponseheader(in DOMString header);; January 23, 2008 Nick Duan 13 AJAX Example function AjaxRequest() { var requestobj; if (window.xmlhttprequest) { requestobj = new XMLHttpRequest(); else { requestobj = new ActiveXObject("Microsoft.XMLHTTP"); requestobj.onreadystatechange = function() { if (requestobj.readystate == 4) { if (requestobj.status == 200) { var data = requestobj.responsexml; document.textarea[0].value=data; var url = ; requestobj.open( GET, url, true); Compatibility Test with older version of IE Inline Callback Function for the Request Object January 23, 2008 Nick Duan 14 7

8 Putting it together <html> <head> <script language= javascript > function AjaxRequest() {.. </script> </head> <body> <textarea rows="20" cols= 40"> <form> <input type= button value= GetText onclick= AjaxReqest() > </form> </body> January 23, 2008 Nick Duan 15 Leading the Wave of Web 2.0 AJAX is a convenient way to create Rich Client Applications Building AJAX through frameworks (Widgets and server site components for rapid web development) DOJO JaxBe Google Web Toolkit (GWT) Direct Web Remoting (DWR) Ajax JSP Tag Library AJAX Framework for Java and.net Main techniques behind Data Mash-ups in Web 2.0 Customized API on top of the XMLHttpRequest API GoogleMaps, MicroSoft Maps, Yahoo Pipes, etc. January 23, 2008 Nick Duan 16 8

9 HTML Specs Online References DOM Specs JavaScript Reference and Tutorials 1.5_Reference AJAX References January 23, 2008 Nick Duan 17 Summary Client-side engineering is moving from simple HTML page design to more robust rich client applications as higher bandwidth becomes available The development of rich client applications request the use of a combination of client-side techniques, including DOM/XTML, CSS, JavaScript, AJAX, etc. JavaScript provide a dynamic and programmatic way to manipulate web page component. It is the de-facto standard supported by all major browser vendors. AJAX applications, based on the use of XMLHttpRequest object, have the advantage of interacting with remote services at the page component level, enabling partial update of web pages and data mash-ups from multiple data sources at the client side January 23, 2008 Nick Duan 18 9

10 Quiz What is the syntax in JavaScript for getting the value of the first input field of an HTML page? Create a simple JavaScript program that ensures an input field value to be numeric Create an AJAX program that sends a text message to a server What are the design considerations for creating an AJAX application? January 23, 2008 Nick Duan 19 10

It is highly recommended that you are familiar with HTML and JavaScript before attempting this tutorial.

It is highly recommended that you are familiar with HTML and JavaScript before attempting this tutorial. About the Tutorial AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX. Audience

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. DOM Scripting, Web Design with JavaScript

More information

Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf

Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf 1 The Web, revisited WEB 2.0 marco.ronchetti@unitn.it Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf 2 The old web: 1994 HTML pages (hyperlinks)

More information

Web application development (part 2) Netzprogrammierung (Algorithmen und Programmierung V)

Web application development (part 2) Netzprogrammierung (Algorithmen und Programmierung V) Web application development (part 2) Netzprogrammierung (Algorithmen und Programmierung V) Our topics today Server Sided Approaches - PHP and JSPs Client Sided Approaches JavaScript Some basics The Document

More information

HTML Forms and CONTROLS

HTML Forms and CONTROLS HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in

More information

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 SUBJECT TITLE : WEB TECHNOLOGY SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 16 02 2. CSS & JAVASCRIPT Test

More information

Preface. Motivation for this Book

Preface. Motivation for this Book Preface Asynchronous JavaScript and XML (Ajax or AJAX) is a web technique to transfer XML data between a browser and a server asynchronously. Ajax is a web technique, not a technology. Ajax is based on

More information

Internet Technologies

Internet Technologies QAFQAZ UNIVERSITY Computer Engineering Department Internet Technologies HTML Forms Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov What are forms?

More information

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate

More information

Dynamic Web-Enabled Data Collection

Dynamic Web-Enabled Data Collection Dynamic Web-Enabled Data Collection S. David Riba, Introduction Web-based Data Collection Forms Error Trapping Server Side Validation Client Side Validation Dynamic generation of web pages with Scripting

More information

Overview. In the beginning. Issues with Client Side Scripting What is JavaScript? Syntax and the Document Object Model Moving forward with JavaScript

Overview. In the beginning. Issues with Client Side Scripting What is JavaScript? Syntax and the Document Object Model Moving forward with JavaScript Overview In the beginning Static vs. Dynamic Content Issues with Client Side Scripting What is JavaScript? Syntax and the Document Object Model Moving forward with JavaScript AJAX Libraries and Frameworks

More information

Web Programming Step by Step

Web Programming Step by Step Web Programming Step by Step Chapter 10 Ajax and XML for Accessing Data Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. 10.1: Ajax Concepts

More information

AJAX and JSON Lessons Learned. Jim Riecken, Senior Software Engineer, Blackboard Inc.

AJAX and JSON Lessons Learned. Jim Riecken, Senior Software Engineer, Blackboard Inc. AJAX and JSON Lessons Learned Jim Riecken, Senior Software Engineer, Blackboard Inc. About Me Jim Riecken Senior Software Engineer At Blackboard for 4 years. Work out of the Vancouver office. Working a

More information

InternetVista Web scenario documentation

InternetVista Web scenario documentation InternetVista Web scenario documentation Version 1.2 1 Contents 1. Change History... 3 2. Introduction to Web Scenario... 4 3. XML scenario description... 5 3.1. General scenario structure... 5 3.2. Steps

More information

An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0

An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 September 2010 Copyright IBM Corporation 2010. 1 Overview Rational Application Developer, Version 8.0, contains

More information

Performance Testing for Ajax Applications

Performance Testing for Ajax Applications Radview Software How to Performance Testing for Ajax Applications Rich internet applications are growing rapidly and AJAX technologies serve as the building blocks for such applications. These new technologies

More information

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form.

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form. Practice Problems: These problems are intended to clarify some of the basic concepts related to access to some of the form controls. In the process you should enter the problems in the computer and run

More information

AJAX The Future of Web Development?

AJAX The Future of Web Development? AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28

More information

Chapter 12: Advanced topic Web 2.0

Chapter 12: Advanced topic Web 2.0 Chapter 12: Advanced topic Web 2.0 Contents Web 2.0 DOM AJAX RIA Web 2.0 "Web 2.0" refers to the second generation of web development and web design that facilities information sharing, interoperability,

More information

AJAX. Gregorio López López glopez@it.uc3m.es Juan Francisco López Panea 100032757@alumnos.uc3m.es

AJAX. Gregorio López López glopez@it.uc3m.es Juan Francisco López Panea 100032757@alumnos.uc3m.es AJAX Gregorio López López glopez@it.uc3m.es Juan Francisco López Panea 100032757@alumnos.uc3m.es Departamento de Ingeniería Telemática Universidad Carlos III de Madrid Contents 1. Introduction 2. Overview

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

JavaScript and Dreamweaver Examples

JavaScript and Dreamweaver Examples JavaScript and Dreamweaver Examples CSC 103 October 15, 2007 Overview The World is Flat discussion JavaScript Examples Using Dreamweaver HTML in Dreamweaver JavaScript Homework 3 (due Friday) 1 JavaScript

More information

WIRIS quizzes web services Getting started with PHP and Java

WIRIS quizzes web services Getting started with PHP and Java WIRIS quizzes web services Getting started with PHP and Java Document Release: 1.3 2011 march, Maths for More www.wiris.com Summary This document provides client examples for PHP and Java. Contents WIRIS

More information

IMRG Peermap API Documentation V 5.0

IMRG Peermap API Documentation V 5.0 IMRG Peermap API Documentation V 5.0 An Introduction to the IMRG Peermap Service... 2 Using a Tag Manager... 2 Inserting your Unique API Key within the Script... 2 The JavaScript Snippet... 3 Adding the

More information

jfingerprint Datasheet

jfingerprint Datasheet jfingerprint Datasheet jfingerprint An introduction to jfingerprint, the browser fingerprinting and identification solution. W o l f S o f t w a r e L i m i t e d Contents 1 Background... 3 2 How does

More information

JavaScript Basics & HTML DOM. Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com

JavaScript Basics & HTML DOM. Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com JavaScript Basics & HTML DOM Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com 2 Disclaimer & Acknowledgments Even though Sang Shin is a full-time employee

More information

Visualizing a Neo4j Graph Database with KeyLines

Visualizing a Neo4j Graph Database with KeyLines Visualizing a Neo4j Graph Database with KeyLines Introduction 2! What is a graph database? 2! What is Neo4j? 2! Why visualize Neo4j? 3! Visualization Architecture 4! Benefits of the KeyLines/Neo4j architecture

More information

Performance Testing Web 2.0. Stuart Moncrieff (Load Testing Guru) www.jds.net.au / www.myloadtest.com

Performance Testing Web 2.0. Stuart Moncrieff (Load Testing Guru) www.jds.net.au / www.myloadtest.com Performance Testing Web 2.0 Stuart Moncrieff (Load Testing Guru) www.jds.net.au / www.myloadtest.com 1 Foundations of Web 2.0 (a history lesson) 1993 The National Center for Supercomputing Applications

More information

Intell-a-Keeper Reporting System Technical Programming Guide. Tracking your Bookings without going Nuts! http://www.acorn-is.

Intell-a-Keeper Reporting System Technical Programming Guide. Tracking your Bookings without going Nuts! http://www.acorn-is. Intell-a-Keeper Reporting System Technical Programming Guide Tracking your Bookings without going Nuts! http://www.acorn-is.com 877-ACORN-99 Step 1: Contact Marian Talbert at Acorn Internet Services at

More information

InPost UK Limited GeoWidget Integration Guide Version 1.1

InPost UK Limited GeoWidget Integration Guide Version 1.1 InPost UK Limited GeoWidget Integration Guide Version 1.1 Contents 1.0. Introduction... 3 1.0.1. Using this Document... 3 1.0.1.1. Document Purpose... 3 1.0.1.2. Intended Audience... 3 1.0.2. Background...

More information

Building Ajax Applications with GT.M and EWD. Rob Tweed M/Gateway Developments Ltd

Building Ajax Applications with GT.M and EWD. Rob Tweed M/Gateway Developments Ltd Building Ajax Applications with GT.M and EWD Rob Tweed M/Gateway Developments Ltd Is GT.M old-fashioned? I am a physician working in the VA system. I also program in.net. Certainly the VAs informatics

More information

Script Handbook for Interactive Scientific Website Building

Script Handbook for Interactive Scientific Website Building Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step

More information

Spectrum Technology Platform

Spectrum Technology Platform Spectrum Technology Platform Version 8.0.0 SP2 RIA Getting Started Guide Information in this document is subject to change without notice and does not represent a commitment on the part of the vendor or

More information

Example. Represent this as XML

Example. Represent this as XML Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple

More information

The purpose of jquery is to make it much easier to use JavaScript on your website.

The purpose of jquery is to make it much easier to use JavaScript on your website. jquery Introduction (Source:w3schools.com) The purpose of jquery is to make it much easier to use JavaScript on your website. What is jquery? jquery is a lightweight, "write less, do more", JavaScript

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

CS412 Interactive Lab Creating a Simple Web Form

CS412 Interactive Lab Creating a Simple Web Form CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked

More information

JavaScript: Client-Side Scripting. Chapter 6

JavaScript: Client-Side Scripting. Chapter 6 JavaScript: Client-Side Scripting Chapter 6 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of Web http://www.funwebdev.com Development Section 1 of 8 WHAT IS JAVASCRIPT

More information

Yandex.Widgets Quick start

Yandex.Widgets Quick start 17.09.2013 .. Version 2 Document build date: 17.09.2013. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2013 Yandex LLC. All rights reserved.

More information

Chapter 1 Programming Languages for Web Applications

Chapter 1 Programming Languages for Web Applications Chapter 1 Programming Languages for Web Applications Introduction Web-related programming tasks include HTML page authoring, CGI programming, generating and parsing HTML/XHTML and XML (extensible Markup

More information

Introducing Apache Pivot. Greg Brown, Todd Volkert 6/10/2010

Introducing Apache Pivot. Greg Brown, Todd Volkert 6/10/2010 Introducing Apache Pivot Greg Brown, Todd Volkert 6/10/2010 Speaker Bios Greg Brown Senior Software Architect 15 years experience developing client and server applications in both services and R&D Apache

More information

Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue

Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue Mobile Web Applications Gary Dubuque IT Research Architect Department of Revenue Summary Times are approximate 10:15am 10:25am 10:35am 10:45am Evolution of Web Applications How they got replaced by native

More information

Google Web Toolkit (GWT) Architectural Impact on Enterprise Web Application

Google Web Toolkit (GWT) Architectural Impact on Enterprise Web Application Google Web Toolkit (GWT) Architectural Impact on Enterprise Web Application First Generation HTTP request (URL or Form posting) W HTTP response (HTML Document) W Client Tier Server Tier Data Tier Web CGI-Scripts

More information

AJAX and jmaki for Web 2.0 Development using Java. Inyoung Cho Java Technology Evangelist Sun Microsystems, Inc.

AJAX and jmaki for Web 2.0 Development using Java. Inyoung Cho Java Technology Evangelist Sun Microsystems, Inc. AJAX and jmaki for Web 2.0 Development using Java Inyoung Cho Java Technology Evangelist Sun Microsystems, Inc. Agenda AJAX Basics > What is AJAX? > AJAX Interaction:Using AutoComplete Sample Application

More information

MASTERTAG DEVELOPER GUIDE

MASTERTAG DEVELOPER GUIDE MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...

More information

Website Login Integration

Website Login Integration SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2

More information

What is AJAX? Ajax. Traditional Client-Server Interaction. What is Ajax? (cont.) Ajax Client-Server Interaction. What is Ajax? (cont.

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

More information

DOM, Jav Ja a v Script a and AJA AJ X A Madalina Croitoru IUT Mont Mon pellier

DOM, Jav Ja a v Script a and AJA AJ X A Madalina Croitoru IUT Mont Mon pellier DOM, JavaScript and AJAX Madalina Croitoru IUT Montpellier JavaScript Initially called LiveScript Implemented in Netscape Navigator Microsoft adapts it in 1996: Jscript European Computer Manufacturers

More information

Outline. 1.! Development Platforms for Multimedia Programming!

Outline. 1.! Development Platforms for Multimedia Programming! Outline 1.! Development Platforms for Multimedia Programming! 1.1.! Classification of Development Platforms! 1.2.! A Quick Tour of Various Development Platforms! 2.! Multimedia Programming with Python

More information

Rich User Interfaces for Web-Based Corporate Applications

Rich User Interfaces for Web-Based Corporate Applications Rich User Interfaces for Web-Based Corporate Applications Ivan Zapevalov, Software Engineer 1 Outline RIA technologies AJAX technology Widgets Demo application in JavaScript Demo application in GWT Web-catalog

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

Visualizing an OrientDB Graph Database with KeyLines

Visualizing an OrientDB Graph Database with KeyLines Visualizing an OrientDB Graph Database with KeyLines Visualizing an OrientDB Graph Database with KeyLines 1! Introduction 2! What is a graph database? 2! What is OrientDB? 2! Why visualize OrientDB? 3!

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

WEB DEVELOPMENT COURSE (PHP/ MYSQL)

WEB DEVELOPMENT COURSE (PHP/ MYSQL) WEB DEVELOPMENT COURSE (PHP/ MYSQL) COURSE COVERS: HTML 5 CSS 3 JAVASCRIPT JQUERY BOOTSTRAP 3 PHP 5.5 MYSQL SYLLABUS HTML5 Introduction to HTML Introduction to Internet HTML Basics HTML Elements HTML Attributes

More information

Mul$media im Netz (Online Mul$media) Wintersemester 2014/15. Übung 06 (Nebenfach)

Mul$media im Netz (Online Mul$media) Wintersemester 2014/15. Übung 06 (Nebenfach) Mul$media im Netz (Online Mul$media) Wintersemester 2014/15 Übung 06 (Nebenfach) Online Mul?media WS 2014/15 - Übung 05-1 Today s Agenda Flashback! 5 th tutorial Introduc?on to JavaScript Assignment 5

More information

Introduction to Ajax

Introduction to Ajax Introduction to Ajax Distributed Systems LA Dott. Ing. Giulio Piancastelli giulio.piancastelli@unibo.it Ingegneria Due Alma Mater Studiorum Università di Bologna a Cesena Academic Year 2007/2008 G. Piancastelli

More information

Web Content Management System Powered by Ajax

Web Content Management System Powered by Ajax Web Content Management System Powered by Ajax Carl-Ola Boketoft April 8, 2010 Master s Thesis in Computing Science, 30 credits Supervisor at CS-UmU: Håkan Gulliksson Examiner: Per Lindström Umeå University

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Abusing HTML5. DEF CON 19 Ming Chow Lecturer, Department of Computer Science TuCs University Medford, MA 02155 mchow@cs.tucs.edu

Abusing HTML5. DEF CON 19 Ming Chow Lecturer, Department of Computer Science TuCs University Medford, MA 02155 mchow@cs.tucs.edu Abusing HTML5 DEF CON 19 Ming Chow Lecturer, Department of Computer Science TuCs University Medford, MA 02155 mchow@cs.tucs.edu What is HTML5? The next major revision of HTML. To replace XHTML? Yes Close

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

Slide.Show Quick Start Guide

Slide.Show Quick Start Guide Slide.Show Quick Start Guide Vertigo Software December 2007 Contents Introduction... 1 Your first slideshow with Slide.Show... 1 Step 1: Embed the control... 2 Step 2: Configure the control... 3 Step 3:

More information

Sample HP OO Web Application

Sample HP OO Web Application HP OO 10 OnBoarding Kit Community Assitstance Team Sample HP OO Web Application HP OO 10.x Central s rich API enables easy integration of the different parts of HP OO Central into custom web applications.

More information

2011 IEEE. Personal use of this material is permitted. Permission from IEEE must be obtained for all other uses, in any current or future media,

2011 IEEE. Personal use of this material is permitted. Permission from IEEE must be obtained for all other uses, in any current or future media, 2011 IEEE. Personal use of this material is permitted. Permission from IEEE must be obtained for all other uses, in any current or future media, including reprinting/republishing this material for advertising

More information

A Tale of the Weaknesses of Current Client-Side XSS Filtering

A Tale of the Weaknesses of Current Client-Side XSS Filtering Call To Arms: A Tale of the Weaknesses of Current Client-Side XSS Filtering Martin Johns, Ben Stock, Sebastian Lekies About us Martin Johns, Ben Stock, Sebastian Lekies Security Researchers at SAP, Uni

More information

Multimedia im Netz Online Multimedia Winter semester 2015/16. Tutorial 03 Major Subject

Multimedia im Netz Online Multimedia Winter semester 2015/16. Tutorial 03 Major Subject Multimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 03 Major Subject Ludwig- Maximilians- Universität München Online Multimedia WS 2015/16 - Tutorial 03-1 Today s Agenda Quick test Server

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect

Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect Introduction Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect This document describes the process for configuring an iplanet web server for the following situation: Require that clients

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more

More information

Web Application Development

Web Application Development Web Application Development Seminar OHJ-1820 Tampere University of Technology Fall 2007 http://www.cs.tut.fi/~taivalsa/kurssit/wads2007 Prof. Tommi Mikkonen & Dr. Antero Taivalsaari Background and Motivation

More information

Rich Internet Applications

Rich Internet Applications Document Reference TSL-SES-WP-0001 Date 4 January 2008 Issue 1 Revision 0 Status Final Document Change Log Version Pages Date Reason of Change 1.0 Draft 17 04/01/08 Initial version The Server Labs S.L

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

XML Processing and Web Services. Chapter 17

XML Processing and Web Services. Chapter 17 XML Processing and Web Services Chapter 17 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of http://www.funwebdev.com Web Development Objectives 1 XML Overview 2 XML Processing

More information

A Tale of the Weaknesses of Current Client-side XSS Filtering

A Tale of the Weaknesses of Current Client-side XSS Filtering A Tale of the Weaknesses of Current Client-side XSS Filtering Sebastian Lekies (@sebastianlekies), Ben Stock (@kcotsneb) and Martin Johns (@datenkeller) Attention hackers! These slides are preliminary!

More information

HTML Tables. IT 3203 Introduction to Web Development

HTML Tables. IT 3203 Introduction to Web Development IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing

More information

TIME SCHEDULE OBJECTIVES

TIME SCHEDULE OBJECTIVES COURSE TITLE : WEB DESIGN COURSE CODE : 3073 COURSE CATEGORY : B PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDITS : 4 TIME SCHEDULE MODULE TOPICS PERIODS 1 Internet fundamentals 18 2 Html, css and web design

More information

Further web design: HTML forms

Further web design: HTML forms Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on

More information

Rich Internet Applications

Rich Internet Applications Rich Internet Applications Prepared by: Husen Umer Supervisor: Kjell Osborn IT Department Uppsala University 8 Feb 2010 Agenda What is RIA? RIA vs traditional Internet applications. Why to use RIAs? Running

More information

Outline. CIW Web Design Specialist. Course Content

Outline. CIW Web Design Specialist. Course Content CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site

More information

Web Cloud Architecture

Web Cloud Architecture Web Cloud Architecture Introduction to Software Architecture Jay Urbain, Ph.D. urbain@msoe.edu Credits: Ganesh Prasad, Rajat Taneja, Vikrant Todankar, How to Build Application Front-ends in a Service-Oriented

More information

jquery Tutorial for Beginners: Nothing But the Goods

jquery Tutorial for Beginners: Nothing But the Goods jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning

More information

Short notes on webpage programming languages

Short notes on webpage programming languages Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of

More information

Web application Architecture

Web application Architecture 2014 Cesare Pautasso 1 / 29 Very Thin Client 6 / 29 AJAX Input/ Output Prof. Cesare Pautasso http://www.pautasso.info cesare.pautasso@usi.ch Client/Server 7 / 29 @pautasso 5 / 29 Web application Architecture

More information

«W3Schools Home Next Chapter» JavaScript is THE scripting language of the Web.

«W3Schools Home Next Chapter» JavaScript is THE scripting language of the Web. JS Basic JS HOME JS Introduction JS How To JS Where To JS Statements JS Comments JS Variables JS Operators JS Comparisons JS If...Else JS Switch JS Popup Boxes JS Functions JS For Loop JS While Loop JS

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

IT6503 WEB PROGRAMMING. Unit-I

IT6503 WEB PROGRAMMING. Unit-I Handled By, VALLIAMMAI ENGINEERING COLLEGE SRM Nagar, Kattankulathur-603203. Department of Information Technology Question Bank- Odd Semester 2015-2016 IT6503 WEB PROGRAMMING Mr. K. Ravindran, A.P(Sr.G)

More information

A Code Migration Framework for AJAX Applications

A Code Migration Framework for AJAX Applications A Code Migration Framework for AJAX Applications A. Puder San Francisco State University Computer Science Department 1600 Holloway Avenue San Francisco, CA 94132 arno@sfsu.edu Abstract. AJAX (Asynchronous

More information

Modern browsers support many technologies beyond (X)HTML, CSS, and JavaScript.

Modern browsers support many technologies beyond (X)HTML, CSS, and JavaScript. 18 JavaScript and Embedded Objects Modern browsers support many technologies beyond (X)HTML, CSS, and JavaScript. A wide variety of extra functionality is available in the form of browser plug-ins, ActiveX

More information

Adding Panoramas to Google Maps Using Ajax

Adding Panoramas to Google Maps Using Ajax Adding Panoramas to Google Maps Using Ajax Derek Bradley Department of Computer Science University of British Columbia Abstract This project is an implementation of an Ajax web application. AJAX is a new

More information

Chapter 2: Interactive Web Applications

Chapter 2: Interactive Web Applications Chapter 2: Interactive Web Applications 2.1 Interactivity and Multimedia in the WWW architecture 2.2 Interactive Client-Side Scripting for Multimedia (Example HTML5/JavaScript) 2.3 Interactive Server-Side

More information

Eclipse Web Tools Platform. Naci Dai (Eteration), WTP JST Lead

Eclipse Web Tools Platform. Naci Dai (Eteration), WTP JST Lead Eclipse Web Tools Platform Naci Dai (Eteration), WTP JST Lead 2007 by Naci Dai and Eteration A.S. ; made available under the EPL v1.0 Istanbul April 30, 2007 Outline WTP Organization JSF Overview and Demo

More information

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com

More information

Security starts in the head(er)

Security starts in the head(er) Security starts in the head(er) JavaOne 2014 Dominik Schadow bridgingit Policies are independent of framework and language response.addheader(! "Policy name",! "Policy value"! ); User agent must understand

More information

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -

More information

PELLISSIPPI STATE TECHNICAL COMMUNITY COLLEGE MASTER SYLLABUS CIW JAVASCRIPT FUNDAMENTALS WEB 2300

PELLISSIPPI STATE TECHNICAL COMMUNITY COLLEGE MASTER SYLLABUS CIW JAVASCRIPT FUNDAMENTALS WEB 2300 PELLISSIPPI STATE TECHNICAL COMMUNITY COLLEGE MASTER SYLLABUS CIW JAVASCRIPT FUNDAMENTALS WEB 2300 Class Hours: 3.0 Credit Hours: 3.0 Laboratory Hours: 0.0 Revised: Spring 08 NOTE: This course is not designed

More information

WebRTC_call. Authorization. function logintowsc() { var wscdemobaseurl = "http://host:port/demo.html"; window.location.href =

WebRTC_call. Authorization. function logintowsc() { var wscdemobaseurl = http://host:port/demo.html; window.location.href = WebRTC_call API allows for establish audio/video call between two BROWSERS or between BROWSER and SIP CLIENT. Before establishing the call it is necessary to REGISTER in Orange IMS network using API. To

More information

Developing XML Solutions with JavaServer Pages Technology

Developing XML Solutions with JavaServer Pages Technology Developing XML Solutions with JavaServer Pages Technology XML (extensible Markup Language) is a set of syntax rules and guidelines for defining text-based markup languages. XML languages have a number

More information

Web Hosting Prep Lab Homework #2 This week: Setup free web hosting for your project Pick domain name and check whether it is available Lots of free

Web Hosting Prep Lab Homework #2 This week: Setup free web hosting for your project Pick domain name and check whether it is available Lots of free Web Hosting Prep, Lab Homework #2 Project Requirements Gathering, Design Prototyping Web Application Frameworks JavaScript Introduction / Overview Lab Homework #3 CS 183 10/13/2013 Web Hosting Prep Lab

More information

Ajax Design and Usability

Ajax Design and Usability Ajax Design and Usability William Hudson william.hudson@syntagm.co.uk www.syntagm.co.uk/design Ajax Design and Usability About Ajax Ajax in context How Ajax works How Ajax is different How Ajax is similar

More information

Finding XSS in Real World

Finding XSS in Real World Finding XSS in Real World by Alexander Korznikov nopernik@gmail.com 1 April 2015 Hi there, in this tutorial, I will try to explain how to find XSS in real world, using some interesting techniques. All

More information