Learning Objectives:

You will be able to create a page that uses JavaScript or JQuery to change the font & background color

You will be able to describe what is Document Object Model (DOM)

You will be able to identify how JavaScript is triggered.

Homework:

Post: A webpage that dynamicly changes the font and rollover the content. The page must be linked to your homework page.

Watch: HTML DOM Video

Read: Book 3 Chapters 1 - 5 & 9 plus Book 4 Chapters 1 - 3

Watch: HTML DOM with tools

Review: W3Schools JavaScript Tutorials

Review: W3Schools DOM Tutorials

Review: W3Schools JQuery Tutorials

Review: JQuerry UI Examples

Reminder: Post your articles on Canvas in  Discussions > Weekly Review

Watch: JavaScript Part 1

Watch: JavaScript Part 2

 

Topics Covered:

W3schools and Codecademy have great tutorials as to how Javascript works.

JavaScript's real name is ECMAScript!

What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages
  
  
• JavaScript is a scripting language (not a full programming language like Java)
  
  
• JavaScript was designed to be embedded directly into HTML pages
  
  
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
  
  
• JavaScript is an event driven language (most common event is page loading)

 

 

Syntax	Alert Box
<script type="text/javascript"> <!-- alert("Text for Alert "); //--> </script>	<script type="text/javascript"> <!-- alert("Welcome to CIS233"); //--> </script>
Syntax	Prompt
<script type="text/javascript"> <!-- variable declared variable=prompt("Prompt Text"," ") //--> </script>	<script type="text/javascript"> <!-- var Name Name=prompt("Please enter your name","") //--> </script>
Syntax	Document. Write
<script type="text/javascript"> <!-- document.write("Text to Write "); //--> </script>	<script type="text/javascript"> <!-- document.write("Welcome to CIS233"); //--> </script>

 

 

HTML DOM breaks the Webpage into parts that Javascript of PHP can manipulate.

• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements

document.getElementById("myPart")

is my favorite to access a specific location in an HTML Document.

 

We will use the onClick event to trigger opening a new window!

Syntax	Pop-up Window
window.open("URL", "target","features","")	window.open("http://www.asu.edu","_blank", "width=400, height=400")
Features include dimensions of the window and tool bars

We will create a link
<a href="#" onclick="javascript:window.open('http://www.asu.edu','_blank', 'width=400, height=400')">Link</a>
Make sure you notice the quotes (single vs double) plus the fact the href is #

For an external File place the call in the head : <script type="text/javascript" src="codefile.js" >

JQuery and JSON are JavaScript Libraries

JQuery, JQuery Interface and JQuery Mobile

jQuery is a library of JavaScript Functions

jQuery is a lightweight, "write less, do more", JavaScript library.

JQuery Foundation has a few tutorials and videos on how to use its open source product

W3schools has a good tutorial on JQuery

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
  
  
• A (selector) to "query (or find)" HTML elements
  
  
• A jQuery action() to be performed on the element(s)

jQuery Selectors - $(CSS selectors) - to identify the elements to be manipulated

$("*") selects all elements.

$("li") selects all <li> elements.

$("h1.main") selects all <h1> elements with class="main".

$("h1#menu") selects the first <h1> elements with id="menu".

$(":animated") selects all elements that are currently animated.

$(":button") selects all <button> elements and <input> elements of type="button".

$(":even") selects even elements.

$(":odd") selects odd elements.

The Document Ready Event:

Some jQuery methods are inside a document ready event to prevent them from running before the document is finished loading (is ready):

$(document).ready(function()

{

// jQuery methods go here...

}

);

Terms:

Syntax, Object, Event, Property, Method and DOM