11Tutorial 1Tutorial 1Introduction toIntroduction toJavaScriptJavaScriptSection A – Programming, HTML,Section A – Programm...
22Tutorial 1A TopicsTutorial 1A Topics Section A – Programming, HTML, andSection A – Programming, HTML, andJavaScriptJava...
33Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The World Wide WebThe World Wide Web• Created in 1989C...
44Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The World Wide WebThe World Wide Web• Hypertext linksH...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript55Programming, HTML, and...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript66Programming, HTML, and...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript77
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript88Programming, HTML, and...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript99Programming, HTML, and...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1010
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1111
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1212
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1313Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1414Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1515Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1616Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1717
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1818
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1919
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2020Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2121
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2222
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2323Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2424
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2525Programming, HTML, a...
2626Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The JavaScript ProgrammingThe JavaScript Programming...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2727Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2828Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2929
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3030Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3131Programming, HTML, a...
JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3232Programming, HTML, a...
Upcoming SlideShare
Loading in …5
×

Introduction To Javascript_ Vibrant Technologies & Computers

190 views
142 views

Published on

Javascript Training-

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
190
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction To Javascript_ Vibrant Technologies & Computers

  1. 1. 11Tutorial 1Tutorial 1Introduction toIntroduction toJavaScriptJavaScriptSection A – Programming, HTML,Section A – Programming, HTML,and JavaScriptand JavaScript
  2. 2. 22Tutorial 1A TopicsTutorial 1A Topics Section A – Programming, HTML, andSection A – Programming, HTML, andJavaScriptJavaScript• 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. 3. 33Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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 theinternetinternet
  4. 4. 44Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The World Wide WebThe World Wide Web• Hypertext linksHypertext links Contain reference to locate and open specificContain reference to locate and open specificdocumentsdocuments• 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. 5. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript55Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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. 6. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript66Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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. 7. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript77
  8. 8. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript88Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript JavaScript’s role on the WebJavaScript’s role on the Web• HTMLHTML PurposePurpose →→ tell the browser how a documenttell the browser how a documentshould appearshould appear StaticStatic →→ can view or print (no interaction)can view or print (no interaction)
  9. 9. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript99Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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 NavigatorWeb 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 andcontrols, animation, control web browser window,controls, animation, control web browser window,etc.etc.
  10. 10. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1010
  11. 11. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1111
  12. 12. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1212
  13. 13. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1313Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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. 14. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1414Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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 closingtags are formatted according to tag instructionstags are formatted according to tag instructions
  15. 15. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1515Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript Hypertext Markup LanguageHypertext Markup Language• HTML DocumentHTML Document TagsTags• All HTML documents begin with <html> tag andAll HTML documents begin with <html> tag andend with </html>end with </html>• HTML isHTML is notnot case sensitivecase sensitive
  16. 16. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1616Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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. 17. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1717
  18. 18. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1818
  19. 19. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript1919
  20. 20. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2020Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript Hypertext Markup LanguageHypertext Markup Language• HTML DocumentHTML Document Web browser only acknowledges text andWeb browser only acknowledges text andvalid tagsvalid tags Web browser ignores non-printingWeb browser ignores non-printingcharacterscharacters• Spaces, tabs, carriage returnsSpaces, tabs, carriage returns Must use valid tags or special characterMust use valid tags or special charactercodes to accomplish this:codes to accomplish this:• Non-breaking spaceNon-breaking space →→ &nbsp;&nbsp;
  21. 21. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2121
  22. 22. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2222
  23. 23. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2323Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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 textfiles)files) WordWord• HTML Editor (WYSIWYG)HTML Editor (WYSIWYG) FrontPage, PageMillFrontPage, PageMill• HTML Converters (WYSIWYG)HTML Converters (WYSIWYG) Word, PowerPointWord, PowerPoint
  24. 24. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2424
  25. 25. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2525Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The JavaScript ProgrammingThe JavaScript ProgrammingLanguageLanguage• Scripting LanguagesScripting Languages Executed by an interpreter contained withinExecuted by an interpreter contained withinthe 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 itrunsruns• Converted when browser loads web documentConverted when browser loads web document
  26. 26. 2626Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The JavaScript ProgrammingThe JavaScript ProgrammingLanguageLanguage• JavaScriptJavaScript Originally called LiveScript when introducedOriginally called LiveScript when introducedin Netscape Navigatorin Netscape Navigator In Navigator 2.0, name changed toIn Navigator 2.0, name changed toJavaScriptJavaScript Current version 1.5Current version 1.5• JScriptJScript MS version of JavaScriptMS version of JavaScript• Current version 5.5Current version 5.5
  27. 27. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2727Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The JavaScript ProgrammingThe JavaScript ProgrammingLanguageLanguage• ECMAScriptECMAScript International, standardized version (EditionInternational, standardized version (Edition3)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. 28. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2828Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript The JavaScript ProgrammingThe JavaScript ProgrammingLanguageLanguage• 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. 29. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript2929
  30. 30. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3030Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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 theprogramprogram
  31. 31. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3131Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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. 32. JavaScript Tutorial 1 -JavaScript Tutorial 1 -Introduction to JavaScriptIntroduction to JavaScript3232Programming, HTML, andProgramming, HTML, andJavaScriptJavaScript 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

×