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


Tutorial 1

Introduction to JavaScript

Section A – Programming, HTML, and JavaScript

[most slides credited to Gosselin: JavaScript 2e by Course Technology]


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


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



• 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



• 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



• 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)



• JavaScript’s role on the Web– HTML

• Purpose tell the browser how a document should appear

• Static can view or print (no interaction)



• 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.



• Hypertext Markup Language – HTML Document

• Text document that contains:– Tags formatting instructions– Text to be displayed

• Document is parsed or rendered by browser




• 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




• Tags – All HTML documents begin with <html> tag

and end with </html>– HTML is not case sensitive




• Tag Attributes– Used to configure tags– Placed before closing bracket of opening tag

» <tag attribute=“value”>some text</tag>




• 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



• 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



• 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



• 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



• 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



• 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 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.



• Logic and Debugging– Syntax

• Rules of the language

– Logic• Order of execution of various parts of the

program



• 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



• 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


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.


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


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.


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site