Programming with JavaScript

1. Programming with JavaScript Maureen Smith Professor, Saddleback College CIM 271B - Tutorial 8

2. Objectives • In this tutorial you will: • Learn about the features of JavaScript • Send output to a Web page • Work with variables and data • Work with expressions and operators • Create a JavaScript function • Work with arrays and conditional statements • Learn about program loops

3. Session 8.1 • In this session you will learn about the development and features of JavaScript • You’ll learn how to insert a JavaScript program into an HTML file and how to hide that program from older browsers that don’t support JavaScript • Finally, you’ll write a simple JavaScript program to send customized output to a Web page

4. Introduction to JavaScript • So far you’ve created only static Web pages • Content and layout don’t change • Now will create Web pages whose content and layout can be modified using built-in programs

5. Server-Side and Client-Side Programs • Have learn about accessing programs involving forms and CGI scripts • Program was stored on and run off server • Some disadvantages: • Users have to be connected to the Web server to run CGI script • Only the programmer of the script can alter the script itself • System administrator can place limitations on how users access the script

6. Also poses problems for system administrator who has to be concerned about users continually accessing the server, slowing it down, and potentially overloading the system • Prospect of even more users accessing server could mean costly machine upgrades to handle increased usage

7. These issues led to development of programs, or scripts, that could be run from browser on user’s own computer (client) • Client-side programs solve many of the problems associated with CGI scripts • Computing is distributed over the Web so no one server is overloaded with handling programming requests

8. Web pages containing client-side scripts can be tested locally without first uploading them to server • Client-side program is likely to be more responsive to user (no wait for it to be sent over Internet) • However, client-side programs can never completely replace CGI scripts

9. If you need to run a search form or process a purchase order, must be run from central computer because it will most likely contain the database

10. The Development of Java and JavaScript • Client-side programming came from unexpected sources • In early 90s, before Web became hugely popular, programmers at Sun Microsystems saw a day when even common consumer devices (refrigerators, garage door openers) would all be networked and capable of being controlled by a single operating system

11. They began to develop such an operating system and based it on a language called Oak • Oak was designed to be extremely reliable and flexible • Project did not succeed, but Oak worked so well that Sun realized that it could be used on Internet • Was modified in 1995 and renamed Java

12. Sun also released a product called HotJava which could run programs written in Java • HotJava acted as a Java interpreter, which means that it was able to interpret a Java program and run it for the user • Idea was that Java programs would run inside Java interpreters, and because Java interpreters could be created for different operating systems, users could run Java in any environment

13. Including UNIX, Windows, DOS, Macintosh operating systems • Just as Web pages are designed to be platform-independent, so was Java • Advantages of Java were immediately apparent • Netscape incorporated a Java interpreter into Navigator 2.0 making HotJava unnecessary for Navigator users

14. IE followed suit, beginning with version 3.0 • With Java, user downloads a program, called an applet, along with the Web page • Browser, with built-in Java interpreter, is able to run applet from user’s machine, freeing up server for other purposes • One problem was that nonprogrammers found it difficult to learn and use

15. Also needed access to JDK (Java Developer’s Kit) first to create the programs and compile them • Compiling is process by which a program is converted from readable text file into an executable file • To simplify process, a team of developers from Netscape and Sun created JavaScript--a subset of Java with several differences

16. Don’t need to work with developer’s kit or compile a JavaScript program • JavaScript commands can be inserted directly into an HTML file rather than being placed in a separate applet • Saves browser from having to download a separate file when page is accessed • Not as powerful as Java, but simpler to use and meets needs of most people

17. Figure 8-3 highlights differences between Java and JavaScript • Several versions of JavaScript have been developed; most recent is 1.3 • Figure 8-4 lists versions and describes how Netscape and IE support them • IE actually uses a variation of JavaScript called JScript

18. For all practical purposes, JScript is identical to JavaScript, but some JavaScript commands are not supported in JScript, and vice versa • Should always test JavaScript programs on several browsers • Like HTML and CSS, development of a JavaScript standard has been turned over to an international body called ECMA

19. European Computer Manufacturers Association • Standard developed by them is called ECMAScript, though browsers will still use common name JavaScript • Latest version is ECMA-262 which most major browsers support, though some areas have not been implemented • Other client-side programming languages are also available

20. Can use IE scripting language, VBScript • Because of the nearly universal support of JavaScript, will use this language in your work for North Pole Novelties

21. Running JavaScript • Task is to use JavaScript to create a page that calculates remaining days until Christmas for North Pole Novelties • Andrew wants this info to appear on home page, shown in Figure 8-5, so that customers know how long they have to make their holiday purchase • Home page shows number of days remaining until Christmas

22. But this info has been explicitly entered into HTML file and works only if the date is June 27, 2001 • Andrew wants this info to be calculated automatically for current date, whatever that might be • And if the current date is between December 25 and December 31, wants page to display “Happy Holidays from North Pole Novelties”

23. First task is to create and run a simple JavaScript program that sends output to Web page • A JavaScript program is run by browser either when the page is first loaded, or in response to an event such as clicking a button or hovering over a hyperlink • Will create a program that is run when browser loads home page

24. There are two ways to create a JavaScript program • Can place commands directly into HTML file • Can also place commands in an external file • Placing program in an external file allows you to hide the program code from user, whereas source code placed directly in HTML file can be viewed by anyone

25. However, an external file must be stored on server--added task of transferring both the Web page and JavaScript file to user • Generally, the more complicated and larger the JavaScript program, the more likely you are to place it in an external file • Will enter the code directly into the HTML file

26. When you place JavaScript code directly into the HTML file, need some way of distinguishing it from text that you want to appear on page • Otherwise browser might start displaying your JavaScript commands • So this with the <SCRIPT> tag

