Introduction to JavaScript - PowerPoint PPT Presentation

1 / 149
About This Presentation
Title:

Introduction to JavaScript

Description:

... JavaScript, and many free scripts that you can use and adapt for your own pages. ... onMouseOut='document.bgColor='white'' Hello /a Introduction to JavaScript: ... – PowerPoint PPT presentation

Number of Views:338
Avg rating:3.0/5.0
Slides: 150
Provided by: Michael210
Category:

less

Transcript and Presenter's Notes

Title: Introduction to JavaScript


1
Introduction to JavaScript
  • What is JavaScript?
  • How does it work?
  • What can it do?
  • How do you use it?
  • Conditionals and Loops
  • Summary

2
Introduction to JavaScript
  • JavaScript is the programming language of the
    Web!
  • JavaScript can react and add life to your pages,
    it can be programmed to do what you want.
  • HTML is simply a 'markup language'. It just
    shows stuff.
  • In these JavaScript lessons you will learn how to
    write JavaScripts and insert them into your HTML
    documents, and how to make your pages more
    dynamic and interactive.

3
Introduction to JavaScript
  • JavaScript Examples
  • There are many interesting things that you can do
    with JavaScript, and many free scripts that you
    can use and adapt for your own pages.
  • Before getting started on this tutorial, go to
    http//javascript.internet.com and see some
    examples of how you can use JavaScript on your
    web pages!

4
Introduction to JavaScript
  • What is JavaScript?
  • JavaScript is a scripting language
  • A scripting language is a lightweight
    programming language (not a markup language,
    like HTML)
  • A JavaScript is lines of executable computer
    code
  • JavaScript can be inserted into an HTML page
  • JavaScript is an open scripting language that
    anyone can use without buying a license
  • JavaScript is supported by all major browsers
    like Netscape and Internet Explorer

5
Introduction to JavaScript
  • How Does it Work?
  • When a JavaScript is inserted into an HTML
    document, the Internet browser will read the HTML
    and interpret the JavaScript.
  • The JavaScript can be executed immediately or at
    a later event, like when someone clicks a button.

6
Introduction to JavaScript
  • What can JavaScript Do?
  • JavaScript gives HTML designers a programming
    tool
  • JavaScript can put dynamic text into an HTML page
  • JavaScript can react to events
  • JavaScript can read and write HTML elements
  • JavaScript can be used to validate data

7
Introduction to JavaScriptWhat can a JavaScript
Do?
  • JavaScript gives HTML designers a programming
    tool
  • HTML authors are normally not programmers, but
    JavaScript is a very light programming language
    with a very simple syntax!
  • Almost anyone can start putting small chunks of
    JavaScript code into their HTML documents.
  • These scripts can perform calculations, change
    your site based on the user's selections, and
    more!

8
Introduction to JavaScriptWhat can a JavaScript
Do?
  • JavaScript can put dynamic text into an HTML
    page
  • A JavaScript statement like this
  • document.write("" name "")
  • can write a variable name into the display of an
    HTML page, instead of this static HTML text
  • Bill Gates

9
Introduction to JavaScriptWhat can a JavaScript
Do?
  • JavaScript can react to events
  • A JavaScript can be set to execute when something
    happens, like when a page has finished loading or
    when a user clicks on an HTML element.
  • These are called 'eventHandlers'. There are many
    of them, and many are premade for you.

10
Introduction to JavaScriptWhat can a JavaScript
Do?
  • JavaScript can read and write HTML elements
  • A JavaScript can read an HTML element and change
    the content of an HTML element, like a text box,
    image source or label.
  • Have you ever seen an image change when the mouse
    moves over it? That's one example.

11
Introduction to JavaScript
  • How to Put a JavaScript Into an HTML Document
  • To insert a script in an HTML document, use the
    tag. Use the language attribute to
    define the scripting language.
  • The following slide shows an example

12
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • The next slides take you through the steps to
    write this file.

13
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • .
  • Start by writing the tags.
  • The tags must name the
    scripting language. These tags tell the browser
    that the language"JavaScript".
  • If the browser doesn't know the language that
    you're using, it may not be able to interpret it.

14
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • Next step add the comment tags. Why?
  • Some older browsers cant handle JavaScript.
    (Some people still use AOL 1.0). If you wrap
    the script with HTML tags, older browsers ignore
    the script and your web page doesn't break.

15
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • You may know that are HTML comment
    tags. Notice that the ending tag is not -- but
    // --.
  • // is one way to include comments in JavaScript!
    You must use JavaScript comments to comment out
    the HTML comment.
  • If confused, just be sure to put these comment
    marks in your code.

16
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • document.write(Hello World!) is the syntax to
    write on a web page (document). This writes
    Hello World!, and nothing else.
  • You'll learn more about document.write later,
    this is just a basic JavaScript example.

17
Introduction to JavaScriptPutting JavaScript
into an HTML Document
  • Activity 1
  • Try to create your first HTML file with
    JavaScript. Simply use the document.write as
    described in this presentation.
  • Save the file as js1.html, and test it.

18
Introduction to JavaScript
  • Where to Put the JavaScript
  • JavaScripts placed in the body of a page will be
    executed as soon as the page loads into the
    browser.
  • This is not always what we want. Sometimes we
    want to execute a script when a page loads, other
    times when a user triggers an event.
  • Where you place the JavaScript on a page is
    important regarding how soon it acts.

