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

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

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: 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

 * 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

 * 1) Create a web page that uses JavaScript to display , where   is your name. Test JavaScript output in a variety of ways:
 * 2) * Use
 * 3) * Use
 * 4) * Use  or
 * 5) * Use    Use your browser's built-in web development tools to view console output.
 * 6) **To open the console panel in Chrome press Ctrl+Shift+J (or Command+Option+J on Mac).
 * 7) **To open the console panel in Firefox press Ctrl+Shift+J (or Command+Shift+J on a Mac).
 * 8) **To open the console panel in Internet Explorer press F12 and then Ctrl+2.
 * 9) **To open the console panel in Safari press Option-Command-I in the Develop Menu and click on the Console tab.
 * 10) Using the Hello program above, test JavaScript code placement in a variety of ways:
 * 11) * Use  in   for the
 * 12) * Use  in   for the
 * 13) * Use  in   or   for the   or   and
 * 14) **   is how you link to an external JavaScript page, the name of which should end in .js, and should have a closing   tag
 * 15) Add comments to the external JavaScript src code above, describing the program.
 * 16) Add a   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.
 * 17) Research best practices for where to place JavaScript code and how to format and structure it (style guides).
 * 18) Research the difference between   and.

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  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  element is used to embed or reference executable code, and is typically used to embed or refer to JavaScript code.
 * 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  or   attributes.
 * The  attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed as soon as it is loaded.
 * The  attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed after the document has been parsed.
 * The  method writes a string of text to a document stream.
 * The  method displays an alert dialog with the optional specified content and an OK button.
 * The  method returns an Element object representing the element whose id property matches the specified string.
 * The Element  property gets or sets the HTML or XML markup contained within the element.
 * The HTMLElement  property represents the text content of a node and its descendants.
 * The  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 element. Example - &lt;script src='myscript.js'&gt;.


 * Nonscript Tag
 * The 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 element can be used in both and.


 * 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  in JavaScript?
 * How do you create a windowed message with JavaScript?
 * How do you embed JavaScript code in an HTML file?
 * What is  used for?
 * Why is linking to external scripts considered the best practice for script placement?
 * Where is the best place to put for faster loading webpages?
 * What is the difference between defer and async?