CIS101%20Introduction%20to%20Computing - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

CIS101%20Introduction%20to%20Computing

Description:

Internet JavaScript Libraries contain thousands code examples you can copy and ... Upload the document and any required files (i.e. images) to your Web space ... – PowerPoint PPT presentation

Number of Views:21
Avg rating:3.0/5.0
Slides: 37
Provided by: cathy2
Learn more at: http://csis.pace.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: CIS101%20Introduction%20to%20Computing


1
CIS101 Introduction to Computing
  • Week 11

2
Agenda
  • Your questions
  • Copy and Paste Assignment
  • JavaScript Functions and Selection
  • Lesson 06, 07
  • This week online
  • Next class

3
JavaScript Homework
  • Internet JavaScript Libraries contain thousands
    code examples you can copy and paste into your
    Web documents
  • This assignment shows you how to find JavaScript
    examples and use them in a page yourself
  • See Assignments, week 11

4
Homework cont.
  • Find an interesting JavaScript example
  • Copy and paste it into a Web documents
  • Upload the document and any required files (i.e.
    images) to your Web space
  • You will demo your example in class next week

5
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

6
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

7
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

8
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

9
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

10
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

11
Parameters
  • Parameters are special variables used with
    functions
  • Examples of parameters alert(This is the
    parameter!) Information inside ( ) is the
    parameter for alert method

12
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,)

13
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

14
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

15
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

16
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

17
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

18
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

19
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

20
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 pages response to a
    user event

21
Lesson 07 Topics
  • Introduction to branching or conditional
    statements
  • How to use comparison operators , !, lt lt,
    gt, gt
  • How to use if and if else to evaluate
    conditions and make decisions

22
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

23
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

24
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

25
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
lt Less than True if the left operand is less than the right operand false otherwise
lt Less than or equal to True if the left operand is less than or equal to the right operand false otherwise
gt Greater than True if the left operand is greater than the right operand false otherwise
gt Greater than or equal to True if the left operand is greater than or equal to the right operand false otherwise
26
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

27
The ifelse Statement
  • An if statement can also have an else clause that
    executes if the condition is false
  • Syntax for ifelse
  • if(condition)
  • statementgroup1
  • else
  • statementgroup2

28
In the lab
  • You will use comparison operators and the if and
    ifelse 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

29
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

30
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

31
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 ifelse statements to test
    different levels of temperature

32
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

33
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

34
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

35
This week online
  • Readings
  • Concepts, chapter 6, Output
  • JavaScript 101 Lesson 06, Lesson 07
  • This weeks quiz
  • Concepts, chapter 6, Output

36
Next class meeting
  • Bring your JavaScript book to class
  • Upload this weeks homework to your Web site
About PowerShow.com