Class 10 Notes for Web Publishing II

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

Review: W3Schools JavaScript Tutorials

Review: W3Schools DOM Tutorials

 

Topics Covered:

Setup an accounts for next week at

  1. Adobe (Free)

  2. PhoneGap (Free)

 

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

 

A very cool way to use Java Script! (The script uses alert box function and document.write command)

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>

JavaScript is an Event Driven Language (something must trigger the script to work)

Event What it does
onclick: JavaScript starts by clicking (a link, or form boxes)
onload: JavaScript starts after the page or an image has finished loading.
onmouseover: JavaScript starts by the mouse moving over a link
onmouseout: JavaScript starts by the mouse moving off the link
onunload: JavaScript starts after you leave the page.

 

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

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()

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

}

);

 

DHTML is NOT a language but a Marketing Ploy! DHTML is the mixture of HTML, Javascript, and CSS.

DHTML Menus using JQuery, HTML and CSS

Take CIS166 Web Scripting

W3Schools HTML DOM

 

Syntax, Object, Event, Property, Method and DOM

 

 

 

Terms:

 

Homework:

Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.

Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.