1 / 69

JavaScript Fundamentals Tutorial: Web Basics to Debugging Logic

Dive into the fundamentals of JavaScript with this tutorial covering programming, HTML, and logic debugging on the World Wide Web. Learn how to create HTML documents, the role of JavaScript on the web, common HTML tags, debugging methods, and more.

pierro
Download Presentation

JavaScript Fundamentals Tutorial: Web Basics to Debugging Logic

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 1: Introduction to JavaScript Section A: Programming, HTML, and JavaScript

  2. Objectives • In this section, we will learn: • About the World Wide Web • What JavaScript is used for • About Hypertext Markup Language • How to create an HTML document • About the JavaScript programming language • About logic and debugging

  3. The World Wide Web • JavaScript lives and works within Web pages on the World Wide Web • World Wide Web (the “Web”) was created in 1989 at the European Laboratory for Particle Physics in Geneva, Switzerland

  4. The World Wide Web • Documents are located and opened using hypertext links, which contain a reference to a specific document • What is HTML? • Hypertext Markup Language (HTML) is a simple language used to design Web pages

  5. The World Wide Web • What’s a Web browser? • Web browser is a program that displays HTML documents on your computer screen • Hypertext Transfer Protocol (HTTP) manages hypertext links used to navigate the Web

  6. The World Wide Web • What’s a Domain Name? • Domain name is a unique address used for identifying a computer, often a Web server, on the Internet • Why do I ask so damn many questions? • A: To annoy the living Hell out of you

  7. The World Wide Web • What does a Domain Name consist of? • Domain name consists of two parts separated by a period: • Usually composed of text that identifies a person or organization • Identifies the type of institution or organization • For example, dsu.edu

  8. Sample URL

  9. JavaScript’s Role on the Web • The main purpose of HTML is to tell a browser how the document should appear • JavaScript brings HTML to life and makes Web pages dynamic • Dynamic basically means using the power of JavaScript to generate Web content on-the-fly

  10. JavaScript’s Role on the Web • Use JavaScript to change the contents of a Web page after it has been rendered by a browser • JavaScript is used for many different purposes, including advertising and entertainment

  11. Hypertext Markup Language • HTML documents must be text documents that contain formatting instructions, called tags, along with the text that has to be displayed on a Web page • What 3 tags are common to every HTML document?

  12. Hypertext Markup Language • HTML tags range from formatting commands that boldface and italicize text to controls that allow user input • Which HTML tags do that? • Many tags also have attributes that determine how they look, function, etc. • <FONT FACE=“ARIAL” SIZE=“10”>

  13. Hypertext Markup Language • HTML documents must have a file extension of .html or .htm • Assembling and formatting an HTML document is called parsing or rendering

  14. Common HTML Tags

  15. Hypertext Markup Language • Two important HTML tags are the <HEAD> and <BODY> • The <HEAD> tag is placed at the start of an HTML document • When a Web browser renders an HTML document, it ignores non-printing characters and only recognizes HTML tags and text included in the final document

  16. HTML Tags Placed Within the <HEAD>…<HEAD> Tag Pair

  17. <BODY> Tag Attributes

  18. Creating an HTML Document • Since HTML documents are text files, you can create them in any text editor such as ConTEXT, NotePad, WordPad, or any word-processing program • NOTE: HTML documents displayed in Internet Explorer can appear differently in Navigator

  19. The JavaScript Programming Language • JavaScript is a scripting language • Scripting language refers to programming languages that are executed by an interpreter from within a Web browser • What’s the diff between an interpreted language and a compiled language?

  20. The JavaScript Programming Language • Interpreter translates programming code into an executable format each time the program is run • Scripting engine is an interpreter that is part of the Web browser • Scripting host is a web browser that contains a scripting engine

  21. The JavaScript Programming Language • JavaScript language was first introduced in Navigator and was originally called LiveScript • JavaScript is available in two formats: client-side and server-side • What’s that mean?

  22. The JavaScript Programming Language • The standardized client-side JavaScript is the format available to HTML pages displayed in Web browsers • Server-side JavaScript is proprietary and vendor-specific

  23. Relationship of Client-Side and Server-Side JavaScript

  24. Logic and Debugging • JavaScript has its own syntax, or rules of the language • Logic underlying any program involves executing the various parts of the program in correct order to produce desired results

  25. Logic and Debugging • Any error in a program that causes it to function incorrectly is called a bug • Debugging describes the act of tracing and resolving errors in a program. Term coined by Grace Murray Hopper, who was instrumental in developing the COBOL programming language • She’s believed to have been drunk at the time

  26. Section A: Chapter Summary • Hypertext Markup Language (HTML) is a simple protocol used to design Web pages that appear on the World Wide Web • The World Wide Web is driven by Hypertext Transfer Protocol (HTTP), which manages hypertext links that are used to navigate the Web

  27. Section A: Chapter Summary • Every Web document has a unique address known as a Uniform Resource Locator (URL) • JavaScript brings HTML to life and makes Web pages dynamic, turning them into applications

  28. Section A: Chapter Summary • HTML documents must be text documents that contain formatting instructions, called tags, along with the text that is to be displayed on Web page • HTML tags range from formatting commands to controls that allow user input, to tags that allow the display of graphic images and other objects

  29. Section A: Chapter Summary • An interpreter translates programming code into an executable format each time the program is run--one line at a time • JavaScript is an interpreted programming language

  30. Section A: Chapter Summary • A scripting engine is an interpreter that is part of the Web browser which contains a scripting host • All programming languages, including JavaScript, have their own syntax, or rules of the language

  31. Section A: Chapter Summary • The logic behind any program involves executing the various parts of the program in the correct order to produce the desired results • Grace Murray Hopper, who was instrumental in developing COBOL, drank like a fish

  32. Tutorial 1: Introduction to JavaScript Section B: A First JavaScript Program

  33. Objectives • In this section, we will learn: • About the <Script> tag • How to create a JavaScript source file • How to add comments to a JavaScript program • How to hide JavaScript from incompatible browsers • About placing JavaScript in HEAD or BODY section of HTML documents

  34. The <SCRIPT> Tag • Statements that make up a JavaScript program in an HTML document are contained between the <SCRIPT>…</SCRIPT> tag pairs • The <SCRIPT> tag is used to notify the Web browser that commands following it need to be interpreted by a scripting engine

  35. The <SCRIPT> Tag • The language attribute of the <SCRIPT> tag tells the browser which scripting language and version is being used

  36. JavaScript Versions Supported by Navigator

  37. The <SCRIPT> Tag • An object is programming code and data that can be treated as an individual unit or component • Before we go any further, who can explain objects, properties, and methods? • Individual lines in a programming language are called statements

  38. The <SCRIPT> Tag • Groups of related statements associated with an object are called methods • To execute, or call, an object’s methods, append the method to the object with a period, and include any required arguments or parameters between parentheses

  39. The <SCRIPT> Tag • An argument is any type of information that can be passed to a method • HINT: It’s the stuff in parentheses • The write () and writeln() methods require a text string as an argument

  40. The <SCRIPT> Tag • Text string, or literal string, is text that is contained within double quotation marks • The only difference between the write() and writeln() methods is that the writeln () method adds a carriage return after the line of text

  41. Script Using Writeln() Method

  42. Output of Writeln() Script

  43. Why Did They Puke?

  44. Creating a JavaScript Document • Reference page 24 of the textbook

  45. Page 24 Script in IE • The MyFirstJavaScript.html file in all its glory

  46. Creating a JavaScript Source File • JavaScript is often incorporated directly into an HTML document • Can also save JavaScript code in an external file called a source file with file extension .js • The SRC attribute accepts a text string that specifies the URL or directory location of a JavaScript source file

  47. Creating a JavaScript Source File • JavaScript source files cannot include HTML tags – you will get an error • If JavaScript code intended for use in HTML document is fairly short, usually easier to include the code in an HTML document. • For longer JavaScript code, it is easier to include the code in a .js source file

  48. Creating a JavaScript Source File • Why would you may want to use .js source files instead of adding code to HTML? • Your HTML document will be neater • The JavaScript code can be shared among multiple HTML documents • JavaScript source files hide JavaScript code from incompatible browsers

  49. Creating a JavaScript Source File • You can use a combination of embedded JavaScript code and source files in your HTML document

  50. Adding Comments to a JavaScript Program • Comments are nonprinting lines that you place in code to contain various types of remarks. For example,name of program, your name, date created, and expletives • Line comments are created by adding two slashes // before the text • Block comments span multiple lines and are created by adding /* to the first line to be included in the block

More Related