27. Using the <SCRIPT> Tag • <SCRIPT> tag is a two-sided tag that identifies beginning and end of a client-side program <SCRIPT SRC=URL LANGUAGE=“language”> Script commands and comments</SCRIPT> • where URL is URL or filename of external document containing program code and language is language program is written in

28. SRC property is required only if you place program in separate file • LANGUAGE property is needed so browser knows which interpreter to use • Default LANGUAGE is JavaScript, and if you omit this property, browser will assume program is written in JavaScript

29. Program can be placed anywhere within HTML file • Either within <HEAD> tags or <BODY> tags • Many programmers favor placing their programs between <HEAD> tags in order to separate programming code from content • Others favor placing programs in page’s body, at location where output is generated and displayed; we will do both

30. Hiding Your Script from Older Browsers • Older browsers that do not support JavaScript present a problem • If they encounter JavaScript, will attempt to display them on page, treating script as part of content • To avoid this, can hide script using comment tags • Have already used comment tags

31. JavaScript supports similar comment tags, using a set of double slashes (//) at beginning of a line to tell browser to ignore line and not interpret it as a JavaScript command • By combining HTML comment tag and JavaScript comment symbols, can hide program from browsers that don’t support <SCRIPT> tag

32. <SCRIPT LANGUAGE=“JavaScript”> <!-- Hide this script from browsers that don’t support JavaScript JavaScript commands // Stop hiding from other browsers --> </SCRIPT> • When older browser encounters this code, first ignores <SCRIPT> tag

33. Next line it sees is start of HTML comment tag which doesn’t close until > symbol in second-to-last line • So everything in JavaScript program is ignored • Final </SCRIPT> tag is similarly ignored • Browser that supports JavaScript recognizes the <SCRIPT> tag and will ignore any HTML tags found between on and off tags

34. Passes the comment tag in second line and processes JavaScript program as written • JavaScript comment (starting with //) is there to help other users understand and interpret code • Ready to insert code in order to hide the script from older browsers • Delete HTML tags already in file that has date info because will eventually replace them with a program that works for any date

35. See NPN.html • With <SCRIPT> tags and comments in place, next task is to write a JavaScript program that sends output to page • Because you haven’t yet learned how to either determine current date or calculate number of days until Christmas, this program will display a simple text string

36. Sending Output to a Web Page • JavaScript provides two methods to display text: • The document.write() and document.writeln() method document.write(“text”); document.writeln(“text”); • where text is a string of characters you want to appear on page

37. Following will display “Only 45 days until Christmas” document.write(“Only 45 days until Christmas”); • Both methods reflect the object-oriented nature of JavaSript • Here “document” is an object (the page that browser is accessing) and “write” or “writeln” are actions that can be applied to the document

38. For now, when term “method” is used, understand that it means an action applied to something existing on page or in browser • Most of the time will use document.write() method • Document.writeln() method differs from document.write() in that it attaches a carriage return to end of each text string sent to page

39. Becomes relevant only when text string is preformatted with <PRE> tag for which browser recognizes existence of carriage returns • Text string created with document.write() method is enclosed within double or single quotation marks • Allows you to include single/double quotation marks as part of text string

40. document.write(“Come meet David ‘Bud’ Davis”); • will display text Come meet David ‘Bud’ Davis (including single quotation marks) • Can display double quotation marks by enclosing text string within single quotation marks • Not limited to displaying only text

41. Can also include HTML tags in text string to format text and insert images document.write(“<H3>News Flash!</H3>”); • displays text News Flash! formatted with <H3> header tag • Most JavaScript commands and names are case-sensitive • Browser will not recognize “Document.Write()” and give error message

42. Each JavaScript command line ends with a semicolon to distinguish it from next command line in program • Sometimes semicolon is optional, but should still use it to make code easier to follow • Will now add document.write() method to JavaScript program just created in NPN.html file

43. Will create a simple program to display the number of days until Christmas, assuming that the current date is December 15, 2001 • See NPN_10.html • Have completed first JavaScript program! • Does nothing more than display text you could have entered directly, but it’s a program you’ll build upon to perform more sophisticated tasks

44. Session 8.2 • In this session you will learn some of the fundamentals of JavaScript language • Will learn how to create variables and how to work with different data types • Will learn about expressions and operators and how to use them to change the variable values • Finally, will create your own JavaScript function and use it in a program

45. Working with Variables and Data • Have inserted text using document.write() method • Had to specify text explicitly; program did not more than as if you had placed the text directly • Next task is to have your program determine current date and display it on the page • To do this, will create a JavaScript variable

46. A variable is a named element used to store and retrieve info • Useful because they can store info created in one part of the program and use that info in another part • Could create a variable named “Year” to store value of the current year and then use the Year variable at different locations in your program • To assign value 2001 to variable “Year”: Year=2001;

47. With Year variable assigned a value, can use document.write() method to display this value: document.write(Year); • This code would cause text “2001” to appear • Can also combine text with the variable value by using a plus symbol (+)

48. document.write(“The year is “ + Year); • This will display text The year is 2001 • In your program you won’t explicitly enter date info • Instead, your program will determine current date and year for you and store that info in a variable so you can use date from variable later in the program

49. For now will learn about variables by entering a fixed value • Following restrictions apply to variable names: • First character must be either a letter or an underscore (_) • Rest of the characters can be letters, numbers, or underscores • Variable names cannot contain spaces

50. Cannot use words that JavaScript has reserved for other purposes • Cannot name a variable “document.write” • Variable names are case-sensitive • If your JavaScript isn’t working properly, might be because you did not match case