javascript i - pintclasses.pint.com/cse130/lecture3/big.pdf · alert ... • microsoft supports...

CSE 130 Programming Language Principles & Paradigms Lecture # 3

JavaScript I


Materials

• The information here is dominantly derived from JavaScript: The Complete Reference 2nd edition which is a class recommended text

• There are plenty of other good resources online about JavaScript, but there is also quite poor discussions about it – you’ve been warned

• Tools – Browsers (Firefox, IE, Opera, Safari, etc.)– Debugging and DOM focused toolbars (Web Developer Toolbar,

Firebug, etc.)– Text editor that is JS aware – Aptana, Dreamweaver, Eclipse,

etc.


Intro

• JavaScript is premier client-side scripting language used in Web development– Note especially

• Client side• Focus on web development• Scripting

• Part of the client-side ‘triangle’ consisting of (X)HTML, CSS and of course JavaScript– Manipulation of mark-up and style via the document

object model or DOM


Helloworld

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript Hello World</title><meta http-equiv="content-type" content="text/html;

charset=ISO-8859-1" /></head><body><h1>First JavaScript</h1><hr /><script type="text/javascript">document.write("Hello World from JavaScript!");

</script></body></html>


HTML – JavaScript Intermixture

• The interplay between (X)HTML and JavaScript can be tricky at first

<script type="text/javascript">// Careful on tag and script intermixture<strong>

document.write("Hello World from JavaScript!");</strong></script>

• Instead you would do

<script type="text/javascript">document.write("<strong>Hello World from JavaScript!</strong>");</script>

• or even

<strong><script type="text/javascript">document.write("Hello World from JavaScript! ");</script></strong>


JavaScript’s Silent Failings

• Most browsers will give minimal feedback that a JavaScript failure is occurring– Look in the lower left corner of the status bar in IE to double

click on the warning icon– You may see in Mozilla browsers a status bar message like

JavaScript errors occurred or similar

