Writing to a PAGE.

Slides:



Advertisements
Similar presentations
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Advertisements

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Chapter 31 Basic Form-Processing Techniques JavaServer Pages By Xue Bai.
CHAPTER 30 THE HTML 5 FORMS PROCESSING. LEARNING OBJECTIVES What the three form elements are How to use the HTML 5 tag to specify a list of words’ form.
 Pseudo-elements  Centering  Tables  Classes and ids.
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.
  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements.
User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.
Lesson 8 Creating Forms with JavaScript
HTML Links and Anchors.
HTML Forms What is a form.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
WEB DESIGN AND PROGRAMMING Introduction to Javascript.
Event-driven Programming
Should have seen something like this last week What does do? stands for table row and starts a new row in the table.
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.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
Suzanne J. Sultan Javascript Lecture 2. Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with.
Tags Pages 63 to 114 in your workbook. Tag Browser Review of the communication chain Polling Driver concepts Tag Browser in detail – Filtering – The tag.
  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements  Always name.
HTML and FORMS.  A form is an area that can contain form elements.  Form elements are elements that allow the user to enter information (like text fields,
Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
JavaScript - Basic Concepts Prepared and Presented by Hienvinh Nguyen, Afshin Tiraie.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
HTML5 Forms Forms are used to capture user input …
HTML FORMS The TEXT Object Presented By: Ankit Gupta.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
JavaScript Functions. CSS Inheritance Which formatting applies? x y z input { display: block; } input.pref { background:red; } If you have a selector.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
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.
UI Tags of Struts2. May 12, 2011 Struts 2.x Tags in detail:- The Struts 2.x tags can be classified under the following categories. i) UI Tags ii) Control.
CSC 121 Computers and Scientific Thinking Fall Event-Driven Programming.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
APA Cover Page Dr. Gustafson. What is a Cover Page? APA Manual 6 th Edition – See Manuscript Elements A cover page is the first page of your.
HTML FORM. Form HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements.
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
 Collection of statements that can be invoked as a unit  Can take parameters  Can be used multiple times  Can call without knowing what they do or.
ADMINISTRIVIA. LATES, REGRADES, …  Regrades: no more forms: need to see me in person in my office  Excused absences  If foreseeable, needs to be requested.
Event-Driven Programming
JavaScript.
JavaScript functions.
Warm up ON HANDOUT Which company will charge the least for the small greenhouse? Which company will charge the least for the medium greenhouse? Which.
Introduction to Scripting
JavaScript Functions.
JavaScript Forms Adding User Input.
النماذج عند الانتهاء من هذا الدرس ستكون قادرا على:
Web Systems Development (CSC-215)
Chapter 7 - JavaScript: Introduction to Scripting
Event Driven Programming & User Defined Functions
إستراتيجيات ونماذج التقويم
JavaScript: Introduction to Scripting
JavaScript Forms Adding User Input.
Reviewing key concepts
Chapter 6 Event-Driven Pages
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
Chapter 7 - JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript functions.
Writing to the Page Formatting Forms
Writing to a PAGE.
Chapter 7 - JavaScript: Introduction to Scripting
Presentation transcript:

Writing to a PAGE

Multiple options: just one today INPUT type=TEXT or NUMBER User can set So can you! Assignment statement: output-cubby “takes the value of” input-cubby

Writing to the Page Can write to an input field as well as read it <form name="typing"> <input type="text" name="input“> <input type="text" name="output" > </form> typing.output.value=typing.input.value;

Assignment Statement: “takes the value of” The most fundamental statement in programming Destination = source; Destination takes the value of the source Evaluate the source Assign that value to destination Source can be literal, field or expression In this case, the destination is the text field called output

Now 2 options for onclick Alert Assignment

More selectors

selective formatting Need to identify the elements that you want to format We have seen All elements Elements based on classes Elements based on context Pseudo-elements

new option Use any attribute Allows you to format only a single element[attribute=“value”] Allows you to format only a single input field (name) or type (text)

Selecting based on attributes tag[attribute=“value”] Formatting only applies to tags with that attribute value Tag.classname is same as Tag[class=“classname”] Other options (rarely used) w3schools