JavaScript Programming/Introduction

From Wikiversity
Jump to navigation Jump to search

This lesson introduces the JavaScript programming language and environments.

Objectives and Skills

Objectives and skills for this lesson include:[1]

  • Apply JavaScript best practices
    • Comments; indentations; naming conventions; noscript; constants; reserved keywords; debugger keyword; setting breakpoints; console.log
  • Evaluate the use of inline and external scripts
    • When to use, how to use, and what happens when both are used

Readings

  1. Wikibooks: JavaScript/Introduction
  2. Wikibooks: JavaScript/First program
  3. Wikibooks: JavaScript/Placing the code

Multimedia

  1. YouTube: JavaScript Tutorial for Beginners - 01 - Introduction
  2. YouTube: JavaScript Tutorial for Beginners - 02 - Statements
  3. YouTube: JavaScript Tutorial for Beginners - 05 - Using an external file
  4. YouTube: JavaScript - Output
  5. YouTube: Beginner JavaScript Tutorial - 2 - Comments and Statements
  6. YouTube: JavaScript - How to use the console in a browser
  7. YouTube: noscript Tag - JavaScript Programming
  8. YouTube: Using Alert & Console.log in JavaScript
  9. YouTube: Clean Code: Formatting and Comments
  10. YouTube: Javascript The innerHTML property
  11. YouTube: The difference between Script, Script Async and Script Defer

Examples

Activities

  1. Create a web page that uses JavaScript to display Hello <name>!, where <name> is your name. Test JavaScript output in a variety of ways:
    • Use document.write()
    • Use window.alert()
    • Use document.getElementById().innerText or document.getElementById().innerHTML
    • Use console.log()
          Use your browser's built-in web development tools to view console output.
      • To open the console panel in Chrome press Ctrl+Shift+J (or Command+Option+J on Mac).[2]
      • To open the console panel in Firefox press Ctrl+Shift+J (or Command+Shift+J on a Mac).[3]
      • To open the console panel in Internet Explorer press F12 and then Ctrl+2.[4]
      • To open the console panel in Safari press Option-Command-I in the Develop Menu and click on the Console tab.[5]
  2. Using the Hello program above, test JavaScript code placement in a variety of ways:
    • Use <script> in <head> for the document.write()
    • Use <script> in <body> for the window.alert()
    • Use <script src=...> in <head> or <body> for the document.getElementById().innerText or document.getElementById().innerHTML and console.log()
  3. Add comments to the external JavaScript src code above, describing the program.
  4. Add a <noscript> section to the Hello html page above, displaying an appropriate message to users who have JavaScript disabled. Disable JavaScript in your browser to test the noscript section, then re-enable JavaScript.
  5. Research best practices for where to place JavaScript code and how to format and structure it (style guides).
  6. Research the difference between <script async ...> and <script defer ...>.

Lesson Summary

  • JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification.[6]
  • JavaScript comments are created using either // for single-line comments or /* ... */ for block comments.[7]
  • The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.[8]
  • The HTML <script> element is used to embed or reference executable code, and is typically used to embed or refer to JavaScript code.[9]
  • <script src="..."> specifies the URI of an external script and is used as an alternative to embedding a script directly within a document.[10]
  • JavaScript scripts required during the loading of the page are added to the document head section.[11]
  • JavaScript scripts not required during the loading of the page are added at the end of the document body section.[12]
  • JavaScript's best practice is to use external JavaScript files and load them at the end of the document body section.[13] Alternatively, external JavaScript files may be added at the end of the document head section and loaded asynchronously using the async or delay attributes.[14]
  • The async attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed as soon as it is loaded.[15]
  • The defer attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed after the document has been parsed.[16]
  • The Document.write() method writes a string of text to a document stream.[17]
  • The Window.alert() method displays an alert dialog with the optional specified content and an OK button.[18]
  • The document.getElementById() method returns an Element object representing the element whose id property matches the specified string.[19]
  • The Element innerHTML property gets or sets the HTML or XML markup contained within the element.[20]
  • The HTMLElement innerText property represents the text content of a node and its descendants.[21]
  • The console.log() method outputs a message to the web console.[22]

Key Terms

JavaScript
The proprietary name of a high-level, object-oriented scripting language used especially to create interactive applications running over the internet.[23]
comments
Used in programming languages, it allows the programmer to explain the code in a more understandable way to others. In JavaScript, there are two types of comments that can be created which includes single-line comments and block comments.[24]
ECMAScript
A scripting-language specification, standardized by Ecma International, which was created to standardize JavaScript and foster multiple independent implementations.[25]
external script
A script file that is attached to the HTML using the <script> element. Example - <script src='myscript.js'>.[source?]
statement
A command that performs an action. An example being, alert("string"), where alert prints the string within the parenthesis.[source?]

Review Questions

  • What are three different ways to implement JavaScript into an HTML file?
  • What can you do with document.getElementById() in JavaScript?
  • How do you create a windowed message with JavaScript?
  • How do you embed JavaScript code in an HTML file?
  • What is <noscript> used for?
  • Why is linking to external scripts considered the best practice for script placement?
  • Where is the best place to put <script></script> for faster loading webpages?
  • What is the difference between defer and async?

See Also

References

  1. Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. Chrome DevTools/
  3. MDNː Browser Console
  4. MSDNː Using keyboard shortcuts
  5. Safari Developer Helpː Developer Tools overview
  6. Wikipedia: JavaScript
  7. MDN: JavaScript Guide
  8. MDN: noscript
  9. MDN: script
  10. MDN: script
  11. MDN: Author Fast-Loading HTML Pages
  12. MDN: Author Fast-Loading HTML Pages
  13. MDN: Use JavaScript Within a Webpage
  14. MDN: script
  15. MDN: script
  16. MDN: script
  17. MDN: Document.write
  18. MDN: Window.alert
  19. MDN: Document.getElementById
  20. MDN: innerHTML
  21. MDN: innerText
  22. MDN: console.log
  23. "Definition of JavaScript | Dictionary.com". www.dictionary.com. Retrieved 2021-01-22.
  24. "JavaScript Comments". www.w3schools.com. Retrieved 2020-08-26.
  25. Wikipedia: EMCAScript