1 / 33

Working with JavaScript

Working with JavaScript. Tutorial 10. Creating a Programmable Web Page for North Pole Novelties. Objectives. Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page. Objectives. Working with Variables and Data Working with Dates

alejandrom
Download Presentation

Working with JavaScript

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. Working with JavaScript Tutorial 10 Creating a Programmable Web Page for North Pole Novelties New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  2. Objectives • Introducing JavaScript • Inserting JavaScript into a Web Page File • Writing Output to the Web Page New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  3. Objectives • Working with Variables and Data • Working with Dates • Working with Expressions and Operators • Creating JavaScript Functions • Creating the XmasDays Function New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  4. Objectives • Working with Conditional Statements • Using Arrays • Working with Program Loops • Debugging Your JavaScript Programs New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  5. Introduction to JavaScript • Server-side Programs pose problems • Client-side Programs were developed to run programs and scripts on the client side of a Web browser New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  6. The Development of JavaScript • JavaScript is a subset of Java • Differences between Java and JavaScript: • Java is a compiled language • JavaScript is an interpreted language New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  7. Comparing Java and JavaScript New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  8. The Development of JavaScript • Jscript is a version of JavaScript supported by Internet Explorer • The European Computer Manufacturers Association (ECMA) develops scripting standards • The standard is called ECMAScript but browsers still generally call is JavaScript New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  9. Inserting JavaScript into a Web Page File • Outline the main tasks you want the program to perform first • A JavaScript program can either be placed directly in a Web page file or saved in an external text file New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  10. Inserting JavaScript into a Web Page File • Insert a client-side script in a Web page when using the script element • Comments are useful for hiding scripts from older browsers • Specify alternative content using the nonscript element for browsers that don’t support scripts (or have their script support disabled) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  11. Writing Output to the Web Page • An object-oriented programming language writes the output by manipulating tasks • An action you perform on an object is called a method New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  12. Writing Output to the Web Page • To write text to a Web page, use the following JavaScript commands: document.write(“text”); or document.writeln(“text”)’ Where text is the content to be written to the page. The doucment.write() and document.writeln() methods are identical, except that the document.writeln() method preserves any line breaks in the text string. New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  13. Working with Variables and Data • A variable is a named item in a program that stores information • Variable names have restrictions (see pages HTML 531-532) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  14. Working with Variables and Data • JavaScript variable types: • Numeric variables • String variables • Boolean variables • Null variables • You must declare a variable before using it New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  15. Working with Variables and Data • Numeric variable- any number, such as 13, 22.5, etc • Can also be expressed in scientific notation • String variable- any group of text characters, such as “Hello” or “Happy Holidays!” • Must be enclosed within either double or single quotations (but not both) • Boolean variable- accepts only true and false values • Null variable- has no value at all New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  16. Declaring a JavaScript Variable • You can declare variables with any of the following JavaScript commands: var variable; var variable = value; variable = value; Where variable is the name of the variable and value is the initial value of the variable. The first command creates the variable without assigning it a value; the second and third commands both create the variable and assign it a value. New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  17. Working with Dates • Create a date object to store date information Date Methods New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  18. Working with Expressions and Operators • Expressions are JavaScript commands that assign values and variables • Operators are elements that perform actions within expressions • Arithmetic operators: perform simple mathematical calculations • Binary operators: work on two elements in an expression • Unary operators: work on only one variable • Increment operators: can be used to increase the value of a variable by 1 • Assignment operators: used to assign values in expressions New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  19. Working with Expressions and Operators • The Math object is a JavaScript object used for calculations other than simple math New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  20. Creating JavaScript Functions • A function is a series of commands that perform an action or calculates a value • A function name identifies a function • Parameters are values used by the function New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  21. Creating JavaScript Functions • A group of commands set off by curly braces is called a command block. Command blocks exist for other JavaScript structures in addition to functions. New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  22. Working with Conditional Statements • Conditional statements are commands that run only when specific conditions are met • Conditional statements require a Boolean expression • you need one of the following operators to create a Boolean expression: • Comparison operator • Logical operator • Conditional operator New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  23. Using Arrays • An array is an ordered collection of values referenced by a single variable name var variable = new Array (size); Where variableis the name of the array variable and sizeis the number of elements in the array New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  24. Working with Program Loops • A program loop is a set of instructions that is executed repeatedly • Use program loops to configure a group of commands to be executed a set number of times • The loop uses a counter to track the number of times the command block has been run New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  25. Working with Program Loops Creating a For loop New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  26. Working with Program Loops Nesting a For loop New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  27. Working with Program Loops Creating a While loop New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  28. Working with Program Loops Nesting a While loop New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  29. Debugging Your JavaScript Programs • Three types of errors: • Load-time errors (occurs when the script is loading) • Run-time errors (occurs when the being executed) • Logical errors (free from syntax and structural mistakes, but result in incorrect results) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  30. Common Mistakes • You need to debug your program to fix the mistakes • Common mistakes include: • Misspelling a variable name • Mismatched parentheses or braces • Mismatched quotes • Missing quotes • Using ( instead of [ • Using = in place of == New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  31. Debugging Tools and Techniques • To avoid making mistakes and quickly located those you do make: • Write modular code • Use the Microsoft Script Debugger to debug (for use with Internet Explorer) • Use the Netscape JavaScript Console to debug (for use with Netscape) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  32. Tips for Writing Good JavaScript Code • Use good layout to make your code more readable. Indent command blocks to make them easier to read and to set them off from other code • Use descriptive variable names to indicate the purpose of your variables • Be careful how you use uppercase and lowercase letters in your code, because JavaScript commands and names are case-sensitive New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  33. Tips for Writing Good JavaScript Code • Add comments to your code to document the purpose of each script • Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables • Create customized functions that can be reused in different scripts. Place your customized functions in external files to make them available to your entire Web site New Perspectives on HTML, XHTML, and DHTML, Comprehensive

More Related