1. Unit M Programming Web Pages with

2. Why Javascript?
JavaScript can be used to enhance a Web page, and all such enhancements are rooted in looking up and/or changing data associated with parts of the HTML document.
Can add interactivity to a web page.
Can customize a web page.
Can check validity of inputs.
Client side processing.
Do More With Less Code.
Don't Reinvent The Wheel.
JavaScript is the most widely used programming language for modern web browsers.

3. Document Object Model (DOM)
Standardized way of referring to parts of a Web page.
Creates a hierarchical arrangement known as a DOM tree.
Each part of HTML document represented by a node.
DOM is designed to be language independent and to work with any programming language

4. Object Property Each HTML element in DOM is an object.
Specific object must be identified in order to manipulate it using JavaScript.
Property
Each DOM node is associated with a set of information, and each piece of information is known as a property.
Attributes are considered their own nodes and are associated with their own properties

5. Even though the DOM trees look like they show parent/child relationships, the DOM is not a set data structure, but a model that specifies interfaces. The parent child relationships shown in a DOM are logical relationships and not representations of any type of internal data structures.

8. <table> <tbody> <tr> <td>shady grove</td> <td>aeolian</td> </tr> <tr> <td>over the river, charlie</td> <td>dorian</td> </tr> </tbody> </table>

9. End of Part One.

10. Scripts Statement – a single script instruction.
Can be used to add content to a Web page
Statement – a single script instruction.
Some goals can be achieved with one statement scripts
A JavaScript instruction that performs an action.
A script may have one or a hundred statement.

11. Script is placed in <script> tags
Spaces outside of quoted text are ignored
Script tag can receive a language attribute, which is used to specify the scripting language used for the script.
JavaScript interprets the end of a line as the end of a statement.
Ending every statement with a semicolon makes code easier for developers to interpret.

12. Separate js file Statements created in external JavaScript file
Text file with .js extension
Referenced within HTML document using script element

13. Method Actions that can be performed for a node.
Method names are followed by parentheses between which you specify information specific to the method
querySelector() method lets you access any HTML element by specifying a CSS selector
Dot notation
Connects all parts of statement into a single string. Objects, properties, and methods are listed in sequence, separated by a period.

14. querySelector method
querySelector() method lets you reference objects and properties
To use a method, specify its parent object, a period, and method name: document.querySelector()
document is the parent object.

15. Element: To select an element: document.querySelector("aside")
This selects the aside element
Id: To select an element identified by an id:
document.querySelector("#nameinput")
This selects the element with the id value nameinput
Class: To select an element identified by a class:
document.querySelector(".name-content")
This selects the element with the class of name-content

16. To access a property, add dot and property name after method:
document.querySelector("aside").textContent
document.querySelector("#nameinput").textContent
document.querySelector(".name-content").textContent

17. Operators
Symbols used to compare or change the values of objects or properties
Assignment operator =
Comparison operators == !=
determine the size relationship between two values
Logical operators && || !
logically connect multiple variables in a comparison

19. Assignment operator (=): Part of a statement that lets you assign a new property value
Code on left of = accesses property
Code on right of = specifies new value
often enclosed in quotes

20. Variable Used to store a value Can be used in subsequent statements
Variable names are case sensitive, and must begin with a letter or an underscore character.
var zip

21. Event User action defined for Web pages. Can be linked to a script.
Examples of HTML events:
When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key

22. Event handler HTML attribute that specifies a type of user action.
Used to indicate that code should execute in response to specific type of user action.
Allows Web page to respond to user activities.

23. Code containing event handler. What is the event?

24. Step by step instructions on how to get from GCC Main to GCC North.
Instructions must be correct and in the correct sequence.
Give the set of instructions a name i.e. “DriveToNorth”
When you want to go to the north campus just do what “DriveToNorth” instructs you to do.
This is what functions are all about.

25. Function:  src attribute in script tag indicates location of script
Chunk of script code with a name assigned to it
Code lines in function called as a single unit
Characters after // treated as comment
Syntax: function name() { statement; }
Function can be stored in external file
 src attribute in script tag indicates location of script
Why put functions in a separate file?

26. When a function is called with the name of a variable included within the parentheses following the function name, the value of the variable is passed to the function. When text is to be rendered literally it must be included within quotes. When referring to a value of a variable, the variable name is used without quotes.

27. var goodOption = document.querySelector("#goodButton");
var feedbackInput = document.querySelector("#feedback");
function doit()
{ feedbackInput.value = “Good job";
if (form.checkValidity() === true)
{ submitinfo.className = "submitinfo show"; } }
goodOption.addEventListener("click", doit, false);

28. Function code and code referencing function

29. Many scripts for common tasks exist on the Web
Developers maintain Web sites where such scripts can be downloaded and are explained
It is possible to customize an existing script to perform a task rather than write a totally new one
Make sure downloaded script comes from a reliable source and be sure you know exactly what it does before using it

30. My script does not work – why”?
Spelling is critical.
onclick=‘doThis()’ function dothis() {
Are you connecting to your script file?
Do your { } match?

31. Javascript examples

32. YouTube - Introduction to HTML DOM
 Good explanation
YouTube - Document Object Model (DOM) Intro
DOM – Reference information

33. CIS166 – Scripting Courses
CIS166AA - Introduction to Javascripting
CIS166AE - PHP

36. Code containing script that adds content
<article id="content">
<h2 id="main">Contact Us</h2>
<p id="message"></p>
<script>
document.getElementById("message").innerHTML=("Thanks for contacting Lakeland Reeds Bed & Breakfast!");
</script>
<form name="contact" id="contact">