Tutorial 1      Introduction to        JavaScriptSection A – Programming, HTML,         and JavaScript         JavaScript ...
Tutorial 1A Topics   Section A – Programming, HTML, and    JavaScript    •   About the World Wide Web    •   Uses of Java...
Programming, HTML, and            JavaScript   The World Wide Web    • Created in 1989         European Laboratory for P...
Programming, HTML, and            JavaScript   The World Wide Web    • Hypertext links         Contain reference to loca...
Programming, HTML, and            JavaScript   The World Wide Web    • Uniform Resource Locator (URL)         A type of ...
Programming, HTML, and            JavaScript   The World Wide Web    • Uniform Resource Locator (URL)         Consists o...
JavaScript      7             Tutorial 1 - Introduction
Programming, HTML, and             JavaScript   JavaScript’s role on the Web    • HTML       Purpose → tell the browser ...
Programming, HTML, and             JavaScript   JavaScript’s role on the Web    • JavaScript Programming Language       ...
JavaScript      10             Tutorial 1 - Introduction
JavaScript      11             Tutorial 1 - Introduction
JavaScript      12             Tutorial 1 - Introduction
Programming, HTML, and            JavaScript   Hypertext Markup Language    • HTML Document         Text document that c...
Programming, HTML, and            JavaScript   Hypertext Markup Language    • HTML Document         Tags           • Enc...
Programming, HTML, and            JavaScript   Hypertext Markup Language    • HTML Document         Tags           • All...
Programming, HTML, and            JavaScript   Hypertext Markup Language    • HTML Document         Tag Attributes      ...
JavaScript      17             Tutorial 1 - Introduction
JavaScript      18             Tutorial 1 - Introduction
JavaScript      19             Tutorial 1 - Introduction
Programming, HTML, and            JavaScript   Hypertext Markup Language    • HTML Document       Web browser only ackno...
JavaScript      21             Tutorial 1 - Introduction
JavaScript      22             Tutorial 1 - Introduction
Programming, HTML, and             JavaScript   Creating an HTML Document    • Text editor (text)         Notepad, WordP...
JavaScript      24             Tutorial 1 - Introduction
Programming, HTML, and             JavaScript   The JavaScript Programming    Language    • Scripting Languages       Ex...
Programming, HTML, and             JavaScript   The JavaScript Programming    Language    • JavaScript       Originally ...
Programming, HTML, and             JavaScript   The JavaScript Programming    Language    • ECMAScript       Internation...
Programming, HTML, and             JavaScript   The JavaScript Programming    Language    • JavaScript         Two forma...
JavaScript      29             Tutorial 1 - Introduction
Programming, HTML, and             JavaScript   Logic and Debugging    • Syntax         Rules of the language    • Logic...
Programming, HTML, and             JavaScript   Logic and Debugging    • Syntax error         Misuse of syntax          ...
Programming, HTML, and             JavaScript   Logic and Debugging    • Debugging       Tracing and resolving errors in...
Upcoming SlideShare
Loading in...5
×

introduction to javascript

382

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
382
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

