JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 1 WDMD 170 Internet...
-
Upload
donald-thornton -
Category
Documents
-
view
220 -
download
0
Transcript of JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 1 WDMD 170 Internet...
1JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
WDMD 170 Internet Languages
eLesson: Introduction to JavaScript
(NON audio version)
© Dr. David C. Gibbs2003-04
2JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
Tutorial 1
Introduction to JavaScript
Section A – Programming, HTML, and JavaScript
[most slides credited to Gosselin: JavaScript 2e by Course Technology]
3JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
4JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
5JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
6JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
7JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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.100– Directory
» wdmd– Filename
» Specific document filename» index.(s)htm(l) or default.(s)htm(l)
8JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
9JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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)
10JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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.
11JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
12JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
13JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
14JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
15JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
16JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
17JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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>
18JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
19JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
20JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
21JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
22JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
23JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
24JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
Programming, HTML, and JavaScript
• Creating an HTML Document – Text editor (text)
• Notepad, WordPad, or HTML-Kit
– Word Processor (that can create text files)• Word
– HTML Editor (WYSIWYG)• FrontPage, PageMill
– HTML Converters (WYSIWYG)• Word, PowerPoint
25JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
26JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
27JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
28JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
29JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
30JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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.
31JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
Programming, HTML, and JavaScript
• Logic and Debugging– Syntax
• Rules of the language
– Logic• Order of execution of various parts of the
program
32JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
33JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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
34JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
Assignment: Obtain JS Reference Materials
• Download and extract to your disk the JavaScript help file (HTML format).
• 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.
35JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
Assignment: Obtain Gosselin Student Data Files
• Download the student data files from the Course Technology Website
• 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
36JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
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.
37JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point
End of eLesson
• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site