19
Introduction to JavaScriptWhere to Put the
JavaScript
  • Scripts in the head section
  • Scripts to be executed only when they are called
    go in the head section (between the and
    tags).
  • When you place a script in the head section, you
    will ensure that the script is loaded before
    anyone uses it, for faster performance. 
  • When you need it, it's ready for you in the
    section of your page!

20
Introduction to JavaScriptWhere to Put the
JavaScript
  • Scripts in the head section
  • You may recall in our Forms lesson, we called a
    JavaScript "checkUsername" using the form
    'action'.
  • Most likely this JavaScript was located in the
    of the web page, as it is a function that
    we call, it's not automatic.

21
Introduction to JavaScriptWhere to Put the
JavaScript
  • Scripts in the body section
  • Scripts to be executed immediately when the page
    loads go in the body section.
  • When you place a script in the body section it
    generates the content of the page.
  • You dont have to choose between putting scripts
    in the head or body section. Put as many as
    youd like in both or either one!

22
Introduction to JavaScriptWhere to Put the
JavaScript
  • Scripts in the body section
  • A very common JavaScript to be located in the
    body section of a web page for automatic loading
    is one that displays the date and time.
  • While it won't look very pretty, try putting this
    simple date and time JavaScript in the body of a
    web page (we'll explain it later)
  • document.write(new Date())

23
Introduction to JavaScriptWhere to Put the
JavaScript
  • External JavaScript Files
  • Sometimes you might want to run the same script
    on several pages, without writing the script on
    each and every page.
  • To simplify this you can write a script in an
    external file, and save it with a .js file
    extension.
  • This is done frequently when working in web
    development teams, where one person writes the
    JavaScript while another makes the web pages.

24
Introduction to JavaScriptWhere to Put the
JavaScript
  • External JavaScript Files, cont'd
  • First, write the following line in Notepad (yes,
    only the next line)
  • document.write("This script is in an external
    file.")
  • Save the file as bodywriter.js.
  • Note The external script cannot contain the
    tag.

25
Introduction to JavaScriptWhere to Put the
JavaScript
  • External JavaScript Files, cont'd
  • You also need to write the following HTML page in
    Notepad. Name it whatever you want, but be sure
    to save it in the same place as the
    "bodywriter.js" file.

26
Introduction to JavaScriptWhere to Put the
JavaScript
  • External JavaScript Files, cont'd
  • The src tag in your tag calls the
    external JavaScript. Because bodywriter.js is an
    external file, any web page on your site can call
    it!

27
Introduction to JavaScriptWhere to Put the
JavaScript
  • Summary
  • At this point, you should know that JavaScript
    adds more interactive and dynamic behaviors to
    your web pages.
  • In addition, you should know that it can go into
    one of three locations , , or an
    external file.

28
Introduction to JavaScriptWhere to Put the
JavaScript
  • Activity 2
  • Go to http//javascript.internet.com and take a
    look at all of the free JavaScripts offered.
  • Follow their instructions to use one of them
    successfully. In addition, save the JavaScript
    in an external file. Save your HTML file as
    borrowedjs.html, and save the external file as
    source.js.
  • This should give you an idea of what
    JavaScripting can do for you!

29
Introduction to JavaScript
  • JavaScript EventHandlers
  • JavaScript has some pre-made 'functions' called
    EventHandlers.
  • These are built-in shortcuts to make your page
    more dynamic. This section will discuss these
    popular tools, and review the more common ones.
  • You will then try implementing them yourself on a
    web page.

30
Introduction to JavaScriptJavaScript
EventHandlers
  • What is an "event"?
  • When the user does something on a web page like
    clicking the mouse, moving the mouse, leaving the
    page, etc., these are all events.
  • For just about every event, there is an
    eventHandler.
  • An eventHandler is usually associated with an
    object like a button, link, window, etc., and it
    reacts to events dealing with that object.

31
Introduction to JavaScriptJavaScript
EventHandlers
  • eventHandlers
  • As mentioned on the previous slide, an
    eventHandler is usually associated with an object
    like a button, link, window, etc., and it reacts
    to events dealing with that object.
  • You will usually recognize an eventHandler by the
    name. Most of them start with the word "on",
    then something more descriptive.
  • The first one you will see is called "onClick".

32
Introduction to JavaScriptJavaScript
EventHandlers
  • onClick
  • onClick executes JavaScript code when a Click
    event occurs that is, when an object on a form
    is clicked. (Keep in mind, a Click event is a
    combination of the MouseDown event and MouseUp
    event).
  • onClick can be used on following objects
  • Button, document, Checkbox, Link, Radio, Reset,
    Submit

33
Introduction to JavaScriptJavaScript
EventHandlers
  • onClick example
  • To use onClick, simply put it inside the tag of
    an appropriate HTML object, like this
  • confirm('Go to CNN.com?')"CNN
  • Copy this code into an HTML document to see what
    onClick does.

34
Introduction to JavaScriptJavaScript
EventHandlers
  • onMouseOver
  • onMouseOver is one of the most popular
    eventHandlers.
  • It executes JavaScript code when a MouseOver
    event occurs that is, once each time the mouse
    pointer moves over an object or area from outside
    that object or area.
  • This can be used for pictures, links, and layers.
    Usually, it calls a function when the mouse
    moves over a certain area.

35
Introduction to JavaScriptJavaScript
EventHandlers
  • onMouseOver example
  • Open a new HTML document, and paste the following
    lines of code into it. Save it as mouseover.html
    and test it!
  • Example one Background color change using
    onMouseOver.
  • He
    llo
  • Example two Alert box popup using onMouseOver
  • there!')"Hello

36
Introduction to JavaScriptJavaScript
EventHandlers
  • onMouseOut
  • onMouseOut is the opposite of onMouseOver when
    you move the mouse out of a certain area, this
    eventHandler is called.
  • For example, let's adjust Example One from the
    last page. Replace the first line of code with
    this, and save the file as mouseover2.html. Test
    it by putting your mouseover the links.
  • onMouseOut"document.bgColor'whi
    te'"Hello

37
Introduction to JavaScriptJavaScript
EventHandlers
  • Other EventHandlers
  • There are many, many other eventHandlers that
    handle closing windows, mouse movement, etc.
    There are even eventHandlers for when you leave
    their page!
  • Some other eventHandlers that you should
    consider onLoad, onSubmit, onResize.

38
Introduction to JavaScriptJavaScript
EventHandlers
  • Other EventHandlers
  • For an extensive list of JavaScript
    EventHandlers, go to Netscape, the creators of
    JavaScript, at
  • http//developer.netscape.com/docs/manuals/communi
    cator/jsref/evnt.htm

39
Introduction to JavaScriptJavaScript
EventHandlers
  • Activity 3
  • Demonstrate two eventHandlers. One popular use
    is switching a picture using onMouseover and
    onMouseout. Another popular use is starting a
    clock using onLoad.
  • Be sure to explain what the eventHandler is
    supposed to do on your web page. Name the page
    eventhandlers.html.

40
Introduction to JavaScript
  • JavaScript Variables
  • A variable is a "container" for information you
    want to store, just like in algebra. You can use
    these in your JavaScripts.
  • A variable's value can change during the script.
    You can refer to a variable by name to see its
    value or to change its value.
  • To really use JavaScript effectively, you have to
    understand how it uses variables in its code.

41
Introduction to JavaScriptJavaScript Variables
  • Declare a Variable
  • You can create a variable with the var statement
  • var count
  • The line above declares the variable count,
    creating it for use later on.
  • (Hint The var word is optional, but its a
    good habit to use it, so you know where it
    originates.)

42
Introduction to JavaScriptJavaScript Variables
  • Assign a Value to a Variable
  • You can assign a value to a variable once it is
    created
  • count 3
  • The line above assigns it a value equal to 3.

43
Introduction to JavaScriptJavaScript Variables
  • Declare a variable and assign a value to it
  • You can both declare a variable AND assign it a
    value in the same line, if you'd like
  • var count 3
  • The line above declares the variable 'count' and
    assigns it a value equal to 3.

44
Introduction to JavaScriptJavaScript Variables
  • Have the user assign a value to a variable
  • If you design an HTML page with a form, the user
    can input a value, and JavaScript can help you to
    retrieve it.
  • For example, assume you have a form that asks for
    the user to input their first name. You may want
    to store this value from the user into a
    variable.
  • How is this done?

45
Introduction to JavaScriptJavaScript Variables
  • Have the user assign a value to a variable,
    cont'd
  • Before retrieving the value from the user, some
    elements need to be known to the JavaScript
  • The form name, the field name, and the variable
    name in which the retrieved value will be stored.
  • Assume for now that the HTML form is "loginForm",
    the first name field is named "first", and the
    variable is called "username".

46
Introduction to JavaScriptJavaScript Variables
  • Have the user assign a value to a variable,
    cont'd
  • To retrieve the value from a form field, use this
    statement
  • document.form name.field name.value
  • In our case, we should use the names of our form
  • document.loginForm.first.value

47
Introduction to JavaScriptJavaScript Variables
  • Have the user assign a value to a variable,
    cont'd
  • To assign the value from a form field to a
    variable, we simply use the "assignment
    operator"
  • username document.loginForm.first.value
  • We can now use the name supplied by the user for
    our JavaScript.

48
Introduction to JavaScriptJavaScript Variables
  • Have the user assign a value to a variable,
    cont'd
  • username document.loginForm.first.value
  • A tip on reading the variable assignment
  • Read the variable assignment from right to left,
    and it may make more sense. For example
  • Take the "value" of the "first" field on the
    "loginForm" of the document, and assign it to the
    variable "username".

49
Introduction to JavaScriptJavaScript Variables
  • Using a variable to set the value of a field
  • To reverse our process from before, you can also
    use a variable and send its value to a form on a
    field.
  • Assume we have another text field on our form
    called "result". To send our variable "username"
    into that field, we just reverse the assigning
    code from our previous example
  • document.loginForm.result.value username

50
Introduction to JavaScriptJavaScript Variables
  • Using a variable to set the value of a field
  • Evaluate the file takeandshow.html. This file
    performs the actions just presented in this
    slide, using the onClick eventHandler.
  • You won't understand all of the code in the
    tags yet, but try to understand the way
    the page retrieves then sets the name of the user
    between the text fields.
  • The onClick will be discussed in more detail
    shortly.

51
Introduction to JavaScript
  • JavaScript Functions
  • This is not the last section of JavaScript, but
    this is the final section of JavaScript before
    you start writing your own scripts!
  • You will review what a 'function' is, and how to
    write a basic one.
  • Combined with your knowledge of where to put
    JavaScripts, you will soon write your own
    JavaScript from scratch, and most of what you
    have learned so far will now come together.

52
Introduction to JavaScriptJavaScript Functions
  • The most basic definition of a function is that
    it's a bunch of code does something.
  • More formally, a function is a set of statements.
    These statements combine to perform a certain
    task.
  • A good function is simple and reusable.

53
Introduction to JavaScriptJavaScript Functions
  • How to Define a Function
  • To create a function you define its name, any
    values ("arguments"), and some statements
  • function functionName(argument1,argument2,etc)
  • some statements
  • These parts will be addressed one at a time.

54
Introduction to JavaScriptJavaScript Functions
  • How to Name a Function
  • function functionName(argument1,argument2,etc)
  • some statements
  • The function name must start with a letter or
    underscore, should not contain spaces or other
    characters. Start the name with a small letter,
    and capitalize additional words.
  • Make the name reflect the job of the function.

55
Introduction to JavaScriptJavaScript Functions
  • How to Name a Function
  • Give the function a name that reflects its job.
  • Some examples of function names
  • myCalculator
  • newSchoolCalendar
  • addTwoNumbers
  • _thisFunctionWorks

56
Introduction to JavaScriptJavaScript Functions
  • Function Arguments
  • function functionName(argument1,argument2,etc)
  • some statements
  • Arguments are values you give to the function,
    and the function works with them. If your
    function added two numbers and gave you the
    answer, the arguments would be the two numbers to
    be added.

57
Introduction to JavaScriptJavaScript Functions
  • Function Arguments
  • Functions can take many arguments, or no
    arguments at all.
  • Just remember that arguments are simply pieces of
    information that you are giving to the function.
  • Arguments are sometimes called parameters, so
    don't worry if you ever see that word.

58
Introduction to JavaScriptJavaScript Functions
  • Function Statements
  • function functionName(argument1,argument2,etc)
  • some statements
  • Between the curly braces are the statements that
    do the actual work in the function. For example,
    these would be the lines that can add two
    numbers, or do some type of calculation before
    returning a value.
  • The name of the function should describe what the
    statements do.

59
Introduction to JavaScriptJavaScript Functions
  • Function Syntax
  • First of all, the word 'syntax'. This is really
    just a word that means the 'grammar and
    punctuation' of a computer language.
  • JavaScript has its own syntax, as do most
    languages. Many of them overlap though, so you
    usually learn other ones fast!

60
Introduction to JavaScriptJavaScript Functions
  • Function Syntax
  • function functionName(argument1,argument2,etc)
  • some programming code
  • blah blah blah
  • Functions always start with the word function,
    then the name, arguments in parentheses, and
    curly braces to contain all of the programming
    code.

61
Introduction to JavaScriptJavaScript Functions
  • Function Syntax
  • Sometimes you dont give any values for arguments
    to a function.
  • A function with no arguments must still include
    the parentheses
  • function functionName()
  • some programming code

62
Introduction to JavaScriptJavaScript Functions
  • Function Syntax
  • Each statement line should end with a semi-colon.
    While not required, it's good programming
    practice.
  • function functionName()
  • some programming code

63
Introduction to JavaScriptJavaScript Functions
  • How to call a function
  • You've just seen how to write a function. It
    usually goes in the of the web page, or an
    external document.
  • When you want to use a function, we say that we
    call the function.
  • A function just sits there until you call it.

64
Introduction to JavaScriptJavaScript Functions
  • How to call a function
  • You can call a function containing arguments like
    this
  • myfunction(argument1,argument2,etc)
  • Call one without arguments like this
  • myfunction()
  • Just place this call in the code where you need
    work done. You need to write the function name
    and argument list, that's all.

65
Introduction to JavaScriptJavaScript Functions
  • How to call a function
  • Things to be careful about
  • Make sure that you have the same number of
    arguments in the function as well as the call to
    the function.
  • JavaScript is case-sensitive, so make sure the
    capitalization is the same in the function and
    the call to the function.
  • The function name and the its list of arguments
    is called its 'signature'. Make sure the
    signatures match!

66
Introduction to JavaScriptJavaScript Functions
  • Activity 4
  • You previously saw a page that used JavaScript to
    take a name and then show it, a file called
    takeandshow.html.
  • You will be shown the code that makes up that
    file, and be ready to discuss it thoroughly.
    After the next lesson you will make your own new
    functions!

67
Introduction to JavaScript
  • JavaScript Operators
  • There are many operators in JavaScript for math
    and more. Youre already familiar with many of
    them.
  • For example, what do you think JavaScript uses
    for adding two numbers together? Right, a
    sign!
  • You will receive a list of operators, but we need
    to discuss some of the less familiar ones.

68
Introduction to JavaScriptJavaScript Operators
  • The basic math operators in JavaScript are
  • is "addition"
  • is "subtraction"
  • is "multiplication"
  • / is "division"

69
Introduction to JavaScriptJavaScript Operators
  • The following example creates two variables and
    multiplies them.
  • var first 4
  • var second 5
  • var answer first second
  • You can probably guess how to use the other
    operators!

70
Introduction to JavaScriptJavaScript Operators
  • Now, many people are confused by this next
    operator
  • "" is NOT the equal sign. JavaScript calls it
    the "assignment operator".
  • If you want to assign a value to something, use
    this operator. This assigns whatever is on the
    right of the operator into whatever is on the
    left of this operator.

71
Introduction to JavaScriptJavaScript Operators
  • Assignment Operator example
  • var first 7
  • var second 2
  • second first
  • What do you think 'second' holds after the code?
    If you guessed 7, you're right! The assignment
    operator assigns the value of 'first' to it, and
    the value of 'first' is 7!

72
Introduction to JavaScriptJavaScript Operators
  • You might be asking "How do I test if something
    equals something else?"
  • Use the equality operator " " , a double
    equal sign.
  • If you want to see if "a" equals "b", you write
    it like this
  • a b
  • You'll see more of this one later.

73
Introduction to JavaScriptJavaScript Operators
  • Finally, here are the 'increment' and 'decrement'
    operators
  • x means "add one to x"
  • x -- means "subtract one from x"
  • So, if you had
  • var x 5
  • x
  • x would equal 6 at the end of the code.

74
Introduction to JavaScriptJavaScript Operators
  • This discussion has certainly not been a complete
    coverage of the JavaScript operators, just a
    start.
  • The handout jsOperator.doc lists almost all of
    the JavaScript Operators.
  • It would be good to get familiar with this sheet,
    as you will use these operators very often in
    JavaScript.

75
Introduction to JavaScriptJavaScript Operators
  • Activity 5
  • Open the "borrowedjs.html" file that you used to
    'borrow' some JavaScript from http//javascript.in
    ternet.com.
  • Identify all of the variables and operators used,
    and write an explanation of how they are used.

76
Introduction to JavaScriptJavaScript Functions
  • Putting it all together.
  • You will now see a form that represents a basic
    calculator. It will take two numbers, perform a
    math operation when a button is clicked, and then
    display the result in a text field.
  • The next slides review the basiccalc.html file, a
    basic calculator.Note the process and flow of
    the HTML and JavaScript code, so you can make
    additions and changes to it.

77
Introduction to JavaScriptJavaScript Functions
  • First, The basic HTML form for the calculator

  • First number
  • size"5" maxlength"5"

  • Second number
  • size"5" maxlength"5"

  • value"Multiply" onClick"multiply()()"

  • Answer
  • maxlength"15"

78
Introduction to JavaScriptJavaScript Functions
  • Notice the onClick eventHandler associated with
    the button.
  • value"Multiply" onClick"multiply()"
  • onClick calls a function named "multiply()".
    This will occur when the button is clicked, since
    onClick was put in the button code.
  • What does "multiply()" do? What does the
    function look like, and where is it?

79
Introduction to JavaScriptJavaScript Functions
  • The multiply() function is in the HEAD of the web
    page.
  • The code for the page is below. See how it takes
    two values, multiplies them, and sends them back
    to the form's "answer" element.
  • function multiply()
  • var a document.numberForm.first.value
  • var b document.numberForm.second.value
  • document.numberForm.answer.value ab

80
Introduction to JavaScriptJavaScript Functions
  • Activity 6
  • You have improved your knowledge of HTML forms
    and familiarity with this basiccalc.html
    calculator.
  • Using this example, create your own, more
    sophisticated calculator. Make a calculator that
    uses the same fields, but has separate buttons
    for division and subtraction. For a greater
    challenge, create a calculator that does multiple
    mathematical calculations with the click of one
    button!

81
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • In previous examples, like the basiccalc.html,
    you have seen a function refer to field on a
    form. For example, you saw
  • function multiply()
  • var a document.numberForm.first.value
  • This function refers directly to a SPECIFIC field
    of a SPECIFIC web page. This type of reference
    should be avoided when writing functions, as you
    want to make them usable on any page that wants
    to.

82
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • Instead of referring directly to a web page and
    respective fields, make functions as abstract as
    possible. The following is a multiply function
    example
  • function multiply(a, b)
  • return ab

83
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • Notice that the function has two arguments in the
    signature. The HTML sends two arguments, any
    arguments, and the function receives them.
  • function multiply(a, b)
  • return ab

84
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • The function, after receiving the arguments,
    manipulates them, and sends back the result via
    the return keyword
  • function multiply(a, b)
  • return ab

85
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • If the function is designed abstractly enough to
    receive any two values from any form, then the
    form must be redesigned to send the values to the
    function.
  • The change in the HTML page occurs in the onClick
    for the form
  • onClick"numberForm.answer.valuemultiply(numberFo
    rm.first.value, numberForm.second.value
    )"

86
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • onClick"numberForm.answer.valuemultiply(numberFo
    rm.first.value, numberForm.second.value)
  • Instead of just calling the function, onClick
    calls it and sends values in the call (these will
    be the "a" and "b" that the function is
    expecting).
  • (Using document is optional, as this refers to
    fields in the same page as the onClick.
    numberForm.first.value is adequate to send a
    value.)

