Web Page Behavior IS 373—Web Standards Todd Will.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
1 What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
MSc. Publishing on WWW JavaScript. What is JavaScript? A scripting language devised by Netscape Adds functionality to web pages by: Embedding code into.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Inline, Internal, and External FIle
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.
Computer Concepts 2014 Chapter 7 The Web and .
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.
Languages in WEB Presented by: Jenisha Kshatriya BCM SS09.
Introduction to JavaScript Dr. John P. Abraham University of Texas – Pan American.
Dynamic Web Pages (Flash, JavaScript)
Chapter 16 The World Wide Web Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Describe several.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
CC1003N Week 6 More CSS and Javascript.. Objectives: ● More CSS Examples ● Javascript – introduction ● Uses of Javascript ● Variables ● Comments ● Control.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
Dynamic Web Pages & JavaScript. Dynamic Web Pages Dynamic = Change Dynamic Web Pages are web pages that change. More than just moving graphics around.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
1 JavaScript
44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
XP Tutorial 8 Adding Interactivity with ActionScript.
Dynamic Web Pages Jin Wu INF 385E Information Architecture School of Information 11/2/2006 Jin Wu INF 385E Information Architecture School of Information.
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.
COMP403 Web Design JAVA SCRİPTS Tolgay KARANFİLLER.
4. Javascript M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer (C-307) Desain.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
 Web pages originally static  Page is delivered exactly as stored on server  Same information displayed for all users, from all contexts  Dynamic.
CIS 3.5 Lecture 2.3 "Introduction to JavaScript".
JavaScript 101 Introduction to Programming. Topics What is programming? The common elements found in most programming languages Introduction to JavaScript.
Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
G046 – Lecture 2A Recognising Web-Technologies Mr C Johnston ICT Teacher
Section 10.1 Define scripting
Section 17.1 Section 17.2 Add an audio file using HTML
Web Development & Design Foundations with HTML5 7th Edition
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
JavaScript.
Section 10.1 YOU WILL LEARN TO… Define scripting
Dynamic Web Pages Jin Wu INF 385E Information Architecture
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Introduction to JavaScript
CS105 Introduction to Computer Concepts
Tutorial 10: Programming with javascript
Web Programming– UFCFB Lecture 13
CS105 Introduction to Computer Concepts JavaScript
Presentation transcript:

Web Page Behavior IS 373—Web Standards Todd Will

CIS Web Standards-JavaScript 2 of 20 Topics Introduction Comparison of different Scripting technologies Example language (Javascript) Demo of a registration page that has scripting For Next Week – MIDTERM!

CIS Web Standards-JavaScript 3 of 20 Behavior Layer Key Points –Ways to Implement Javascript Flash CSS Applets/ActiveX –Reasons to Implement Increase usability Increase performance Add bells and whistles Goal: Universal usability Presentation Behavior Structure

CIS Web Standards-JavaScript 4 of 20 Increasing Usability Behavior can be used to: –Hide/show content dynamically, e.g. dropdown menus –Auto-complete form fields –Error-check form field values –Support stylesheet switching –Interface hints, e.g. rollover changes

CIS Web Standards-JavaScript 5 of 20 Increasing Performance Behavior can be used to: –Preload images needed for rollovers –Get/refresh data in the background AJAX can be used to approach desktop app interactivity in web-based apps

CIS Web Standards-JavaScript 6 of 20 Adding Bells and Whistles Behavior can be used to: –Wow site visitors with animations, sounds, or other slick presentation of site content –Just make sure you don’t overdo it The “wow” factor in these types of sites is undeniable, but this comes at a price

CIS Web Standards-JavaScript 7 of 20 JavaScript Strengths –Powerful –Lightweight –Widely supported Weaknesses –Not enabled in all browsers W3Schools reports only 90% (Jan 2006) –Implemented functions differ across browsers and versions of browsers –May be absent in handheld and/or non- visual browsers

CIS Web Standards-JavaScript 8 of 20 Flash Strengths –Extremely powerful –Widely supported –Very portable –Professional look Weaknesses –Learning curve –Accessibility issues –Usability issues –Search engine support –Cost

CIS Web Standards-JavaScript 9 of 20 CSS CSS has very limited ability to implement behaviors Support of features not even across browsers

CIS Web Standards-JavaScript 10 of 20 Applets/ActiveX Strengths –Powerful Weaknesses –Support –Blocked by default in some browsers

CIS Web Standards-JavaScript 11 of 20 Things to Keep in Mind Behaviors should be used to enhance a website’s: –Usability –Performance –“Wow” factor BUT Critical functionality should not be entrusted to the behavior layer Moving on to a sample

CIS Web Standards-JavaScript 12 of 20 JavaScript Language What is JavaScript? –JavaScript was designed to add interactivity to HTML pages –JavaScript is a scripting language (a scripting language is a lightweight programming language) –A JavaScript consists of lines of executable computer code –A JavaScript is usually embedded directly into HTML pages –JavaScript is an interpreted language (means that scripts execute without preliminary compilation) –Everyone can use JavaScript without purchasing a license NOTE: You do not need to know how to program in JavaScript, just know what it is and when to use it

CIS Web Standards-JavaScript 13 of 20 What can a JavaScript Do? JavaScript gives HTML designers a programming tool –HTML authors can embed JavaScript into WebPages to make them dynamic –Very simple syntax JavaScript can put dynamic text into an HTML page –A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into an HTML page JavaScript can react to events –A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element

CIS Web Standards-JavaScript 14 of 20 What can JavaScript do? JavaScript can read and write HTML elements –A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data –A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser –A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies –A JavaScript can be used to store and retrieve information on the visitor's computer

CIS Web Standards-JavaScript 15 of 20 Putting JavaScript into HTML – –document.write("Hello World!") – This would result in the following being displayed: –Hello World!

CIS Web Standards-JavaScript 16 of 20 Handling Browsers Browsers that do not support JavaScript will display the script as page content To prevent them from doing this, use the HTML comment tag: – NOTE: The two forward slashes at the end of comment line (//) are a JavaScript comment symbol, preventing the JavaScript compiler from compiling the line.

CIS Web Standards-JavaScript 17 of 20 Where to put scripts Header section –Put the script here if you want it to be loaded when the user requests it –Carried out when the user selects a particular action Body Section –Put the script here when you want it to run when the page loads

CIS Web Standards-JavaScript 18 of 20 JavaScript Validation Example JavaScript can be used to validate forms before they are submitted Form data that typically that could be checked include: –has the user left required fields empty? –has the user entered a valid address? –has the user entered a valid date? –has the user entered text in a numeric field?

CIS Web Standards-JavaScript 19 of 20 Scripting Demos Links to demos are on course website –Flash –Applets –JavaScript Just to give you an idea of what they can do!

CIS Web Standards-JavaScript 20 of 20 For Next Week Midterm All questions will come from the slides, but you can add information from the book as well Study hard!