Finology Group â Insurtech Innovation Award 2024
Â
Introduction To Javascript_ Vibrant Technologies & Computers
1. 11
Tutorial 1Tutorial 1
Introduction toIntroduction to
JavaScriptJavaScript
Section A â Programming, HTML,Section A â Programming, HTML,
and JavaScriptand JavaScript
2. 22
Tutorial 1A TopicsTutorial 1A Topics
ďŽ Section A â Programming, HTML, andSection A â Programming, HTML, and
JavaScriptJavaScript
⢠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
3. 33
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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
4. 44
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The World Wide WebThe World Wide Web
⢠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
5. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
55
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The World Wide WebThe World Wide Web
⢠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
6. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
66
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The World Wide WebThe World Wide Web
⢠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)
7. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
77
8. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
88
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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)
9. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
99
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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.
10. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1010
11. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1111
12. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1212
13. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1313
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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
14. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1414
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Hypertext Markup LanguageHypertext Markup Language
⢠HTML DocumentHTML Document
ďŽ 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
15. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1515
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Hypertext Markup LanguageHypertext Markup Language
⢠HTML DocumentHTML Document
ďŽ 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
16. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1616
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Hypertext Markup LanguageHypertext Markup Language
⢠HTML DocumentHTML Document
ďŽ 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>
17. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1717
18. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1818
19. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
1919
20. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2020
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Hypertext Markup LanguageHypertext Markup Language
⢠HTML DocumentHTML Document
ďŽ 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 ââ
21. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2121
22. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2222
23. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2323
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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
24. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2424
25. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2525
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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
26. 2626
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The JavaScript ProgrammingThe JavaScript Programming
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
JavaScriptJavaScript
ďŽ Current version 1.5Current version 1.5
⢠JScriptJScript
ďŽ MS version of JavaScriptMS version of JavaScript
⢠Current version 5.5Current version 5.5
27. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2727
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The JavaScript ProgrammingThe JavaScript Programming
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
28. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2828
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ The JavaScript ProgrammingThe JavaScript Programming
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
29. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
2929
30. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
3030
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ 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
31. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
3131
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Logic and DebuggingLogic and Debugging
⢠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
32. JavaScript Tutorial 1 -JavaScript Tutorial 1 -
Introduction to JavaScriptIntroduction to JavaScript
3232
Programming, HTML, andProgramming, HTML, and
JavaScriptJavaScript
ďŽ Logic and DebuggingLogic and Debugging
⢠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