Functions (doing a calculation) Please use speaker notes for additional information!

Slides:



Advertisements
Similar presentations
JavaScript Function Example Please use speaker notes for additional information.
Advertisements

1 CSC 551: Web Programming Spring 2004 client-side programming with JavaScript  scripts vs. programs  JavaScript vs. JScript vs. VBScript  common tasks.
JavaScript Part for Repetition Statement for statement Cpecifies each of the items needed for counter-controlled repetition with a control variable.
Introduction to JavaScript Please see speaker notes for additional information!
JavaScript- Processing HTML Forms. Event Handlers Begins with and ends with.
Executes a statement or statements for a number of times – iteration. Syntax for(initialize; test; increment) { // statements to be executed } Initial.
CS 142 Lecture Notes: HTMLSlide 1 Introduction There are several good reasons for taking CS142: Web Applications: ● You will learn a variety of interesting.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Functions Part I.
1 CS101 Introduction to Computing Lecture 29 Functions & Variable Scope (Web Development Lecture 10)
Advanced Decisions and Loops Chapter Some Simple Schoolroom Statistics.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.
WEB DESIGN AND PROGRAMMING Introduction to Javascript.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Loops Doing the same thing over and over and over and over and over and over…
ASP.NET Web Development 1 Web Technology Basics. Browser and server roles Static (stateless) web pages Web Technology Basics #2.
Using images with XHTML Please use speaker notes for additional information!
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
© The McGraw-Hill Companies, 2006 Chapter 4 Implementing methods.
Links in XHTML Please use speaker notes for additional information!
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Dynamic Web Pages & JavaScript. Dynamic Web Pages Dynamic = Change Dynamic Web Pages are web pages that change. More than just moving graphics around.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Frames in XHTML Please use speaker notes for additional information!
Tables with XHTML Please use speaker notes for additional information!
JavaScript III Functions and Abstraction. 2 JavaScript so far statements assignment function calls data types numeric string boolean expressions variables.
Created by, Author Name, School Name—State FLUENCY WITH INFORMATION TECNOLOGY Skills, Concepts, and Capabilities.
Variety of JavaScript Examples Please use speaker notes for additional information!
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.
Input & Output Functions JavaScript is special from other languages because it can accept input and produce output on the basis of that input in the same.
1 JavaScript: Control Structures. 2 Control Structures Flowcharting JavaScript’s sequence structure.
Introduction to Programming JScript Six Scripting functions Discuss functions Password Example.
Procedural Programming Criteria: P2 Task: 1.2 Thomas Jazwinski.
1 JavaScript Functions and Objects. 2 Objectives You will be able to Use JavaScript functions in JavaScript scripts. Get JavaScript functions executed.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
JavaScript Loops Please use speaker notes for additional information!
JavaScript, Fourth Edition
Chapter 10: JavaScript Functions CIS 275—Web Application Development for Business I.
1 Functions, Part 1 of 2 Topics Using Predefined Functions Programmer-Defined Functions Using Input Parameters Function Header Comments.
CSCE 102 – Chapter 11 (Performing Calculations) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
JavaScript Challenges Answers for challenges
CIS 375—Web App Dev II JavaScript I. 2 Introduction to DTD JavaScript is a scripting language developed by ________. A scripting language is a lightweight.
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.
Unit 10-JavaScript Functions Instructor: Brent Presley.
Answer questions about assignment.. Starting JavaScript, at my site these examples are under programs and JavaScript. You can see the address for this.
XHTML and Forms Please use speaker notes for additional information!
Abstraction and Functions Professor Robin Burke. 2 Outline Quiz JavaScript review Abstraction Function Definitions purpose syntax Functions return value.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled.
Subroutines (PrArith, Math,projCP1, PrAdrProc, PrAdrProcFunc) Please use speaker notes for additional information!
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
INTERNET APPLICATIONS CPIT405 JavaScript Instructor: Rasha AlOmari
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 11 - JavaScript: Arrays Outline 11.1 Introduction 11.2 Arrays 11.3 Declaring and Allocating Arrays.
JavaScript: Control Structures I Outline 1 Introduction 2 Algorithms 3 Pseudocode 4 Control Structures 5 if Selection Structure 6 if/else Selection Structure.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
Build in Objects In JavaScript, almost "everything" is an object.
JavaScript: Control Structures I
Functions Comp 205 Fall ‘17.
Scope, Objects, Strings, Numbers
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
Chapter 8 - JavaScript: Control Structures I
We are starting to program with JavaScript
1) C program development 2) Selection structure
T. Jumana Abu Shmais – AOU - Riyadh
We are starting JavaScript. Here are a set of examples
M150: Data, Computing and Information
For this assignment, copy and past the XHTML to a notepad file with the .html extension. Then add the code I ask for to complete the problems.
Chapter 7 - JavaScript: Introduction to Scripting
Brent M. Dingle Texas A&M University Chapter 5 – Section 2-3
Chapter 8 - JavaScript: Control Structures I
This is an introduction to JavaScript using the examples found at the CIS17 website. In previous examples I specified language = Javascript, instead of.
Presentation transcript:

