1 / 121

JavaScript Programming: Introduction, Syntax, and Variables

Learn the basics of JavaScript programming, including syntax, variables, and functions. Discover how to write code and work with different data types.

pittman
Download Presentation

JavaScript Programming: Introduction, Syntax, and Variables

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 การเขียนโปรแกรมเว็บ

  2. Introducing JavaScript • Server-side programs are placed on the server that hosts a Web site • Can be problematic • Client-side programming runs programs on each user’s computer New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  3. Client-Side Programming Introducing JavaScript Server-Side Programming New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  4. 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 Dynamic HTML, 4e

  5. Comparing Java and JavaScript New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  6. 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 Dynamic HTML, 4e

  7. Working with the Script Element • A JavaScript program can either be placed directly in a Web page file or saved in an external text file • Insert a client-side script in a Web page when using the script element <script type="mime-type"> script commands </script> New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  8. Inserting JavaScript into a Web Page File • Each statement—also known as a command—is a single line that indicates an action for the browser to take • The semicolon notifies the browser that it has reached the end of the statement New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  9. Writing Output to the Web Page • An object is any item—from the browser window itself to a document displayed in the browser to an element displayed within the document • A method is a process by which JavaScript manipulates or acts upon the properties of an object New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  10. 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 Dynamic HTML, 4e

  11. Understanding JavaScript Syntax • JavaScript is case sensitive • Ignores most occurrences of extra white space • Do not break a statement into several lines • The + symbol used in this command combines several text strings into a single text string New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  12. Working with Variables • A variable is a named item in a program that stores information • Most JavaScript programs use variables to represent values and text strings New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  13. 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 Dynamic HTML, 4e

  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 Dynamic HTML, 4e

  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 Dynamic HTML, 4e

  16. Working with Variables and Data • JavaScript is a weakly typed language • The + symbol can be used with either numeric values or text strings var total = 5 + 4; var emLink = "cadler" + "@" + "mpl.gov"; New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  17. Creating a JavaScript Function • A function is a collection of commands that performs an action or returns a value • A function name identifies a function • Parameters are values used by the function • The function is executed only when called by another JavaScript command function_name(parameter values) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  18. Creating a JavaScript Function New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  19. Creating a Function to Return a Value • For a function to return a value, it must include a return statement function function_name(parameters){ JavaScript commands return value; } New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  20. Accessing an External JavaScript File • The code to access an external script file is: <script src="url" type="mime-type"></script> • Place all script elements that reference external files in the document head New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  21. Accessing an External JavaScript File New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  22. Commenting JavaScript Code • Commenting your code is an important programming practice// comment text New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  23. Using Comments to Hide JavaScript Code <script type="text/javascript"> <!--Hide from nonJavaScript browsers JavaScript commands // Stop hiding from older browsers --> </script> New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  24. Debugging Your JavaScript Programs • Debugging is the process of searching code to locate a source of trouble • There are three types of errors: • Load-time errors • Run-time errors • Logical errors New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  25. Debugging Your JavaScript Programs • Modular code entails breaking up a program’s different tasks into smaller, more manageable chunks • An alert dialog box is a dialog box generated by JavaScript that displays a text message with an OK buttonalert(text); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  26. Debugging Your JavaScript Programs • Microsoft offers the Microsoft Script Debugger • Firefox also provides the Firefox Error Console New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  27. Debugging Your JavaScript Programs New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  28. Introducing onevent Processing • An event is an action that occurs within a Web browser or Web document. • An event handler is a statement that tells browsers what code to run in response to the specified event. • Script New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  29. Introducing onevent Processing New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  30. Introducing onevent Processing • To insert an event handler as an element attribute, use the syntax <element onevent = "script"> ... where element is the Web page element, event is the name of an event associated with the element, and script is a command to be run in response to the event New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  31. Working with Date Objects • Date objects contain information about a specified date and time • To store a date and time in a variable, use the JavaScript command variable = new Date("month day, year hours:minutes:seconds") where variable is the name of the variable that contains the date object, and month, day, year, hours, minutes, and seconds indicate the date and time to be stored in the object. • Time values are entered in 24-hour time New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  32. Working with Date Objects • To store a date and time using numeric values, use the JavaScript command variable = new Date(year, month, day, hours, minutes, seconds) where year, month, day, hours, minutes, and seconds are the values of the date and time, and the month value is an integer from 0 to 11, where 0 = January, 1 = February, and so forth. • Time values are entered in 24-hour time. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  33. Working with Date Objects • To create a date object containing the current date and time, use the following JavaScript command: variable = new Date() New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  34. Working with Date Objects • Date methods can be used to retrieve information from a date object or to change a date object’s value New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  35. Working with Date Objects New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  36. Working with Operators and Operands • An operator is a symbol used to act upon an item or a variable within a JavaScript expression. • The variables or expressions that operators act upon are called operands. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  37. Working with Operators and Operands • Binary operators work with two operands in an expression. • Unary operators work with one operand. • Increment operators increase the value of the operand by 1. • x++; • Decrement operators decrease the value of the operand by 1. • x--; New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  38. Working with Operators and Operands • Assignment operators assign values to items. • Equal sign (=) • x = x + y • A common use of the += operator is to concatenate strings or add a value to an existing value of a variable New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  39. Working with Operators and Operands New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  40. Working with the Math Object and Math Methods • The Math object is an object that can be used for performing mathematical tasks and storing mathematical values. • Math methods store functions used for performing advanced calculations and mathematical operations such as: • Generating random numbers • Extracting square roots • Calculating trigonometric values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  41. Working with the Math Object and Math Methods New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  42. Working with the Math Object and Math Methods • The Math object also stores numeric values for mathematical constants. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  43. Controlling How JavaScript Works with Numeric Values • Some mathematical operations can return results that are not numeric values. • You cannot divide a number by a text string • Returns “NaN” • You cannot divide a number by zero • Returns “Infinity” • The isNaN function is a Boolean function that tests a value to see whether it is numeric or not. • The isFinite function is a Boolean function that checks for the value of Infinity. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  44. Controlling How JavaScript Works with Numeric Values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  45. Working with Conditional, Comparison, and Logical Operators • A conditional operator is a ternary operator that tests whether a certain condition is true or not. • A comparison operator is an operator that compares the value of one expression to another. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  46. Working with Conditional, Comparison, and Logical Operators • Logical operators allow you to connect several expressions New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  47. Running Timed Commands • A time-delayed command is a JavaScript command that is run after a specified amount of time has passed. setTimeout(“command”, delay); clearTimeout(); • A time-interval command instructs the browser to run the same command repeatedly at specified intervals. setInterval (“command”, interval); clearInterval(); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  48. Working with Arrays • An array is a collection of data values organized under a single name • Each individual data value is identified by an index • To create an array: • var array = new Array(length); • To populate an array: • array[i] = value; • var array = [values]; • To create and populate an array: • var array = new Array(values); New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  49. Specifying Array Length • To determine the size of an array, use the property: • array.length • To add more items to an array, run the command: • array[i] = value; • To remove items from an array, run the command: • array.length = value; New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  50. Using Array Methods New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

More Related