Web Design and Development

Slides:



Advertisements
Similar presentations
MWD1001 Website Production Using JavaScript with Forms.
Advertisements

SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
Computer Science 103 Chapter 4 Advanced JavaScript.
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. Web Page Technologies To create Web Page documents, you use: To create Web Page documents, you use: HTML – contents and structures.
CST JavaScript Validating Form Data with 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.,
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted.
JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
Chapter 19: Adding JavaScript
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
1 JavaScript: Event Model November 1, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel, and Goldberg.
DHTML: Dynamic HTML Internet Technology1. What is DHTML? A collection of enhancements to HTML ► To create dynamic and interactive websites Combination.
1 Lesson 7 Using Images with JavaScript HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
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.
Flash & JavaScript Mariela Hristova October 19, 2004 INF 385E – Fall 2004 – School of Information.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload 14.4.
Javascript II DOM & JSON. In an effort to create increasingly interactive experiences on the web, programmers wanted access to the functionality of browsers.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
Introduction to Javascript. What HTML Can & Can Not Do HTML Can HTML Can Display text Display text Display images Display images Display even animated.
JavaScript - A Web Script Language Fred Durao
Introduction to Client Side Scripting CS Client Side Scripting Client side means the Browser is interpreting the script Script is downloaded with.
Introduction to the Document Object Model DOM *Understand document structure manipulation *Dynamic effects in web pages *Programming, scripting, web content.
44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287
Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino.
Chapter 14: Dynamic HTML: Event Model Presented by: Colbie Brown CS340 Java Web Development Dr. Gloria Carter Love.
Event JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is.
Changing text colour with mouse over effect Activity 5 Procedure 1. Start Dreamweaver and select the ‘Hong Kong Scenery’ web site. 2. Open the web page.
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,
Active X – Mouse Events. Structured Graphics Control  Included in Internet Explorer v5.0  Add to page with the OBJECT tag  Accessible via scripting.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload 14.4.
 2004 Prentice Hall, Inc. All rights reserved. 1 Segment – 4 Dynamic HTML & CSS.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.
COS 125 DAY 20. Agenda Assignment 8 not corrected yet Assignment 9 posted  Due April 16 New course time line Discussion on Scripts 
JavaScript Overview Developer Essentials How to Code Language Constructs The DOM concept- API, (use W3C model) Objects –properties Methods Events Applications;
CIS 3.5 Lecture 2.3 "Introduction to JavaScript".
INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.
Peeking at Programming with JavaScript. So what’s JavaScript ? A programming language built into your Web Browser program. Adds fun and interactivity.
Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
Introduction to JavaScript LIS390W1A Web Technologies and Techniques 24 Oct M. Cameron Jones.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
Adding Interactivity Comp 140 Fall Web 2.0 Major change in internet usage –From mostly static pages Text Graphics Simple links –To new paradigm.
JavaScript JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user.
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects.
Third lecture Event 27/2/2016 JavaScript Tutorial.
Section 10.1 Define scripting
Higher Computing Science
Using DHTML to Enhance Web Pages
Week 4: Introduction to Javascript
Introduction to Javascript
JavaScript.
JavaScript Event Handling.
Section 17.1 Section 17.2 Add an audio file using HTML
Web Development & Design Foundations with HTML5 7th Edition
Chapter 14 - Dynamic HTML: Event Model
DHTML Javascript Internet Technology.
Event Driven Programming & User Defined Functions
DHTML Javascript Internet Technology.
Functions, Regular expressions and Events
Code Topic 9 Standard JavaScript Events Laura Friedman
Week 5: Recap and Portfolio Site
Web Programming and Design
Web Programming and Design
Introduction to Web programming
Presentation transcript:

Web Design and Development Implementation – JavaScript

Learning Intention I will learn how JavaScript can be used to make web pages dynamic.

JavaScript Programming language used in web pages Lets you add interactivity and dynamic content to web pages: animate page elements search web sites validate user input in forms widgets: weather, date and time

JavaScript Events JavaScript lets you execute code when events are detected. Events can be triggered by the user or the browser.

JavaScript Events onmouseover –when user moves the mouse pointer over an item on the page onmouseout – when the mouse leaves an item on the page onclick –when user clicks an item on the page

Success Criteria I can use JavaScript events to make a web page dynamic.