2. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Introduction to JavaScript (NON audio version) © Dr. David C. Gibbs 2003-04

3. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 2 Tutorial 1 Introduction to JavaScript Section A – Programming, HTML, and JavaScript [most slides credited to Gosselin: JavaScript 2e by Course Technology]

4. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 3 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

5. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 4 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

6. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 5 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

7. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 6 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

8. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 7 Programming, HTML, and JavaScript The World Wide Web –Uniform Resource Locator (URL) –e.g. http://www.uwsp.edu/wdmd/index.htm Consists of 4 parts: –Protocol  Hyper Text Transfer Protocol (HTTP) –Domain Name  or Internet Protocol (IP) address »www.uwsp.edu or 143.236.2.100www.uwsp.edu143.236.2.100 –Directory »wdmd –Filename »Specific document filename »index.(s)htm(l) or default.(s)htm(l)

9. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 8

10. 9 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)

11. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 10 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.

12. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 11

13. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 12

14. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 13

15. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 14 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

16. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 15 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

17. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 16 Programming, HTML, and JavaScript Hypertext Markup Language –HTML Document Tags –All HTML documents begin with tag and end with –HTML is not case sensitive

18. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 17 Programming, HTML, and JavaScript Hypertext Markup Language –HTML Document Tag Attributes –Used to configure tags –Placed before closing bracket of opening tag » some text

19. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 18

20. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 19

21. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 20

22. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 21 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 

23. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 22

24. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 23

25. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 24 Programming, HTML, and JavaScript Creating an HTML Document –Text editor (text) Notepad, WordPad, or HTML-KitHTML-Kit –Word Processor (that can create text files) Word –HTML Editor (WYSIWYG) FrontPage, PageMill –HTML Converters (WYSIWYG) Word, PowerPoint

26. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 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

27. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 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

28. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 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

29. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 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

30. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 29

31. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 30 JavaScript vs. Java Is JavaScript just a scaled down Java? NO! The two are very different. JavaScript adds programming features to client-side HTML Java is a full-blown compiled language. Java applets are also NOT JavaScript Here is a good explanation of the differences.good explanation

32. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 31 Programming, HTML, and JavaScript Logic and Debugging –Syntax Rules of the language –Logic Order of execution of various parts of the program

33. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 32 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

34. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 33 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“bug” in the system –Removed it  system “debugged” Not an exact science

35. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 34 Assignment: Obtain JS Reference Materials Download and extract to your disk the JavaScript help file (HTML format). JavaScript help file It is somewhat dated, but still a valuable resource. Be sure to extract the file (don’t drag and drop the files). Extracting preserves the folder structure – retains the integrity of the document.

36. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 35 Assignment: Obtain Gosselin Student Data Files Download the student data files from the Course Technology WebsiteCourse Technology NOTE: 443KB file, a “self-extracting executable.” Create a folder in which to extract the files. Here’s the folder I use: My Documents\Courses\WDMD 170\Gosselin\Student Data Files

37. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 36 Assignment: Search for Helpful JS Reference Materials Use Google or your favorite search engine to find JS reference materials on the web. Don’t take the first link you find! Post the link (with a brief summary – why did you find this site helpful?) in the discussion forum on D2L.

38. JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 37 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site