Introduction to JavaScript - CCBC Faculty Web

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 11 months ago)

363 views

Functions



Objectives


Review


Functions


What do we already know about functions?


Coding Own Functions


External js files


Note about Variable Scope


Lab Challenge
-


Lotto Simulator

Review


What’s the difference between a while
loop and a do…while loop?


Which loop would you use if you knew
how many times the loop should run?


What is cool about the for…in loop?


What is the result of the following …

for(i=1;i<=5;i++) {


document.write(i);

}

Functions


Everything we’ve done to date has
been scripted to run when the page
loads


We can write functions that run when
called


Encapsulate a block of code that
performs a task


More common way to use JavaScript

What do we already know
about functions?


Think about…


isNaN();


parseInt();


prompt();


How do they work?


Do they take parameters (data that is
passed to them)?


What if we can make our own?

Using Built
-
in JavaScript
Functions

FunctionsDemo.html

Coding Own Functions


Should be identified in the head of the
document (or external file


will cover later)


Parameters are optional


Name your function descriptively


getAge()


calcDrinkingAge();



function descriptiveFunctionName(parameters) {


//statements

}

Drinking Example, again…

FunctionExample.html

Coding Own Functions


Function definition


Lines that make up a function


Syntax

function
nameOfFunction(
parameters
) {


statements
;

}


Parameter


Variable that is used within a function


Placed in parentheses following a function
name

Calling Functions


To execute
a

function, you must invoke, or
call
, it


Function call


Code that calls a function


Consists of function name followed by parentheses


Contains any variables or values to be assigned to
the function parameters


Arguments

or
actual parameters


Variables or values that you place in the parentheses
of the function call statement

Calling Functions
(continued)


Passing arguments


Sending arguments to the parameters of a called
function


Always put functions within the document head


And place calls to a function within the body section


If your program attempts to call a function before it has
been created, you will receive an error


A JavaScript program is composed of all the
<script>

sections within a document

Calling Functions
(continued)


return

statement


Returns a value to the statement that called
the function


Example

function averageNumbers(a, b, c) {


var sum_of_numbers = a + b + c;


var result = sum_of_numbers / 3;


return result;

}


Note about Variable Scope


Global


Declared on the page (outside a function)


Available to every script on the page


Use at a minimum


Local


Declared in a function


Only available to the function


Can be passed


“die” once the function stops running

Understanding Events


Event


Specific circumstance that is monitored by
JavaScript


And that your script can respond to in some way


You can use JavaScript events to allow users
to interact with your Web pages


Most common events are user actions

Understanding Events
(continued)

Working with Elements and
Events


Events are associated with XHTML elements


Events that are available to an element vary


Event handler


Code that executes in response to a specific event


Included as an attribute of the element that initiates the
event


Syntax

<
element event_handler
="
JavaScript code
">


Event handler names are the same as the name of the
event itself, plus a prefix of “on”

Working with Elements and
Events (continued)

Working with Elements and
Events (continued)


Example

<input type="button"


onclick="window.alert('You clicked a
button!')">


window.alert()

method


Displays a pop
-
up dialog box with an OK
button


You can include multiple JavaScript
statements in an event handler


As long as semicolons separate the
statements

Working with Elements and
Events (continued)

Referencing Web Page Elements


Reference any element on a Web page


By appending the element’s name to the name of
any elements in which it is nested


Starting with the
Document

object


Specific properties of an element can then be
appended to the element name


Example: calculator program


Use push buttons and
onclick

event handlers


Use a variable named
inputString

to contain the
operands and operators of a calculation


Calculation is performed using the
eval()

function

Referencing Web Page
Elements (continued)

Final part of the lab….


Use a function to loop through your
array and write() to the screen.


Post to the web server, along with the
other examples we’ve done this
evening.