Web Forms and Calculations in JavaScript. Web Forms.

Slides:



Advertisements
Similar presentations
Chapter 6: JavaScript Functions 6.1 The Purpose of Functions 6.2 Defining JavaScript Functions 6.3 Using JavaScript Functions 6.4 Global Functions and.
Advertisements

Lesson 4: Formatting Input Data for Arithmetic
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Video, audio, embed, iframe, HTML Form
JavaScript Forms Form Validation Cookies CGI Programs.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
29 November JavaScript: Arrays and Iterations Functions.
Tutorial 11 Working with Operators and Expressions
PHP Scripts HTML Forms Two-tier Software Architecture PHP Tools.
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.
JavaScript Events and Event Handlers 1 An event is an action that occurs within a Web browser or Web document. An event handler is a statement that tells.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
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.
Forms and Form Controls Chapter What is a Form?
Going Round and Round: the Repetition Structure Chapter 4.
JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms.
The Web Wizard’s Guide To JavaScript Chapter 6 Working with Dates and Times.
Introduction to PHP – Chapter 8 Working with PHP.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)
HTML Forms.
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Basic Data Types Numbers (integer and floating point)‏ Strings (sequences of characters)‏ Boolean values (true/false)‏
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.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
Chapter 19 Creating and Processing HTML Forms. How HTML Forms Transmit Data name1=value1&name2=value2...&nameN =valueN GET or POST GET, an HTTP GET request,
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
CSCE 102 – Chapter 11 (Performing Calculations) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
+ FORMS HTML forms are used to pass data to a server. begins and ends a form Forms are made up of input elements Every input element has a name and value.
XP Tutorial 2 New Perspectives on JavaScript, Comprehensive1 Working with Operators and Expressions Creating a New Year’s Day Countdown Clock.
HTML FORMS The TEXT Object Presented By: Ankit Gupta.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
Tutorial 11 1 JavaScript Operators and Expressions.
Conditions and More Web Form Fields. Conditions if (then) else Syntax if( ) Boolean expression { { } } instructions if expression is true (then) instructions.
CIS 228 The Internet 12/6/11 Forms and Validation.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
14.0 Math Review 14.1 Using a Calculator Calculator
HTML Again GUI Items Originally HTML 4 Copyright © Curt Hill.
How to Write Web Forms By Mimi Opkins.
Project 9 Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms.
IS1500: Introduction to Web Development
(and available form fields)
Server-Side Application and Data Management IT IS 3105 (Spring 2010)
25 Math Review Part 1 Using a Calculator
Programming the Web using XHTML and JavaScript
HTML/XHTML Forms 18-Sep-18.
النماذج عند الانتهاء من هذا الدرس ستكون قادرا على:
Designing Forms Lesson 10.
HTML: Basic Tags & Form Tags
CGI Programming Part II UNIX Security
Creating Form Elements
Creating Form Elements
Web Development & Design Foundations with H T M L 5
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.
HTML Forms Internet Technology.
HTML Forms Internet Technology.
Variables Kevin Harville.
The + can mean concatenate or add
HTML Forms 18-Apr-19.
© Hugh McCabe 2000 Web Authoring Lecture 8
Lesson 6: Web Forms.
The Web Wizard’s Guide To JavaScript
Making your HTML Page Interactive
HTML: Basic Tags & Form Tags
Presentation transcript:

Web Forms and Calculations in JavaScript

Web Forms

Why Forms? Web Server Web Browser Identification, settings, etc. Transaction Data

Forms and Form Fields Form

Defining a Form and Elements HTML and form fields go here.

Basic Form Elements

Basic Form Elements <input type="text" name=“sname" size="30" /> <input type="checkbox" name="student" checked />

Basic Form Elements <input type="radio" name="sex" value="M" /> <input type="radio" name="sex" value=“F" />

Basic Form Elements Management Information Systems Computer Information Systems Information Security and Privacy

Basic Form Elements <textarea name="comments" rows="5" cols="50">

Basic Form Elements <input type="submit" name="submit" value="Record Entry" />

Accessing Form Fields by Name document.getstuff.sname.value document.getstuff.student.checked...documentformfieldproperty

Focus, Blur, and Change Focus Event (onfocus) Blur Event (onblur) Change Event (onchange) (after exit field with changes)

Event Order Blur Event Change Event Single Action  Multiple Events Change value in form field and hit tab: Order varies (see DOM references)

Functions and Return Values

function byValue(a) { alert('In byValue (start): ' + a) a = a * alert('In byValue (end): ' + a) } var parm = 5 alert('In body (start): ' + parm) byValue(parm) alert('In body (end): ' + parm) By Value: Function calls using variables pass values. In body (start): 5 In byValue (start): 5 In byValue (end): In body (end): 5

function byReference(b) { alert('In byReference (start): ' + b.parm) b.parm = b.parm * alert('In byReference (end): ' + b.parm) } var obj = new Object obj.parm = 5 alert('In body (start): ' + obj.parm) byReference(obj) alert('In body (end): ' + obj.parm) By Reference: Function calls using objects pass references to memory address. In body (start): 5 In byReference (start): 5 In byReference (end): In body (end): 50000

function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate document.write('Gross = ' + gross + ' ') } var hours = 40.0 var rate = 9.88 calcGrossPay(hours, rate) Gross =

function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } var hours = 40.0 var rate = 9.88 var grossPay = 0.00 grossPay = calcGrossPay(hours, rate) document.write('Gross = ' + grossPay + ' ')

function calcGrossPay(hours, rate) { var gross = 0.00 gross = hours * rate return gross } var hours = 40.0 var rate = 9.88 var grossPay = 0.00 var netPay = 0.00 grossPay = calcGrossPay(hours, rate) netPay = grossPay * 0.6 document.write('Net = ' + netPay + ' ')

Returning Values Global variable. Object – by reference. Returned value.

Calculations

Basics d = d + 1 r = q - m a = t * b c = a / m p = n + m / g - z p = (n + m) / (g - z)

Increment and Decrement Increment b++  b = b d  d = d + 1 a = b++  a = b; b = b + 1 c = ++d  c = d + 1; d = d + 1 Decrement b--  b = b d  d = d - 1 a = b--  a = b; b = b - 1 c = --d  c = d - 1; d = d - 1

Math Object Enables higher math operators. Examples: –Square root. –Exponentiation. –Trigonometry calculations. –Random number generator.

Numeric Conversion Number as string. Conversion Methods: –parseFloat()  decimal. –parseInt()  integer.