CIS101Introduction to Computing

Week 12Spring 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 1st

Page 2000, enter the code on p. 6-10 exactly as you see it

Click preview button to test out the code

Student Modifications Modify the code on p. 6-11 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. 6-12 exactly as written

Student modifications Modify the code on p. 6-12 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

Operator Meaning Comments

== equal True if the two operands are equal; false otherwise

!= Not equal True if the two operands are not equal; false otherwise

< Less than True 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 than True 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 1st 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. 7-11 exactly as you see it

Preview your code

Student Modifications (cont.) Modify the code on p. 7-11 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