Dynamic Languages User Group Feb 7, 2006 1 DynApi Javascript Library.

Slides:



Advertisements
Similar presentations
Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC.
Advertisements

JavaScript & jQuery JavaScript and jQuery introduction.
Fawaz Ghali AJAX: Web Programming's Toy.
Sue Wills July Objects The JavaScript language is completely centered around objects, and because of this, it is known as an Object Oriented Programming.
JavaScript and AJAX Jonathan Foss University of Warwick
Java Applets:. How Applets differ from application?: They do not use main method but init(), start() and paint() methods of the applet class They can.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
XUL XML User Interface Language. XUL Firefox’s user interface is in XUL and JavaScript XUL is a XML grammar to add/modify UI widgets of the browser. User.
Getting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 1 Getting started with ExtJS and Catalyst.
Java Applet & JavaScript SNU OOPSLA Lab. October 2005.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
JavaScript ICW: Lecture 11 Tom Chothia. Last Lecture URLs Threads, to make a process run in parallel: Make it extend Thread Give it a run method Call.
CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Events.
Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.
Automation using Selenium Authored & Presented by : Chinmay Sathe & Amit Prabhu Cybage Software Pvt. Ltd.
Definition from Wikipedia.  The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js (
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Computer Concepts 2014 Chapter 7 The Web and .
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
4.1 JavaScript Introduction
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
Yahoo! User Interface (YUI) Library Natly Mekdara.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
JavaScript Tabriz university Its September 1995.
Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
Creating an Animated Web Page
Working with Objects Creating a Dynamic Web Page.
XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.
Patroklos Patroklou George Antoniou Constantinos Kyprianou.
JavaScript, Fourth Edition
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
JavaScript. Overview Introduction: JavaScript basics Expressions and types Expressions and types Arrays Arrays Objects and Associative Arrays Objects.
Introduction to JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 1.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
JavaScript Frameworks Presented by Kyle Goins Also see:
DHTML: Working with Objects Creating a Dynamic Web Page.
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
1 JavaScript
Dimiter Kunchev.  JavaScript library written by Sam Stephenson   Adds object oriented techniques  Provides.
By Tharith Sriv. To write a web page you use: HHTML (HyperText Markup Language), AASP (Active Server Page), PPHP (HyperText Preprocessor), JJavaScript,
JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
JavaScript Overview Developer Essentials How to Code Language Constructs The DOM concept- API, (use W3C model) Objects –properties Methods Events Applications;
7. JavaScript Events. 2 Motto: Do you think I can listen all day to such stuff? –Lewis Carroll.
1 Javascript CS , Spring What is Javascript ? Browser scripting language  Dynamic page creation  Interactive  Embedded into HTML pages.
Rich Internet Applications 2. Core JavaScript. The importance of JavaScript Many choices open to the developer for server-side Can choose server technology.
Lesson 30: JavaScript and DHTML Fundamentals. Objectives Define and contrast client-side and server-side technologies used to create dynamic content for.
The “Quick Change” Method of Web Design. Create Your Design Create and cut up the graphics for your web site. Create a masterstyle sheet. Name it “plainmasterstylesheet.html.
INNOV-2: Build a Better Web Interface Using AJAX Chris Morgan Pandora Software Systems
JavaScript Katie Fowle November 15, History Brendan Eich at Netscape, 1995 Need for interactivity in web pages Mocha, LiveWire, LiveScript, then.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
JavaScript Wrap Up JavaScript is a versatile programming language … if you know it, you can learn others © 2004, Lawrence Snyder.
Jozef Goetz contribution, © by Pearson Education, Inc. All Rights Reserved.
Arklio Studija 2007 File: / / Page 1 Automated web application testing using Selenium
Programming Web Pages with JavaScript
Applied Component I Unit II Introduction of java-script
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Web Development & Design Foundations with HTML5 7th Edition
Visual programming Chapter 1: Introduction
JavaScript.
14 A Brief Look at JavaScript and jQuery.
Web Systems Development (CSC-215)
Working with Dynamic Content and Styles
Javascript and JQuery SRM DSC.
[Robert W. Sebesta, “Programming the World Wide Web
Introduction to JavaScript
Presentation transcript:

Dynamic Languages User Group Feb 7, DynApi Javascript Library

Dynamic Languages User Group Feb 7, Introduction DynApi Javascript Library Easily create dynamic cross-browser content for your website or application A complete Object oriented solution written completely in javascript

Dynamic Languages User Group Feb 7, Agenda Supported Browsers Non-Dynamic Features DynDocument DynLayer DynObject DynLibrary Event handling

Dynamic Languages User Group Feb 7, Overview Using the DynApi can accelerate your dynamic content Automatically handles cross-browser content DynLibrar y Events DynObject DynDocument DynLayer

Dynamic Languages User Group Feb 7, DynApi Library Created by Dan Steinman Open source development available at Includes additional tools Organized in a clear folder structure Distributed under GNU Public License

Dynamic Languages User Group Feb 7, Supported Browsers Opera 7+ Internet Explorer 4+ Konqueror 3+ Safari Netscape 4+ Mozilla 1+ Phoenix 0.5 Firefox

Dynamic Languages User Group Feb 7, Non-Dynamic Features Browser Sniffing URL Parsing Image Preloading Rollovers etc. DynApi functions (dynapi.functions) Cookie handling Non-Gui Widgets Event handling for Non-Gui Widgets

Dynamic Languages User Group Feb 7, DynDocument Replaces the DOM Uses js files to include in page Example: dynapi.library.setPath('../src/'); dynapi.library.include('dynapi.api');

Dynamic Languages User Group Feb 7, DynObject Dynamically create objects in memory String getClassName() // returns the className Function getClass() // returns constructor (class) of the // object boolean isClass(sClassName) // returns true if the object is //inherited from, or of the type sClassName void addMethod(sMethodName, function) void removeMethod(sMethodName) void setID(id) // sets the id of the object String toString() // returns [ClassName]

Dynamic Languages User Group Feb 7, Add your own Functions Adding functions to your objects Example function MyObject() { this.DynObject = DynObject; this.DynObject(); } var p = dynapi.setPrototype('MyObject','DynObject'); // ^ returns the prototype p.methodName = function() {};

Dynamic Languages User Group Feb 7, OnLoad() OnUnload() OnLoad and OnUnload p.onLoad(init); function init(){ alert(‘loaded’); }

Dynamic Languages User Group Feb 7, DynLibrary Assists with dependency issues Load scripts by name Load scripts in packages

Dynamic Languages User Group Feb 7, setPath() and add() setPath(“path to dynlibrary object”) dynapi.library.setPath('path'); // path to dynapi library (eg // "dynapi/src/lib"); add(“object name”) dynapi.library.add('objectName', '../file.js', 'dependentObject');

Dynamic Languages User Group Feb 7, Load as a Package Load scripts in as a package dynapi.library.setPath('../src/lib/'); // includes...

Dynamic Languages User Group Feb 7, Using include for individual scripts Loading scripts individually with include dynapi.library.include('dynapi'); // includes debug and library // functions dynapi.library.include('dynapi.debug'); dynapi.library.include('dynapi.library');

Dynamic Languages User Group Feb 7, Attach Events Attach Events to Child Objects function MyWidget() { this.DynLayer = DynLayer; this.Dynlayer(); this.pdlyr = new Dynlayer(); this.dlyr = this.pdlyr.addChild(new DynLayer()); this.dlyr.widget = this; this.dlyr.addEventListener(MyWidget.childEvents); } MyWidget.childEvents = { oncreate : function(e) { e.getSource().widget.update(); } }; MyWidget.prototype = new DynLayer; MyWidget.prototype.update = function() {};

Dynamic Languages User Group Feb 7, Attach Events Create an event listener in the constructor function MyWidget() { this.DynLayer = DynLayer; this.Dynlayer(); this.pdlyr = new Dynlayer(); this.dlyr = this.pdlyr.addChild(new DynLayer()); var widget = this; var el = { oncreate : function(e) {widget.update();} } this.dlyr.addEventListener(el); } MyWidget.prototype = new DynLayer; MyWidget.prototype.update = function() {};

Dynamic Languages User Group Feb 7, DynLayer The Constructor new DynLayer(html, x, y, width, height, bgColor) Positioning setLocation(x,y) - replaces moveTo

Dynamic Languages User Group Feb 7, Examples

Dynamic Languages User Group Feb 7, Summary DynApi Allows for easy object creation Cross browser scripting

Dynamic Languages User Group Feb 7, Where to Get More Information