Last &me: Javascript (forms and func&ons)

Similar documents
<form>. input elements. </form>

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

Q1. What is JavaScript?

DAY 2. Creating Forms

JavaScript s role on the Web

Web Designing HTML5 NOTES

HTML Form. Kanida Sinmai

WEBD 236 Web Information Systems Programming

Creating Forms. Speaker: Ray Ryon

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

CGI Programming. What is "CGI"?

Overview of Forms. Forms are used all over the Web to: Types of forms: Accept information Provide interactivity

Week 13 Thursday (with Page 5 corrections)

Spring 2014 Interim. HTML forms

MI1004 Script programming and internet applications

Web Forms. Survey or poll Contact us Sign up for an newsletter Register for an event

core programming HTML Forms Sending Data to Server-Side Programs Marty Hall, Larry Brown

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

Row and Column Spans. Homework. Column and Row Span Example (2) Column and Row Span Example. tables: Live Demo. like the following using forms:

IS 242 Web Application Development I

Chapter 3 HTML Multimedia and Inputs

Hyperlinks, Tables, Forms and Frameworks

MATLAB 1. Jeff Freymueller September 24, 2009

HTML. Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University

Why Use A JavaScript Library?

Welcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs

HTML Forms. By Jaroslav Mohapl

Consider the following file A_Q1.html.

