Post on 05-Jan-2016
JavaScript Tutorial 1 - Introduction to JavaScript 1
Tutorial 1
Introduction to JavaScript
Section A – Programming, HTML, and JavaScript
JavaScript Tutorial 1 - Introduction to JavaScript 2
Tutorial 1A Topics
• Section A – Programming, HTML, and JavaScript– About the World Wide Web– Uses of JavaScript– About Hypertext Markup Language– How to create an HTML document– About the JavaScript programming language– About logic and debugging
JavaScript Tutorial 1 - Introduction to JavaScript 3
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
JavaScript Tutorial 1 - Introduction to JavaScript 4
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
JavaScript Tutorial 1 - Introduction to JavaScript 5
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
JavaScript Tutorial 1 - Introduction to JavaScript 6
Programming, HTML, and JavaScript
• The World Wide Web– Uniform Resource Locator (URL)
• Consists of 4 parts:– Protocol Hyper Text Transfer Protocol (HTTP)– Domain Name or Internet Protocol (IP)
address– Directory– Filename
» Specific document filename» index.(s)htm(l) or default.(s)htm(l)
JavaScript Tutorial 1 - Introduction to JavaScript 7
JavaScript Tutorial 1 - Introduction to JavaScript 8
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)
JavaScript Tutorial 1 - Introduction to JavaScript 9
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.
JavaScript Tutorial 1 - Introduction to JavaScript 10
JavaScript Tutorial 1 - Introduction to JavaScript 11
JavaScript Tutorial 1 - Introduction to JavaScript 12
Programming, HTML, and JavaScript
• HTML: static display of information• Scripts: small programs that allow
interactivity.• Languages: JavaScript, Jscript,
VBScript
to javascript
JavaScript Tutorial 1 - Introduction to JavaScript 13
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
JavaScript Tutorial 1 - Introduction to JavaScript 14
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
JavaScript Tutorial 1 - Introduction to JavaScript 15
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
JavaScript Tutorial 1 - Introduction to JavaScript 16
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>
JavaScript Tutorial 1 - Introduction to JavaScript 17
JavaScript Tutorial 1 - Introduction to JavaScript 18
JavaScript Tutorial 1 - Introduction to JavaScript 19
JavaScript Tutorial 1 - Introduction to JavaScript 20
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
JavaScript Tutorial 1 - Introduction to JavaScript 21
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
JavaScript Tutorial 1 - Introduction to JavaScript 22
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
JavaScript Tutorial 1 - Introduction to JavaScript 23
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
JavaScript Tutorial 1 - Introduction to JavaScript 24
JavaScript Tutorial 1 - Introduction to JavaScript 25
Programming, HTML, and JavaScript
• Logic and Debugging– Syntax
• Rules of the language
– Logic• Order of execution of various parts of the
program
JavaScript Tutorial 1 - Introduction to JavaScript 26
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
JavaScript Tutorial 1 - Introduction to JavaScript 27
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