DePaul University

AdvWeb-1/29

DePaul University

SNL 262

Advanced Web Page Design

Introduction To JavaScript - II

Instructor: David A. Lash

AdvWeb-2/29

What Is JavaScript

As WWW matured designers needed more control over pages.

– HTML specification was not adequate enough Netscape invented JavaScript

– In 1995, Netscape's LiveScript became JavaScript with a joint announcement by Sun and Netscape. (Started in Netscape 2.0)

– JavaScript is similar (but different) from C, C++, and Java.

AdvWeb-3/29

What Is JavaScript As WWW matured designers needed more control over pages.

– HTML specification was not adequate enough– Netscape invented JavaScript

A programming language used to make web pages more interactive. Using JavaScript you can

– add scrolling or changing messages – validate forms and make calculations – display alert messages or custom messages animate images – detect the browser version and react accordingly – set and detect "cookies" – detect plug-ins and react accordingly.– test for and react to plug-in presence – create pages on-the-fly

AdvWeb-4/29

An Extension To HTML JavaScript extends HTML as such

– can be a partial line or a single line embedded within HTML– can be several lines or even pages of lines– Is easy to make changes

<html><head> <title>David Lash</title></head><body><p><img SRC="Depaul.gif" height=82 width=78></p><P>Here is my home page </P><p><script language="JavaScript">document.write("Last Updated on " + document.lastModified

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

AdvWeb-5/29

An Extension To HTML

AdvWeb-6/29

An Extension To HTML JavaScript extends HTML as such

– can be a partial line or a single line embedded within HTML

– can be several lines or even pages of lines– Is easy to make changes

<script language="JavaScript">

</script><noscript>

Your browser doesn’t support JavaScript. Please update your browser version

</noscript></body></html>

AdvWeb-7/29

JavaScript Versions

JS Version Browser Support

JS 1.0 N 2.0 IE 3.0

JS 1.1 N 3.0 IE 4.0

JS 1.2 N 4.0 IE 4.0

JS 1.3 N 4.5

AdvWeb-8/29

JavaScript Is Not ...

VBScript - Microsoft alternative to JS – based on visual basic – a microsoft supported language– IE only, no Netscape

AdvWeb-9/29


CGI - a specification that allows for HTML pages to interface with programs on web servers. (Pgms can be lots of different languages)

AdvWeb-10/29


Java - A programming language developed by Sun that creates applets that can be inserted into web pages. (runs on IE and NS).

http://www.depaul.edu/~dlash/website/JustRect.htmlhttp://www.depaul.edu/~dlash/website/

WindowBlindFixed.html

ActiveX - Microsoft alternative that allows Windows programs to run within a web page.

– Compiled and placed on web server– not as easy as JS – Only works with IE and windows platforms

AdvWeb-11/29

Getting Started With JavaScript

In HTML, you interlace your text you want to display with HTML TAGs

– Know exactly how your document will display.– Little if any interaction with user. Page does not react, or change.

JavaScript you have additional tools – Variables - A data element that can hold values of numbers or

strings. For example, x=0 y=3+3 z="apple”

– Control Structures - These are language statements that allow you to test and loop and detect when certain events occur.

For example, if ( x == 0 ) {

do something

}

AdvWeb-12/29

Getting Started With JavaScript...

JavaScript you have additional tools ... – Event Handling - These constructs let you take control

when the user does something specific. These specific events include things like, click an area (

onclick(do something)) , onSumbit(do something else), onLoad(does something).

– Object manipulation and use - Javascript has a series of objects available to examine and manipulate

Available objects includes things like windows, forms, form elements.

AdvWeb-13/29

Getting Started With JavaScript...

JavaScript you have additional tools ... – Object Properties Manipulation and Use -– Objects have properties that you can manipulate

and look at: For example, window.status,

document.image.name. – You can look at these properties like any other

variable. – Methods Associated with Objects - allow you to

take action on the object. For example, document.write(),

forms.elements.window.click(),

windows.open()

AdvWeb-14/29

Getting Started With JavaScript...Really

A simple HTML program

<HTML>

<HEAD>

<TITLE>A First Page</TITLE>

</HEAD>

<BODY>

<H1>A Simple Header</H1>

<P> This is not a very interesting page </P>

</BODY>

</HTML> See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_

SimpleHtml.html

AdvWeb-15/29

Getting Started With JavaScript...Really

A simple HTML program with JavaScript

<HTML>

<HEAD>


</HEAD>

<BODY>




document.write("Here are 3 things I like");

document.write("<UL><LI>Baseball<LI>Hot Dogs <LI> Apple Pie </UL>");

</script>

</BODY>

</HTML> See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_Simple2html.html

Start andend script

Writes out to html document

AdvWeb-16/29

What Happens When There Is A JavaScript Error?

Suppose the HTML missing a quote mark in the 2nd document.write

Type JavaScript: word in the URL portion of the browser to display the JavaScript syntax error.

<HTML>

<HEAD>


</HEAD>

<BODY>




document.write("Here are 3 things I like");

document.write("<UL><LI>Baseball<LI>Hot Dogs <LI> Apple Pie </UL>);

</script>

</BODY>

</HTML>

Missing a quote (“)See: http://www.depaul.edu/~dlash/extra/Advwebpage/ examples/2_ Simple3html.html

AdvWeb-17/29

Introduction To Programming - Variables (Chapt 6)

In JavaScript & programming languages varaibles are used to remember and manipulate values: This includes

– Number values x=2 y=3.14

– Text Values Z=“John Doe” X=“Happy”

With Numbers can create simple expressions: A=2+2

B=A+3

AdvWeb-18/29

Introduction To Programming - Variables (Chapt 6)

What would the following do? <HTML>

<HEAD>


</HEAD>

<BODY>



<script language="javascript">

X=3

y=2

z=2+X+Y

document.write(”Z=”, Z);

</script>

</BODY>

</HTML>

See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples2_example2.html

AdvWeb-19/29

Introduction To Programming - Variable Names (Chapt 6)

Some rules on Variable Names: They are case sensitive:

– (myName != Myname != MyName ) – They must begin with upper or lower case letter or – 1more is not a good variable name, – test_1 is OK

They cannot contain a space.– Response_time is OK – response time is not a good variable name

No limit on the length of variable names but must fit into1 line. These are valid variable names:

– total_number_of_fish – LastInvoiceNumber – temp1 – a – _variable1

AdvWeb-20/29

Introduction To Programming - Variable Types (Chapt 6)

JavaScript takes care of converting between the types:

<HTML>

<HEAD>


</HEAD>

<BODY>




X=3.14

Y=2

Z=2+X+Y

document.write("Z=", Z);

</script>

</BODY>

</HTML>

•http://www.depaul.edu/~dlash/extra/Advwebpage/examples2_example3.html

AdvWeb-21/29

Expressions Using *, /, +, - Use *, /, +, - for expressions

– x=x*1– x=x/y– z=z-1

Use parenthesis to clarify precedence– x=(x*2)/2 – x=(x+2+3)/(14-2)

Normal precedence ordering is multiplication, division, addition, subtraction

4*4+3

3+12/6

12/4*2+6

4-2+3*6

4*2*6/3+2

AdvWeb-22/29

Precedence Example<HTML>

<HEAD>


</HEAD>

<BODY>




X=2

Y=4

W=8

Z1=X+Y/W

Z2=(X+Y)/W

Z3=X*Y/W

document.write("Z1=", Z1, "<BR>");



</script>

</BODY>

</HTML>

http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example4.html

AdvWeb-23/29

Remainder and Other Stuff Other Remainder Uses the % operator

– 3%4; - put remainder of 3/4 in lines Here is another example:

<HTML>

<HEAD>


</HEAD>

<BODY>




X=2

Y=4

W=8

Z1=W%(X+Y)

Z2=(X*Y)%W



</script>

</BODY>

</HTML>

http://www.depaul.edu/~dlash/extra/Advwebpage/example/2_example5.html

AdvWeb-24/29

Other Stuff What does this code do?

<HTML>

<HEAD>


</HEAD>

<BODY>




X=2

Y=4

W=8

Z1=W%(X+Y)

Z2=(Z3)/8



</script>

</BODY>

</HTML> >


AdvWeb-25/29

Simple String Manipulation What does this code do?

<HTML>

<HEAD>


</HEAD>

<BODY>




X="Apple"

Y="Jack"

Z1=X+Y

Z2=X+" "+Y



</script>

</BODY>

</HTML>


AdvWeb-26/29

Operator Table

Operator What Does It Do?

X+Y AdditionString1+string2 Concatenates strings

togetherx-y SubtractionX*y MultiplicationX/y DivisionX%y Remainder (modulus)X++ Same as x=x+1

X-- Same as x=x-1

AdvWeb-27/29

2 Other Very Useful MethodsWindow Alert -

– window.alert("your message here"); writes an alert pop-up box to end-user from browser. For

Example <HTML>

<HEAD>

<TITLE>Using Variables</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript" >

window.alert("Hey welcome to Advance Website!");

window.alert("Thats right I said ADVANCED Website Design");

</script>

</BODY>

</HTML> http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_alert1.html

AdvWeb-28/29

2 Other Very Useful MethodsWindow Prompt -

– userinput = window.prompt("Message in pop-up");

sets a pop-up box with message and gets the

user input and sets it to userinput. <HTML>

<HEAD>

<TITLE>Using Varaibles</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript" >

name=window.prompt("Hey What Is Your Name");

document.write("The name was", name );

number=window.prompt("Pick a number->");

document.write("The number tme 50=", number*50 );

</script>

</BODY>

</HTML>

http://www.depaul.edu/~dlash/extra/Advwebpage/2_prompt1.html

AdvWeb-29/29

Example 5.2 From Book

<HTML>

<HEAD>

<TITLE>Customized home page</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

first = window.prompt("Enter your first name.");

last = window.prompt("Enter your last name.");

title = window.prompt("Enter a page title.");

document.write("<h1>" + title + "</h1>");

document.write("<h2>By " + first + " " + last + "</h2>");

</SCRIPT>

<P>This page is under construction.</P>

</BODY>

</HTML>

See:

http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_list5-2.html

Documents

DePaul University