M Dixon 1 02 – Dynamic HTML (client-side scripting)

Slides:



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

Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
The Web Warrior Guide to Web Design Technologies
Mark Dixon, SoCCE SOFT 131Page 1 20 – Web applications: HTML and Client-side code.
JavaScript- Introduction. What it is and what it does? What it is? It is NOT Java It is NOT Server-side programming Users can see code It is a client-side.
Mark Dixon Page 1 02 – Dynamic HTML (client-side scripting)
Web Basics ISYS546. Basic Tools Web server –Default directory, default home page –Virtual directory Web page editor –Front Page Web page languages –HTML,
Mark Dixon, SoCCE SOFT 131Page 1 16 – Web applications: HTML and Client-side code.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
Mark Dixon Page 1 Tech – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.
Javascript and the Web Whys and Hows of Javascript.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
Server vs Client-side validation. JavaScript JavaScript is an object-based language. JavaScript is based on manipulating objects by modifying an object’s.
M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.
02 – Client-side code: JavaScript
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
M Dixon 1 Soft – Module Introduction and HTML.
Introduction to JavaScript + More on Interactive Forms.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
JavaScript is a client-side scripting language. Programs run in the web browser on the client's computer. (PHP, in contrast, is a server-side scripting.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Mark Dixon Page 1 3 – Web applications: Server-side code (JSP)
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.
M Dixon 1 04 – Data Types & Debugging. Questions: Expressions a)What is the result of: 7 + Int(8.245) b)Write an expression to: put a random number into.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
Mark Dixon, SoCCE SOFT 131Page 1 02 – Dynamic HTML (client-side scripting)
Mark Dixon Page 1 18 – Web applications: Server-side code (PhP)
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
Mark Dixon Page 1 Soft – Module Introduction and HTML.
Mark Dixon Page 1 Web-Application Development Workshop.
Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)
M Dixon 1 03 – Dynamic HTML (client-side scripting)
Mark Dixon Page 1 04 – Information Processing: Expressions, Operators & Functions.
Mark Dixon 1 03 – Information Processing. Mark Dixon 2 Questions: Events Consider the following code: a) How many unique events does it contain? b) Name.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.
Mark Dixon, SoCCE SOFT 131Page 1 04 – Information Processing: Expressions, Operators & Functions.
Mark Dixon, SoCCE SOFT 131Page 1 02 – Dynamic HTML (client-side scripting)
Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)
Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
JavaScript Making Web pages come alive. Objectives Be able to read JavaScript scripts Be able to write JavaScript scripts.
M Dixon 1 Tech HTML. M Dixon 2 Admin Attendance Register: –log in to your profile.
Mark Dixon Page 1 Soft – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.
Mark Dixon Page 1 Tech – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.
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,
Mark Dixon Page 1 04 – Information Processing: Expressions, Operators & Functions.
Mark Dixon Page 1 04 – Information Processing: Expressions, Operators & Functions.
Mark Dixon 1 9 – Case Study. Mark Dixon 2 Session Aims and Objectives Aims –To give an overview of the development of a web-page from initial idea to.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
Mark Dixon Page 1 15 – Web applications: Server-side code (ASP)
 Scripts that execute in response to some event  User clicking on something  Script does NOT execute as part of page loading  DOM facilities like.
 Web pages originally static  Page is delivered exactly as stored on server  Same information displayed for all users, from all contexts  Dynamic.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
1 JavaScript and Dynamic Web Pages Lecture 7. 2 Static vs. Dynamic Pages  A Web page uses HTML tags to identify page content and formatting information.
Mark Dixon, SoCCE SOFT 131Page 1 03 – Conditional Execution.
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects.
Web Development & Design Foundations with HTML5 7th Edition
Introduction to JavaScript
JavaScript is a scripting language designed for Web pages by Netscape.
Introduction to Programming and JavaScript
Web Programming and Design
Presentation transcript:

M Dixon 1 02 – Dynamic HTML (client-side scripting)

M Dixon 2 Questions: HTML Consider the following HTML: Next Page a)Give an example of a tag b)Give an example of an element c)Give an example of an attribute Next Page href=“next.htm”

M Dixon 3 Questions: HTML a)Is the following a tag? Hello b)Is the following an element? c)Is the following an attribute? d)How many tags are there in: Title e)How many attributes are there in: No (element) No (start tag) No (element) 4 2

M Dixon 4 Admin: On-line Quiz Useful, but limited –multiple choice, same concepts –actual tests are free text

