1 / 29

DePaul University

DePaul University. SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash. What Is JavaScript. As WWW matured designers needed more control over pages. HTML specification was not adequate enough Netscape invented JavaScript

adelie
Download Presentation

DePaul University

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DePaul University SNL 262 Advanced Web Page Design Introduction To JavaScript - II Instructor: David A. Lash

  2. 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.

  3. 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

  4. 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>

  5. An Extension To HTML

  6. 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>

  7. JavaScript Versions

  8. JavaScript Is Not ... • VBScript- Microsoft alternative to JS • based on visual basic • a microsoft supported language • IE only, no Netscape

  9. 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)

  10. 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.html http://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

  11. 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 }

  12. 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.

  13. 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()

  14. 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

  15. 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 and end script Writes out to html document

  16. 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

  17. 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

  18. 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/examples 2_example2.html

  19. 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

  20. 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/examples • 2_example3.html

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. Operator Table

  27. 2 Other Very Useful Methods Window 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

  28. 2 Other Very Useful Methods Window 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

  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

More Related