Introduction To Javascript_ Vibrant Technologies & Computers

11
Tutorial 1Tutorial 1
Introduction toIntroduction to
JavaScriptJavaScript
Section A – Programming, HTML,Section A – Programming, HTML,
and JavaScriptand JavaScript

22
Tutorial 1A TopicsTutorial 1A Topics
 Section A – Programming, HTML, andSection A – Programming, HTML, and
• About the World Wide WebAbout the World Wide Web
• Uses of JavaScriptUses of JavaScript
• About Hypertext Markup LanguageAbout Hypertext Markup Language
• How to creating an HTML documentHow to creating an HTML document
• About the JavaScript programming languageAbout the JavaScript programming language
• About logic and debuggingAbout logic and debugging

33
Programming, HTML, andProgramming, HTML, and
 The World Wide WebThe World Wide Web
• Created in 1989Created in 1989
 European Laboratory for Particle PhysicsEuropean Laboratory for Particle Physics
(Geneva Switzerland)(Geneva Switzerland)
• PurposePurpose
 Provide an easy way to access cross-Provide an easy way to access cross-
referenced documents that exist on thereferenced documents that exist on the
internetinternet

44
• Hypertext linksHypertext links
 Contain reference to locate and open specificContain reference to locate and open specific
documentsdocuments
• Hypertext Markup Language (HTML)Hypertext Markup Language (HTML)
 Language used to design web pagesLanguage used to design web pages
(documents)(documents)
• Web BrowserWeb Browser
 Program that displays HTML documentsProgram that displays HTML documents

JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
55
• Uniform Resource Locator (URL)Uniform Resource Locator (URL)
 A type of Uniform Resource Identifier (URI)A type of Uniform Resource Identifier (URI)
• Identifies names and addresses on the WWWIdentifies names and addresses on the WWW
 A unique identifier for a web documentA unique identifier for a web document
• e.g., a telephone number or mailing addresse.g., a telephone number or mailing address

66
• Uniform Resource Locator (URL)Uniform Resource Locator (URL)
 Consists of 4 parts:Consists of 4 parts:
• ProtocolProtocol →→ Hyper Text Transfer Protocol (HTTP)Hyper Text Transfer Protocol (HTTP)
• Domain NameDomain Name →→ or Internet Protocol (IP) addressor Internet Protocol (IP) address
• DirectoryDirectory
• FilenameFilename
 Specific document filenameSpecific document filename
 index.(s)htm(l) or default.(s)htm(l)index.(s)htm(l) or default.(s)htm(l)

77

88
 JavaScript’s role on the WebJavaScript’s role on the Web
• HTMLHTML
 PurposePurpose →→ tell the browser how a documenttell the browser how a document
should appearshould appear
 StaticStatic →→ can view or print (no interaction)can view or print (no interaction)

99
 JavaScript’s role on the WebJavaScript’s role on the Web
• JavaScript Programming LanguageJavaScript Programming Language
 Developed by Netscape for use in NavigatorDeveloped by Netscape for use in Navigator
Web BrowsersWeb Browsers
 PurposePurpose →→ make web pages (documents)make web pages (documents)
more dynamic and interactivemore dynamic and interactive
• Change contents of document, provide forms andChange contents of document, provide forms and
controls, animation, control web browser window,controls, animation, control web browser window,
etc.etc.

1010

1111

1212

1313
 Hypertext Markup LanguageHypertext Markup Language
• HTML DocumentHTML Document
 Text document that contains:Text document that contains:
• TagsTags →→ formatting instructionsformatting instructions
• Text to be displayedText to be displayed
 Document isDocument is parsedparsed oror renderedrendered by browserby browser

1414
 TagsTags
• Enclosed in brackets <tag>Enclosed in brackets <tag>
• Generally consist of:Generally consist of:
 Opening tags <tag>Opening tags <tag>
 Closing tags </tag>Closing tags </tag>
• Text contained between the opening and closingText contained between the opening and closing
tags are formatted according to tag instructionstags are formatted according to tag instructions

1515
 TagsTags
• All HTML documents begin with <html> tag andAll HTML documents begin with <html> tag and
end with </html>end with </html>
• HTML isHTML is notnot case sensitivecase sensitive