Functions (doing a calculation) Please use speaker notes for additional information!

On the next two input boxes, I entered 68 and 92. The first number is the result of adding the three inputs and dividing by 3. The second number is rounding the results of the calculation and the third number is truncating the results.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(exam, proj, hmwk) { var theAvg = (exam + proj + hmwk)/3; var theAvgRounded = Math.round(theAvg); var theAvgFloor = Math.floor(theAvg); document.write("The average is " + theAvg); document.write(" The average rounded is " + theAvgRounded); document.write(" The average truncated is " + theAvgFloor); } //--> Calculate Average <!-- var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); calAvg(exam, proj, hmwk); //--> In this code, I am taking in three grades. The parseInt is used to convert to numeric. It is a good practice to parse for numeric. I then pas exam, proj and hmwk to the function. The function receives the numbers and calls them exam, proj and hmwk. They are then used in the calculation to get theAvg. We then use the Math object to round (Math.round) and truncate (Math.floor). The results are shown using document.write The average is written in the function where theAvg, theAvgRounded and theAvgFloor were declared. If I tried to write these averages outside the function, it would not work because JavaScript could not see them.

The lines giving the average were written inside the function. The last line was written in the body, outside the function.

Function to calculate average <!-- function calAvg(exam, proj, hmwk) { var theAvg = (exam + proj + hmwk)/3; var theAvgRounded = Math.round(theAvg); var theAvgFloor = Math.floor(theAvg); document.write("The average is " + theAvg); document.write(" The average rounded is " + theAvgRounded); document.write(" The average truncated is " + theAvgFloor); } //--> Calculate Average <!-- var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); calAvg(exam, proj, hmwk); document.write(" This is outside the function"); document.write(" From ouside the function - The average is " + theAvg); document.write(" From outside the function - The average rounded is " + theAvgRounded); document.write(" From outside the function - The average truncated is " + theAvgFloor); //-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(exam, proj, hmwk) { theAvg = (exam + proj + hmwk)/3; theAvgRounded = Math.round(theAvg); theAvgFloor = Math.floor(theAvg); document.write("The average is " + theAvg); document.write(" The average rounded is " + theAvgRounded); document.write(" The average truncated is " + theAvgFloor); } //--> Calculate Average <!-- var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); calAvg(exam, proj, hmwk); document.write(" This is outside the function"); document.write(" From ouside the function - The average is " + theAvg); document.write(" From outside the function - The average rounded is " + theAvgRounded); document.write(" From outside the function - The average truncated is " + theAvgFloor); //--> You should note that when I define theAvg using var this does not work because theAvg in the body does not see it. That is because variables defined within a function are local. If you define them outside the function they are global. Omitting the word var gets around this but is not considered a great coding technique.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(exam, proj, hmwk) { var theAvg = (exam + proj + hmwk)/3; document.write("The average is " + theAvg); return theAvg } //--> Calculate Average <!-- var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); var theAns = calAvg(exam, proj, hmwk); document.write(" This is outside the function"); document.write(" From ouside the function - The average is " + theAns); //--> In this example, I used the return to return theAvg. In this case it will be recognized outside the function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(exam, proj, hmwk) { var theAvg = (exam + proj + hmwk)/3; document.write("The average is " + theAvg); theAns= theAvg; } //--> Calculate Average <!-- var theAns = 0; var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); calAvg(exam, proj, hmwk); document.write(" This is outside the function"); document.write(" From ouside the function - The average is " + theAns); //--> In this example I defined theAns outside the function which made it global. I defined theAvg inside the function and then assigned the results to theAvg as I left the function. Since it is global I can then see it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg() { var theAvg = (exam + proj + hmwk)/3; document.write("The average is " + theAvg); theAns = theAvg; } //--> Calculate Average <!-- var theAns = 0; var exam = parseInt(prompt("Key in the grade for exams", 0)); var proj = parseInt(prompt("Key in the grade for projects", 0)); var hmwk = parseInt(prompt("Key in the grade for homework", 0)); calAvg(); document.write(" This is outside the function"); document.write(" From ouside the function - The average is " + theAns); //--> In this example I defined theAns outside the function which made it global. I defined theAvg inside the function and then assigned the results to theAns as I left the function. Since it is global I can then see it. Note that when I define the variables as I did, outside the function, I do not need to pass. Preferred methodology is to pass. In fact, usually you use separate names to maintain the integrity of the data.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(calExam, calProj, calHmwk) { var theAvg = (calExam + calProj + calHmwk)/3; document.write("Inside the function"); document.write(" The average is " + theAvg); document.write(" " + calExam + " " + calProj + " " + calHmwk); theAns = theAvg; document.write(" Last line in the function "); } //-->

