Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Computer Science
  3. Computer Programming

Tutorial 1B - A First JavaScript Program

advertisement 
WDMD 170
Internet Languages
eLesson:
Introduction to JavaScript –
A First JavaScript Program
(non-audio version)
© Dr. David C. Gibbs
2003-04
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
1
Tutorial 1
Introduction to JavaScript
Section B – A First JavaScript Program
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
2
Tutorial 1B Topics
• Section B – A First JavaScript Program
–
–
–
–
About the <script> 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 <head> or <body>
sections of HTML documents
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
3
A First JavaScript Program
• The <script> Tag
– JavaScript programs are run from within an
HTML document
– <script> and </script>
• Used to notify the browser that JavaScript
statements are contained within
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
4
A First JavaScript Program
• The <script> 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
5
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
6
JavaScript and Browsers
How do you know if a browser (version)
supports JavaScript?
• Consult a handy Browser Chart
• Advanced programming techniques can
identify which browser (at run-time) is in
use. (We will postpone this until later.)
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
7
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
8
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
9
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 10
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.
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 11
eTask 1
Copy and paste this text into the body of an HTML document
between the (use HTML-Kit). [After copying, remove the "linebreak" between 'Hello' and 'World'.] Save your file as
"HelloWorldFromJS.htm." Preview the code.
<pre>
<script language = "JavaScript">
document.writeln("Hello World");
document.writeln("This line is printed below the 'Hello
World' line.");
</script>
</pre>
Remove the <pre> and </pre> tags. What happens?
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 12
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 13
A First JavaScript Program
• Preformatted text
– <pre> and </pre> 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 14
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 15
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 16
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 <script> 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 17
Using JavaScript in an HTML File (2)
• Creating a JavaScript Source File
– JavaScript source files
• Use src attribute of <script> tag to denote
source of JavaScript statements
– Browser will ignore any JavaScript statements inside
<script> and </script> if src attribute is used
• Cannot include HTML tags in source file
<script language="JavaScript" src="c:\source.js">
</script>
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 18
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 19
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 20
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 21
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 22
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 23
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 24
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 25
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
What if JavaScript won't work in a
browser?
• Hiding JavaScript from Incompatible
Browsers
– Alternate message display
• If browser doesn't support JavaScript
– Use <noscript> & </noscript> to place alternate
message to users of back-level browsers
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 29
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 30
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 31
A First JavaScript Program
• Placing JavaScript in <head> or <body>
sections
– Script statements interpreted in order of
document rendering
– <head> section rendered before <body>
section
• Good practice to place as much code as
possible in <head> section
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 32
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 33
End of eLesson
• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site
JavaScript
Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 34
Download
advertisement