JavaScript Programming/Introduction

< JavaScript Programming

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

Multimedia

Examples

Activities

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]
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()
Add comments to the external JavaScript src code above, describing the program.
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.
Research best practices for where to place JavaScript code and how to format and structure it (style guides).
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'>.

statement: A command that performs an action. An example being, alert("string"), where alert prints the string within the parenthesis.

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

JavaScript Programming

Variables and Expressions →

This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.