javascript intro 01

Introduction to JavaScriptIntroduction to JavaScript 11

Introduction to Introduction to JavaScriptJavaScript


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


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



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



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



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



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



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



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



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>



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



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



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 */

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

 end of HTML block comments -->



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



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

javascript intro 01

Technology

javascript code

javascript statements

confusing javascript

methods place javascript

html comments

external source file

html tags

html document neater