1616
 Tag AttributesTag Attributes
• Used to configure tagsUsed to configure tags
• Placed before closing bracket of opening tagPlaced before closing bracket of opening tag
 <tag attribute=“value”>some text</tag><tag attribute=“value”>some text</tag>

1717

1818

1919

2020
 Web browser only acknowledges text andWeb browser only acknowledges text and
valid tagsvalid tags
 Web browser ignores non-printingWeb browser ignores non-printing
characterscharacters
• Spaces, tabs, carriage returnsSpaces, tabs, carriage returns
 Must use valid tags or special characterMust use valid tags or special character
codes to accomplish this:codes to accomplish this:
• Non-breaking spaceNon-breaking space →→   

2121

2222

2323
 Creating an HTML DocumentCreating an HTML Document
• Text editor (text)Text editor (text)
 Notepad, WordPadNotepad, WordPad
• Word Processor (that can create textWord Processor (that can create text
files)files)
 WordWord
• HTML Editor (WYSIWYG)HTML Editor (WYSIWYG)
 FrontPage, PageMillFrontPage, PageMill
• HTML Converters (WYSIWYG)HTML Converters (WYSIWYG)
 Word, PowerPointWord, PowerPoint

2424

2525
 The JavaScript ProgrammingThe JavaScript Programming
LanguageLanguage
• Scripting LanguagesScripting Languages
 Executed by an interpreter contained withinExecuted by an interpreter contained within
the web browser (scripting host)the web browser (scripting host)
 Interpreter uses a scripting engineInterpreter uses a scripting engine
• Converts code to executable format each time itConverts code to executable format each time it
runsruns
• Converted when browser loads web documentConverted when browser loads web document

2626
LanguageLanguage
• JavaScriptJavaScript
 Originally called LiveScript when introducedOriginally called LiveScript when introduced
in Netscape Navigatorin Netscape Navigator
 In Navigator 2.0, name changed toIn Navigator 2.0, name changed to
 Current version 1.5Current version 1.5
• JScriptJScript
 MS version of JavaScriptMS version of JavaScript
• Current version 5.5Current version 5.5

2727
LanguageLanguage
• ECMAScriptECMAScript
 International, standardized version (EditionInternational, standardized version (Edition
3)3)
 Both versions (JavaScript and JScript)Both versions (JavaScript and JScript)
conform to the standardconform to the standard
• Although both have proprietary extensionsAlthough both have proprietary extensions
 Focus of this textFocus of this text

2828
LanguageLanguage
• JavaScriptJavaScript
 Two formats:Two formats:
• Client-sideClient-side
 Program runs on client (browser)Program runs on client (browser)
• Server-sideServer-side
 Program runs on serverProgram runs on server
 Proprietary to web server platformProprietary to web server platform

2929

3030
 Logic and DebuggingLogic and Debugging
• SyntaxSyntax
 Rules of the languageRules of the language
• LogicLogic
 Order of execution of various parts of theOrder of execution of various parts of the
programprogram

3131
• Syntax errorSyntax error
 Misuse of syntaxMisuse of syntax
• e.g., typinge.g., typing ferfer instead ofinstead of forfor
• Logic errorsLogic errors
 Unintended operation of programUnintended operation of program
• e.g., Infinite loope.g., Infinite loop

3232
• DebuggingDebugging
 Tracing and resolving errors in a programTracing and resolving errors in a program
 Coined by Admiral Grace HopperCoined by Admiral Grace Hopper
• Moth short-circuited a relayMoth short-circuited a relay
 ““bug” in the systembug” in the system
• Removed itRemoved it →→ system “debugged”system “debugged”
 NotNot an exact sciencean exact science

Introduction To Javascript_ Vibrant Technologies & Computers

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Similar a Introduction To Javascript_ Vibrant Technologies & Computers

Similar a Introduction To Javascript_ Vibrant Technologies & Computers (20)

Más de Vibrant Technologies & Computers

Más de Vibrant Technologies & Computers (20)

Último

Último (20)

Introduction To Javascript_ Vibrant Technologies & Computers