Learn JavaScript Basics: Overview and Setup

Follow us on LinkedIn for our latest data and tips!

, ,

Learn JavaScript Basics: Overview and Setup

What is this Course?

This course is intended to be a beginner’s guide to the JavaScript programming language. It will cover basic features of JavaScript: operators, program flow-control, and loops; the document object model (DOM); as well as events, event listeners, and event functions.

This course assumes that the learner has at least some familiarity with modern computers, web browsers, and the internet, as well as HTML and CSS.
This course will feature instructional information as well as code examples and practice problems. Each informational section will be followed by a practice lab featured on https://www.codepen.io.

Explore JavaScript Courses

Those taking this course should have available to them 1) a computer with a web browser and internet connection, and 2) a text editor or access to an online coding environment (such as the previously mentioned  https://www.codepen.io/pen).

Good to go? Let’s get started!

What is JavaScript?

JavaScript is a computer programming/scripting language originally developed in order to add functionality to web pages.

JavaScript is considered a functional and Object Oriented Programming (OOP) language, as it relies heavily on the use of functions and the objects.

JavaScript typically runs on the “client side” (what users see), and is often said to be a “front end” language.

JavaScript is one of the most widely used programming languages on the web today. It is used by website giants such as Google, Facebook, Twitter, and YouTube.

Where does JavaScript Go?

JavaScript can be written directly into HTML documents, in between <script></script> tags. This method is considered to be the preferred way of injecting JavaScript code into HTML pages. A typical setup might look like this:

<!DOCTYPE html>




      //JavaScript can go here,





      //or JavaScript can go here.




JavaScript Comments

Comments in JavaScript are lines of text that are written directly into the JavaScript code, typically serving as explanations, hints, and/or reminders related to the code.

JavaScript comments DO NOT affect the flow or functionality of the rest of the code. Comments will appear grayed out in most syntax highlighting protocols. There are basically two ways to write JavaScript comments.

Single line:

//this is a JS comment; anything on this line will be “commented out” due to the preceding //

or across multiple lines:

 This is a JS comment too.
 Anything between the two slash-asterisk asterisk-slash symbols will be commented out.
 Comments will not affect the functionality of the rest of the code.

More technical details about JavaScript comments can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Comments

Explore JavaScript Courses

JavaScript Console

The JavaScript console is an incredibly useful companion when working JavaScript. Modern web browsers, such as Google’s Chrome browser, come preloaded with a feature called Developer Tools (or DevTools for short). These tools allow developers and users alike to inspect parts of a web pages and see output from programs. Think of the process as something similar to lifting up the hood of a car to see what’s going on inside.

These DevTools (or alternatively Web Inspectors) include what is known as the JavaScript console. Output from JavaScript programs can be logged to the console for purposes of debugging and testing. Warnings and errors are automatically logged to the console as well.

To open DevTools and gain access to the console, simply have open a web browser and press the F12 key. This will work for Chrome, Edge/IE, and Firefox browsers. If you’re using Safari, you can use the keyboard shortcut Option + Command + I to open the console.

To log output to the console, simply write

console.log(“want to log”);

in to your JavaScript code.

More technical information about the JavaScript console can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Console

Okay, got that? Time to practice!


LAB 1: Browser, Comments, and Console

Copy and paste (or simply click to follow) the following url into the address bar of your browser: https://codepen.io/anon/pen/zqJave?editors=0010