M Dixon 5 Session Aims & Objectives Aims –introduce you to the fundamental aspects of dynamic (interactive) web pages via client-side scripting Objectives, after this week’s sessions, you should be able to: –Add objects to a web-page –Create Event Handler Procedures to do things in response to an event of a object –Put Assignment instructions in the event handler, that change the value of properties at run-time –Use Debugger to locate and fix errors –Play Sound on events

M Dixon 6 Dynamic processing (what) HTML is static –identical on each load –very limiting Dynamic processing –client-side: browser (this week) quicker (no request-response cycle) insecure (view source) limited (can't access server-side databases) –server-side: server application (next term) slower more powerful

M Dixon 7 Example: Colour Change (design) Events: –Click: user releases left mouse button on object –MouseOver: mouse moves over object –MouseOut: mouse mouse moves off object WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED) WHEN Red button MouseOut Make Red button text normal (Red)

M Dixon 8 Tags Colour Change Use tags to create buttons

M Dixon 9 Tag Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Visual BASIC Script Use tags to enclose script code

M Dixon 10 Translation: English to VBScript Colour Change Sub btnRed _ OnClick () document.bgColor = "red" End Sub Sub btnRed _ OnMouseOver () btnRed.value = "RED" End Sub WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED)

M Dixon 11 Question: Translation Complete the code: Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub WHEN Red button Clicked Change background to Red WHEN Red button MouseOver Make Red button text capitals (RED) WHEN Red button MouseOut Make Red button text normal (Red) ?

M Dixon 12 Event Handler Procedures Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Event Handler Procedure

M Dixon 13 Objects & Events Colour Change Sub btnRed_OnClick () document.bgColor = "red" End Sub Sub btnRed_OnMouseOver () btnRed.value = "RED" End Sub Object Event

M Dixon 14 Instructions Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" End Sub Assignment: Object.Property = Literal btnRed.Value = "Red"

M Dixon 15 Programming vs. Maths In maths: x = y y = x Are the same, and mean: x and y have equal value In programming: btnRed.value = “RED” “RED” = btnRed.value Are completely opposite, and mean: put “RED” into btnRed.value put btnRed.value into “RED”

M Dixon 16 Assignment Statements Order is important: btnRed.Value = "Red" The above means: put "Red" into the Value of btnRed destination (must be object property) data flow source (object property or literal)

M Dixon 17 Sequence Inside event procedures –lines executed in sequence

M Dixon 18 Errors: Assignment btnRed.Value = "Red" "Red" = btnRed.Value btnRed.Value = document.bgColor 67 = document.bgColor put "Red" into the Value of btnRed put the Value of btnRed into "Red" put the bgColor of the document into the Value of btnRed put the bgColor of the document into 67  

M Dixon 19 Errors: Sub Every Sub must have End Sub Colour Change Sub btnRed_OnClick() document.bgColor = "red" End Sub Sub btnRed_OnMouseOver() btnRed.value = "RED" missing End Sub

M Dixon 20 Example: Puppy Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub

M Dixon 21 Example: Puppy (code) Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub Script ignored, until button pressed picture and button, given identifiers (names)

M Dixon 22 Errors: Duplicate Sub Can't have 2 Subs with same name Don't need to: put both lines in same Sub Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPuppy_OnClick() document.title = "Freya (large image)" End Sub Sub btnPuppy_OnClick() picFace.src = "FaceLarge.jpg" End Sub 

M Dixon 23 Errors: Object Expected id in HTML (btnPuppy) must match code (btnPup) Freya's web page Welcome, Freya's web page. Freya likes her toy. Sub btnPup_OnClick() document.title = "Freya (large image)" picFace.src = "FaceLarge.jpg" End Sub 

M Dixon 24 Question: Parts of Code In the following code, name: a)a property b)a keyword c)an object d)an event e)an event handler Sub btnPuppy_OnClick() document.title = "Puppy (large image)" picFace.src = "FaceLarge.jpg" End Sub title src Sub End document picFace click btnPuppy_OnClick

M Dixon 25 Question: Assignment Which of the following are valid: document.bgColor = document.bgColor = "red" "red" = document.bgColor document = "red" btnRed = "Hello"    

M Dixon 26 Example: Sound Sound <object id="sndPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width:0px; height:0px;"> Sub btnFart_onClick() sndPlayer.URL = "Fart.wav" End Sub

M Dixon 27 Tutorial Exercise: Colour Change LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Red button from the Colour Change example working. (the code is provided) TASK 2: Get the Blue button working. (You will need to work out what code to use. Use the code provided as inspiration) TASK 3: Add another button (you choose the colour).

M Dixon 28 Tutorial Exercise: Puppy LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Puppy example working. (code provided, images in resources area on server). TASK 2: Add a button, which changes the image back to the smaller picture.

M Dixon 29 How to: Active Content Allow active content (to run pages):