advweb-1/29 depaul university snl 262 advanced web page design introduction to javascript - ii...
Post on 20-Dec-2015
214 views
TRANSCRIPT
![Page 1: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/1.jpg)
AdvWeb-1/29
DePaul University
SNL 262
Advanced Web Page Design
Introduction To JavaScript - II
Instructor: David A. Lash
![Page 2: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/2.jpg)
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.
![Page 3: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/3.jpg)
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
![Page 4: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/4.jpg)
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>
![Page 5: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/5.jpg)
AdvWeb-5/29
An Extension To HTML
![Page 6: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/6.jpg)
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>
![Page 7: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/7.jpg)
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
![Page 8: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/8.jpg)
AdvWeb-8/29
JavaScript Is Not ...
VBScript - Microsoft alternative to JS – based on visual basic – a microsoft supported language– IE only, no Netscape
![Page 9: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/9.jpg)
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)
![Page 10: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/10.jpg)
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
![Page 11: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/11.jpg)
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
}
![Page 12: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/12.jpg)
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.
![Page 13: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/13.jpg)
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()
![Page 14: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/14.jpg)
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
![Page 15: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/15.jpg)
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
![Page 16: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/16.jpg)
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
![Page 17: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/17.jpg)
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
![Page 18: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/18.jpg)
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
![Page 19: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/19.jpg)
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
![Page 20: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/20.jpg)
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
![Page 21: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/21.jpg)
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
![Page 22: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/22.jpg)
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
![Page 23: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/23.jpg)
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
![Page 24: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/24.jpg)
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
![Page 25: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/25.jpg)
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
![Page 26: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/26.jpg)
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
![Page 27: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/27.jpg)
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
![Page 28: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/28.jpg)
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
![Page 29: AdvWeb-1/29 DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash](https://reader036.vdocument.in/reader036/viewer/2022081519/56649d4e5503460f94a2deaa/html5/thumbnails/29.jpg)
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