Javascript C H A P T E R 1... 1 5/28/2016
Javascript
1
C H A P T E R 1 9 A N D 2 0
4/12/2020
Javascript (Chapter 19)
2
It is a client side scripting language
It is a dynamic programming language
It is loosely typed
Javascript adds interactivity to a web page
You can add behaviors to a web page using javascript: We did that in displaying hangman
JS is case sensitive
We will study some foundational concepts in Javascript: variables, assignment statement, if..else statement, functions
We will study arrays and for loop in the next lectures
4/12/2020
Programming Concepts
This chapter introduces the following programming concepts:
Names, values, and variables
Declarations
Data types, numbers, string literals, and Booleans
Assignment
Expressions
Conditionals
Variables Are Names in a Program
In programming terminology, the names are called variables
Variables mean that values vary
The most commonly used programming language operation is the command to change the value of a variable:
Called assignment
Variable Declaration Statement
var area, radius;
This command declares that two identifiers (area, radius) will be used as variables
Initializing a Declaration
Sometimes there is an initial value for identifiers
JavaScript allows setting the initial value as part of the declaration
This is called initializing the variable
Declaring variables with initial values is written as:
var taxRate = .088; var balanceDue = 0;
The Assignment Statement
The assignment statement is terminated by a semicolon
JavaScript’s <assignment symbol> is the equal sign (=)
Arithmetic Operators
Operators like + and * are called binary operators
They on two values
The values are called operands
+ - * /
Arithmetic Operators
Another useful operator is mod
The modulus (mod) operation ( % ) divides two integers and returns the remainder
The result of a % b for integers a and b is the remainder of the division a/b
Examples:
4%2 is 0 because 2 evenly divides 4
5%2 is 1 because 2 into 5 leaves a remainder of 1
Conditional Statements
A conditional statement or a conditional makes testing numbers and strings simple
The conditional has the form: if ( <Boolean expression> )
<then-statement>;
The <Boolean expression> is an expression evaluating to true or false
The <then-statement> is any JavaScript statement
if Statements and Their Flow of Control
if (waterTemp < 32) waterState = "Frozen";
The <Boolean expression> is called a predicate
It is evaluated, resulting in a true or false outcome
If the outcome is true , the <then-statement> is performed
If the outcome is false , the <then-statement> is skipped
if Statements and Their Flow of Control
if (waterTemp < 32) waterState = "Frozen";
Writing the <then-statement> indented on the following line is common practice
Programmers write the <then-statement> indented on the following line to set it off
The indent emphasizes its conditional nature
if/else Statements
The if/else statement contain statements that will be executed when the condition’s outcome is false if (<Boolean expression>)
<then-statement>; else
<else-statement>;
if/else Statements
The <Boolean expression> is evaluated first
If the <Boolean expression>’s outcome is true :
The <then-statement> is executed
The <else-statement> is skipped
If the <Boolean expression>’s outcome is false :
The <then-statement> is skipped
The <else-statement> is executed
Nested if/else Statements
Both the <then-statement> and the <else-statement> can contain an i f/els e
The rule in JavaScript and most other programming languages is that the else associates with the (immediately) preceding if
This can be confusing to read
The best policy is to enclose the <then-statement> or <elsestatement> in compound curly braces whenever they contain an if/else
Functions
17
4/12/2020
Learning Objectives
Apply JavaScript rules for functions, declarations, return values, function calls, scope of reference, and local/global variable reference
Write JavaScript functions with the proper structure
Build a GUI that contains functions
Explain how computers generate random numbers
Anatomy of a Function
Functions are packages for algorithms
They have three parts:
1.
2.
3.
Name
Parameters
Definition
These three arts form the function declaration
name is the identifier for the function
It is common to use it to describe what the function does
Try to pick a name that is meaningful
Pick a Name
function <name>
{
( <parameter list> )
< statement list>
}
Pick a Name
In JavaScript function names follow the rules for identifiers:
They begin with a letter, use any mix of letters, numbers, and underscores (_), avoid reserved words function <name>
}
( <parameter list> ) {
< statement list>
Programming languages have a standard form for writing function declarations
Pick a Name
Look at the punctuation:
Parentheses always follow a function name function <name>
}
( <parameter list> ) {
< statement list>
Curly braces should be positioned should be placed where they are obvious
Programmers place them as shown so that everyone knows where to find them
Parameters
The parameters are the values that the function will compute on
They are the input to the function
In order for the statements of the algorithm to refer to the input values, the inputs are given names
The <parameter list> is simply a list of names for the inputs separated by commas
Parameters
Parameter names follow the usual rules for identifiers in all programming languages
When writing our algorithm statements, the parameters are like normal variables
Unlike normal variables, parameters begin with a defined value and they don’t have to be declared
Function Definition
The function definition is the algorithm written in a programming language.
A function definition follows the language’s general rules for program statements
In the function definition there must be a way to say what the result is
JavaScript uses the statement return <expression>
Function Definition
How do you get an answer from the function?
It must be called
Calling a function is asking the computer to run or execute the statements of the function to produce the answers
Simply write the function’s name and put the input values in parentheses after it
Function Definition
To test the function, a little Web page needs to be created to host the
JavaScript
The Web page:
Begins with the standard HTML
Gives the definition of the function (aka declaring the function)
Computes the result using an alert( ) call
Declaration Versus Call
A function’s declaration is different from its call
Functions are declared only once
It is unnecessary to tell the computer more than once how the function works
For built-in functions we don’t even have to do that much
Some programmer declared alert( ) while writing the JavaScript interpreter
Declaration Versus Call
Functions are typically called many times
The answers they give are needed many times
One declaration, many calls
Forms and Functions
Let’s create a Web page for testing our Java Script
Use forms to test the script