CSS Review. Objec(ves. Iden(fy the Errors. Fixed CSS. CSS Organiza(on

Networking and Internet

Developing Online Databases and Serving Biological Research Data

Javascript Lecture 23

Introduction to Web Development

Summary 4/5. (contains info about the html)

HTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data"

ABSOLUTE FORM PROCESSOR ADMINISTRATION OPTIONS

Creating and Building Websites

Web Focused Programming With PHP

Practice problems. 1 Draw the output for the following code. 2. Draw the output for the following code.

HTML Forms & PHP. Database Systems CSCI Dr. Tom Hicks Computer Science Department

CISC 1600 Lecture 2.4 Introduction to JavaScript

UNIT-VI CREATING AND USING FORMS

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

JavaScript CSCI 201 Principles of Software Development

Software. Programming Languages. Types of Software. Types of Languages. Types of Programming. Software does something

First Simple Interactive JSP example

UNIT I Java Bean, HTML & Javascript

introjs.notebook March 02, 2014

Old Business h,ps://jshare.johnshopkins.edu/kchurch4/public_html/teaching/103/spring2011/ Note: We rarely write HTML by hand Many programs offer an

CPSC 481: CREATIVE INQUIRY TO WSBF

Project 2: After Image

By the end of this section of the practical, the students should be able to:

Decibel Insight Implementation Guide v4.1.6

Creating dependent menus

For loops and Window Objects:

A. Using technology correctly, so that your site will still function for users who don t have these technologies

HTML and CSS MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

SKIP THIS STEP IF YOUR DISTRICT HAS CHROMEBOOKS FOR EVERY STUDENT WITH THEIR OWN GOOGLE APPS USERNAME!!!

Adobe Analytics User Manual Version 2. Adobe Analytics User Manual

c360 Web Connect Configuration Guide Microsoft Dynamics CRM 2011 compatible c360 Solutions, Inc. c360 Solutions

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.

NOTE: There are an awful lot of synonyms for "function" "routine, map [ ], procedure, [ ], subroutine, [ ], subprogram, [ ], function"

CMPT 100 : INTRODUCTION TO

Form Validation (with jquery, HTML5, and CSS) MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

LAB Test 1. Rules and Regulations:-

PYTHON CGI PROGRAMMING

Like many institutions, University of Minnesota

CIS 086 : Week 1. Web Development with PHP and MySQL

PHP with MySQL: What you need to know Chapter 3. This section is on using PHP script tags appropriately in your PHP program.

JavaScript Functions, Objects and Array

Session 16. JavaScript Part 1. Reading

Browser Support Internet Explorer

HTML Tables and. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.

Client Side JavaScript and AJAX

ORB Education Quality Teaching Resources

Quick.JS Documentation

Unifer Documentation. Release V1.0. Matthew S

CP215 Application Design

Mul$media im Netz (Online Mul$media) Wintersemester 2014/15. Übung 06 (Haup-ach)

NETB 329 Lecture 13 Python CGI Programming

JavaScript code is inserted between tags, just like normal HTML tags:

blink.html 1/1 lectures/6/src/ form.html 1/1 lectures/6/src/

Functions. INFO/CSE 100, Spring 2006 Fluency in Information Technology.

Lecture 6: More Arrays & HTML Forms. CS 383 Web Development II Monday, February 12, 2018

Lesson 3. Form By Raymond Tsang. Certificate Programme in Cyber Security

Web Application Development

HTML Element A pair of tags and the content these include are known as an element

Alpha College of Engineering and Technology. Question Bank

Date Picker Haim Michael

COMS 359: Interactive Media

Help Contents. Creating a Query - Synopsis

COMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II

SYBMM ADVANCED COMPUTERS QUESTION BANK 2013

Place User-Defined Functions in the HEAD Section

Child Items. Adding Child Items to plugin control panels. File Structure 4. Hacking childitems.html 7. Hacking childitem.html (without the s) 14

October 15. Tips for. Google Drive. Tips to expand your sharing and collaboration capabilities. Training

INTRODUCTION TO WEB DEVELOPMENT AND HTML. Lecture 13: Intro to JavaScript - Spring 2011

JavaScript!= Java. Intro to JavaScript. What is JavaScript? Intro to JavaScript 4/17/2013 INTRODUCTION TO WEB DEVELOPMENT AND HTML

LAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI

Transcription:

<form ac&on="mailto:username@jhu.edu" method="post" enctype="text/plain">

Let s debug some code together: hkp://www.clsp.jhu.edu/~anni/cs103/test_before.html hkp://www.clsp.jhu.edu/~anni/cs103/test_arer.html

<body> <form ac&on="mailto:username@jhu.edu" method="post" enctype="text/plain"> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body>

<body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> More control if you write the ac&on yourself: <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body>

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" +

Name of func&on document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" +

arguments document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" +

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + string = sum of other strings

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + example: Name: Ann Irvine Gender: Female

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + Pop up a window with the content of the message

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + If the window is confirmed

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + call the func&on called mailto

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + Pass it two arguments

document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + Receive two arguments

string = sum of other strings document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" +

string = sum of other strings document.loca&on.href = +

document.loca&on.href = + Dynamically load a page with this address

document.loca&on.href = + Details: semicolons

document.loca&on.href = + Details: Brackets

document.loca&on.href = + Details: javascript tags

document.loca&on.href = +

<body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body> document.loca&on.href = +

<html> <head> <script type="text/javascript > document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + </head> <body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body> </html> All of the javascript stuff

<html> <head> <script type="text/javascript > document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + </head> <body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body> </html> Form stuff All of the javascript stuff

<html> <head> <script type="text/javascript > document.loca&on.href = "mailto:kenneth.church@jhu.edu" + "?subject=" + subj + "&body=" + </head> <body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> <br> Gender: <select name="gender" id="g1" mul&ple="mul&ple" size="2"> <op&on value="male">male</op&on> <op&on value="female">female</op&on> </select> <input type="bukon" value="submit" onclick="displaymsg(this.form)" /> </form> </body> </html> Form stuff All of the javascript stuff Use the javascript to email the form content

Fix up some more code together (if &me): hkp://www.clsp.jhu.edu/~anni/cs103/test2_before.html hkp://www.clsp.jhu.edu/~anni/cs103/test2_arer.html

Next Up: Programming Phone Menus hkps://studio.tellme.com/

Homework 1. Make sure you have a working javascript based survey on your website: You should have func&ons like and (don t rely on the html ac&on tag that does this automa&cally and not so well) Don t worry about radio bukons and checkboxes, they re harder Include just textboxes and/or select lists 2. We ll learn how to do this in a much easier way with Google Docs later 3. Go to hkps://studio.tellme.com/ and sign up for a free account. Play around if you have &me, but at least have an account ready to program by next Tuesday