# JavaScript Programming/Introduction

This lesson introduces the JavaScript programming language and environments.

## Objectives and Skills

Objectives and skills for this lesson include:
* 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

* Wikibooks: JavaScript/Introduction
* Wikibooks: JavaScript/First program
* Wikibooks: JavaScript/Placing the code
* CodeCademy: File Paths

## Multimedia

* YouTube: JavaScript Tutorial for Beginners - 01 - Introduction
* YouTube: JavaScript Tutorial for Beginners - 02 - Statements
* YouTube: JavaScript Tutorial for Beginners - 05 - Using an external file
* YouTube: JavaScript - Output
* YouTube: Beginner JavaScript Tutorial - 2 - Comments and Statements
* YouTube: JavaScript - How to use the console in a browser
* YouTube: noscript Tag - JavaScript Programming
* YouTube: Using Alert & Console.log in JavaScript
* YouTube: JavaScript for Beginners — Console Logging
* YouTube: Clean Code: Formatting and Comments
* YouTube: Javascript The innerHTML property
* YouTube: javascript: part1, console.log, getElementByID & innerHTML
* YouTube: JavaScript Loading Strategies (async and defer)
* Youtube: JavaScript DOM Tutorial #4 - The Query Selector
* Youtube: The innerText vs. textContent properties in JavaScript

## Examples

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

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

### window.alert

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

### innerHTML and InnerText

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

### console.log

The window.alert outputs a message or a value to the console.
* W3Schools: JavaScript Introduction
* W3Schools: JavaScript Comments
* W3Schools: JavaScript Output
* W3Schools: JavaScript Where To
* W3Schools: HTML noscript tag
* W3Schools: Difference between innerText and innerHTML
* W3Schools: Window Alert
* W3Schools: DOM write Method
* W3Schools: GetElementById
* W3Schools: HTML DOM Element innerHTML
* Example Code

## 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 (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).
*** To open the console panel in Firefox press Ctrl+Shift+J (or Command+Shift+J on a Mac).
*** To open the console panel in Internet Explorer press F12 and then Ctrl+2.
*** To open the console panel in Safari press Option-Command-I in the Develop Menu and click on the Console tab.
* 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
* 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.
* JavaScript comments are created using either // for single-line comments or /* ... */ for block comments.
* 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.
* The HTML <script> element is used to embed or reference executable code, and is typically used to embed or refer to JavaScript code.
* <script src="..."> specifies the URI of an external script and is used as an alternative to embedding a script directly within a document.
* JavaScript scripts required during the loading of the page are added to the document head section.
* JavaScript scripts not required during the loading of the page are added at the end of the document body section.
* JavaScript's best practice is to use external JavaScript files and load them at the end of the document body section. Alternatively, external JavaScript files may be added at the end of the document head section and loaded asynchronously using the async or defer attributes.
* The async attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed as soon as it is loaded.
* The defer attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed after the document has been parsed.
* The Document.write method writes a string of text to a document stream.
* The Window.alert method displays an alert dialog with the optional specified content and an OK button.
* The document.getElementById method returns an Element object representing the element whose id property matches the specified string.
* The Element innerHTML property gets or sets the HTML or XML markup contained within the element.
* The HTML Element innerText property represents the text content of a node and its descendants.
* The console.log method outputs a message to the web console.

## Key Terms
### 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.

### JavaScript

    The proprietary name of a high-level, object-oriented scripting language used especially to create interactive applications running over the internet.

### 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.

### ECMAScript

    A scripting-language specification, standardized by Ecma International, which was created to standardize JavaScript and foster multiple independent implementations.

### 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>.

### 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?
* 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?
* What is the purpose of the <script> tag in an HTML document?

## See Also

* Wikipedia: JavaScript
* Wikipedia: Input/output
* Grasshopper: JavaScript Coding App for Beginners
* Google: JavaScript Style Guide
* Google: Get Started with the PageSpeed Insights API
* JavaScript Info: Scripts: async, defer
* Codecademy: Introduction to Javascript
* Javascript Learning Resource
* The Modern Javascript Tutorial
* Learn Javascript Online
* Geeks for Geeks: Understanding basic JavaScript codes
* W3Schools: JavaScript
* Async Vs Defer - JavaScript Loading Explanation