87
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • onClick"numberForm.answer.value
    multiply(numberForm.first.value,
    numberForm.second.value)
  • Because our new function is returning a value, we
    need to assign that value to something.
  • In this case, we assign our returning value to
    the value of the answer field in our form.

88
Introduction to JavaScriptJavaScript Functions
  • Separating Functions from Pages - Return Values
  • function multiply(a, b)
  • return ab
  • Making your functions as abstract as possible is
    the key to re-using your code over and over.
  • For example, the multiply(a, b) function can be
    used in an external style sheet for many web
    pages.

89
Introduction to JavaScriptJavaScript Functions
  • Activity 7
  • Create a function like the multiply(a, b)
    function that takes a certain number of
    variables, performs an action on the received
    values, and returns a value.
  • Save this function in an external JavaScript
    file, and attach it to a file that calls it, and
    passes it two values for manipulation.
  • Save these files as abstract.js and abstract.html.

90
Introduction to JavaScript
  • JavaScript Conditional Statements
  • Once you have mastered the basic syntax of a
    JavaScript function, it is time to move into some
    of the more common conditional statement
    scripts and syntax.
  • What are conditional statements? These are
    functions that act based on whether or not a
    condition is true or false.
  • There are 3 major conditional statements, and
    they will now be covered one at a time.

