JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Introduction to JavaScript – A First JavaScript Program (non-audio version) © Dr. David C. Gibbs

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 2 Tutorial 1 Introduction to JavaScript Section B – A First JavaScript Program

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 3 Tutorial 1B Topics Section B – A First JavaScript Program –About the tag –How to create a JavaScript source file –How to add comments to a JavaScript Program –How to hide JavaScript from incompatible browsers –About placing JavaScript in or sections of HTML documents

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 4 A First JavaScript Program The Tag –JavaScript programs are run from within an HTML document – and Used to notify the browser that JavaScript statements are contained within

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 5 A First JavaScript Program The Tag –language attribute Denotes the scripting language being used –Default  JavaScript –Other languages (e.g., VBScript, JScript) may be used –Can also specify script language version »No space between name and version »Checked by browser, scripts ignored if browser doesn't support version –For ECMAScript compatible browsers, omit version

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 6

7 JavaScript and Browsers How do you know if a browser (version) supports JavaScript? Consult a handy Browser ChartBrowser Chart Advanced programming techniques can identify which browser (at run-time) is in use. (We will postpone this until later.) identify which browser

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 8 The JavaScript Language JavaScript –Object-based language Object –Programming code and data that can be treated as an individual unit or component Statements –Individual lines in a programming language Methods –Groups of statements related to a particular object

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 9 A First JavaScript Program Document object –Represents the content of a browser's window write() & writeln() methods of Document object –Creates new text on a web page –Called by appending method to object with a period e.g. document.writeln(); –Methods accept arguments - Information passed to a method – in this case, a string of characters e.g. document.writeln("Hello World"); will display "Hello World" on the web page

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 10

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 11 Saving JavaScript eTasks, Exercises and Assignments Save your JavaScript eTasks, exercises and assignments in organized folders. –Tutorial01, Tutorial02, etc. Here are instructions for saving the JS files.instructions

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 12 eTask 1 Copy and paste this text into the body of an HTML document between the (use HTML-Kit). [After copying, remove the "line- break" between 'Hello' and 'World'.] Save your file as "HelloWorldFromJS.htm." Preview the code. document.writeln("Hello World"); document.writeln("This line is printed below the 'Hello World' line."); Remove the and tags. What happens?

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 13

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 14 A First JavaScript Program Preformatted text – and tags Tag set known as a container element because it contains text and other HTML tags –Translates literal text to presentation area –Required to get carriage return in writeln() method to be sent to presentation area Later we will see another way to achieve carriage returns.

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 15 A First JavaScript Program Document object –Considered a top-level object of the model –Naming convention (of the model) Capitalize first letter of object What model? –The Document Object Model, or DOM Unlike HTML, JavaScript is case sensitive

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 16 eTask 2 Refer to the instructions on page 26 (Gosselin) to create the file MyFirstJavaScript.htm file (as shown below). (He uses the.html extension; you may use either.html or.htm according to your convention.)

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 17 Using JavaScript in an HTML File (1) Creating a JavaScript Source File –JavaScript programs can be used in two ways: Incorporated directly into an HTML file –Using tag Placed in an external (source) file –Has file extension.js –Contains only JavaScript statements

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 18 Using JavaScript in an HTML File (2) Creating a JavaScript Source File –JavaScript source files Use src attribute of tag to denote source of JavaScript statements –Browser will ignore any JavaScript statements inside and if src attribute is used Cannot include HTML tags in source file

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 19 A First JavaScript Program Creating a JavaScript Source File –Advantages of JavaScript source files Makes HTML document neater (less confusing) JavaScript can be shared among multiple HTML files Hides JavaScript code from incompatible browsers

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 20 A First JavaScript Program Creating a JavaScript Source File –Can use a combination of embedded and non–embedded code Allows finer granularity in coding functionality JavaScript sections executed in order of location within HTML document

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 21

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 22 eTask 3 Refer to the instructions on pages 30-1 (Gosselin). First create the file MultipleJavaScriptCalls.htm. Then create the file javascriptsource.js. Be sure both are saved in the Tutorial01 folder. Preview the.htm file. You should see a line displayed from the.js source file!

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 23 A First JavaScript Program Adding comments to a JavaScript Program –Comments Non-printing lines that are placed in the code to contain various remarks about the code –Makes it easier to understand the code operation Two types –Line comments »// ignore all text to the end of the line –Block comments »/* ignore all text between these symbols */

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 24

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 25 A First JavaScript Program Hiding JavaScript from Incompatible Browsers –Two methods Place JavaScript in external source file Enclose the code within HTML comments <!-- beginning of HTML block comment end of HTML block comments -->

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 26

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 27

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 28

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 29 What if JavaScript won't work in a browser? Hiding JavaScript from Incompatible Browsers –Alternate message display If browser doesn't support JavaScript –Use & to place alternate message to users of back-level browsers

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 30

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 31 eTask 4 Refer to the instructions on page 36 (Gosselin). Experiment with the line and block commenting ability in JavaScript. Chances are your browser will support JS, so you won't see the "not support" line.

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 32 A First JavaScript Program Placing JavaScript in or sections –Script statements interpreted in order of document rendering – section rendered before section Good practice to place as much code as possible in section

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 33 Assignment Exercise #7 (Gosselin, Tutorial 01A) Complete the exercise and attach the file in a post to your eReview discussion group. Describe any difficulties you might have had in completing the problem. Please do not copy it to your web page until one week later.

JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 34 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site