AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II...
-
date post
20-Dec-2015 -
Category
Documents
-
view
214 -
download
1
Transcript of AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II...
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
JavaScript Is Not ...
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
JavaScript Is Not ...
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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="JavaScript">
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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="JavaScript">
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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="javascript">
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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="javascript">
X=2
Y=4
W=8
Z1=X+Y/W
Z2=(X+Y)/W
Z3=X*Y/W
document.write("Z1=", Z1, "<BR>");
document.write("Z2=", Z2, "<BR>");
document.write("Z3=", Z3, "<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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="javascript">
X=2
Y=4
W=8
Z1=W%(X+Y)
Z2=(X*Y)%W
document.write("Z1=", Z1, "<BR>");
document.write("Z2=", Z2, "<BR>");
</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>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="javascript">
X=2
Y=4
W=8
Z1=W%(X+Y)
Z2=(Z3)/8
document.write("Z1=", Z1, "<BR>");
document.write("Z2=", Z2, "<BR>");
</script>
</BODY>
</HTML> >
http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example6.html
AdvWeb-25/29
Simple String Manipulation What does this code do?
<HTML>
<HEAD>
<TITLE>A First Page</TITLE>
</HEAD>
<BODY>
<H1>A Simple Header</H1>
<P> This is not a very interesting page </P>
<script language="javascript">
X="Apple"
Y="Jack"
Z1=X+Y
Z2=X+" "+Y
document.write("Z1=", Z1, "<BR>");
document.write("Z2=", Z2, "<BR>");
</script>
</BODY>
</HTML>
http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example7.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