Date post: | 22-Dec-2015 |
Category: |
Documents |
View: | 216 times |
Download: | 0 times |
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
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