1 / 24

CS346

CS346. Module 1 Introduction to JavaScript. JavaScript’s Role. HTML/CSS tells a browser how to render a document JavaScript brings HTML to life by making Web pages dynamic Use JavaScript to change the contents of a Web page after it has been rendered by a browser. Status Bar Messages

rania
Download Presentation

CS346

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. CS346 Module 1 Introduction to JavaScript CS346 - Javascript 1, 2

  2. JavaScript’s Role • HTML/CSS tells a browser how to render a document • JavaScript brings HTML to life by making Web pages dynamic • Use JavaScript to change the contents of a Web page after it has been rendered by a browser CS346 - Javascript 1, 2

  3. Status Bar Messages User Feedback Popup Windows Browser Detection Random Images, Quotes Display Current Date Display Last Modified Date Cookies Rollovers Banners Redirection Form Validation Calculations Reset Form Popular Uses For JavaScript CS346 - Javascript 1, 2

  4. The JavaScript Language • JavaScript is a scriptinglanguage • executed by an interpreter from within a Web browser • Interpreter — translates programming code into executable format each time the program is run • Scripting engine— interpreter that is part of the Web browser CS346 - Javascript 1, 2

  5. The JavaScript Language • Introduced by Netscape and Sun in 1995 • Originally calledLiveScript • JavaScript is an object-orientedlanguage • JavaScript is available in two formats: • Client-side— available to HTML/XHTML pages displayed in Web browsers • Server-side — proprietary and vendor-specific CS346 - Javascript 1, 2

  6. The <script> Tag • <script>…</script> — contains statements that make up a JavaScript program in an HTML document • Notifies browser that following commands need to be interpreted by a scripting engine • Attributes • Language — specifies which scripting language and version is being used (OLD) <script language=“JavaScript1.2”> • type <script type=“javascript”> (NOW) CS346 - Javascript 1, 2

  7. JavaScript Version 1.0 1.1 1.2 1.3 1.4 1.5 Browser Support Ns 2+, IE 3+, Op 3+ Ns 3+, IE 3.5+, Op 3.5+ Ns 4+, IE 4+, Op 3.5+ Ns 4.5+, IE 4+, Op 4+ Ns 5+, IE 4+, Op 5+ Ns 6+, IE 4+, Op 5+ Version Support CS346 - Javascript 1, 2

  8. Objects & Methods • Object— programming code and data treated as an individual unit or component • Statements — individual lines of code • Statements and are concluded with asemicolon • Methods— groups of related statements associated with an object • To execute, or call, an object’s methods, append the method to the object with a period CS346 - Javascript 1, 2

  9. Arguments • Argument— information that can be passed to a method • The write( ) and writeIn( ) methods require a text string or variable as an argument • Text string, orliteral, is text that is contained within quotes document.write(“This is a test.”); • Case sensitivity CS346 - Javascript 1, 2

  10. Module 2 Placing JavaScript CS346 - Javascript 1, 2

  11. JavaScript Placement • Browsers render tags in an HTML document in the order in which they are encountered • When there are multiple JavaScript code sections, each section is also executed in the order in which it appears • The order in which a browser executes JavaScript code also depends on if it is placed in the <head> or <body> section CS346 - Javascript 1, 2

  12. JavaScript Source Files • Often incorporated directly into an HTML document • Can also be saved in an external file called a source file with file extension .js • May use a combination of embedded JavaScript and source files in your web pages • The src attribute accepts a text string to specify the location of a JS source file • Should only be declared once, in the <head> • Source files cannot include HTML tags CS346 - Javascript 1, 2

  13. JavaScript Source Files • Reasons for using source files instead of adding code to HTML: • HTML document will be neater • JavaScript code sharable among multiple HTML documents • JavaScript source files are not as likely to be “borrowed” CS346 - Javascript 1, 2

  14. JavaScript Comments • Comments are various types of remarks that you place in code that do not render • notes to yourself • instructions for future programmers • JavaScript is included in HTML comments (<!- - and - - >) • not interpreted by browsers that do not support JavaScript CS346 - Javascript 1, 2

  15. JavaScript Comments • One-line comments — add two slashes //before the text document.write("This is cool!"); // this is a comment • Block comments — add /*to the first line in the block and */to the last line of the block /* My script writes some text into my document! All of this text is ignored by the browser. */ CS346 - Javascript 1, 2

  16. Hello World Script <pre> <script type=“text/javascript”> < ! - - document.writeln(“Hello World”); document.writeln(“This line is printed below.”); // - - > </script> </pre> CS346 - Javascript 1, 2

  17. Output of the Hello World Script CS346 - Javascript 1, 2

  18. Examples • JavaScript examples • JS-1 Examples • 2-1Precedence.htm • 2-2MultipleJavascriptCalls.htm • 2-3ExternalJS.htm • 2-4ExternalJS.htm CS346 - Javascript 1, 2

  19. Summary JS-1, JS-2 • A client-side scripting language • Script (code) is downloaded by UA • UA interprets (runs) the script • Script can generate XHTML • Script can change element attributes, including style • Script can interact w/ user CS346 - Javascript 1, 2

  20. Hello, world <head> <script type = "text/javascript"> <!-- HIDE // Hide script from lame UA's document.writeln( "<h1>Hello, world</h1>"); // UNHIDE --> </script> </head> CS346 - Javascript 1, 2

  21. Sequence of events • Browser interprets script which generates output (XHTML) • Browser renders the generated XHTML CS346 - Javascript 1, 2

  22. write and writeln • write and writeln are methods of document object • Both take a string argument • String literals are enclosed in double or single quotes • Use \" and \'to embed quotes in a string literal • Use \n \t \\ as in Java, C++ • writeln puts a newline into generated XHTML • write does not put in a newline CS346 - Javascript 1, 2

  23. String concatenation: + operator <script type = "text/javascript"> <!-- document.write("<p>The" + " content" + " of this paragraph is" + " the \"concatenation\"" + " of several strings."); document.write("</p>"); // --> </script> CS346 - Javascript 1, 2

  24. JavaScript code format • JavaScript statements may contain whitespace (line breaks, tabs, spaces) for readability • Except in string literals • JavaScript is case sensitive • Comments: //… and /* … */ CS346 - Javascript 1, 2

More Related