CIS101 Introduction to Computing Week 12 Spring 2004

Agenda Your questions HTML/JavaScript Exam (next week) Review of requirements for Final HTML/JavaScript Project Class evaluation JavaScript: Lesson 6 & 7

In class exam 5/4 Closed book exam covering HTML and JavaScript HTML Introduction, Project 1, 2, 3, 6 JavaScript Introduction, Lesson 1,2,3,5,6,7 Evaluating information on the internet Being an effective information consumer

Final Project 5/11 Create a Web site using JavaScript/HTML All members must actively participate in presentation (reflected in grade) Title page – names of all team members JavaScript requirement – must include JavaScript code and link to page with explanation of how it works References – must be in MLA format

Student assessment Fill out CSIS student assessment

JavaScript Events and buttons (chapter 5) Lesson 6 - Introduction to functions Lesson 7 – If statement and conditional operators

Lesson 06 Topics What is a function Why functions are useful How to declare a function How to use a function How functions are used with event handlers

What is a Function As programs grow in size, they are easier to manage if they are split up into smaller pieces JavaScript uses the term function or method to describe these smaller pieces

Functions cont. A function (or method) is a unit of code that performs a specific, well defined task Programming languages come with built-in functions used to perform common tasks Examples: document.write – writes text to a Web document alert– displays a message inside a small window with an OK button prompt– asks the user a question and stores the answer in a variable

Why Functions are useful Give structure and organization to your code Make programming easier Instead of repeating and rewriting similar code again and again, you can place the code and use the function repeatedly Often used as event handlers in JavaScript

Function Declaration Just like variables, functions need to be declared or defined Function declaration usually put in head section The function declaration includes the function name, its parameters, and the statements that will execute Function declaration syntax: function functionname() { JavaScript statements go here }

Parameters and Functions Functions solve specialized problems or carry out specific tasks Often information relevant to the task is needed by the function This information made available to functions through the use of parameters

Parameters Parameters are special variables used with functions Examples of parameters: alert(“This is the parameter!”); Information inside ( ) is the parameter for alert method

Parameters and Functions A function may have zero or more parameters (called the parameter list) Each parameter name must be a legal variable name and must be unique in the parameter list The syntax for a function with parameters is: function functionname(parameter1, parameter2,…)

How to use a Function Using a function is referred to as function call The syntax for function call with no parameters: functionname(); A function call for function with parameters: functionname(parameter1, parameter2,…) The function call must include the exact number of parameters found in function declaration

Function Call and Event Handlers Functions are often used in conjunction with event handlers to respond to user events Using a function makes an event handler code looks cleaner and easier to understand

In the lab You will write a function that works with the onClick event handler for a button Your function will display an alert box and change the background color Create a new HTML document using 1 st Page 2000, enter the code on p exactly as you see it Click preview button to test out the code

Student Modifications Modify the code on p as follows: Change the colors used by the function Add a second button and a second function that use different colors and a different message

Adding a parameter Save your work from the previous exercise With this example you will write a function with a parameter Start a new html document, then enter the code on p exactly as written

Student modifications Modify the code on p as follows: Add another button for another famous quote, be sure to use the existing function, just change the value of the parameter Modify the function by adding a second parameter Use the second parameter in a second alert box to display the author of the quote

Lesson Summary Programs are organized and structured by breaking them into smaller pieces In JavaScript, these smaller pieces are called functions or methods A function is a set of statements that carries out a specific task You create own functions in JavaScript writing a function declaration in the head of your Web document

Lesson Summary (cont.) The function declaration includes the function name, its parameters, and the statements that will execute You write a function call to use the function The function call consists of the function name plus any required parameters Functions are often used with event handlers to organize and simplify a Web page’s response to a user event

Lesson 07 Topics Introduction to branching or conditional statements How to use comparison operators: ==, !=,, >= How to use if and if … else to evaluate conditions and make decisions

Branching or Conditional Statements Useful to be able to ask questions in a program, then take different actions depending on the answer Example: has user entered a valid credit card number? If yes, approve the sale, if no, reject the sale Statements that ask a question and execute different code depending on the answer are called branching or conditional statements

Branching or Conditional Statements (cont.) The term conditional statement implies that execution depends on a condition Conditional statements work in the following way: they ask a question, then execute certain code depending on the answer

Comparison Operators Conditional statements ask a question with the help of comparison operators Comparison operators compare information The result of the comparison is either true or false True or false results are known as boolean values

Comparison Operator Table OperatorMeaningComments ==equalTrue if the two operands are equal; false otherwise !=Not equalTrue if the two operands are not equal; false otherwise <Less thanTrue if the left operand is less than the right operand; false otherwise <=Less than or equal to True if the left operand is less than or equal to the right operand; false otherwise >Greater thanTrue if the left operand is greater than the right operand; false otherwise >=Greater than or equal to True if the left operand is greater than or equal to the right operand; false otherwise

The if Statement The if statement is an example of a conditional or branching statement The general syntax for the if statement: If (condition) { JavaScript statements go here }

The if…else Statement An if statement can also have an else clause that executes if the condition is false Syntax for if…else: if(condition) { statementgroup1 } else { statementgroup2 }

In the lab You will use comparison operators and the if and if…else statements Create a new HTML document using 1 st Page 2000 Enter the code on p. 7-9 exactly as you see it Click preview button to test out the code

Student Modifications Modify the code on p. 7-9 as follows: Add an else statement to the if statement that displays an alert box with a message that the number was less than or equal to 10 Change the code to prompt the user to enter two numbers instead of one Compare these two numbers and display an appropriate message depending on the result of your comparison

Second if example Save your work from the previous exercise Start a new document, enter the code from p exactly as you see it Preview your code

Student Modifications (cont.) Modify the code on p as follows: Most of the world uses the Centigrade scale for temperatures. Re-write the program to ask a user to enter a centigrade temperature, then display messages depending on Centigrade temperature Add additional if…else statements to test different levels of temperature

Guessing game You can use the if statement and comparison operators to implement a guessing game Save your work from the previous exercise Start a new document, then enter the code exactly as you see it on p. 7-14

Student modifications The simple version of the game just tells the player if their guess is right or wrong Add a hint that tells the player if their guess is too high or too low Add a “New Game” button that allows the player to play again

Lesson Summary How to use conditional or branching statements How to use comparison operators How to use the if and if … else statement to branch to different code blocks depending on the result of a comparison How to use the if statement and comparison operators to create a guessing game

Next class meeting In class exam covering HTML and JavaScript Final presentations during final exam time