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


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)


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.


Syntax Alert Box

<script type="text/javascript">
alert("Text for Alert ");

<script type="text/javascript">
alert("Welcome to CIS233");

Syntax Prompt

<script type="text/javascript">
variable declared
variable=prompt("Prompt Text"," ")

<script type="text/javascript">
var Name
Name=prompt("Please enter your name","")

Syntax Document. Write

<script type="text/javascript">
document.write("Text to Write ");

<script type="text/javascript">
document.write("Welcome to CIS233");



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


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"URL", "target","features","")"","_blank", "width=400, height=400")
Features include dimensions of the window and tool bars

We will create a link
<a href="#" onclick="'','_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

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


Dr. Jon Storslee
Phone: 602-787-6734

HTML Valid

Paradise Valley Community College 
18401 N. 32nd Street Phoenix, AZ 85032