Dynamic HTML Netscape Navigator (NN) 6.0 & Internet Explorer (IE) 5.0.

Slides:



Advertisements
Similar presentations
Molecular Biomedical Informatics Web Programming 1.
Advertisements

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
MSc. Publishing on WWW Tables and Style Sheets. Tables Tables are used to: Organize and display tabular data To create a layout for web pages.
Tutorial 16 Working with Dynamic Content and Styles.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
1 Dynamic HTML and Cascading Style Sheets (CSS) Dynamic HTML and Cascading Style Sheets (CSS) Electronic Commerce Prof. Sheizaf Rafaeli.
Chapter 7: Dynamic HTML and Animation JavaScript - Introductory.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
© De Montfort University, Document Object Model Howell Istance School of Computing De Montfort University.
DHTML & ALPHABET SOUP Sp.772 spring A combination Html 4.0 Javascript The document object model (DOM) -- accessing individual document objects Cascading.
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.
Lesson 19. JavaScript errors Since JavaScript is an interpreted language, syntax errors will usually cause the script to fail. Both browsers will provide.
Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: 1.
HTML and Style. Session overview Leveling-off on the basic concepts of HTML and Styles Discuss Web authoring options.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming DOM.
Creating an Animated Web Page
Working with Objects Creating a Dynamic Web Page.
CITS1231 Web Technologies JavaScript and Document Object Model.
XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.
JavaScript, Fourth Edition
XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.
DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review.
Copyright ©2005  Department of Computer & Information Science Introducing Client-Side Web Programming.
JavaScript IV ECT 270 Robin Burke. Outline DOM JS document model review W3C DOM.
DHTML: Working with Objects Creating a Dynamic Web Page.
Building Rich Web Applications with Ajax Linda Dailey Paulson IEEE – Computer, October 05 (Vol.38, No.10) Presented by Jingming Zhang.
Chapter 8 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 8 Sebesta: Programming the World Wide Web.
Chapter 7: DHTML: Object Model and Collections CIS 275—Web Application Development for Business I.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
MTA EXAM HTML5 Application Development Fundamentals.
JavaScript III ECT 270 Robin Burke. Outline Form validation Regular expressions DOM JS document model review W3C DOM Cross-browser scripting Style.
DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.
Cascading Style Sheets CSS. Source W3Schools
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming DHTML Example.
TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.
JavaScript Introduction. Slide 2 Lecture Overview JavaScript background The purpose of JavaScript A first JavaScript example Introduction to getElementById.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
Lesson 30: JavaScript and DHTML Fundamentals. Objectives Define and contrast client-side and server-side technologies used to create dynamic content for.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
JavaScript IV Robin Burke ECT 270. Outline Final project reminder Style review Manipulating style Special effect examples.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Chapter 13: DHTML: Object Model and Collections CIS 275—Web Application Development for Business I.
Java Script and the DOM DOM stands for: –The Document Object Model When a browser reads a web page, it converts it’s contents from HTML into a hierarchical.
DHTML.
Using DHTML to Enhance Web Pages
Applied Online Programming
JavaScript Event Handling.
The Internet and HTML Code
Lecture 8. HTML. Author: Aleksey Semyonov
Dynamic HTML.
JavaScript Introduction
Chapter 13 - Dynamic HTML: Object Model and Collections
Working with Dynamic Content and Styles
Document Object Model (DOM): Objects and Collections
XML Problems and Solutions
Introduction to DHTML, the DOM, JS review
En eventueel een subtitel om de nieuwsgierigheid aan te wakkeren
Use an Internet Browser
COP 3813 Intro to Internet Computing
HTML MIS 2402 Jeremy Shafer Department of MIS Fox School of Business
Presentation transcript:

Dynamic HTML Netscape Navigator (NN) 6.0 & Internet Explorer (IE) 5.0

Both IE 5.0 & NN 6.0 are moving to support World Wide Web Consortium's (W3C) recommendations for the Document Object Model (DOM), Cascading Stylesheets (CSS) and ECMAScript.

Detecting Browsers isNS4 = (document.layers && !document.getElementById) ? true : false; isIE4 = (document.all && !document.getElementById) ? true : false; isIE5 = (document.all && document.getElementById) ? true : false; isNS6 = (!document.all && document.getElementById) ? true : false;

Element Pointer W3C recommends to get an element pointer by using getElementById. if (isIE5 || isNS6) { elm = document.getElementById("testDiv"); }

Style & Visibility W3C enforces the style group and the use of “visible” instead of “show” for the visibility attribute. if (isIE5 || isNS6) { elm = document.getElementById("testDiv"); elm.style.visibility = ”visible"; }

Units The W3C requires a unit of measure (usually pixels) attached to size or positioning. if (isIE5 || isNS6) { elm = document.getElementById("testDiv"); elm.style.left = "300px"; }

Animation Can’t directly increment the values of positioning attributes. if (isIE5 || isNS6) { elm = document.getElementById("testDiv"); elm.style.left = parseInt(elm.style.left) "px"; }

More ascript/nn6dhtml.html ascript/sniffer.html