1. Javascript
Chapter 19 and 20
5/3/2019

2. Javascript (Chapter 19) 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
5/3/2019

3. Programming Concepts
This chapter introduces the following programming concepts:
Names, values, and variables
Declarations
Data types, numbers, string literals, and Booleans
Assignment
Expressions
Conditionals

4. 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

5. Variable Declaration Statement
var area, radius;
This command declares that two identifiers (area, radius) will be used as variables

6. 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;

7. The Assignment Statement
The assignment statement is terminated by a semicolon
JavaScript’s <assignment symbol> is the equal sign (=)

8. Arithmetic Operators
Operators like + and * are called binary operators
They on two values
The values are called operands
+ - * /

9. 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

10. 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

11. 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

12. 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

13. if/else Statements if (<Boolean expression>)
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>;

14. 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

15. Nested if/else Statements
Both the <then-statement> and the <else-statement> can contain an if/else
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 <else-statement> in compound curly braces whenever they contain an if/else

17. Functions
5/3/2019

18. 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

19. Anatomy of a Function Functions are packages for algorithms
They have three parts:
Name
Parameters
Definition
These three arts form the function declaration

20. Pick a Name 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
function <name> ( <parameter list> ) { < statement list> }

21. 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
Programming languages have a standard form for writing function declarations
function <name> ( <parameter list> ) { < statement list> }

22. Pick a Name Look at the punctuation:
Parentheses always follow a function name
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
function <name> ( <parameter list> ) { < statement list> }

23. 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

24. 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

25. 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>

26. 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

27. 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

28. 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

29. Declaration Versus Call
Functions are typically called many times
The answers they give are needed many times
One declaration, many calls

30. Forms and Functions
Let’s create a Web page for testing our Java Script
Use forms to test the script