JavaScript

INFSCI 1052

Client Side versus Server Side Server side

• PHP, ASP, Cold Fusion, Ruby on Rails• Good for accessing databases

Client Side• Good for immediacy of action• Forms• WebPages• Also, Flash, Ajax

Compiled versus interpreted languages• C, C#, JAVA, • JS, PHP, Python

Adding JS to a webpage• Usually add to the <head> section• Can be added to the <body> section too• Can be linked to an external JS file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;

charset=utf-8" /> <title>Untitled Document</title> </head> <script type="text/javascript"> alert('helloworld'); </script> <body> </body> </html>

External Linking to JS File- Two separate lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>

<script type="text/javascript" src="myprogram.js"> </script>

<script type="text/javascript"> alert('helloworld'); </script> </head>

<body> </body> </html>

Good JavaScript Tutorial http://www.hunlock.com/blogs/Essential_Javascript_--_A_Javascript_Tutorial

Linking and paths• Absolute paths

http://www.sis.pitt.edu

• Root-relative paths Using a webserver Relative to the site’s top level folder

Ex. /myfolder/index.html

• Document-relative paths Specifies path from Web page to the JS file

Ex: ../myscripts/myjsfile.js

JavaScript:The Missing Manual http://www.sawmac.com/missing/java

script/tutorials/index.php http://www.sawmac.com/missing/java

script/tutorials/examples/index.html Completed tutorials section and

working tutorials Focus is on basic JS and using JS

libraries such as JQuery.

Writing text to a web page• Document.write (‘<p> Hello World </P’);• http://www.sawmac.com/missing/javascript/t

utorials/examples/chapter01/complete_1.2.html

Attaching external file http://www.sawmac.com/missing/java

script/tutorials/examples/chapter01/complete_1.3.html

Errors and debugging• If error in code typically nothing happens

Web Browsers have consoles that can display JS errors

Firefox has better console than IE• Lists type of error, name of file, and line

number• Select Tools->Error Console

Common Errors• Missing semicolon, missing quote mark,

misspelled word, missing ), unterminated string literal, missing }

Statement: the basic unit of JS program, ends in semicolon

Data Types• Number

Integer or fractional• String

Use quote marks• Boolean

True or False Variables

• var varname; Begin with letter, $, or __ Can only contain letters, numbers, $ and __ CaSE SENSITIVE

Var Examples• var number=0;• var name=‘Bob’;• var age=26;• var open=true;

Math operators and order of operations apply• +, -, *, / • Use parenthesis to ensure correct order of

operations

Addition and concatenation• + sign for both purposes• When adding two numbers the + sign does

addition• When “adding” two string or a number and a

string then the concatenation function is performed Ex. var fname = ‘Bill’; var lname = ‘Smith’; var totalname=fname+lname;Sample:

http://www.sawmac.com/missing/javascript/tutorials/examples/chapter02/complete_2.1.html

Arrays• var months = [‘Jan’, ‘Feb’, ‘Mar’];• var months = new Array(‘Jan’, ‘Feb’, ‘Mar’];• Empty array

var months =[];• Accessing arrays

nameofarray[#]; Zero based so nameofarray[2] references the third

element• Adding element to end of array

nameofarray[nameofarray.length] = ‘text’; var colors = [‘red’, ‘blue’, green’]

colors [colors.length]=‘purple’;

Arrays• Push command to add multiple elements to the end of the array

colors.push(‘pink’, orange’, ‘brown’);• Add to the beginning of an array

.unshift• Push and unshift return a value: the number of items in the

array• Removing items in an array

pop() – removes the last item shift() – removes the first item Ex. var x = [0,1,2,3]; var removeditem = x.pop()

• Adding and deleting in middle of array splice function

• Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter02/complete_2.3.html

Logic

If (condition) {Code statements}

• Comparison operators>, <, >=, <=

• If else and if else if• && = and • || = or• ! = not• Sample:

http://www.sawmac.com/missing/javascript/tutorials/examples/chapter03/complete_3.1.html

Loops• While

while (condition) {JS statements

}

• For Loopsfor (var=x, x<=100; x++) {

JS statements}

Do While Loopsdo {

JS statements} while (condition);

FunctionsFunction functionName() {

JS Statements}

Sample: http://www.sawmac.com/missing/

javascript/tutorials/examples/chapter03/complete_3.2.html More with using the Date object

http://www.elated.com/articles/working-with-dates/

Send information to functions via arguments and paramaters

function functionName ( paramater 1, paramater2) {JS Statements};

functionName (argument1, argument2);

• Retrieving Information from functions• Function functionName (paramater1, paramater2) {• JS statements• Return value; • }

• Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter03/complete_3.3.html

DOM• Document Object Model• Working with Web pages

Identify an element on a page Do something with the element

Add/remove a class attribute Change a property of the element Add new content Remove the element Extract information from the element

Provides the information that JS needs to interact with elements on the webpage

A navigation structure or map of the elements on the webpage

Standard from the W3C• Most browsers have adopted but in different

ways Hierarchical structure of the tags in a

web page

Tags• Parents• Chidren• Siblings• All nodes• Text is nodes too• Nesting determines the relationships

Selecting a page element• getElementById()

Locating a single element that has a unique ID Document.getElementById(‘header’)

Searches page for a tag with an ID of ‘header’ Typically the results of this action are stored in a variable

var headNode=document.getElementById(‘header’);

GetElementsByTagName• Document.getElementsByTagName (‘a’);

Usually stored in a var var myLinks=document.getElementsByTagName

(‘a’); Find all <a> tags and store results in a var named

myLinks This action returns a list of nodes instead of a single

node Similar to arrays

Can access a single node using index notation Can use the length property Can loop using a for loop

Accessing near by nodes• .childNodes

A property of a node Ex.

var headline = Document.getElementById(‘header’);var headlineChildren = headline.childNodes;

• .parentNode• A property that represents the direct parent of a node

• .nextSibling and .previousSibling• Properties that access next and previous siblings

• .innerHTML Not a standard part of DOM but most browsers implement it Accesses the text part of a node

Examplevar pTags = document.getElementsByTagName(‘p’);

var theP = pTags[0]; alert(theP.innerHTML);

Opens an alert box and prints out the text of the first paragraph.

JavaScript

Documents

Transcript of JavaScript