1 / 71

JAVASCRIPT

JAVASCRIPT. Computer Science & Engineering. JavaScript and Client-Side Scripting. When HTML was first developed, Web pages were static Static Web pages cannot change after the browser renders them HTML and XHTML could only be used to produce static documents. JavaScript

nevina
Download Presentation

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. JAVASCRIPT Computer Science & Engineering

  2. JavaScript and Client-Side Scripting • When HTML was first developed, Web pages were static • Static Web pages cannot change after the browser renders them • HTML and XHTML could only be used to produce static documents. • JavaScript • Client-side scripting language that allows Web page authors to develop interactive Web pages and sites Computer Science & Engineering

  3. JavaScript and Client-Side Scripting • Client-side scripting: • Scripting language that runs on a local browser (on the client tier) • JavaScript gives you the ability to: • Turn static Web pages into applications such as games or calculators • Change the contents of a Web page after a browser has rendered it • Create visual effects such as animation • Control the Web browser window itself Computer Science & Engineering

  4. The <script> Element • Scripts • JavaScript programs contained within a Web page • <script> element • Tells the Web browser that the scripting engine must interpret the commands it contains. • The type attribute tells the browser which scripting language and which version of the scripting language is being used. Computer Science & Engineering

  5. Understanding JavaScript Objects • Object • Programming code and data that can be treated as an individual unit or component • Procedures • Individual statements used in a computer program grouped into logical units • Used to perform specific tasks • Methods • Procedures associated with an object For example: loan.calcPayments(); Computer Science & Engineering

  6. Understanding JavaScript Objects • Property • Piece of data associated with an object • Assign a value to a property using an equal sign. loan.interest = .08; • Argument • Information that must be provided to a method. • Providing an argument for a method is called passing arguments loan.calcPayments(800); Computer Science & Engineering

  7. The write() and writeln() • Document object represents the content of a browser’s window • You create new text on a Web page with the write() method or the writeln() method of the Document object • Both methods require a text string as an argument. • Text string or literal string:text that is contained within double or single quotation marks. document.write(“Welcome to Javascript!"); Computer Science & Engineering

  8. Case Sensitivity in JavaScript • JavaScript is case sensitive. • Within JavaScript code, object names must always be all lowercase. Computer Science & Engineering

  9. Comments to a JavaScript Program • Comments • Nonprinting lines that you place in your code to contain various types of remarks • Line comment • Hides a single line of code • Add two slashes // before the comment text • Block comments • Hide multiple lines of code • Add /* before the first character you want included in the block and */ after the last character in the block Computer Science & Engineering

  10. Structuring JavaScript Code • When you add JavaScript code to a document, you need to follow certain rules regarding the placement and organization of that code • The following sections describe some important rules to follow when structuring JavaScript code. • Include as many script sections as you like within a document. • When you include multiple script sections in a document, you must include a <script> element for each section. Computer Science & Engineering

  11. Placing JavaScript in the Document • You can place <script> elements in either the document head or document body • Good idea to place as much of your JavaScript code as possible in the document head • Important to put JavaScript code in document head • When code performs behind-the-scenes tasks required by script sections in the document body Computer Science & Engineering

  12. Placing JavaScript in the Document <head> <Script language=”JavaScript”> Javascript Comments </script> </head> Computer Science & Engineering

  13. Placing JavaScript in the Document <HTML> <HEAD> <script language="javascript" > document.write(“What is your name? ”); </script> </HEAD> <BODY> content of page </BODY> </HTML> Computer Science & Engineering

  14. Creating a JavaScript Source File • JavaScript source file • Usually designated by the file extension .js • Does not contain a <script> element • To access JavaScript code saved in an external file, assign to the src attribute of the <script> element the URL of the JavaScript source file • Use a combination of embedded JavaScript code and JavaScript source files in your documents Computer Science & Engineering

  15. Creating a JavaScript Source File <Script SRC=”fileJavascript.js” Language="javascript" > JavaScript program </Script> Computer Science & Engineering

  16. Data Types and Operators • Variable • Specific location in computer’s memory • Before using a variable: • Write a statement that creates the variable and assigns it a name • Variable names are case sensitive myVariable, myvariable, MyVariable, and MYVARIABLE are all different variables Computer Science & Engineering

  17. Declaring and Initializing Variables • Use the reserved keyword var to create variables • To create a variable named myVariable: var myVariable; • Declaring a variable • Using a statement to create a variable • Initializing a variable • Assigning a specific value to it • Can be done when you declare the variable var variable_name = value; Computer Science & Engineering

  18. Declaring and Initializing Variables • Assignment operator • Equal sign (=) • Assigns the value on the right side of expression to the variable on the left side of expression. • Value assigned to a variable: • Literal string must be enclosed in quotation marks var myName = "Don“; • Numeric value is not enclosed in quotation marks. Computer Science & Engineering

  19. Displaying Variables • Can declare multiple variables using a single var keyword Ex: var customerName = "Don Gosselin", orderQuantity = 100, salesTax = .05; • Can assign value of one variable to another Ex: var salesTotal; var curOrder = 40; salesTotal = curOrder; Computer Science & Engineering

  20. Displaying Variables • To print a variable, pass variable name to document.write() or document.writeln() method Example: document.write("<p>Your sales total is $“ + salesTotal + ".</p>"); Computer Science & Engineering

  21. Modifying Variables • To change a variable’s value, use a statement with variable’s name, equal sign, and new value Example: var salesTotal = 40; document.write("<p>Your sales total is $" + salesTotal + ".</p>"); var shipping = 10; salesTotal = salesTotal + shipping; document.write("<p>Your sales total plus shipping is $" + salesTotal + ".</p>"); Computer Science & Engineering

  22. Modifying Variables Computer Science & Engineering

  23. Data Types • Data type • Category of information that a variable contains. • Primitive types • Data types that can be assigned only a single value. Computer Science & Engineering

  24. Data Types • JavaScript supports two numeric data types: • Integers and floating-point numbers • Integer • Positive or negative number with no decimal places • Floating-point number • Decimal places (or written in exponential notation) • Exponential notation, or scientific notation • Shortened format for writing very large numbers or numbers with many decimal places Computer Science & Engineering

  25. Boolean Values • Boolean value • Logical value of true or false • In JavaScript, words true and false indicate Boolean values • Example var repeatCustomer = true; var corporateDiscount = false; document.write("<p>Repeat customer: " + repeatCustomer + "</p>"); document.write("<p>Corporate discount: " + corporateDiscount + "</p>"); Computer Science & Engineering

  26. Boolean Values Computer Science & Engineering

  27. Arrays • Array: Set of data represented by a single variable name Computer Science & Engineering

  28. Declaring and Initializing Arrays • Element: each piece of data in an array • Example: Create an array named hospitalDepts[] that has 10 elements var hospitalDepts = new Array(10); Assign value to first element in: hospitalDepts[] hospitalDepts[0] = "Anesthesia"; Can assign value to elements when array is created hospitalDepts = new Array("Anesthesia", "Molecular Biology", "Neurology"); Computer Science & Engineering

  29. Accessing Element Information • To access an element’s value, include brackets and element index • Examples document.writeln(hospitalDepts[0]); // prints "Anesthesia" document.writeln(hospitalDepts[1]); // prints "Molecular Biology" document.writeln(hospitalDepts[2]); // prints "Neurology" Computer Science & Engineering

  30. Modifying Elements • To modify values in existing array elements, include brackets and element index • Examples hospitalDepts[0] = "Anesthesia"; // first element hospitalDepts[1] = "Molecular Biology"; // second element hospitalDepts[2] = "Neurology"; // third element Computer Science & Engineering

  31. The Number of Elements in an Array • Determining the Number of Elements in an Array • length property of Array class returns the number of elements in an array • Syntax array_name.length; Computer Science & Engineering

  32. The Number of Elements in an Array Example <script> var arr= new Array(); arr[0]= "thu hai"; arr[1]= "Thu ba"; arr[2]= "Thu tu"; arr[3]= "Thu nam"; arr[4]= "Thu sau"; arr[5]= "Thu bay"; for(i=0; i<=5; i++) document.write(arr[i]+ "<br>"); document.write(arr.length+ "<br>");//6 </script> Computer Science & Engineering

  33. Arithmetic Operators • Used to perform mathematical calculations • Addition, subtraction, multiplication, division, etc. Computer Science & Engineering

  34. Arithmetic Operators • Prefix operator • Placed before a variable • Postfix operator • Placed after a variable Computer Science & Engineering

  35. Assignment Operators Computer Science & Engineering

  36. Comparison and Conditional Operators Computer Science & Engineering

  37. Logical Operators • Logical operators • Compare two Boolean operands for equality Computer Science & Engineering

  38. Strings • Text string is text contained within double or single quotation marks • Can use text strings as literal values or assign them to a variable • Empty string • Zero-length string value • Valid value for literal strings Computer Science & Engineering

  39. String Operators • Operators used to combine two strings Concatenation operator (+) Example: var destination = "Jakarta"; var location = "Indonesia"; destination = destination + " is in " + location; Compound assignment operator (+=) var destination = "Jakarta"; destination += " is in Indonesia"; Computer Science & Engineering

  40. Escape Characters and Sequences Computer Science & Engineering

  41. Functions, Events, and Control Structures Computer Science & Engineering

  42. Working with Functions • Functions • Procedures similar to the methods associated with an object • Make it possible to treat a related group of JavaScript statements as a single unit • Must be contained within a <script> element Computer Science & Engineering

  43. Working with Functions • Syntax: function nameOfFunction(parameters) { statements; } • Parameter • Variable that is used within a function • Placed in parentheses following a function name • To execute a function, you must invoke, or call Computer Science & Engineering

  44. Working with Functions • return statement: Returns a value to the statement that called the function • Example function averageNumbers(a, b, c) { var sum_of_numbers = a + b + c; var result = sum_of_numbers / 3; return result; } Computer Science & Engineering

  45. Variable Scope • Global variable • One that is declared outside a function and is available to all parts of your program. • Local variable • Declared inside a function and is only available within the function in which it is declared. • When a program contains a global variable and a local variable with the same name. • The local variable takes precedence when its function is called. Computer Science & Engineering

  46. Using Built-in JavaScript Functions • ALERT BOX: alert("yourtext");The user will need to click "OK" to proceed. Computer Science & Engineering

  47. Using Built-in JavaScript Functions • CONFIRM BOX: confirm("yourtext");The user needs to click either "OK" or "Cancel" to proceed. • If the user clicks "OK", the box returns the value true. • If the user clicks "Cancel", the box returns the value false. Computer Science & Engineering

  48. Using Built-in JavaScript Functions • Example: Computer Science & Engineering

  49. Using Built-in JavaScript Functions • PROMPT BOX: prompt("yourtext","defaultvalue"); • If the user clicks "OK" the prompt box returns the entry. • If the user clicks "Cancel" the prompt box returns null. Computer Science & Engineering

  50. Using Built-in JavaScript Functions • setTimeout(): Set time period after which the command will be executed.Syntax: IdTime=setTimeout(“Command JavaScript”, delayTime); • clearTimeout(): Cancel time set by the setTimeout () Syntax : clearTimeout(IdTime ); Computer Science & Engineering

More Related