Javascript Intro 01
-
Upload
vikram-singh -
Category
Technology
-
view
139 -
download
5
description
Transcript of Javascript Intro 01
![Page 1: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/1.jpg)
Introduction to JavaScriptIntroduction to JavaScript 11
Introduction to Introduction to JavaScriptJavaScript
![Page 2: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/2.jpg)
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
![Page 3: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/3.jpg)
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
![Page 4: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/4.jpg)
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
![Page 5: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/5.jpg)
Introduction to JavaScriptIntroduction to JavaScript 55
![Page 6: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/6.jpg)
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
![Page 7: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/7.jpg)
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
![Page 8: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/8.jpg)
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
![Page 9: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/9.jpg)
Introduction to JavaScriptIntroduction to JavaScript 99
![Page 10: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/10.jpg)
Introduction to JavaScriptIntroduction to JavaScript 1010
![Page 11: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/11.jpg)
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
![Page 12: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/12.jpg)
Introduction to JavaScriptIntroduction to JavaScript 1212
![Page 13: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/13.jpg)
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
![Page 14: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/14.jpg)
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>
![Page 15: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/15.jpg)
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
![Page 16: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/16.jpg)
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
![Page 17: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/17.jpg)
Introduction to JavaScriptIntroduction to JavaScript 1717
![Page 18: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/18.jpg)
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 */
![Page 19: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/19.jpg)
Introduction to JavaScriptIntroduction to JavaScript 1919
![Page 20: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/20.jpg)
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 -->
![Page 21: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/21.jpg)
Introduction to JavaScriptIntroduction to JavaScript 2121
![Page 22: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/22.jpg)
Introduction to JavaScriptIntroduction to JavaScript 2222
![Page 23: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/23.jpg)
Introduction to JavaScriptIntroduction to JavaScript 2323
![Page 24: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/24.jpg)
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
![Page 25: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/25.jpg)
Introduction to JavaScriptIntroduction to JavaScript 2525
![Page 26: Javascript Intro 01](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c84fe24a7959c1688b45bb/html5/thumbnails/26.jpg)
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