Server vs Client-side validation. JavaScript JavaScript is an object-based language. JavaScript is based on manipulating objects by modifying an object’s.

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

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
The Web Warrior Guide to Web Design Technologies
MSc. Publishing on WWW JavaScript. What is JavaScript? A scripting language devised by Netscape Adds functionality to web pages by: Embedding code into.
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.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
Bride of JavaScript Working with JavaScript Objects and Events.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
SYST Web Technologies SYST Web Technologies Lesson 6 – Intro to JavaScript.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
IT – som værktøj Bent Thomsen Institut for Datalogi Aalborg Universitet.
Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
JavaScript Part 1.
© 2000 – All Rights Reserved - Page 1 Introduction to JavaScript Programming Part Two.
Introduction to JavaScript + More on Interactive Forms.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
JSP Java Server Pages Softsmith Infotech.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
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.
Creating an Animated 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.
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.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Tutorial 8 Programming with ActionScript 3.0. XP Objectives Review the basics of ActionScript programming Compare ActionScript 2.0 and ActionScript 3.0.
Using Client-Side Scripts to Enhance Web Applications 1.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
JavaScript - A Web Script Language Fred Durao
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
Introduction to JavaScript Objects, Properties, Methods.
IT204 – Web Scripting and Authoring I Forms and Image Maps Unit 4.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
JavaScript Event Handlers. Introduction An event handler executes a segment of a code based on certain events occurring within the application, such as.
1 Lesson 6 Introducing JavaScript HTML and JavaScript BASICS, 4 th Edition.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 14 KEY CONCEPTS 1 Copyright.
Introduction to.
Chapter 5 Validating Form Data with JavaScript
In this session, you will learn to:
“Under the hood”: Angry Birds Maze
Web Development & Design Foundations with HTML5
JavaScript is a programming language designed for Web pages.
Section 17.1 Section 17.2 Add an audio file using HTML
New Perspectives on Creating Web Pages with HTML
FORM OBJECT When creating an interactive web site for the Internet it is necessary to capture user input and process this input. Based on the result of.
© 2015, Mike Murach & Associates, Inc.
variable vs object Read pgs on variables
JavaScript Basics What is JavaScript?
Presentation transcript:

Server vs Client-side validation

JavaScript JavaScript is an object-based language. JavaScript is based on manipulating objects by modifying an object’s properties or by applying methods to an object. –objects are items that have a defined existence –each object has properties that describe its appearance, purpose, or behavior –each object has methods, which are actions that can be performed with the object or to it

variable vs object Read pg.8.11 session 8.2 on variables Read pgs on objects: object names and properties

JavaScript Objects

A Part of the Document Object Model window document event frame history location navigator screen document form image link style tag anchor button checkbox radio reset select input submit textarea

Working with Object Properties Each object in JavaScript has properties associated with it. The number of properties depends on the particular object; some objects have only a few properties, while others have many. As with object names, certain keywords identify properties.

Object and Properties

Modifying a Property’s Value The syntax for changing the value of a property is: object.property = expression –object is the JavaScript name of the object you want to manipulate –property is a property of that object –expression is a JavaScript expression that assigns a value to the property

Setting an Object’s Property Value JavaScript commands resulting Web page document.fgColor document.bgColor window.defaultStatus

Assigning a Property to a Variable Although you cannot change the value of read-only properties, you can assign a value to a variable in your JavaScript program. The syntax for assigning a property to a variable is: variable = object.property –variable is the variable name –object is the name of the object –property is the name of its property

Using Property Values to Variables A conditional statement changes how the Web page behaves based on the value of an object property. The following JavaScript code shows how you can incorporate object properties into a simple conditional expression: If (document.bgColor==“black”) { document.fgColor=“white”; } else { document.fgColor=“black”; } Using objects, properties, and conditional statement provides a great deal of control over the appearance of a Web page.

Working with Object Methods Another way to control a Web page is to use methods. Methods are either actions that objects perform or actions applied to objects. The syntax for applying a method to an object is: object.method(parameters); –object is the name of the object –method is the method to be applied –parameters are any values used in applying the method to the object

JavaScript Objects and Their Methods

Managing Events An event is a specific occurrence within the Web browser. For example: –opening up a Web page –positioning the mouse pointer over a location on that page Events are an important part of JavaScript programming, you can write scripts that run in response to the actions of the user, even after the Web page has been opened.

Working with Event Handlers Events are controlled in JavaScript using event handlers that indicate what actions the browser takes in response to an event. Event handlers are created as attributes added to the HTML tags in which the event is triggered. The general syntax is: –tag is the name of the HTML tag –onevent is the name of the event that occurs within the tag –JavaScript commands are the commands the browser runs in response to the event

Events Initiated by the User During Data Entry

A selection list object Read pgs refer to the function placeorder() in jackson.html document.form_name.list_name.selectedIndex document.form_name.list_name.options[#].text e.g., document.order.Product.selectedIndex document.order.Product.options[i].text

A radio button object Read pg document.form_name.button_name[#].length document.form_name.button_name[#].checked e.g., document.order.USE[3].checked

A check box object Read pg document.form_name.button_name.checked e.g., document.Registration.brkfst.checked