Wikiversity

JavaScript Programming/Introduction

< JavaScript Programming

This lesson introduces the JavaScript programming language and environments.

Objectives and Skills edit

Objectives and skills for this lesson include:[1]

  • Apply JavaScript best practices
    • Comments; indentations (code formatting); 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 edit

  1. Wikibooks: JavaScript/Introduction
  2. Wikibooks: JavaScript/First program
  3. Wikibooks: JavaScript/Placing the code
  4. CodeCademy: File Paths

Multimedia edit

  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: JavaScript for Beginners — Console Logging
  10. YouTube: Clean Code: Formatting and Comments
  11. YouTube: Javascript The innerHTML property
  12. YouTube: javascript: part1, console.log, getElementByID & innerHTML
  13. YouTube: JavaScript Loading Strategies (async and defer)
  14. Youtube: JavaScript DOM Tutorial #4 - The Query Selector
  15. Youtube: The innerText vs. textContent properties in JavaScript

Examples edit

Activities edit

  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() (which is the same alert()). windows.alert is best practice.
    • Use document.getElementById().innerText or document.getElementById().innerHTML to change the text of a paragraph
    • 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()
      • <script src="..."> is how you link to an external JavaScript page, the name of which should end in .js, and should have a closing </script> tag
  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 edit

  • 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 defer 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 edit

Console
Is an object which provides access to the browser debugging console. The console object provides us with several different methods, like :log(), error(), warn(), clear(),time(), etc. To open the developer console window for Chrome, use the keyboard shortcut Ctrl - Shift - J on Windows or Cmd + Option + J on a Mac. To open it for Firefox, use the shortcut Ctrl + Shift + K on Windows, or Cmd + Option + K on a Mac.[23]
JavaScript
The proprietary name of a high-level, object-oriented scripting language used especially to create interactive applications running over the internet.[24]
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.[25]
ECMAScript
A scripting-language specification, standardized by Ecma International, which was created to standardize JavaScript and foster multiple independent implementations.[26]
external script
A script file that is attached to the HTML using the <script> element. Example - <script src='myscript.js'>.[source?]
Nonscript Tag
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script. The <noscript> element can be used in both <head> and <body>. [27]
statement
A command that performs an action. An example being, alert("string"), where alert prints the string within the parenthesis.[source?]

Review Questions edit

  • 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 edit

References edit

  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. ↑ {{Cite web|url= https://www.geeksforgeeks.org/console-in-javascript/#:~:text=In%20javascript%2C%20the%20console%20is,error()
  24. ↑ "Definition of JavaScript | Dictionary.com". www.dictionary.com. Retrieved 2021-01-22.
  25. ↑ "JavaScript Comments". www.w3schools.com. Retrieved 2020-08-26.
  26. ↑ Wikipedia: EMCAScript
  27. ↑ {{Cite web|url= https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Introduction&oldid=2611017"