JavaScript Programming/Introduction
This lesson introduces the JavaScript programming language and environments.
Objectives and Skills
editObjectives 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
editMultimedia
edit- 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
edit- 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
edit- 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
ordocument.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]
- Use
- Using the Hello program above, test JavaScript code placement in a variety of ways:
- Use
<script>
in<head>
for thedocument.write()
- Use
<script>
in<body>
for thewindow.alert()
- Use
<script src="...">
in<head>
or<body>
for thedocument.getElementById().innerText
ordocument.getElementById().innerHTML
andconsole.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
- Use
- 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
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
ordefer
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'>.
- 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.
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- 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
References
edit- ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
- ↑ Chrome DevTools/
- ↑ MDNː Browser Console
- ↑ MSDNː Using keyboard shortcuts
- ↑ Safari Developer Helpː Developer Tools overview
- ↑ Wikipedia: JavaScript
- ↑ MDN: JavaScript Guide
- ↑ MDN: noscript
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: Author Fast-Loading HTML Pages
- ↑ MDN: Author Fast-Loading HTML Pages
- ↑ MDN: Use JavaScript Within a Webpage
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: Document.write
- ↑ MDN: Window.alert
- ↑ MDN: Document.getElementById
- ↑ MDN: innerHTML
- ↑ MDN: innerText
- ↑ MDN: console.log
- ↑ {{Cite web|url= https://www.geeksforgeeks.org/console-in-javascript/#:~:text=In%20javascript%2C%20the%20console%20is,error()
- ↑ "Definition of JavaScript | Dictionary.com". www.dictionary.com. Retrieved 2021-01-22.
- ↑ "JavaScript Comments". www.w3schools.com. Retrieved 2020-08-26.
- ↑ Wikipedia: EMCAScript
- ↑ {{Cite web|url= https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript