© 2000 – All Rights Reserved - Page 1 Introduction to JavaScript Programming Part Two.

Slides:



Advertisements
Similar presentations
Introduction to Macromedia Director 8.5 – Lingo
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?
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Java Script Session1 INTRODUCTION.
The Web Warrior Guide to Web Design Technologies
1 Topic 6 Processing Form Input. 2Outline Goals and Objectives Goals and Objectives Chapter Headlines Chapter Headlines Introduction Introduction Form.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Introduction to JavaScript Programming. World Wide Web Original purpose was locating and displaying information Small academic and scientific community.
JavaScript Forms Form Validation Cookies CGI Programs.
Information Technology Center Hany Abdelwahab Computer Specialist.
Computer Science 103 Chapter 4 Advanced JavaScript.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Guide To UNIX Using Linux Third Edition
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Working with Forms in JavaScript (NON-audio version) © Dr. David C. Gibbs
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.
CST JavaScript Validating Form Data with JavaScript.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
JavaScript Form Validation
Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,
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.
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.
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.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms.
Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
JavaScript Part 1.
1 CLIENT-SIDE SCRIPTS. Objectives 2 Learn how to reference objects in HTML documents using the HTML DOM and dot syntax Learn how to create client-side.
1 rfXcel Confidential Copyright 2007 Web Technology JavaScript 12/10/07.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
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.
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.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
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.
1 Forms and Form elements CSD 340 McCoey. 2 Form Object Properties action Usually a call to a server elements encoding method post or get target Methods.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
7 1 User-Defined Functions CGI/Perl Programming By Diane Zak.
Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
JavaScript - Basic Concepts Prepared and Presented by Hienvinh Nguyen, Afshin Tiraie.
Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino.
JavaScript, Fourth Edition
1 Chapter 3 – JavaScript Outline Introduction Flowcharts Control Structures if Selection Structure if/else Selection Structure while Repetition Structure.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
HTML Forms.
Week 10: HTML Forms HNDIT11062 – Web Development.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 9.
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
20-753: Fundamentals of Web Programming 1 Lecture 13: Javascript II Fundamentals of Web Programming Lecture 13: Javascript II.
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.
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
© 2015, Mike Murach & Associates, Inc.
Section 17.1 Section 17.2 Add an audio file using HTML
Introduction to Programming the WWW I
The Web Wizard’s Guide To JavaScript
© 2015, Mike Murach & Associates, Inc.
Web Programming and Design
Presentation transcript:

© 2000 – All Rights Reserved - Page 1 Introduction to JavaScript Programming Part Two

© 2000 – All Rights Reserved - Page 2 Today’s Topics Objects, Properties, and Methods Conditionals Functions JavaScript Source Files Events and Event Handlers Frames and Arrays

© 2000 – All Rights Reserved - Page 3 Tags, Attributes, Values Tag is a markup instruction surrounded by signs Attributes are characteristics of a Tag Values are assigned to Attributes Figure I-1, Page I.3

© 2000 – All Rights Reserved - Page 4 Objects, Properties, & Values Objects, Properties, & Values An object is a real-world entity –carl An object is described by properties Properties differentiate among objects –carl.build Properties are assigned values –carl.build = “sturdy” object.property = “value”

© 2000 – All Rights Reserved - Page 5 Objects, Methods, & Arguments Objects, Methods, & Arguments A method is a behavior you want an object to perform –carl.eatless An argument is a value given to the method –carl.eatless(“bacon”) –carl.eatmore(“chicken”) object.method(“argument”)

© 2000 – All Rights Reserved - Page 6 Object Hierarchy (partial) Some objects can be properties of another object, for instance… A document is an object on its own, but A document might be a property of a window

© 2000 – All Rights Reserved - Page 7 Conditionals Conditionals Useful for validating form data Compare data to a desired value Two possible outcomes: True or False The If statements The While statement

© 2000 – All Rights Reserved - Page 8 Conditional Examples

© 2000 – All Rights Reserved - Page 9 If Statements If Statements Decision making a.k.a. flow control Execute specific programming if a conditional expression returns “True” if (conditional expression) { statement(s); }

© 2000 – All Rights Reserved - Page 10 If…Else Statements If…Else Statements Execute alternate programming if a conditional expression returns “False” if (conditional expression) { statement(s); } else { statement(s); }

© 2000 – All Rights Reserved - Page 11 While Loop While Loop Code which is to execute repeatedly while or as long as a condition exists While (conditional expression) { statement(s); }

© 2000 – All Rights Reserved - Page 12 While Loop Example While Loop Example var count = 1; while (count <= 5) { document.writeln(count); ++count; } document.writeln(“All finished.”); All finished.

© 2000 – All Rights Reserved - Page 13 FunctionsFunctions Individual programming statements often grouped into “procedures” In JavaScript procedures are called functions Defining functions Calling functions

© 2000 – All Rights Reserved - Page 14 JavaScript Source Files JavaScript Source Files An external file ending in *.js Contains no HTML Contains only JavaScript Easy repetitive use of longer code Can be shared among multiple HTML pages

© 2000 – All Rights Reserved - Page 15 Events Events An event is an action occurring on a web page, usually by the user –A mouse passing over a button –A user clicking a hyperlink –An insertion point (blinking cursor) in a form textbox –Clicking Stop on the browser’s icon bar

© 2000 – All Rights Reserved - Page 16 Event Handlers Triggering events are actions associated with event handlers

© 2000 – All Rights Reserved - Page 17 FormsForms Many forms use CGI (Common Gateway Interface) programs written in Perl for server-side data processing Other forms simply send the results to an address JavaScript and Event Handlers enable useful processes based on the contents of forms or the events occurring on forms

© 2000 – All Rights Reserved - Page 18 HTML’s Tag TYPE button checkbox file hidden image password radio reset submit text onblur=“script” onchange=“script” onclick=“script” ondblclick=“script” onfocus=“script” onkeydown=“script” onkeyup=“script” onselect=“script” etc.

© 2000 – All Rights Reserved - Page 19 Frames and JavaScript Frames allow browser windows to be split into smaller units In JavaScript, each frame is an object Therefore, JavaScript can apply properties and methods to each frame

© 2000 – All Rights Reserved - Page 20 Arrays Arrays An array contains a set of data represented by a single variable name An array is a JavaScript object Define one more element than you need Leave element [0] empty

© 2000 – All Rights Reserved - Page 21 Test Your Knowledge Test Your Knowledge Page I.17 True/False Questions 6-10 Multiple Choice Questions 7-10

© 2000 – All Rights Reserved - Page 22 Introduction to JavaScript Programming Part Two