JavaScript Tutorial 1 - Introduction to JavaScript1 Tutorial 1 Introduction to JavaScript Section A – Programming, HTML, and JavaScript

JavaScript Tutorial 1 - Introduction to JavaScript2 Tutorial 1A Topics Section A – Programming, HTML, and JavaScript –About the World Wide Web –Uses of JavaScript –About Hypertext Markup Language –How to create an HTML document –About the JavaScript programming language –About logic and debugging

JavaScript Tutorial 1 - Introduction to JavaScript3 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 Tutorial 1 - Introduction to JavaScript4 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 Tutorial 1 - Introduction to JavaScript5 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 Tutorial 1 - Introduction to JavaScript6 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 Tutorial 1 - Introduction to JavaScript7

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 Tutorial 1 - Introduction to JavaScript9 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 Tutorial 1 - Introduction to JavaScript10

JavaScript Tutorial 1 - Introduction to JavaScript11

JavaScript Tutorial 1 - Introduction to JavaScript12 Programming, HTML, and JavaScript HTML: static display of information Scripts: small programs that allow interactivity. Languages: JavaScript, Jscript, VBScript to javascript

JavaScript Tutorial 1 - Introduction to JavaScript13 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 Tutorial 1 - Introduction to JavaScript14 Programming, HTML, and JavaScript Hypertext Markup Language –HTML Document Tags –Enclosed in brackets –Generally consist of: »Opening tags »Closing tags –Text contained between the opening and closing tags are formatted according to tag instructions

JavaScript Tutorial 1 - Introduction to JavaScript15 Programming, HTML, and JavaScript Hypertext Markup Language –HTML Document Tags –All HTML documents begin with tag and end with –HTML is not case sensitive

JavaScript Tutorial 1 - Introduction to JavaScript16 Programming, HTML, and JavaScript Hypertext Markup Language –HTML Document Tag Attributes –Used to configure tags –Placed before closing bracket of opening tag » some text

JavaScript Tutorial 1 - Introduction to JavaScript17

JavaScript Tutorial 1 - Introduction to JavaScript18

JavaScript Tutorial 1 - Introduction to JavaScript19

JavaScript Tutorial 1 - Introduction to JavaScript20 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 Tutorial 1 - Introduction to JavaScript21 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 Tutorial 1 - Introduction to JavaScript22 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 Tutorial 1 - Introduction to JavaScript23 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 Tutorial 1 - Introduction to JavaScript24

JavaScript Tutorial 1 - Introduction to JavaScript25 Programming, HTML, and JavaScript Logic and Debugging –Syntax Rules of the language –Logic Order of execution of various parts of the program

JavaScript Tutorial 1 - Introduction to JavaScript26 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 Tutorial 1 - Introduction to JavaScript27 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