JavaScript Functions Please use speaker notes for additional information!

Slides:



Advertisements
Similar presentations
Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.
Advertisements

Copyright Penny McIntire, 2007 Things to Do with JavaScript.
JavaScript Objects - DOM CST 200 JavaScript. Objectives Introduce JavaScript objects Introduce Document Object Model Introduce window object Introduce.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
The Web Warrior Guide to Web Design Technologies
JavaScript- Processing HTML Forms. Event Handlers Begins with and ends with.
Example 2.
Functions and Methods Function : Block of instructions called (executed) by name Method: A function operating within an object –World Example: start car.
HTML Comprehensive Concepts and Techniques Second Edition Project 8 Integrating JavaScript with HTML.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Information Technology Center Hany Abdelwahab Computer Specialist.
CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
JavaScript with Input & Output Step 1: Use tags JavaScript Template.
CIS101 Introduction to Computing Week 12 Spring 2004.
JavaScript Switch Statement. Switch JavaScript Switch Statement If you have a lot of conditions, you can use a switch statement instead of an if…elseif…
Introduction to Javascript. Web Page Technologies To create Web Page documents, you use: To create Web Page documents, you use: HTML – contents and structures.
Introduction to JavaScript Events As usual, please use the speaker notes for additional information!
Introduction to scripting
JOptionPane class. Dialog Boxes A dialog box is a small graphical window that displays a message to the user or requests input. A variety of dialog boxes.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
Adding JavaScript (<script tag>)
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
JavaScript Part 1.
Intro to JavaScript. Use the tag to tell the browser you are writing JavaScript.
Week 9 PHP Cookies and Session Introduction to JavaScript.
INTRODUCTION TO ALGORITHMS PROGRAMMING. Objectives Give a definition of the term algorithm Describe the various parts of the pseudocode algorithm or algorithm.
Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,
Dynamic Web Pages & JavaScript. Dynamic Web Pages Dynamic = Change Dynamic Web Pages are web pages that change. More than just moving graphics around.
ITBP 119 Algorithms and Problem Solving Section 2.1 Installing software Section 2.2 First Programs Section 2.3 Variables.
Introduction to Javascript. What HTML Can & Can Not Do HTML Can HTML Can Display text Display text Display images Display images Display even animated.
The Grammar of JavaScript.  Each line of a script is a statement  An instruction that JavaScript can evaluate (make sense of)  Ends with a semicolon;
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
Variety of JavaScript Examples Please use speaker notes for additional information!
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
1 JavaScript
JavaScript Programming Unit #1: Introduction. What is Programming?
JavaScript Syntax, how to use it in a HTML document
CSD 340 (Blum)1 Starting JavaScript Homage to the Homage to the Square.
JavaScript Events with XHTML Please use speaker notes for additional information!
1 A Balanced Introduction to Computer Science David Reed, Creighton University ©2005 Pearson Prentice Hall ISBN X Chapter 4 JavaScript and.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
JavaScript. JavaScript is the programming language of HTML and the Web. Easy to learn One of the 3 languages of all developers MUST learn: 1. HTML to.
CSD 340 (Blum)1 Starting JavaScript Homage to the Homage to the Square.
Introduction into JavaScript Java 1 JavaScript JavaScript programs run from within an HTML document The statements that make up a program in an HTML.
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.
Making dynamic pages with javascript Lecture 1. Java script java versus javascript Javascript is a scripting language that will allow you to add real.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.
Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Another JavaScript.
Chapter 4 Java Script - Part1. 2 Outlines Introduction to Java Script Variables, Operators and Functions Conditional statements JavaScript Objects Forms.
Answer questions about assignment.. Starting JavaScript, at my site these examples are under programs and JavaScript. You can see the address for this.
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.
CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript.
JavaScript 101 Lesson 6: Introduction to Functions.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
JavaScript JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user.
1 JavaScript and Dynamic Web Pages Lecture 7. 2 Static vs. Dynamic Pages  A Web page uses HTML tags to identify page content and formatting information.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
CGS 3066: Web Programming and Design Spring 2017
Build in Objects In JavaScript, almost "everything" is an object.
WEB APPLICATION PROGRAMMING
I meant \" it print. Here I have defined a function called basicHelloWorld() - the () are used with a function and can show things received.
Javascript Game Assessment
We are starting to program with JavaScript
and the properties. I named this lblName.
We are starting JavaScript. Here are a set of examples
I dragged over the label tool (A icon) and put it on the form.
Unit 6 part 6 Test Javascript Test.
Presentation transcript:

JavaScript Functions Please use speaker notes for additional information!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHelloWorld() { alert("Hello world!"); } This is a header before the function basicHelloWorld() This is a header after the function! When the function is called with the statement: basicHelloWorld( ), the processing branches to the function and executes it. When the function is complete it returns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(passedName) { alert("Hello " + passedName); } This is a header before the function basicHello("Ann") This is a header after the function! The name Ann in quotes because it is a literal is passed to the function. Notice that Ann is inside parenthesis. It is received by the function as passedName. The contents of passedName is then used in the alert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(passedName) { alert("Hello " + passedName); } This is a header before the function var theName; theName = window.prompt("Enter your name ",""); basicHello(theName) This is a header after the function! The prompt asks for a name and takes the user input and stores it in theName. The function is then called with theName being passed. The name is received as passedName and then displayed in the alert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(theName) { alert("Hello " + theName); } This is a header before the function var theName; theName = window.prompt("Enter your name ",""); basicHello(theName) This is a header after the function!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(firstName, lastName) { alert("Hello " + firstName + " " + lastName); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(firstReceived, lastReceived) { alert("Hello " + firstReceived + " " + lastReceived); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Introduction to functions body { background: black; } h1 { color: pink; } function basicHello(lastName, firstName) { alert("Hello " + firstName + " " + lastName); } This is a header before the function var firstName; var lastName firstName = window.prompt("Enter your first name ",""); lastName = window.prompt("Enter your last name ",""); basicHello(firstName, lastName) This is a header after the function!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(firstIn, lastIn) { alert("Hello " + firstIn.value + " " + lastIn.value); } This is a header before the function Enter your first name: Enter your last name: <input type="button" name="toClick" value="Click" onclick="basicHello(firstIn, lastIn)" /> In this example, firstIn and lastIn are received. I am now showing the alert with the code written as firstIn.value and lastIn.value. When the onclick even happens, the function is sent the names of the two text boxes: firstIn and lastIn.

function basicHello(firstIn, lastIn) { alert("Hello " + firstIn + " " + lastIn); } The only difference in this code and the last code is the removal of the.value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(receivedFirst, receivedLast) { alert("Hello " + receivedFirst.value + " " + receivedLast.value); } This is a header before the function Enter your first name: Enter your last name:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello(firstIn, lastIn) { document.info.nameOut.value = "Hello " + firstIn.value + " " + lastIn.value } This is a header before the function Enter your first name: Enter your last name: In this example, the function puts the Hello statement in the text box named nameOut. Because it was not passed, we need the very specific name which is document.info.nameOut.value

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Introduction to functions body { background: black; } h1, p { color: pink; } function basicHello() { document.info.nameOut.value = "Hello " + document.info.firstIn.value + " " + document.info.lastIn.value } This is a header before the function Enter your first name: Enter your last name: