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. Access Elements and Properties Using JavaScript
querySelector() method lets you reference objects and properties
To use a method, specify its parent object, a period, and method name: document.querySelector()

14. 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
Example: querySelector("#nameinput") selects the element with the id value nameinput

15. To select the aside element: document.querySelector("aside")
Specify CSS selector within parentheses of method to reference an object
To select the aside element:
document.querySelector("aside")
To access a property, add dot and property name after method:
document.querySelector("aside").textContent
Dot notation
Connects all parts of statement into a single string. Objects, properties, and methods are listed in sequence, separated by a period.

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

17. 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">

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

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

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

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

22. 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?

23. Function code and code referencing function

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

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

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

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

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. Javascript examples

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

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