Calculate Average <!-- var theAns = 0; var exam = parseInt(prompt("Key in the grade for exams")); var proj = parseInt(prompt("Key in the grade for projects")); var hmwk = parseInt(prompt("Key in the grade for homework")); calAvg(exam, proj, hmwk); document.write(" The average is " + theAns); document.write(" " + exam + " " + proj + " " + hmwk); document.write(" Note the variables used in the function are not available ") document.write ("Declared in the function: " + calExam + " " + calProj + " " + calHmwk); document.write("Declared in the function: " + theAvg); //--> In this example I defined theAns outside the function which made it global. I defined theAvg inside the function and then assigned the results to theAns as I left the function. Since it is global I can then see it. Here I am using separate names for the data inside the function and outside the function to maintain the integrity of the data. Because there is nothing after the message in the prompt to indicate the entry in the prompt box, undefined is used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(calExam, calProj, calHmwk) { calExam = parseInt(calExam * 1.1); calProj = parseInt(calProj * 1.1); calHmwk = parseInt(calHmwk * 1.1); var theAvg = parseInt((calExam + calProj + calHmwk)/3); document.write("Inside the function"); document.write(" The average is " + theAvg); document.write(" " + calExam + " " + calProj + " " + calHmwk); theAns = theAvg; document.write(" Last line in the function "); } //-->

Calculate Average <!-- var theAns = 0; var exam = parseInt(prompt("Key in the grade for exams")); var proj = parseInt(prompt("Key in the grade for projects")); var hmwk = parseInt(prompt("Key in the grade for homework")); calAvg(exam, proj, hmwk); var firstAvg = (exam + proj +hmwk)/3; document.write(" The average is " + theAns); document.write(" The average based on input is " + firstAvg); document.write(" Input: " + exam + " " + proj + " " + hmwk); document.write(" Note the variables used in the function are not available "); document.write(calExam + " " + calProj + " " + calHmwk); //--> In this example I defined theAns outside the function which made it global. I defined theAvg inside the function and then assigned the results to theAns as I left the function. Since it is global I can then see it. Here I am using separate names for the data inside the function and outside the function to maintain the integrity of the data. I am also changing the value of the data after it has been passed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Function to calculate average <!-- function calAvg(calExam, calProj, calHmwk) { calExam = parseInt(calExam * 1.1); calProj = parseInt(calProj * 1.1); calHmwk = parseInt(calHmwk * 1.1); var theAvg = parseInt((calExam + calProj + calHmwk)/3); document.write("Inside the function"); document.write(" The average is " + theAvg); document.write(" " + calExam + " " + calProj + " " + calHmwk); document.write(" Last line in the function "); return theAvg; } //-->

Calculate Average <!-- var exam = parseInt(prompt("Key in the grade for exams")); var proj = parseInt(prompt("Key in the grade for projects")); var hmwk = parseInt(prompt("Key in the grade for homework")); document.write(" The average is " + calAvg(exam, proj, hmwk)); document.write(" Input: " + exam + " " + proj + " " + hmwk); document.write(" Note the variables used in the function are not available "); document.write(calExam + " " + calProj + " " + calHmwk); //--> In this example I am calculating theAvg and then returning it using return. Note that I call the function within the write.