You will be able to describe what is Document Object Model (DOM)
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 DOM Tutorials
Review: W3Schools JQuery Tutorials
Review: JQuerry UI Examples
Reminder: Post your articles on Canvas in Discussions > Weekly Review
|Event||What it does|
Syntax Alert Box
alert("Text for Alert ");
alert("Welcome to CIS233");
variable=prompt("Prompt Text"," ")
Name=prompt("Please enter your name","")
Syntax Document. Write
document.write("Text to Write ");
document.write("Welcome to CIS233");
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
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
Make sure you notice the quotes (single vs double) plus the fact the href is #
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):
// jQuery methods go here...
Syntax, Object, Event, Property, Method and DOM