introduction to javascript

  1. 1. Tutorial 1 Introduction to JavaScriptSection A – Programming, HTML, and JavaScript JavaScript Tutorial 1 - Introduction to JavaScript 1
  2. 2. Tutorial 1A Topics Section A – Programming, HTML, and JavaScript • About the World Wide Web • Uses of JavaScript • About Hypertext Markup Language • How to creating an HTML document • About the JavaScript programming language • About logic and debugging JavaScript 2 Tutorial 1 - Introduction
  3. 3. Programming, HTML, and JavaScript The World Wide Web • Created in 1989  European Laboratory for Particle Physics (Geneva Switzerland) • Purpose  Provide an easy way to access cross- referenced documents that exist on the internet JavaScript 3 Tutorial 1 - Introduction
  4. 4. Programming, HTML, and JavaScript The World Wide Web • Hypertext links  Contain reference to locate and open specific documents • Hypertext Markup Language (HTML)  Language used to design web pages (documents) • Web Browser  Program that displays HTML documents JavaScript 4 Tutorial 1 - Introduction
  5. 5. Programming, HTML, and JavaScript The World Wide Web • Uniform Resource Locator (URL)  A type of Uniform Resource Identifier (URI) • Identifies names and addresses on the WWW  A unique identifier for a web document • e.g., a telephone number or mailing address JavaScript 5 Tutorial 1 - Introduction
  6. 6. Programming, HTML, and JavaScript The World Wide Web • Uniform Resource Locator (URL)  Consists of 4 parts: • Protocol → Hyper Text Transfer Protocol (HTTP) • Domain Name → or Internet Protocol (IP) address • Directory • Filename  Specific document filename  index.(s)htm(l) or default.(s)htm(l) JavaScript 6 Tutorial 1 - Introduction
  7. 7. JavaScript 7 Tutorial 1 - Introduction
  8. 8. Programming, HTML, and JavaScript JavaScript’s role on the Web • HTML  Purpose → tell the browser how a document should appear  Static → can view or print (no interaction) JavaScript 8 Tutorial 1 - Introduction
  9. 9. Programming, HTML, and JavaScript JavaScript’s role on the Web • JavaScript Programming Language  Developed by Netscape for use in Navigator Web Browsers  Purpose → make web pages (documents) more dynamic and interactive • Change contents of document, provide forms and controls, animation, control web browser window, etc. JavaScript 9 Tutorial 1 - Introduction
  10. 10. JavaScript 10 Tutorial 1 - Introduction
  11. 11. JavaScript 11 Tutorial 1 - Introduction
  12. 12. JavaScript 12 Tutorial 1 - Introduction
  13. 13. Programming, HTML, and JavaScript Hypertext Markup Language • HTML Document  Text document that contains: • Tags → formatting instructions • Text to be displayed  Document is parsed or rendered by browser JavaScript 13 Tutorial 1 - Introduction
  14. 14. Programming, HTML, and JavaScript Hypertext Markup Language • HTML Document  Tags • Enclosed in brackets <tag> • Generally consist of:  Opening tags <tag>  Closing tags </tag> • Text contained between the opening and closing tags are formatted according to tag instructions JavaScript 14 Tutorial 1 - Introduction
  15. 15. Programming, HTML, and JavaScript Hypertext Markup Language • HTML Document  Tags • All HTML documents begin with <html> tag and end with </html> • HTML is not case sensitive JavaScript 15 Tutorial 1 - Introduction
  16. 16. Programming, HTML, and JavaScript Hypertext Markup Language • HTML Document  Tag Attributes • Used to configure tags • Placed before closing bracket of opening tag  <tag attribute=“value”>some text</tag> JavaScript 16 Tutorial 1 - Introduction
  17. 17. JavaScript 17 Tutorial 1 - Introduction
  18. 18. JavaScript 18 Tutorial 1 - Introduction
  19. 19. JavaScript 19 Tutorial 1 - Introduction
  20. 20. Programming, HTML, and JavaScript Hypertext Markup Language • HTML Document  Web browser only acknowledges text and valid tags  Web browser ignores non-printing characters • Spaces, tabs, carriage returns  Must use valid tags or special character codes to accomplish this: • Non-breaking space → &nbsp; JavaScript 20 Tutorial 1 - Introduction
  21. 21. JavaScript 21 Tutorial 1 - Introduction
  22. 22. JavaScript 22 Tutorial 1 - Introduction
  23. 23. Programming, HTML, and JavaScript Creating an HTML Document • Text editor (text)  Notepad, WordPad • Word Processor (that can create text files)  Word • HTML Editor (WYSIWYG)  FrontPage, PageMill • HTML Converters (WYSIWYG)  Word, PowerPoint JavaScript 23 Tutorial 1 - Introduction
  24. 24. JavaScript 24 Tutorial 1 - Introduction
  25. 25. Programming, HTML, and JavaScript The JavaScript Programming Language • Scripting Languages  Executed by an interpreter contained within the web browser (scripting host)  Interpreter uses a scripting engine • Converts code to executable format each time it runs • Converted when browser loads web document JavaScript 25 Tutorial 1 - Introduction
  26. 26. Programming, HTML, and JavaScript The JavaScript Programming Language • JavaScript  Originally called LiveScript when introduced in Netscape Navigator  In Navigator 2.0, name changed to JavaScript  Current version 1.5 • JScript  MS version of JavaScript • Current version 5.5 JavaScript 26 Tutorial 1 - Introduction
  27. 27. Programming, HTML, and JavaScript The JavaScript Programming Language • ECMAScript  International, standardized version (Edition 3)  Both versions (JavaScript and JScript) conform to the standard • Although both have proprietary extensions  Focus of this text JavaScript 27 Tutorial 1 - Introduction
  28. 28. Programming, HTML, and JavaScript The JavaScript Programming Language • JavaScript  Two formats: • Client-side  Program runs on client (browser) • Server-side  Program runs on server  Proprietary to web server platform JavaScript 28 Tutorial 1 - Introduction
  29. 29. JavaScript 29 Tutorial 1 - Introduction
  30. 30. Programming, HTML, and JavaScript Logic and Debugging • Syntax  Rules of the language • Logic  Order of execution of various parts of the program JavaScript 30 Tutorial 1 - Introduction
  31. 31. Programming, HTML, and JavaScript Logic and Debugging • Syntax error  Misuse of syntax • e.g., typing fer instead of for • Logic errors  Unintended operation of program • e.g., Infinite loop JavaScript 31 Tutorial 1 - Introduction
  32. 32. Programming, HTML, and JavaScript Logic and Debugging • Debugging  Tracing and resolving errors in a program  Coined by Admiral Grace Hopper • Moth short-circuited a relay  “bug” in the system • Removed it → system “debugged”  Not an exact science JavaScript 32 Tutorial 1 - Introduction
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×