1 Introduction to JavaScript Programming, HTML, and JavaScript

11

Introduction to Introduction to JavaScriptJavaScript

Programming, HTML, and Programming, HTML, and JavaScriptJavaScript

22

TopicsTopics

Programming, HTML, and JavaScriptProgramming, 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

33


The World Wide WebThe World Wide Web• Created in 1989 Created in 1989

European Laboratory for Particle Physics European Laboratory for Particle Physics (Geneva Switzerland)(Geneva Switzerland)

• PurposePurpose Provide an easy way to access cross-Provide an easy way to access cross-

referenced documents that exist on the referenced documents that exist on the internet internet

44


The World Wide WebThe World Wide Web• Hypertext linksHypertext links

Contain reference to locate and open Contain reference to locate and open specific documents specific documents

• Hypertext Markup Language (HTML)Hypertext Markup Language (HTML) Language used to design web pages Language used to design web pages

(documents)(documents)

• Web BrowserWeb Browser Program that displays HTML documentsProgram that displays HTML documents

55


The World Wide WebThe 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 documentA unique identifier for a web document• e.g., a telephone number or mailing address e.g., a telephone number or mailing address

66


The World Wide WebThe World Wide Web• Uniform Resource Locator (URL)Uniform Resource Locator (URL)

Consists of 4 parts:Consists of 4 parts:• Protocol Protocol Hyper Text Transfer Protocol (HTTP) Hyper Text Transfer Protocol (HTTP)• Domain Name Domain Name or Internet Protocol (IP) address or Internet Protocol (IP) address• DirectoryDirectory• FilenameFilename

Specific document filenameSpecific document filename index.(s)htm(l) or default.(s)htm(l)index.(s)htm(l) or default.(s)htm(l)

77

88


JavaScript’s role on the WebJavaScript’s role on the Web• HTMLHTML

Purpose Purpose tell the browser how a document tell the browser how a document should appearshould appear

Static Static can view or print (no interaction) can view or print (no interaction)

99


JavaScript’s role on the WebJavaScript’s role on the Web• JavaScript Programming LanguageJavaScript Programming Language

Developed by Netscape for use in Navigator Developed by Netscape for use in Navigator Web BrowsersWeb Browsers

Purpose Purpose make web pages (documents) make web pages (documents) more dynamic and interactivemore dynamic and interactive

• Change contents of document, provide forms and Change contents of document, provide forms and controls, animation, control web browser window, controls, animation, control web browser window, etc.etc.

1010

1111

1212

1313


Hypertext Markup Language Hypertext Markup Language • HTML DocumentHTML Document

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

Document is Document is parsedparsed or or renderedrendered by browser by browser

1414



Tags Tags • Enclosed in brackets <tag>Enclosed in brackets <tag>• Generally consist of:Generally consist of:

Opening tags <tag>Opening tags <tag> Closing tags </tag>Closing tags </tag>

• Text contained between the opening and closing Text contained between the opening and closing tags are formatted according to tag instructions tags are formatted according to tag instructions

1515



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

end with </html>end with </html>• HTML is HTML is notnot case sensitive case sensitive

1616



Tag AttributesTag Attributes• Used to configure tagsUsed to configure tags• Placed before closing bracket of opening tagPlaced before closing bracket of opening tag

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

1717

1818

1919

2020



Web browser only acknowledges text and Web browser only acknowledges text and valid tagsvalid tags

Web browser ignores non-printing Web browser ignores non-printing characterscharacters

• Spaces, tabs, carriage returnsSpaces, tabs, carriage returns Must use valid tags or special character Must use valid tags or special character

codes to accomplish this:codes to accomplish this:• Non-breaking space Non-breaking space

2121

2222

2323


Creating an HTML Document Creating an HTML Document • Text editor (text)Text editor (text)

Notepad, WordPadNotepad, WordPad

• Word Processor (that can create text Word Processor (that can create text files)files)

WordWord

• HTML Editor (WYSIWYG)HTML Editor (WYSIWYG) FrontPage, PageMillFrontPage, PageMill

• HTML Converters (WYSIWYG)HTML Converters (WYSIWYG) Word, PowerPoint Word, PowerPoint

2424

2525


The JavaScript Programming The JavaScript Programming LanguageLanguage• Scripting LanguagesScripting Languages

Executed by an interpreter contained within Executed by an interpreter contained within the web browser (scripting host) the web browser (scripting host)

Interpreter uses a scripting engineInterpreter uses a scripting engine• Converts code to executable format each time it Converts code to executable format each time it

runsruns• Converted when browser loads web documentConverted when browser loads web document

2626


The JavaScript Programming LanguageThe JavaScript Programming Language• JavaScriptJavaScript

Originally called LiveScript when introduced in Originally called LiveScript when introduced in Netscape NavigatorNetscape Navigator

In Navigator 2.0, name changed to JavaScriptIn 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

2727


The JavaScript Programming The JavaScript Programming LanguageLanguage• ECMAScriptECMAScript

International, standardized version (Edition International, standardized version (Edition 3)3)

Both versions (JavaScript and JScript) Both versions (JavaScript and JScript) conform to the standardconform to the standard

• Although both have proprietary extensions Although both have proprietary extensions Focus of this textFocus of this text

2828


The JavaScript Programming The JavaScript Programming LanguageLanguage• 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

2929

3030


Logic and DebuggingLogic and Debugging• SyntaxSyntax

Rules of the languageRules of the language

• LogicLogic Order of execution of various parts of the Order of execution of various parts of the

programprogram

3131


Logic and DebuggingLogic and Debugging• Syntax errorSyntax error

Misuse of syntaxMisuse of syntax• e.g., typing e.g., typing ferfer instead of instead of forfor

• Logic errorsLogic errors Unintended operation of programUnintended operation of program

• e.g., Infinite loope.g., Infinite loop

3232


Logic and DebuggingLogic and Debugging• DebuggingDebugging

Tracing and resolving errors in a programTracing and resolving errors in a program Coined by Admiral Grace HopperCoined by Admiral Grace Hopper

• Moth short-circuited a relayMoth short-circuited a relay ““bug” in the systembug” in the system

• Removed it Removed it system “debugged” system “debugged” NotNot an exact science an exact science

Documents

1 Introduction to JavaScript Programming, HTML, and JavaScript