• Make sure you can turn on your browser’s error reporting – IE (Tools > Internet Options > Advanced)– Mozilla (use javascript: URL or (Tools > JavaScript Console)

•A little homework: Browse the Web with JavaScript error reporting on


Adding JavaScript to HTML Documents

• There are four standard ways to include script in an (X)HTML document:

1.Within the <script> element2.As a linked file via the src attribute of the <script>

element3.Within an (X)HTML event handler attribute such as

onclick4.Via the pseudo-URL javascript: syntax referenced by a

link

Note: There may be other approaches but they are non-standard


Top-to-Bottom Execution

• You can use as many <script> tags as you like in both the <head>and <body> and they are executed sequentially.

• <h1>Ready start</h1><script language="Javascript" type="text/javascript">

alert("First Script Ran");</script><h2>Running…</h2><script language="Javascript" type="text/javascript">

alert("Second Script Ran");</script><h2>Keep running</h2><script language="Javascript" type="text/javascript">

alert("Third Script Ran");</script></h1>Stop!</h1>

• Fun threading issue since you are running a JavaScript interpreter within a browser it is possible to see different amounts of text before/after alerts. This is more pronounced with long running scripts or network activity.


Script in <head>


<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript in the Head</title><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /><script type="text/javascript">

function alertTest() {alert("Danger! Danger! JavaScript Ahead");

}</script></head><body><h2>Script in the Head</h2><hr /><script type="text/javascript">

alertTest();</script></body></html>

Script Masking and <noscript>

• Script Hiding using HTML and JavaScript comments– <script type="text/javascript">

</script>

– Avoids printing script onscreen in non-script aware browsers, really of limited value given newer browsers and your end goal of code seperation

• <noscript> Element– Useful to provide alternative rendering in browsers that have script off or don’t

support script– <noscript>

<strong>Either your browser does not support JavaScript or itis currently disabled.</strong>

</noscript>

– Next example shows a great way to keep non-JavaScript aware users out of your site


Meta-Refresh Trick

• Add a <meta> refresh within a <noscript> in the head to redirect non-JS users right-away to an error page

<noscript><meta http-equiv="Refresh" content="0;URL=/errors/noscript.html">

</noscript>

• Downsides– Won’t validate – W3C oversight?– Redirects turned off at certain security settings with

JS– Not bot friendly


Script Hiding Details

• If you are a hardcore markup person using HTML comments for hiding is wrong. (Or if you are embedding in XML) Use CDATA sections instead

<script type="text/javascript"><![CDATA [document.write("Congratulations! You have JavaScript.");]]></script>

• OR

<script type="text/javascript">/* <![CDATA[ */document.write("Congratulations! You have JavaScript.");/* ]]> */</script>


Event Handlers

• (X)HTML defines a set of event handler attributes related to JavaScript events such as onclick, onmouseover, etc. which you can bind JavaScript statements to.


<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript Events</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /></head><body onload="alert('page loaded');"><form action="#" method="get"><div id="formfields">

<input type="button" value="press me" onclick="alert('You pressed my button!');" />

</div></form><p><a href="http://www.yahoo.com" onmouseover="alert('hi');">Yahoo!</a></p></body></html>


Linked Scripts

• Like linked style sheets you can store JavaScript code in a separate file and reference it– Use a .js file– Contains only JavaScript – Store these files like images in a common directory in your site

(e.g. /scripts)– Linked scripts can be cached and “clean up” (X)HTML documents– Linked scripts do have problems under some browsers


Linked Script Example


<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Linked Script</title><meta http-equiv="content-type" content="text/html; charset=ISO-

8859-1" /><script type="text/javascript" src="danger.js"></script></head><body><form action="#" method="get" id="form1"><div id="formfields"><input type="button" name="button1" id="button1"

value="press me" onclick="alertTest();" /></div></form></body></html>


Linked Script Example Contd.

• In file danger.js you would have simply

function alertTest( ) {alert("Danger! Danger!");

}


Fully Decoupled Linked Script Example


<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Linked Script</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><script type="text/javascript" src="danger.js"></script></head><body><form action="#" method="get" id="form1"><div id="formfields">

<input type="button" name="button1" id="button1" value="press me“ />

</div></form><script type="text/javascript" src=“events.js"></script></body></html>

• In events.js we have document.getElementById('button1').onclick=alertTest;


JavaScript Pseudo-URLs

• You can use the JavaScript pseudo-URL to trigger a script statements

• For example<a href=“javascript: alert(‘hi’);”>Click me</a>• You can also type such a URL directly in the browser’s

location box, for examplejavascript:alert(5+9)• Be aware that JavaScript pseudo-URLs do not degrade

well in non-JavaScript aware situations


Other JavaScript Inclusion Methods

• There are a few other ways to include JavaScript in a Web page the most notable being the JavaScript entity supported by Netscape 4.x generation browsers

• This method uses a standard HTML character entity in a macro style manner– &{script};

• You shouldn’t use this form of inclusion since it is no longer supported by even Netscape and is not cross browser in support


History of JavaScript

• JavaScript first introduced in 1995– Invented by Netscape– Originally called LiveScript– Renamed JavaScript when first beta in Netscape 2– Not really related to Java

• Microsoft supports clone of JavaScript called JScript– First introduced in Internet Explorer 3

• Standards oriented JavaScript called ECMAScript• The ideas of DHTML and Ajax add even more confusion• JavaScript used both client and server-side and within browsers and

outside browsers• Some of the bad aspects of JavaScript are really the bad aspects of

the environment in which it is used


JavaScript Versions

1.6Firefox 1.5

JScript 5.6Internet Explorer 6.x

Jscript 5.6 + Native XHR (or 5.7 under Vista)Internet Explorer 7.x

1.5Netscape 6.x, Mozilla 0.9

1.7Firefox 2.0

JScript 5.5Internet Explorer 5.5




1.3Netscape 4.06 – 4.7x

1.2Netscape 4.0 – 4.05

1.1Netscape 3.x

1.0Netscape 2.x

JavaScript VersionBrowser Version


JavaScript Applications

• Common uses of JavaScript include:– Form validation– Page embellishments and special effects– Navigation systems– Basic Math calculations– Dynamic content manipulation

• The last use gets into the real power of JavaScript being a full fledged document manipulation language


JavaScript, (X)HTML, and CSS Link

• JavaScript very much relies on markup and CSS in browsers, in fact it manipulates objects that are created by the correct use of tags and style properties

• For example, the document object contains objects and collections corresponding to many of the tags in the (X)HTML document.– document.forms[ ], document.images[ ], document.links[

], etc.– We can always jump directly to the object using something like

document.getElementById( ) under a DOM compliant browser


Simple Example 1 of Interplay

<html><head><title>Simple DOM 1</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><script type="text/javascript">function showField() {

alert(document.form1.field1.value);}

</script></head><body><form action="#" method="get" id="form1" name="form1">

<input type="text" name="field1" id="field1" /><input type="button" name="button1" id="button1"

value="press me" onclick="showField();" /></form></body></html>


Simple Example 2 of Interplay<html><head><title>Simple DOM 2</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /></head><body><p id="p1" style="color: red">Hello there</p><form>

<input type="button" value="left" onclick="document.getElementById('p1').align='left';" /><input type="button" value="center" onclick="document.getElementById('p1').align='center';" /><input type="button" value="right" onclick="document.getElementById('p1').align='right';" /><br /><br /><input type="button" value="red" onclick="document.getElementById('p1').style.color='red';" /><input type="button" value="blue" onclick="document.getElementById('p1').style.color='blue';" /><br /><br /><input type="button" value="Big" onclick="document.getElementById('p1').style.fontSize='xx-large';" /><input type="button" value="Small" onclick="document.getElementById('p1').style.fontSize='xx-small';" />

</form></body></html>


Summary of Initial Discussion

• JavaScript is a full blown Web programming language

• It is not related to Java in more than name• It intersects with XHTML through <script>, linked

scripts (.js files), and attributes for event handling (onclick)

• It has evolved over time• It has many browser compatibility issues to

worry about


Language OverviewPart 1


Basic Features

• Script Execution order– Top to bottom– <head> before <body>– Can’t forward reference outside a <script> tag

• JavaScript is case sensitive– HTML is not, XHTML is– “Camelback” style document.lastModified– IE’s JScript is a little less case sensitive than standard

ECMAScript and Netscape’s JavaScript– Remember onClick, ONCLICK, onclick doesn’t count since that

is HTML


Basic Features Contd.

• Whitespace– Whitespace is generally ignored in JavaScript

statements and between JavaScript statements but not always consider

• x = x + 1 same as x =x + 1• s = typeof x; is same as s=typeof x but it not the same as

s=typeofx; or s= type of x;

– Return character can cause havoc– Given white space support by JavaScript some

developers favor “crunching”


Basic Features Contd.

• Statements– A script is made up of individual statements– JavaScript statements are terminated by returns or

semi-colons (;)– So x = x+1; same as x = x+1

alert(x); alert(x)– Prefer to use semi-colons because if you reduce

returns you run into problemsx=x+1 alert(x) throws an error while x=x+1;alert(x);does not.


Blocks

• To group together statements we can create a block using curly braces { }. In some sense this creates one large statement

• Blocks are used with functions as well as larger decision structures like if statements

function add(x,y) if (x > 10){ {

var result = x+y; x= 0;return result; y = 10;

} }


Variables

• Variables store data in a program• The name of a variable should be unique well formed

identifier starting with a letter and followed by letters or digits

• Variable names should not contain special characters or white space

• Variable names should be well considered– X versus sum– Some rules of programming might not follow on the Web?


Variables Contd.

• Define a variable using the var statement– var x;

• If undefined a variable will be defined on its first use• Variables can be assigned at declaration time

– var x = 5;

• Commas can be used to define many variables at once– var x, y = 5, z;


Basic Data Types

• Every variable has a data type that indicates what kind of data the variable holds

• Basic data types in JavaScript– Strings (“thomas”, ‘x’, “Who are you?”)

• Strings may include special escaped characters– ‘This isn\’t hard’

• Strings may contain some formatting characters– “Here are some newlines \n\n\n and tabs \t\t\t yes!”

– Numbers (5, -345, 56.7, -456.45677)• Numbers in JavaScript tend not to be complex (e.g. higher math)

– Booleans (true, false)

• Also consider the values null and undefined as types


Weak Typing

• JavaScript is a weakly type language meaning that the contents of a variable can change from one type to another. – Some languages are more strongly type in that you must

declare the type of a variable and stick with it.

• Example of dynamic & weak typing a variable initially holding a string can later hold a numberx = "hello"; x = 5; x = false;

• While weak typing seems beneficial to a programmer it can lead to problems


Type Conversion• Consider the following example of weak typing in action

document.write(4*3);document.write("<br>");document.write("5" + 5);document.write("<br>");document.write("5" - 3);document.write("<br>");document.write(5 * "5");

• You may run into significant problems with type conversion between numbers and strings use functions like parseFloat() to deal with these problems– Prompt demo


Dealing with Type

• You can also use the typeof operator to figure out typevar x = "5";alert (typeof x);

• Be aware that using operators like equality or even +may not produce expected results

x=5;y = "5";alert(x == y)

Produces a rather interesting result. We see the inclusion of a type equality operator (===) to deal with this


Composite Types

• JavaScript supports more advanced types made up of a collection of basic types.

• Arrays– An ordered set of values grouped together with a single

identifier• Defining arrays

– var myArray = [1,5,1968,3];– var myArray2 = ["Thomas", true, 3, -47];– var myArray3 = new Array();– var myArray4 = new Array(10)


Arrays• Access arrays by index value

– var myArray = new Array(4)

– myArray[3] = "Hello";

• Arrays in JavaScript are 0 based given – var myArray2 = ["Thomas", true, 3, -47];– myArray2[0] is “Thomas”, myArray[1] is true and so on– Given new Array(4) you have an array with an index running from

0 – 3– To access an array length you can use arrayName.length

• alert(myArray2.length);


Objects

• An object is a collection of data types as well as functions in one packagevar stooge1 = { names : [“Larry”,”Curly”,”Moe”] , number : 3} var stooge2 = { names : [“Larry”,”Curly”,”Moe”] ,

showNumber : function() {alert(this.names.length);} }alert(stooge1.names);stooge2.showNumber();

• We see the typical access notation similar to Java using “.”

objectname.propertyname objectname.method()

• Underneath everything in JavaScript are objects.– We have actually been using these ideas everywhere, for example

document.write(“hello”) says using the document object invoke the write() method and give it the string “hello” this results in output to the string


Working with Objects

• There are many types of objects in JavaScript– Built-in objects (primarily type related)– Browser objects (navigator, window, etc.)– Document objects (forms, images, etc.)– User defined objects

• Given the need to use objects so often shortcuts are employed such as the with statement

with (document){write("This is easier");write("This is even easier");}

• We also see the use of the short cut identifier this when objects reference themselves


Expressions and Operators

• Make expressions using operators in JavaScript• Basic Arithmetic

– + (addition), - (subtraction/unary negation), / (division), * (multiplication), % (modulus)

• Increment decrement– ++ (add one) -- (subtract one)

• Comparison– >, <, >=, <= , != (inequality), == (equality), === (type equality)

• Logical– && (and) || (or) ! (not)


More Operators

• Bitwise operators (&, |, ^)– Not commonly used in JavaScript except maybe cookies?– Shift operators (>> right shift, << left shift)

• String Operator– + serves both as addition and string concatenation– document.write("JavaScript" + " is " + " great! ");– You should get familiar with this use of +

• Be aware of operator precedence– Use parenthesis liberally to force evaluations– var x = 4 + 5 * 8 versus x = (4+5) * 8


Flow Control

• Basic program execution control handled in JavaScript using the if statement

• if (expression) or if (expression)true-case true-case;

elsefalse-case;

if (x > 10)alert("x bigger than 10");

elsealert("x smaller than 10");


More on If Statements

• You can use { } with if statements to execute program blocks rather than single statements

if (x > 10){

alert("X is bigger than 10");alert("Yes it really is bigger");

}

• Be careful with ;’s and if statementsif (x > 10);

alert("I am always run!? ");


Switch Statements

• If statements can get messy so you might consider using a switch statement instead

• switch (condition) {case (value) : statement(s)

break;…default: statement(s);}

• The switch statement is not supported by very old JavaScript aware browsers (pre-JavaScript 1.2), but today this is not such an important issue


Switch Example

var x=3;switch (x) {case 1: alert('x is 1');

break;case 2: alert('x is 2');



break;default: alert('x is not 1, 2, 3 or 4');

}


Loops

• JavaScript supports three types of loops: while, do/while, and for• Syntax of while:

while(condition)statement(s)

• Example:

var x=0;while (x < 10) {

document.write(x);document.write("<br />");x = x + 1;

}document.write("Done");


Do Loop

• The difference between loops is often when the loop condition check is made, for example

var x=0;do{document.write(x);x = x + 1;

} while (x < 10);

• In the case of do loops the loop always executes at least once since the check happens at the end of the loop


For Loop

• The most compact loop format is the for loop which initializes, checks, and increments/decrements all in a single statement

for (x=0; x < 10; x++){document.write(x);

}

• With all loops we need to exercise some care to avoid infinite loops. See example


For/In Loop

• One special form of the for loop is useful with looking at the properties of an object. This is the for/in loop.

for (var aProp in window){document.write(aProp)document.write("<br />");

}

• We will find this construct useful later on when looking at what we can do with a particular object we are using


Loop Control

• We can control the execution of loops with two statements: breakand continue

• break jumps out of a loop (one level of braces)• continue returns to the loop increment

var x=0;while (x < 10) {

x = x + 1;if (x == 3)

continue;

document.write("x = "+x);if (x == 5)

break;}document.write("Loop done");


Functions

• Functions are useful to segment code and create a set of statements that will be used over and over again The basic syntax is

function name(parameter list){function statement(s)return;

}

• For examplefunction add(x, y)

{var sum = x + y;return sum;

}


Functions Contd.

• We can then invoke a function using the function name with ( )’svar result = add(2, 3);

• We can also pass variable values as well as literalsvar a = 3, b=5;var result;result = add(a,b);

• Variables are passed to function by value so you must use return to send things back.

• You can return a value or not from a function and you can have as many return statements as you like


Input/Output in JavaScript

• Special dialog forms– Alert

• alert("Hey there JavaScript coder! ");

– Confirm• if (confirm(‘Do you like cheese?’)

alert("Cheese lover");elsealert("Cheese hater");

– Prompts• var theirname = prompt("What’s your name? ", "");


Input/Output in JavaScript Contd.

• Writing to the HTML document– document.write()– document.writeln()

• Writing should be done before or as the document loads.• In traditional JavaScript the document is static after that, though

with the DOM everything is rewritable• Since we are writing to an (X)HTML document you may write out

tags and you will have to consider the white space handling rules of (X)HTML


Comments and Formatting

• When writing JavaScript you may want to include a comment– /* This is a

multiple line style comment */

– // This is a single line comment

• You also may want to format your script for nice reading or you may want to crunch it for fast download?


Summary

• JavaScript supports a basic syntax very similar to C• It is a weakly typed language• It has a limited set of data types• It is very object flavored but it does not force object-

oriented programming on programmers• It forgoes many features of programming languages that

wouldn’t make sense in the Web environment (file I/O, complex Math, etc.)