1 / 43

JavaScript Introduction: Simple Programs & Concepts

Learn JavaScript fundamentals, write simple programs, use input and output statements, understand memory concepts, use arithmetic and decision-making operators.

matthewwilkerson
Download Presentation

JavaScript Introduction: Simple Programs & Concepts

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. CHAPTER 3 JavaScript

  2. Topics • Introduction • Simple Program: Printing a Line of Text in a Web Page • Obtaining User Input with Prompt Dialogs • Dynamic Welcome Page • Adding Integers • Memory Concepts • Arithmetic • Decision Making: Equality and Relational Operators

  3. Learning Outcomes At the end of this lesson, students should be able to: • Write simple JavaScript programs. • Use input and output statements. • Understand basic memory concepts. • Use arithmetic operators. • Understand the precedence of arithmetic operators. • Write decision-making statements. • Use relational and equality operators.

  4. Introduction • JavaScript scripting language • Enhances functionality and appearance • Client-side scripting • Makes pages more dynamic and interactive • Foundation for complex server-side scripting • Program development • Program control

  5. Simple Program: Printing a Line of Text in a Web Page • Inline scripting • Written in the <body> of a document • <script> tag • Indicate that the text is part of a script • type attribute • Specifies the type of file and the scripting language use • write method • Write a text in the document

  6. Simple Program: Printing a Line of Text in a Web Page • Escape character (\ ) • Indicates “special” character is used in the string • alert method • Dialog box • The comment tags are used for browser that does not support JavaScript. • The codes will not be displayed.

  7. welcome2.html(1 of 1)

  8. Simple Program: Printing a Line of Text in a Web Page • Unlike writeln, write does not position the output cursor in the XHTML document at the beginning of the next line after writing its argument.

  9. Simple Program: Printing a Line of Text in a Web Page • Display the numbers 1 to 4 on the same line, with each pair of adjacent numbers separated by one space. Using document.write document.write("1 "); document.write("2 "); document.write("3 "); document.write("4 "); Using document.writeln document.writeln("1"); document.writeln("2"); document.writeln("3"); document.writeln("4"); Spaces are needed

  10. Simple Program: Printing a Line of Text in a Web Page • Line 15-16- Represents one statement. Statements in Java are separated by semicolons(;).JavaScript allows large statements to be split over many lines by using + operator.

  11. welcome3.html1 of 1

  12. welcome4.html1 of 1

  13. Simple Program: Printing a Line of Text in a Web Page

  14. Dynamic Welcome Page • A script can adapt the content based on input from the user or other variables

  15. welcome5.html(1 of 2)

  16. welcome5.html(2 of 2)

  17. Dynamic Welcome Page When the user clicks OK, the value typed by the user is returned to the program as a string. This is the promptto the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

  18. Adding Integers • Prompt user for two integers and calculate the sum (Fig. 7.8) • NaN (not a number) • parseInt • Converts its string argument to an integer

  19. Addition.html(1 of 2)

  20. Addition.html(2 of 2)

  21. Memory Concepts • Variable names correspond to locations in the computer’s memory. • Every variable has a name, a type, and a value. • Read value from a memory location.

  22. Memory Concepts number1 45 Fig. 7.9 Memory location showing the name and value of variable number1.

  23. Memory Concepts number1 45 number2 72 Fig. 7.10 Memory locations after values for variables number1 and number2 have been input.

  24. Memory Concepts number1 45 number2 72 sum 117 Fig. 7.11 Memory locations after calculating the sum of number1 and number2.

  25. Arithmetic • Many scripts perform arithmetic calculations • Expressions in JavaScript must be written in straight-line form

  26. Arithmetic

  27. Arithmetic Step 1. y = 2 * 5 * 5 + 3 * 5 + 7; (Leftmost multiplication) 2 * 5 is 10 Step 2. y = 10 * 5 + 3 * 5 + 7; (Leftmost multiplication) 10 * 5 is 50 Step 3. y = 50 + 3 * 5 + 7; (Multiplication before addition) 3 * 5 is 15 Step 4. y = 50 + 15 + 7; (Leftmost addition) 50 + 15 is 65 Step 5. y = 65 + 7; (Last addition) 65 + 7 is 72 y 72 Step 6. (Last operation—place into ) y = 72; Fig. 7.14 Order in which a second-degree polynomial is evaluated.

  28. Decision Making: Equality and Relational Operators • Decision based on the truth or falsity of a condition • Equality operators • Relational operators

  29. Decision Making: Equality and Relational Operators  £

  30. Decision Making: Equality and Relational Operators

  31. welcome6.html(1 of 3)

  32. welcome6.html(2 of 3)

  33. welcome6.html(3 of 3)

  34. Sample Program 1 Write a script that gets from the user the radius of a circle and outputs XHTML text that displays the circle’s diameter, circumference and area. Use the constant value 3.14159 for PI. [Note: You may also use the predefined constant Math.PI for the value of PI. This constant is more precise than the value 3.14159. The Math object is defined by Java-Script and provides many common mathematical capabilities.] Use the following formulas (r is the radius): diameter = 2r, circumference = 2PIr, area = PIr2. INPUT: radius of a circle OUTPUT: circle’s diameter, circumference and area RELEVANT FORMULA:PI= 3.14159 diameter = 2r, circumference = 2PIr, area = PIr2

  35. Application of JavaScript • There are two parts of an HTML document; <head> and <body>. • JavaScript scripts can appear in either part of a document, depending on their purpose. • Scripts that produce content only when requested or that react to user interactions are placed in the head of the document.

  36. Application of JavaScript • Example: function definitions and code associated with form elements, such as buttons. • Scripts that are to be interpreted just once, when the interpreter finds them, are placed in the document body.

  37. Application of JavaScript • Example: Simple Calculator Source: http://dynamicdrive.com/dynamicindex11/cal.htm

  38. Application of JavaScript • Example: Text Area Max Length Script Source: http://www.dynamicdrive.com/dynamicindex16/maxlength.htm

  39. Application of JavaScript • Example: Form validation (Source: http://www.w3schools.com/jS/js_form_validation.asp) • JavaScript can be used to validate data in HTML forms before sending off the content to a server. • Form data that typically are checked by a JavaScript could be: • has the user left required fields empty? • has the user entered a valid e-mail address? • has the user entered a valid date? • has the user entered text in a numeric field?

  40. Web Resources • http://www.w3schools.com/js/default.asp • http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html • http://webdeveloper.com/javascript/javascript_js_tutorial.html • http://www.hotscripts.com

More Related