Class 2 Notes for Web Scripting

Learning Objectives:

You will be able to describe why DOM is important to Javascript and HTML.

You will be able to describe what an Object is in scripting.

 

Homework:

Create: Homework page & Welcome page then post on Web

Create: Welcome page using a Prompt, Alerts and writing on the page. Link to Homework page!

Review: HTML & DOM on W3schools

Watch: HTML DOM Video

Watch: HTML DOM with tools

 

Alert Box

Topics Covered:

A very cool way to use Java Script!

Alert box

alert("I am an alert box!!");

Confirm box

var combox=confirm("Please Press a Button");

Prompt

Prompt box

var name=prompt("Name Please","default info");

Comment Tags

<!-- HTML comment tag -->

// Javascript comment tag -single line

/* start and */ end a multi-line comment block

2 Very Cool Sites to help you learn HTML Codecademy, and Mozilla Developer Network

DOM TreeDOM

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

You will be manipulating the Objects

Methods for accessing HTML objects

  1. By using the getElementById() method - the method you will probably use the most

  2. By using the getElementsByTagName() method - used in XML more than HTML

  3. and navigating the node tree, using the node relationships - least reliable and the hardest to use.
document.getElementById("ID") 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 
<button" onclick="window.open('http://www.suns.com','_blank')">Go Suns</button>

Make sure you notice the quotes (single vs double)

 

Alert Box Changes

Code
Outputs
\' single quote
\" double quote
\& ampersand
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed

 

 

 

 

 

Example of an Object and the Dot Notation

Object: Tyson Chandler (Tyson-Chandler)

Properties: (Characteristics)

The Sport he plays is Basketball:Tyson-Chandler.Sport = Basketball

The Team he plays for is the Suns: Tyson-Chandler.Team = Suns

Tyson Chandler's height is 6'3'': Tyson-Chandler.height = 7 feet 1 inches

Method: (actions or complex interaction)

Tyson Chandler's defense the Basketball: Tyson-Chandler.defense()

Tyson Chandler's shooting a free throw: Tyson-Chandler.freethrow()

Tyson Chandler's blocking a shot :Tyson-Chandler.blocking()

 

We will start with the Browser Objects Reference:

Mozilla had a great list of API's for JavaScript

HTML DOM breaks the Webpage into parts that Javascript or 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 #

 

HTML5 Geolocation Object inside the browser plus Google Maps


Locate the User's Position

W3schools has a great reference to all the objects available to Javascript

A video showing how to use CoreFTP to access our Webspace is located http://e-commerce.pvc.maricopa.edu/video/
CoreFTP.avi

 

FTP login
 

 

Host: e-commerce.paradisevalley.edu

Username: Use your first initial plus last name

Password: Password you entered in class

Port: 990

Connection: FTPS

Click: Connect

Your homework must be linked to your homework.html file in your webs pace

Try downloading the FTP Program

Our Webs pace is at http://e-commerce.paradisevalley.edu

Check out the FTP tutorials WS FTP for Windows.

 

 

FileZilla

 

 

 

You can also use FileZilla!

Filezilla's settings are the same just inputed to a different location

Host: e-commerce.paradisevalley.edu

Username: Use your first initial plus last name

Password: Password you entered in class

Port: 990

Click: Quickconnect

 

 

File Names should be:

lower case; Example: jon.html not Jon.html

Avoid space in the name; Example: next-time.html instead of next time.html

Simple name while explaining the content; Example: about.html instead of aboutus.html

Use your first initial plus last name as the user ID and your password

Try downloading the FTP Program (if you don't have Dreamweaver)


You should Review W3schools HTML Dom

Terms:

DOM, API, Objects, Properties, Methods and FTP

 

 

 

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.