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

2. AdvWeb-2/29 What Is JavaScript u As WWW matured designers needed more control over pages. – HTML specification was not adequate enough u 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. AdvWeb-3/29 What Is JavaScript u As WWW matured designers needed more control over pages. – HTML specification was not adequate enough – Netscape invented JavaScript u 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. AdvWeb-4/29 An Extension To HTML u 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 David Lash Here is my home page document.write("Last Updated on " + document.lastModified );

5. AdvWeb-5/29 An Extension To HTML

6. AdvWeb-6/29 An Extension To HTML u 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 Your browser doesn’t support JavaScript. Please update your browser version

7. AdvWeb-7/29 JavaScript Versions

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

9. AdvWeb-9/29 JavaScript Is Not... u CGI - a specification that allows for HTML pages to interface with programs on web servers. (Pgms can be lots of different languages)

10. AdvWeb-10/29 JavaScript Is Not... u 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/WindowBlindFix ed.html u 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. AdvWeb-11/29 Getting Started With JavaScript u 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. u JavaScript you have additional tools – Variables - A data element that can hold values of numbers or strings. u 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. u For example, if ( x == 0 ) { do something }

12. AdvWeb-12/29 Getting Started With JavaScript... u 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 ( u onclick(do something)), u onSumbit(do something else), u onLoad(does something). – Object manipulation and use - Javascript has a series of objects available to examine and manipulate u Available objects includes things like windows, forms, form elements.

13. AdvWeb-13/29 Getting Started With JavaScript... u JavaScript you have additional tools... – Object Properties Manipulation and Use - – Objects have properties that you can manipulate and look at: u 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. u For example, document.write(), forms.elements.window.click(), windows.open()

14. AdvWeb-14/29 Getting Started With JavaScript... Really u A simple HTML program A First Page A Simple Header This is not a very interesting page See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_SimpleH tml.html http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_SimpleH tml.html

15. AdvWeb-15/29 Getting Started With JavaScript... Really u A simple HTML program with JavaScript A First Page A Simple Header This is not a very interesting page document.write("Here are 3 things I like"); document.write(" Baseball Hot Dogs Apple Pie "); See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_Simple2 html.html http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_Simple2 html.html Start and end script Writes out to html document

16. AdvWeb-16/29 What Happens When There Is A JavaScript Error? u Suppose the HTML missing a quote mark in the 2nd document.write u Type JavaScript: word in the URL portion of the browser to display the JavaScript syntax error. A First Page A Simple Header This is not a very interesting page document.write("Here are 3 things I like"); document.write(" Baseball Hot Dogs Apple Pie ); Missing a quote (“) See: http://www.depaul.edu/~dlash/extra/Advwebpage/ exampleshttp://www.depaul.edu/~dlash/extra/Advwebpage/ examples /2_ Simple3html.html

17. AdvWeb-17/29 Introduction To Programming - Variables (Chapt 6) u In JavaScript & programming languages varaibles are used to remember and manipulate values: This includes – Number values u x=2 u y=3.14 – Text Values u Z=“John Doe” u X=“Happy” u With Numbers can create simple expressions: A=2+2 B=A+3

18. AdvWeb-18/29 Introduction To Programming - Variables (Chapt 6) u What would the following do? A First Page A Simple Header This is not a very interesting page X=3 y=2 z=2+X+Y document.write(”Z=”, Z); See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples http://www.depaul.edu/~dlash/extra/Advwebpage/examples 2_example2.html

19. AdvWeb-19/29 Introduction To Programming - Variable Names (Chapt 6) Some rules on Variable Names: u 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 u They cannot contain a space. – Response_time is OK – response time is not a good variable name u No limit on the length of variable names but must fit into1 line. u These are valid variable names: – total_number_of_fish – LastInvoiceNumber – temp1 – a – _variable1

20. AdvWeb-20/29 Introduction To Programming - Variable Types (Chapt 6) u JavaScript takes care of converting between the types: A First Page A Simple Header This is not a very interesting page X=3.14 Y=2 Z=2+X+Y document.write("Z=", Z); http://www.depaul.edu/~dlash/extra/Advwebpage/examples 2_example3.html

21. AdvWeb-21/29 Expressions Using *, /, +, - u Use *, /, +, - for expressions – x=x*1 – x=x/y – z=z-1 u Use parenthesis to clarify precedence – x=(x*2)/2 – x=(x+2+3)/(14-2) u 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. AdvWeb-22/29 Precedence Example A First Page A Simple Header This is not a very interesting page X=2 Y=4 W=8 Z1=X+Y/W Z2=(X+Y)/W Z3=X*Y/W document.write("Z1=", Z1, " "); document.write("Z2=", Z2, " "); document.write("Z3=", Z3, " "); http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example4.html

23. AdvWeb-23/29 Remainder and Other Stuff u Other Remainder Uses the % operator – 3%4; - put remainder of 3/4 in lines u Here is another example: A First Page A Simple Header This is not a very interesting page X=2 Y=4 W=8 Z1=W%(X+Y) Z2=(X*Y)%W document.write("Z1=", Z1, " "); document.write("Z2=", Z2, " "); http://www.depaul.edu/~dlash/extra/Advwebpage/example/2_example5.html

24. AdvWeb-24/29 Other Stuff u What does this code do? A First Page A Simple Header This is not a very interesting page X=2 Y=4 W=8 Z1=W%(X+Y) Z2=(Z3)/8 document.write("Z1=", Z1, " "); document.write("Z2=", Z2, " "); > http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example6.html

25. AdvWeb-25/29 Simple String Manipulation u What does this code do? A First Page A Simple Header This is not a very interesting page X="Apple" Y="Jack" Z1=X+Y Z2=X+" "+Y document.write("Z1=", Z1, " "); document.write("Z2=", Z2, " "); http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_example7.html

26. AdvWeb-26/29 Operator Table

27. AdvWeb-27/29 2 Other Very Useful Methods Window Alert - – window.alert("your message here"); u writes an alert pop-up box to end-user from browser. For Example Using Variables window.alert("Hey welcome to Advance Website!"); window.alert("Thats right I said ADVANCED Website Design"); http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_aler t1.html

28. AdvWeb-28/29 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. Using Varaibles 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 ); u http://www.depaul.edu/~dlash/extra/Advwebpage/2_prompt1.h tml http://www.depaul.edu/~dlash/extra/Advwebpage/2_prompt1.h tml

29. AdvWeb-29/29 Example 5.2 From Book Customized home page first = window.prompt("Enter your first name."); last = window.prompt("Enter your last name."); title = window.prompt("Enter a page title."); document.write(" " + title + " "); document.write(" By " + first + " " + last + " "); This page is under construction. u See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_ l ist5-2.html http://www.depaul.edu/~dlash/extra/Advwebpage/examples/2_ l ist5-2.html