91
Introduction to JavaScriptJavaScript
Conditional Statements
  • In JavaScript we have three conditional
    statements
  • if statement - use this statement if you want to
    execute a set of code only if a condition is true
  • if...else statement - use this statement if you
    want to choose one of two sets of lines to
    execute
  • switch statement - use this statement if you want
    to select one of many sets of lines to execute

92
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement
  • This statement is commonly used if the choice is
    do this, or do nothing differently.
  • That is, you are just checking something in a
    very simple way.
  • A common example might be if the name is blank,
    tell the user to fill it in.

93
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement syntax
  • if (condition)
  • do this if the condition is true
  • Notice the indented text between curly braces.
    This is a very common practice for programmers,
    to be able to identify blocks of code quickly.

94
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - Check for blank name
  • The following example will check to see if a
    field called "userName" has been filled in, and
    pops up a warning box if it isn't filled in.
  • function checkUserName()
  • if(document.loginForm.userName.value"")
  • alert("Please fill in your name.")

95
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - Check for blank name
  • How would this 'checkUserName' function fit in
    with a web page?
  • A while back you made a simple login form, asking
    for a user name and password.
  • Ignoring the password field, the code for the
    form would look something like the next slide

96
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - Check for blank name
  • User Name name"userNameField"
  • value"Click to login"
    onClick"checkUserName()"
  • Notice the onClick"checkUserName()".

