1 Introduction to JavaScript Programming, HTML, and JavaScript

2 Topics Programming, HTML, and JavaScript Programming, HTML, and JavaScript 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 Programming, HTML, and JavaScript The World Wide Web The World Wide Web Created in 1989Created in 1989 European Laboratory for Particle Physics (Geneva Switzerland) European Laboratory for Particle Physics (Geneva Switzerland) PurposePurpose Provide an easy way to access cross- referenced documents that exist on the internet Provide an easy way to access cross- referenced documents that exist on the internet

4 Programming, HTML, and JavaScript The World Wide Web The World Wide Web Hypertext linksHypertext links Contain reference to locate and open specific documents Contain reference to locate and open specific documents Hypertext Markup Language (HTML)Hypertext Markup Language (HTML) Language used to design web pages (documents) Language used to design web pages (documents) Web BrowserWeb Browser Program that displays HTML documents Program that displays HTML documents

5 Programming, HTML, and JavaScript The World Wide Web The 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 document A unique identifier for a web document e.g., a telephone number or mailing addresse.g., a telephone number or mailing address

6 Programming, HTML, and JavaScript The World Wide Web The World Wide Web Uniform Resource Locator (URL)Uniform Resource Locator (URL) Consists of 4 parts: Consists of 4 parts: Protocol  Hyper Text Transfer Protocol (HTTP)Protocol  Hyper Text Transfer Protocol (HTTP) Domain Name  or Internet Protocol (IP) addressDomain Name  or Internet Protocol (IP) address DirectoryDirectory FilenameFilename Specific document filename Specific document filename index.(s)htm(l) or default.(s)htm(l) index.(s)htm(l) or default.(s)htm(l)

7

8 Programming, HTML, and JavaScript JavaScript’s role on the Web JavaScript’s role on the Web HTMLHTML Purpose  tell the browser how a document should appear Purpose  tell the browser how a document should appear Static  can view or print (no interaction) Static  can view or print (no interaction)

9 Programming, HTML, and JavaScript JavaScript’s role on the Web JavaScript’s role on the Web JavaScript Programming LanguageJavaScript Programming Language Developed by Netscape for use in Navigator Web Browsers Developed by Netscape for use in Navigator Web Browsers Purpose  make web pages (documents) more dynamic and interactive Purpose  make web pages (documents) more dynamic and interactive Change contents of document, provide forms and controls, animation, control web browser window, etc.Change contents of document, provide forms and controls, animation, control web browser window, etc.

10

11

12

13 Programming, HTML, and JavaScript Hypertext Markup Language Hypertext Markup Language HTML DocumentHTML Document Text document that contains: Text document that contains: Tags  formatting instructionsTags  formatting instructions Text to be displayedText to be displayed Document is parsed or rendered by browser Document is parsed or rendered by browser

14 Programming, HTML, and JavaScript Hypertext Markup Language Hypertext Markup Language HTML DocumentHTML Document Tags Tags Enclosed in brackets Enclosed in brackets Generally consist of:Generally consist of: Opening tags Opening tags Closing tags Closing tags Text contained between the opening and closing tags are formatted according to tag instructionsText contained between the opening and closing tags are formatted according to tag instructions

15 Programming, HTML, and JavaScript Hypertext Markup Language Hypertext Markup Language HTML DocumentHTML Document Tags Tags All HTML documents begin with tag and end with All HTML documents begin with tag and end with HTML is not case sensitiveHTML is not case sensitive

16 Programming, HTML, and JavaScript Hypertext Markup Language Hypertext Markup Language HTML DocumentHTML Document Tag Attributes Tag Attributes Used to configure tagsUsed to configure tags Placed before closing bracket of opening tagPlaced before closing bracket of opening tag some text some text

17

18

19

20 Programming, HTML, and JavaScript Hypertext Markup Language Hypertext Markup Language HTML DocumentHTML Document Web browser only acknowledges text and valid tags Web browser only acknowledges text and valid tags Web browser ignores non-printing characters Web browser ignores non-printing characters Spaces, tabs, carriage returnsSpaces, tabs, carriage returns Must use valid tags or special character codes to accomplish this: Must use valid tags or special character codes to accomplish this: Non-breaking space  Non-breaking space 

21

22

23 Programming, HTML, and JavaScript Creating an HTML Document Creating an HTML Document Text editor (text)Text editor (text) Notepad, WordPad Notepad, WordPad Word Processor (that can create text files)Word Processor (that can create text files) Word Word HTML Editor (WYSIWYG)HTML Editor (WYSIWYG) FrontPage, PageMill FrontPage, PageMill HTML Converters (WYSIWYG)HTML Converters (WYSIWYG) Word, PowerPoint Word, PowerPoint

24

25 Programming, HTML, and JavaScript The JavaScript Programming Language The JavaScript Programming Language Scripting LanguagesScripting Languages Executed by an interpreter contained within the web browser (scripting host) Executed by an interpreter contained within the web browser (scripting host) Interpreter uses a scripting engine Interpreter uses a scripting engine Converts code to executable format each time it runsConverts code to executable format each time it runs Converted when browser loads web documentConverted when browser loads web document

26 Programming, HTML, and JavaScript The JavaScript Programming Language The JavaScript Programming Language JavaScriptJavaScript Originally called LiveScript when introduced in Netscape Navigator Originally called LiveScript when introduced in Netscape Navigator In Navigator 2.0, name changed to JavaScript In Navigator 2.0, name changed to JavaScript Current version 1.5 Current version 1.5 JScriptJScript MS version of JavaScript MS version of JavaScript Current version 5.5Current version 5.5

27 Programming, HTML, and JavaScript The JavaScript Programming Language The JavaScript Programming Language ECMAScriptECMAScript International, standardized version (Edition 3) International, standardized version (Edition 3) Both versions (JavaScript and JScript) conform to the standard Both versions (JavaScript and JScript) conform to the standard Although both have proprietary extensionsAlthough both have proprietary extensions Focus of this text Focus of this text

28 Programming, HTML, and JavaScript The JavaScript Programming Language The JavaScript Programming Language JavaScriptJavaScript Two formats: Two formats: Client-sideClient-side Program runs on client (browser) Program runs on client (browser) Server-sideServer-side Program runs on server Program runs on server Proprietary to web server platform Proprietary to web server platform

29

30 Programming, HTML, and JavaScript Logic and Debugging Logic and Debugging SyntaxSyntax Rules of the language Rules of the language LogicLogic Order of execution of various parts of the program Order of execution of various parts of the program

31 Programming, HTML, and JavaScript Logic and Debugging Logic and Debugging Syntax errorSyntax error Misuse of syntax Misuse of syntax e.g., typing fer instead of fore.g., typing fer instead of for Logic errorsLogic errors Unintended operation of program Unintended operation of program e.g., Infinite loope.g., Infinite loop

32 Programming, HTML, and JavaScript Logic and Debugging Logic and Debugging DebuggingDebugging Tracing and resolving errors in a program Tracing and resolving errors in a program Coined by Admiral Grace Hopper Coined by Admiral Grace Hopper Moth short-circuited a relayMoth short-circuited a relay “bug” in the system “bug” in the system Removed it  system “debugged”Removed it  system “debugged” Not an exact science Not an exact science