1 introduction to javascript programming, html, and javascript
Post on 21-Dec-2015
234 views
TRANSCRIPT
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
Hypertext Markup Language Hypertext Markup Language • HTML DocumentHTML Document
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
Hypertext Markup Language Hypertext Markup Language • HTML DocumentHTML Document
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
Hypertext Markup Language Hypertext Markup Language • HTML DocumentHTML Document
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
Hypertext Markup Language Hypertext Markup Language • HTML DocumentHTML Document
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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
Programming, HTML, and Programming, HTML, and JavaScriptJavaScript
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