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

To test the following examples, copy the code and paste it in the body of an HTML file and view the file in a browser, or use a JavaScript test environment such as W3Schools: Tryit Editor.

document.write()

edit

document.write() writes a string of text to a document stream. 

<script>
  document.write("Hello World");
</script>

window.alert()

edit

window.alert() displays an alert box with an optional message and an OK button. 

<script>
  document.alert("Hello World");
</script>

innerHTML and InnerText

edit

The innerHTML and innerText returns or sets the inner HTML and text of an element, respectively. 

<p id="id-name"> This text will be replaced</p>

<script>
  document.getElementById("id-name").innerHTML = "Hello World";
</script>

console.log()

edit

The window.alert() outputs a message or a value to the console. 

<script>
  console.log("Hello World")
</script>

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 as alert()). window.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 HTML Element 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?
  • Is it mandatory to end a statement with a semicolon in JavaScript?
  • What can you do with document.getElementById() in JavaScript?
  • How do you create a windowed message with JavaScript?
  • What is a common use for comments during code testing?
  • 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=2650460"