1 / 54

JavaScript (Tutorial 10)

JavaScript (Tutorial 10). ISC325. Java Applets and JavaScript. Java applets Short programs that make Web pages more dynamic and interactive Sent as a separate file, along side the HTML document Applets don’t always work well with all browsers Applets must be enabled in browser

pooky
Download Presentation

JavaScript (Tutorial 10)

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. JavaScript (Tutorial 10) ISC325

  2. Java Applets and JavaScript • Java applets • Short programs that make Web pages more dynamic and interactive • Sent as a separate file, along side the HTML document • Applets don’t always work well with all browsers • Applets must be enabled in browser • Written using JDK or Visual J++

  3. Java Applets and JavaScript • JavaScript • Inserted directly into the HTML code • Frequent uses • Verify form information • Create rollover buttons • Advertising banners • Pop-up windows

  4. Introduction to JavaScript • JavaScript is an interpreted programming or script language from Netscape. • JavaScript is used in Web site development to such things as: • automatically change a formatted date on a Web page • cause a linked-to-page to appear in a popup window • cause text or a graphic image to change during a mouse rollover Resource: www.whatis.com

  5. Applets and Java Interpreters This figure shows a web browser that has a Java interpreter runs the program locally on the user’s computer, freeing up the Web server for other purposes. • Compiling is the process by which a program is converted from a text file of code into an executable file called an applet • To simplify this complex process, developers from Netscape and Sun Microsystems created a subset of Java called JavaScript.

  6. Differences between Java and JavaScript • There are several important differences between Java and JavaScript: • users don’t need to work with a developers kit to compile a JavaScript program • JavaScript commands can be inserted directly into an HTML file rather than being placed in a separate program file • JavaScript may not be as powerful a computing language as Java, but it is simpler to use • JavaScript meets the needs of most users who want to create programmable Web pages

  7. Example of Web Site using JavaScript

  8. Writing a JavaScript Program • JavaScript programs can either be placed • directly into the HTML file or • can be saved in external files. • You can place JavaScript anywhere within the HTML file: within • the <HEAD> tags or • the <BODY> tags

  9. Using the <SCRIPT> Tag <Script src=“url” Type=“text/javascript”></Script> • SRC property is required only if you place your program in a separate file <script type=“text/javascript”> script commands and comments </script>

  10. Hiding Script from Older Browsers

  11. Figure 10-5 p. 528 • Open the URL: http://www.cs.oswego.edu/~ychoi/ISC325/tutorial.10 • Download all files on your desktop • Use a text editor (notepad) to open npntxt.htm • Insert the script element (p. 528)

  12. Sending Output to a Web Page Figure 10-6 (p.530)

  13. The document.write() and document.writeIn() Methods • to display the text “Only 45 days until Christmas” in a Web page: document.write (“Only 45 days until Christmas”); • an object (the page that the Web browser is accessing) • action that can be applied to the document • The term “method” means an action applied to something existing on a Web page or in the Web browser.

  14. JavaScript Objects

  15. DOMDocument Object Model • JavaScript object hierarchy

  16. Sending Output to a Web Page • a text string is enclosed within double or single quotation marks • can include HTML tags in the text string, e.g., document.write (“<H3>News Flash!</H3>”) • most JavaScript commands and names are case-sensitive, e.g., “Document.Write( )” doesn’t work • each JavaScript command line ends with a semicolon;

  17. Working with Variables and Data • A variable is a named element in a program – it stores information • Variables are given values through assignment operators (=) – Year=2003; • Display this value on the Web page: document.write(Year); • You can combine text with the variable value by using a plus symbol (+) – document.write (“The year is ” + Year);

  18. Working With Variables and Data • Restrictions apply to names you assign to variables: • the first character must be either a letter or an underscore (_) • the remaining characters can be letters, numbers, or underscores • variable names cannot contain spaces • You cannot use words that JavaScript has reserved for other purposes • Variable names are case-sensitive

  19. Types Of Variables • Numbers, e.g., 15, 22.5, • can be expressed in scientific notation, e.g., 5.1E2 for 5.1 x 102 , or 510 • Strings: groups of characters, e.g., “Hello” • must be enclosed within double or single quotation marks • Boolean variables: true or false • Null variables: No value at all

  20. Declaring a Variable • You declare a variable in JavaScript either • var Month; • var Month=“December”; • Month = “December”;

  21. p. 533 • Follow the direction on p. 533, Figure 10-7

  22. Working With Dates • To store a date and time in a variable, use: • variable = new Date(“month, day, year, hours:minutes:seconds”); - or - • variable = new Date (year, month, day, hours, minutes, seconds); • Examples: • DayVariable = new Date(“April, 4, 2003, 16:40:00”); • DayVariable = new Date(2003, 4, 4, 16, 40, 0);

  23. Working With Dates • Use the following command to return the current date and time: • Variable = new Date ( ); • var Today=new Date(“March 27, 2003”); Enter a value for the Today variable (p. 535)

  24. Working with Dates • Create a date object to store date information. Date Methods p. 536

  25. Retrieving the day, the month, the year Values • Year = DateObject.getFullYear( ); • Month = DateObject.getMonth( ); • DayValue = DateObject.getDate ( ); To extract the day, month, and year values on your code: p. 537, Figure 10-11

  26. Working With Expressions and Operators • Expressions: JavaScript commands that assign values to your variables. • var DaysLeft=999; • Expressions can also contain operators: • + operator • var ThisMonth = Today.getMonth( )+1; • document.write(“Only ” + DaysLeft + “ days until Christmas”); Follow the direction on Figure 10-12 (p. 538)

  27. Arithmetic Operators

  28. Assignment Operators

  29. Assignment Operators

  30. Creating JavaScript Functions • A function is a series of commands that either performs an action or calculates a value • A function consists of: • The function name • Parameters • A set of commands

  31. Creating JavaScript Functions • To create a user-defined function: function function_name(parameters) { JavaScript commands } • To run, or call, a user-defined function: function_name (values);

  32. Performing an Action with a Function • Define a function: function ShowDate(date) { document.write(“Today is ” + date + “<br>”); } • To run a function (calling a function): var Today = “11/30/2006”; ShowDate(Today); Result displayed on the web page: Today is 11/30/2006

  33. Returning a Value from a Function • Define a function: function Area(Width, Length) { var Size = Width*Length; return Size; } • Use this function: • var x=8; • var y=6; • var z=Area(x, y); • What’s the result of this function?

  34. Placing a Function in an HTML File • The function definition must be placed before the command that calls the function • It is recommended that: • Place all of the function definitions between the <HEAD> and </HEAD> tags

  35. Example of Web Pagewith “Days Until Christmas” We need to create a customized Function: The XmasDays function

  36. XmasDays function • One parameter (CheckDay) • Contains a date object • The function returns one value: the number of days between the date stored in CheckDay and December 25 of the current year. • The function has three variables: XYear: The current year XDay: The date of Christmas. The initial value of this variable is the date “December 25, 2006.” DayCount: The number of days between current date and December 25. This is the value that is returned by the function.

  37. Setting date values Function XmasDays (CheckDay) { Var Xyear=CheckDay.getFullYear ( ); Var Xday=new Date (“December, 25, 2006”); Var DayCount=Xday – Checkday; } We need to change the initial value of the Xday variable: Xday.setFullYear(Xyear);

  38. Setting Date Values (p. 545) This figure shows additional JavaScript functions that allow you to set or change the values of date objects.

  39. Var DayCount = (Xday – CheckDay)/(1000*60*60*24) DayCount = Math.round (DayCount); Return DayCount;

  40. p. 546-547 • Create the XmasDays() function

  41. Comparison Operators

  42. Logical Operators • Note: Use logical and comparison operators when you want your program to act different under different conditions

  43. Using the If Statement • To create a command block that runs only if a certain condition is met, use the following syntax: if(condition) { JavaScript Commands; } • where condition is an expression that is either true or false. If condition is true, the command block is run

  44. The If Statement: Example if(Day==“Friday”) { document.write(“Have a nice weekend!”); } • Note: using the == operator, not = operator. The = operator is used only for assigning values, not for testing values

  45. Using the If … Else Statement • To choose between two command blocks, use the following syntax: if(condition){ JavaScript Commands if true; }else{ JavaScript Commands if false; }

  46. The If … Else Statement: Example if(Day==“Friday”){ document.write(“Have a nice weekend!”); } else { document.write(“Good morning”).; }

  47. p. 553 • Follow the direction from 2 to 6.

  48. Using Arrays • Original display of a date Today is 11/30/2006 • How can it be displayed in a different format Today is November 30, 2006

  49. Using Arrays • An array is an ordered collection of values referenced by a single variable name. • The syntax for creating an array variable is: var variable = new Array(size); • variable is the name of the array variable • size is the number of elements in the array (optional) • Once an array is created, you create values for each individual element in the array.

  50. Working With Arrays • To create an array variable, use: var variable = new Array(); • To populate the array with values, use: variable[n]=value; - or - var variable = new Array(content);

More Related