1. Jim Gerland CS4HS June 28, 2017 Buffalo State College
JavaScript
Jim Gerland
CS4HS June 28, 2017
Buffalo State College

2. JavaScript What is Javascript?
Interpreted and executed via the browser (client-side)
Variables
Functions
I/O (input/output)
Output to web page
Arithmetic
Conditionals
Repetitive Statements (Loops)
Document Object Model (DOM)
Manipulating the DOM

3. JavaScript
JavaScript is a computer programming language that is designed to run within a Web browser
Developed by Netscape as a "light" programming language
Later adopted by Internet Explorer and all browsers
JavaScript is interpreted not compiled
Code is interpreted and executed statement by statement
No checking for errors in syntax or semantics before it is run
JavaScript is case sensitive
JavaScript is weakly typed
Variables are not given a specific type
The type of variable can change as the program runs

4. JavaScript can be executed in two ways:
JavaScript Execution
JavaScript can be executed in two ways:
Associated with an event (such as a mouse movement)
Mouse movement events: onmouseover, onmouseclick, onmouseout
Run during the loading of a page
Two see this, we will learn our first JavaScript statement
alert ("string")
Pops up a dialog box containing the given string
Example on loading a page: <script> alert("here is the message"); </script>
Example on moving a mouse over a link: <a href="" onmouseover="alert('here is the message!');"> link </a>

5. Variables
To perform input and use computation we need to be able to use variables that can take on values
Variables are names that are given to hold these values
Legal variable names in JavaScript are made up of letters, digits and underscores and start with a letter or an underscore
Legal names: my_elephants, elephants3, Elepht
Illegal names: 33cats, cats-dogs, my cats
Variables can represent numbers, strings and boolean values (true and false)
Variables can be assigned values using an assignment statement: my_elephants = 6; school = "Buffalo State College";

6. Functions
If we want to have some more complicated code associated with a link, it gets very messy
We can define a function that will be called when a link is chosen
The syntax for defining a function is: function name () { JavaScript statements }
This function can now be called in associated with an event <a href="" onmouseover="name();">
The code for the function by that name will now run

7. Input/Output with variables
To read a value from the user and assign it to a variable, use the prompt function: variable = prompt("question", default);
For example: children = prompt("How many children do you have? ", 3);
You can include a variable in output simply by giving the variable name in an alert with no quotes: alert (children);
Or you can build a larger string using the concatenation operator (+): alert ("I have " + children + " children");

8. Output can be written to a page as opposed to an alert box
Output to the Page
Output can be written to a page as opposed to an alert box
The function to do this is called as follows: document.write(expression);
Examples: document.write("The rain in Spain"); document.write("<p>A new paragraph</p>");
The function document.writeln works like document.write except that it goes to a new line on output after printing.

9. *, / and % have higher precedence than + and –
Arithmetic
Arithmetic can be performed in JavaScript using the following operators: +: addition -: subtraction *: multiplication /: division %: modulus
*, / and % have higher precedence than + and –
Parentheses can be used to change the order of precedence

10. Conditional Statements
All programming languages have a mechanism for performing choice. That is, to do one thing or something else
One mechanism for doing this in JavaScript is by using an if-else statement. The general syntax is: if (Boolean expression) { statement1; } else { statement2; }

11. Conditional Statements
A Boolean expression evaluates to true or false
The statement is any legal JavaScript statement
If the Boolean expression evaluates to true, statement1 will execute and not statement2
If the Boolean expression evaluates to false, statement2 will execute and not statement1

12. Relational Operators
Relational operators are often used in Boolean expressions. The relational operators in JavaScript are: == equality != not equal < less than > greater than <= less than or equal to >= greater than or equal to
Sample Boolean expressions in if statements: if (roses <= daisies) if (elephants + dogs > 34) if (the_name == "Barb")

13. Compound Statements
The statements to be executed in the if and else parts must be single statements. Often, there is more than one statement to execute. In this case, compound statements are made using {}'s if (Boolean expression) { statement1; … } else { statement2; … }

14. Repetitive Statements (Loops)
We often want to execute a statement more than once. This introduces the concept of repetitive statements or loops.
One JavaScript statement that allows us to perform a loop is a while statement. The syntax is: while (Boolean Expression) { statements; }
The statement continues running as long as the Boolean Expression evaluates to true
Like with an if statement, if more than one statement needs to be in the loop, a compound statement can be used

15. Another Repetitive Statement
It is often necessary to write a loop that will execute a given number of times. A for statement is a natural structure for doing this.
The general syntax of a for statement is: for (initialization; Boolean expression; step) { statements; }
The initialization is performed once at the beginning
The Boolean expression is tested each time before the statement is executed. If true the statement executes. If false the loop stops
The step is executed each time through the loop after the statement is executed

16. A Counting Loop
Thus, the following loop will execute 5 times: for (i = 0; i < 5; i = i + 1) { statements; }
i represents the number of times the statement has executed
The constant 5 could be replaced by any constant value and the loop would execute that number of times
5 could also be replaced by a variable to execute a number of times computed or entered by the user
for statements are not needed, the same could be done with a while loop: i = 0; while (i < 5) { statements; i = i + 1; }

17. Document Object Model (DOM)
A cross-platform and language- independent application programming interface (API) that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.
The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.

18. JavaScript can be used to dynamically manipulate the CSS and HTML
Manipulating the DOM
JavaScript can be used to dynamically manipulate the CSS and HTML
document.body.style.backgroundColor="#C CC";
document.getElementById("MyForm").style .color="navy";
Document.getElementById("dateDiv").inne rHTML=Date();

19. Manipulating the DOM
<form> <fieldset> <legend>Font Color</legend> <input type="radio" id="red" onclick="document.body.style.color='red';"> Red<br/> <input type="radio" id="yellow" onclick="document.body.style.color ='yellow';">Yellow<br/> </fieldset> <fieldset> <legend>Backgorund Color </legend> <input type="radio" id="blue" onclick="document.body.style.backgroundColor ='blue';">Blue<br/> <input type="radio" id="green" onclick="document.body.style.backgroundColor ='green';">Green<br/> </fieldset> </form>

20. A Temperature Conversion Form
<form id="myForm" name="myForm" method="POST" onsubmit="convertTemp()"> <fieldset> <legend>My Temperature Converter</legend> <label for="yourName">Name:</label> <input type="text" id="yourName" name="yourName" size="25" required placeholder="Enter your name"/><br/> <label for="tempF">Fahrenheit Temperature:</label> <input type="number" id="tempF" name="tempF" size="2" required><br/> <input type="submit" id="submit" name="submit" value="Convert"> </fieldset> </form>

21. A Temperature Conversion Script
<script> function convertTemp() { var tempF = document.getElementById("tempF").value; var yourName = document.getElementById("yourName").value; var tempC = 9 * (tempF - 32) / 5; alert("Hello " + yourName + " " + tempF "F converts to " + tempC + "C"); } </script>