Writing to a PAGE.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
The Document Object Model (DOM) 1 JavaScript is an object-based language—that is, it’s based on manipulating objects by changing each object’s properties.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.
CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.
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
 Pseudo-elements  Centering  Tables  Classes and ids.
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
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.
  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 Forms What is a form.
 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.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
Forms and Applications Web Design Professor Frank.
Suzanne J. Sultan Javascript Lecture 2. Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements  Always name.
PHP Form Introduction Getting User Information Text Input.
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.
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
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.
INTRODUCTION TO HTML5 New HTML5 User Interface and Attributes.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
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.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
ADMINISTRIVIA. LATES, REGRADES, …  Regrades: no more forms: need to see me in person in my office  Excused absences  If foreseeable, needs to be requested.
Getting Started with CSS
Programming Web Pages with JavaScript
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
>> Introduction to CSS
JavaScript.
JavaScript functions.
Intro to JavaScript CS 1150 Spring 2017.
Introduction to Scripting
JavaScript Forms Adding User Input.
Web Systems Development (CSC-215)
Chapter 7 - JavaScript: Introduction to Scripting
Web Systems Development (CSC-215)
Event Driven Programming & User Defined Functions
إستراتيجيات ونماذج التقويم
JavaScript: Introduction to Scripting
JavaScript Forms Adding User Input.
Chapter 6 Event-Driven Pages
Writing to a PAGE.
JavaScript Basics Topics Review Important Methods Writing Functions
Chapter 7 - JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript functions.
Writing to the Page Formatting Forms
Web Programming and Design
Web Programming and Design
Murach's JavaScript and jQuery (3rd Ed.)
Other options Note: Style switcher.
Chapter 7 - JavaScript: Introduction to Scripting
Presentation transcript:

Writing to a PAGE

Multi-page sites

Different styles Splash page – no content to start; never return Hub and spokes – a base page that directs you to the others Sequential – to be read in order Peers – no order or dependencies Subpages – main page that leads you to others

Splash Page SPLASH

HUB AND SPOKES HUB

SEQUENTIAL

PEERS

SUBPAGES PAGE

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

Two new options Use an id Use any attribute Element#idname Removes the need for class and id on the same element Use any attribute 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

Chrome console

Writing to PAGE

Multiple options: just one today INPUT type=TEXT or NUMBER User can set So can you! Need your next JavaScript statement!

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