97
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - Check for blank name
  • value"Click to login"
    onClick"checkUserName()"
  • onClick is another 'eventHandler'. You can put
    this on any button. When you click on the
    button, the onClick will call its function.
  • In this case, onClick calls the function
    checkUserName(), which is located in the head of
    the document (next slide)

98
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - Check for blank name
  • Login Form
  • function checkUserName()
  • if(document.loginForm.userNameField.value
    "")
  • alert("Please fill in your name.")
  • This says "if the name field is blank, pop up a
    window saying 'Please fill in your name.'"

99
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - alert window
  • Just a side note the 'alert' window is another
    ready-made JavaScript function. The syntax is
    simple
  • Write the word 'alert', put whatever words you
    want on the box inside parentheses and quotes.
    For example, a box that says "Hi there" would be
  • alert("Hi
    there")

100
Introduction to JavaScriptJavaScript
Conditional Statements
  • if statement example - short activity
  • Try adding the previous pieces of code together
    in one file. Call this file "nameCheck.html".
  • Make sure you test that a window pops up IF the
    name field is blank, but it doesn't pop up if the
    name field has something in it.

101
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement
  • The 'if' statement performs one action if
    something was true.
  • If we want one action taken if the condition is
    true, and a different action if the condition is
    false, we can use the if...else statement.
  • For example, if the name field is blank tell them
    to enter a name, or else say Welcome!!! if it's
    not blank.

102
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement syntax
  • if (condition)
  • code to be executed if condition is true
  • else
  • code to be executed if condition is false
  • This is just like the 'if' code, except we added
    another chunk!

103
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement example
  • This is the original 'if' from the nameCheck.html
    file. It says 'if the name is blank'.
  • function checkUserName()
  • if(document.loginForm.userNameField.value
    "")
  • alert("Please fill in your name.")
  • All we will do is add an 'else' condition.

104
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement example
  • function checkUserName()
  • if(document.loginForm.userNameField.value
    "")
  • alert("Please fill in your name.")
  • else
  • alert("Welcome!!!")
  • Now we options for both blank and non-blank
    names!

105
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement syntax notes
  • function checkUserName()
  • if(document.loginForm.userNameField.value
    "")
  • alert("Please fill in your name.")
  • else
  • alert("Welcome!!!")
  • Note that there are 3 sets of curly braces one
    for the function, one for the 'if' condition, and
    one for the 'else' condition. This helps to
    group statements together.

106
Introduction to JavaScriptJavaScript
Conditional Statements
  • if...else statement syntax notes
  • function checkUserName()
  • if(document.loginForm.userNameField.value
    "")
  • alert("Please fill in your name.")
  • else
  • alert("Welcome!!!")
  • Also notice that one 'alert' line has a
    semi-colon at the end of the line, while the
    other doesn't. While this is optional, it is
    highly recommended that you use them after each
    statement.

107
Introduction to JavaScriptJavaScript
Conditional Statements
  • Activity 8
  • if...else statement activity
  • Try editing your script in your 'namecheck.html'
    file to use an 'else' clause.
  • Instead of
  • alert("Welcome!!!")
  • try the following line and explain what it does
  • alert("Welcome " document.loginForm.userNa
    meField.value "!!")
  • Save this file as 'namecheck2.html'.

108
Introduction to JavaScriptJavaScript
Conditional Statements
  • The last conditional statement to cover is the
    switch statement.
  • Use this statement if you want to select one of
    many sets of lines to execute.
  • For example, if you offer the visitor a choice of
    item A, B, C, or D, that doesnt work well with
    if, else, but it does with a 'switch'.
  • Keep this statement in mind if you have a list
    where the user chooses only one. The following
    slide is an example of a basic switch statement

109
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • switch (expression)
  • case label1
  • code to be executed if expression label1
  • break
  • case label2
  • code to be executed if expression label2
  • break
  • default
  • code to be executed if expression is different
    from both label1 and label2

110
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • switch (expression)
  • Begin with the word switch.
  • Give it a value or expression to evaluate, like a
    variable.
  • Be sure to surround all of the switch statement
    with curly braces.

111
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • switch (expression)
  • case label1
  • .
  • The next line begins with the word case. Case is
    a keyword, and it lists one case to compare to
    the expression.
  • In this scenario, we are looking to see if label1
    is equal to expression.

112
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • case label1
  • code to be executed if expression label1
  • break
  • If label1 does equal expression, then the code
    for case label1 is executed.
  • After the code is executed, the break keyword
    jumps to the end of the switch, skipping the
    other cases.

113
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • case label2
  • code to be executed if expression label2
  • break
  • If label1 does NOT equal expression, then case
    label2 is evaluated to see if label2 equals
    expression.
  • If label2 equals expression, code in the label2
    area is executed.
  • After the code is executed, the break keyword
    jumps to the end of the switch, skipping the
    other cases.

114
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • The switch statement runs through every case
    until it finds a match between the expression and
    the label.
  • It will read all of the cases if the break
    keyword is not used, so make sure to use it in
    every case.
  • Finally, there is a default as the last case, in
    the situation that no label matched the
    expression.

115
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (for two items)
  • You can create a switch statement for as many
    cases as you'd like.
  • The following slide has an HTML form that asks
    whether you should get an A or a B in the class.
  • The slide following the HTML is the JavaScript
    switch statement that evaluates and responds to
    your input.

116
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (Grade Choice HTML
    example)
  • Enter the grade that you deserve for this
    class
  • Please use capital letters, and use only A or
    B.
  • maxlength"1"
  • value"Submit Grade" onClick"checkGrade()"

117
Introduction to JavaScriptJavaScript
Conditional Statements
  • Switch statement syntax (Grade Choice JavaScript
    example)
  • function checkGrade()
  • var yourGrade document.gradeForm.grade.value
  • switch(yourGrade)
  • case "A"
  • alert("You certainly deserve it.")
  • break
  • case "B"
  • alert("You deserve more.")
  • break
  • default
  • alert("You did not follow instructions.")

118
Introduction to JavaScriptJavaScript
Conditional Statements
  • Activity 9
  • Your first activity is to take the JavaScript
    function and HTML form code supplied, and create
    one file called checkGrade.html.
  • Since the code supplied only responds to A or B
    grades, create unique responses to other grades
    entered by the user.
  • For an advanced challenge, try to allow the users
    to enter capitals or small letters! (You'll need
    some extra online help for that.)

119
Introduction to JavaScript
  • JavaScript Looping Statements
  • Looping? Whats that, and what does it have to
    do with this?
  • "Loops" are very popular methods in programming
    that allow you to perform the same operation over
    and over again, for a specified number of times.
  • There are three main loops to introduce for,
    while, and do while.

120
Introduction to JavaScriptJavaScript Looping
Statements
  • In JavaScript we have the following looping
    statements
  • while - loops through a block of code AS LONG AS
    A CONDITION IS TRUE
  • do...while - loops through a block of code AT
    LEAST ONCE, and then repeats the loop as long as
    a condition is true
  • for - run statements a SPECIFIED NUMBER of times

121
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop - loops through a block of code as
    long as a condition is true
  • Heres an example of when to use the "while"
    loop
  • Imagine you have a list of numbers that you want
    to print, but you dont know how many there are.
  • You think While there are still numbers in the
    list, print the next number.

122
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop syntax
  • while (condition)
  • code to be executed
  • This block begins with the word while, has a
    test in parentheses, and has curly braces holding
    the statements to perform actions.
  • The next slide has an example.

123
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop example
  • var maximum 10
  • var counter 0
  • while (counter
  • document.write("The count is " counter)
  • document.write("
    ")
  • counter

124
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop
  • var maximum 10
  • var counter 0
  • .
  • The first two lines in the code are variables.
    Maximum is what the counter might reach in the
    loop, counter is just that, a counter for the
    loop.
  • As a developer, you might only get the variable
    maximum, and not know it's value. (Pretend it's
    not there, but use it!)

125
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop
  • while (counter
  • This code can be read as "while the counter
    variable is less than or equal to the maximum
    variable, do the next steps".

126
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop
  • document.write("The count is " counter)
  • document.write("
    ")
  • These next two lines write on the page. It will
    write "The count is " followed by the value of
    counter, then a line break.

127
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop
  • counter
  • Finally, the counter variable is incremented and
    the statements in the while loop end.
  • This sends the loop back up to the while test to
    see if counter is still less than or equal to
    maximum. If it is, then repeat the statements.
    If not, go to the first line of code after the
    while loop.

128
Introduction to JavaScriptJavaScript Looping
Statements
  • "while" loop activity
  • Take the 'while' loop code discussed in the
    previous slides, and put it into the body of a
    web page.
  • Try changing the values of counter and maximum to
    see the various results you might get.
  • Save your file as whilelooper.html.

129
Introduction to JavaScriptJavaScript Looping
Statements
  • do...while
  • A "dowhile" loop is very similar to a "while"
    loop.
  • The only difference is that the "dowhile" loops
    through a block of code AT LEAST ONCE before
    testing a condition, and then repeats the loop as
    long as a condition is true
  • When reading the code, this will look like the
    while loop, but upside-down.

130
Introduction to JavaScriptJavaScript Looping
Statements
  • dowhile syntax
  • do
  • code to be executed
  • while (condition)
  • Begin with the word do, use curly braces to
    contain the statements, and end with a while
    condition to test the value.

131
Introduction to JavaScriptJavaScript Looping
Statements
  • dowhile example - What will this example write?
  • i 0
  • do
  • document.write("The number is " i)
  • document.write("
    ")
  • i
  • while (i
  • Try it in a page!

132
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" loop
  • If you would like to dictate the exact number of
    loops, then the for loop is for you!
  • The for loop and while loop are among the
    most frequently used statements in programming,
    as they can help you to do numerous jobs in a
    very short time.

133
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" syntax
  • for (initialization condition increment)
  • code to be executed
  • Start this loop off with the keyword for, and
    surround the code statements with curly braces.

134
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" syntax
  • for (initialization condition increment)
  • code to be executed
  • initialization this is the initial value,
    usually a counter. The previous loops used i0
    to start with a value, and that same expression
    could be used here.

135
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" syntax
  • for (initialization condition increment)
  • code to be executed
  • condition this is very similar to what the
    while loop uses to test.
  • We could used ivariable each loop.

136
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" syntax
  • for (initialization condition increment)
  • code to be executed
  • increment increment means to add a value.
  • In the while examples, you saw counter as the
    incrementer, which adds 1 to the value of
    counter. You can add more than one each time if
    you'd like!

137
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" syntax
  • for (initialization condition increment)
  • code to be executed
  • Lastly, be sure to separate the 3 arguments in
    the for loop with semi-colons. These are
    necessary for your code to work.

138
Introduction to JavaScriptJavaScript Looping
Statements
  • "for" loop example
  • for (i 0 i
  • document.write("The number is " i)
  • document.write("
    ")
  • This example will perform a for loop. Try it out!

139
Introduction to JavaScriptJavaScript Looping
Statements
  • Activity 10
  • At this point, make a page with all 3 types of
    loops demonstrated.
  • Your page should teach the reader the differences
    between the 3 loops, and demonstrate the results.
  • Call this page "triplelooper.html".

140
Introduction to JavaScript
  • JavaScript Objects
  • This is the last lesson on JavaScript.
  • Besides all of the HTML forms and the JavaScript
    statements, there are some built-in objects that
    can do other, special things with information.
    These special objects are called Objects.
  • These objects will be covered briefly, with an
    example and a source for further instruction.

141
Introduction to JavaScriptJavaScript Objects
  • Objects
  • The main objects to be covered here are
  • String
  • Array
  • Math
  • Window
  • Date
  • Browser

142
Introduction to JavaScriptJavaScript Objects
  • String Object
  • A 'string' is a set of characters, like a word or
    sentence. The String object is used to work with
    text. It has certain built-in properties and
    methods.
  • One popular method is 'indexOf()'. This can tell
    the starting location of a letter or word inside
    of a string. For example, to test if the _at_
    symbol is in an email address, use
  • var pos email.indexOf("_at_"). This returns the
    position of the _at_.

143
Introduction to JavaScriptJavaScript Objects
  • Math Object
  • The Math object performs some of the more
    complicated math work that the normal operators
    cannot do.
  • For example, it can do 7 to the 3rd power
  • var answer Math.pow(7,3)
  • Or it can do trigonometry, finding the cosine of
    45
  • var answer Math.cos(45).

144
Introduction to JavaScriptJavaScript Objects
  • Browser Object
  • It's strange, but the Browser object uses the
    name navigator.
  • If you would like to tell what kind of browser
    the visitor is using, it's possible with this
    object!
  • Try this in your code
  • document.write("You are browsing this site with
    " navigator.appName)

145
Introduction to JavaScriptJavaScript Objects
  • Date Object
  • The Date object can deliver a lot of information
    regarding the day, date, time, etc.
  • First, create a variable that holds the date like
    this
  • var today new Date()
  • Then, do things like print out the date
  • document.write(today)

146
Introduction to JavaScriptJavaScript Objects
  • JavaScript Object Information
  • For more examples of JavaScript Objects and their
    properties and methods, go to
  • http//www.w3schools.com/js/default.asp and look
    under References.
  • or
  • h
Write a Comment
User Comments (0)
About PowerShow.com