Post on 28-Jan-2015
description
Introduction to JavaScriptIntroduction to JavaScript 11
Introduction to Introduction to JavaScriptJavaScript
Introduction to JavaScriptIntroduction to JavaScript 22
TopicsTopics
Section B – A First JavaScript ProgramSection B – A First JavaScript Program• About the <script> tagAbout the <script> tag• How to create a JavaScript source fileHow to create a JavaScript source file• How to add comments to a JavaScript ProgramHow to add comments to a JavaScript Program• How to hide JavaScript from incompatible How to hide JavaScript from incompatible
browsersbrowsers• About placing JavaScript in <head> or <body> About placing JavaScript in <head> or <body>
sections of HTML documents sections of HTML documents
Introduction to JavaScriptIntroduction to JavaScript 33
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• JavaScript programs are run from within JavaScript programs are run from within
an HTML documentan HTML document• <script> and </script> <script> and </script>
Used to notify the browser that JavaScript Used to notify the browser that JavaScript statements are contained withinstatements are contained within
Introduction to JavaScriptIntroduction to JavaScript 44
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• languagelanguage attribute attribute
Denotes the scripting language being usedDenotes the scripting language being used• Default Default JavaScript JavaScript• Other languages (e.g., VBScript) may be usedOther languages (e.g., VBScript) may be used• Can also specify script language version Can also specify script language version
No space between name and versionNo space between name and version Checked by browser, scripts ignored if Checked by browser, scripts ignored if
browser doesn’t support versionbrowser doesn’t support version• For ECMAScript compatible browsers, omit versionFor ECMAScript compatible browsers, omit version
Introduction to JavaScriptIntroduction to JavaScript 55
Introduction to JavaScriptIntroduction to JavaScript 66
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• JavaScript JavaScript
Object-based languageObject-based language• ObjectObject
Programming code and data that can be Programming code and data that can be treated as an individual unit or componenttreated as an individual unit or component
• StatementsStatements Individual lines in a programming languageIndividual lines in a programming language
• MethodsMethods Groups of statements related to a particular Groups of statements related to a particular
object object
Introduction to JavaScriptIntroduction to JavaScript 77
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• Document objectDocument object
Represents the content of a browser’s windowRepresents the content of a browser’s window
• write() & writeln() methods of Document write() & writeln() methods of Document objectobject
Creates new text on a web pageCreates new text on a web page Called by appending method to object with a Called by appending method to object with a
periodperiod Methods accept Methods accept argumentsarguments
• Information passed to a methodInformation passed to a method
Introduction to JavaScriptIntroduction to JavaScript 88
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• Preformatted textPreformatted text
<pre> and </pre> tags<pre> and </pre> tags• Tag set known as a container element because it Tag set known as a container element because it
contains text and other HTML tagscontains text and other HTML tags Translates literal text to presentation areaTranslates literal text to presentation area Required to get carriage return in writeln() Required to get carriage return in writeln()
method to be sent to presentation areamethod to be sent to presentation area
Introduction to JavaScriptIntroduction to JavaScript 99
Introduction to JavaScriptIntroduction to JavaScript 1010
Introduction to JavaScriptIntroduction to JavaScript 1111
A First JavaScript ProgramA First JavaScript Program
The <script> TagThe <script> Tag• Document objectDocument object
Considered a top-level objectConsidered a top-level object Naming conventionNaming convention
• Capitalize first letter of object Capitalize first letter of object
• Unlike HTML, JavaScript is case sensitiveUnlike HTML, JavaScript is case sensitive
Introduction to JavaScriptIntroduction to JavaScript 1212
Introduction to JavaScriptIntroduction to JavaScript 1313
A First JavaScript ProgramA First JavaScript Program
Creating a JavaScript Source FileCreating a JavaScript Source File• JavaScript programs can be used in two JavaScript programs can be used in two
ways:ways: Incorporated directly into an HTML fileIncorporated directly into an HTML file
• Using <script> tagUsing <script> tag Placed in an external (source) filePlaced in an external (source) file
• Has file extension .jsHas file extension .js• Contains only JavaScript statementsContains only JavaScript statements
Introduction to JavaScriptIntroduction to JavaScript 1414
A First JavaScript ProgramA First JavaScript Program
Creating a JavaScript Source FileCreating a JavaScript Source File• JavaScript source filesJavaScript source files
Use Use srcsrc attribute of <script> tag to denote attribute of <script> tag to denote source of JavaScript statementssource of JavaScript statements
• Browser will ignore any JavaScript statements Browser will ignore any JavaScript statements inside <script> and </script> if src attribute is inside <script> and </script> if src attribute is usedused
Cannot include HTML tags in source fileCannot include HTML tags in source file
<script language=“JavaScript” src=“c:\source.js”><script language=“JavaScript” src=“c:\source.js”></script></script>
Introduction to JavaScriptIntroduction to JavaScript 1515
A First JavaScript ProgramA First JavaScript Program
Creating a JavaScript Source FileCreating a JavaScript Source File• Advantages of JavaScript source filesAdvantages of JavaScript source files
Makes HTML document neater (less Makes HTML document neater (less confusing)confusing)
JavaScript can be shared among multiple JavaScript can be shared among multiple HTML filesHTML files
Hides JavaScript code from incompatible Hides JavaScript code from incompatible browsersbrowsers
Introduction to JavaScriptIntroduction to JavaScript 1616
A First JavaScript ProgramA First JavaScript Program
Creating a JavaScript Source FileCreating a JavaScript Source File• Can use a combination of embedded Can use a combination of embedded
and non–embedded codeand non–embedded code Allows finer granularity in coding Allows finer granularity in coding
functionalityfunctionality JavaScript sections executed in order of JavaScript sections executed in order of
location within HTML documentlocation within HTML document
Introduction to JavaScriptIntroduction to JavaScript 1717
Introduction to JavaScriptIntroduction to JavaScript 1818
A First JavaScript ProgramA First JavaScript Program
Adding comments to a JavaScript Adding comments to a JavaScript ProgramProgram• CommentsComments
Non-printing lines that are placed in the code Non-printing lines that are placed in the code to contain various remarks about the codeto contain various remarks about the code
• Makes it easier to understand the code operationMakes it easier to understand the code operation Two typesTwo types
• Line commentsLine comments // ignore all text to the end of the line// ignore all text to the end of the line
• Block commentsBlock comments /* ignore all text between these symbols *//* ignore all text between these symbols */
Introduction to JavaScriptIntroduction to JavaScript 1919
Introduction to JavaScriptIntroduction to JavaScript 2020
A First JavaScript ProgramA First JavaScript Program
Hiding JavaScript from Hiding JavaScript from Incompatible BrowsersIncompatible Browsers• Two methodsTwo methods
Place JavaScript in external source filePlace JavaScript in external source file Enclose the code within HTML commentsEnclose the code within HTML comments
<!-- beginning of HTML block comment<!-- beginning of HTML block comment
end of HTML block comments --> end of HTML block comments -->
Introduction to JavaScriptIntroduction to JavaScript 2121
Introduction to JavaScriptIntroduction to JavaScript 2222
Introduction to JavaScriptIntroduction to JavaScript 2323
Introduction to JavaScriptIntroduction to JavaScript 2424
A First JavaScript ProgramA First JavaScript Program
Hiding JavaScript from Hiding JavaScript from Incompatible BrowsersIncompatible Browsers• Alternate message displayAlternate message display
If browser doesn’t support JavaScriptIf browser doesn’t support JavaScript• Use <noscript> & </noscript> to place Use <noscript> & </noscript> to place
alternate message to users of back-level alternate message to users of back-level browsersbrowsers
Introduction to JavaScriptIntroduction to JavaScript 2525
Introduction to JavaScriptIntroduction to JavaScript 2626
A First JavaScript ProgramA First JavaScript Program
Placing JavaScript in <head> or Placing JavaScript in <head> or <body> sections<body> sections• Script statements interpreted in order Script statements interpreted in order
of document renderingof document rendering• <head> section rendered before <head> section rendered before
<body> section <body> section Good practice to place as much code as Good practice to place as much code as
possible in <head> sectionpossible in <head> section