Intro to JavaScript
Problem Statement
If we want to create modern, fully-equipped websites and web apps, we need to use JavaScript. This programming language has its own uses, history, tools and practices, and becoming familiar with them will let us leverage JavaScript's power to improve all of our web experiences.
Objectives
Describe the JavaScript language and its uses
Outline the history of JavaScript
Write JavaScript in the Chrome Dev Tools console
Identify JavaScript syntax and best practices
Establish good JavaScript learning habits
Describe the JavaScript language and Its Uses
JavaScript, commonly abbreviated as JS, is the programming language of the web. Along with HTML and CSS, it's used to create virtually all the web pages and apps you interact with, from Google to Facebook to Wikipedia to Amazon to Netflix.
Each of these three main web technologies plays a role in creating the content you see on a website:
HyperText Markup Language (HTML) provides structure to the content, arranging it in a nested, tree-like way, and allows us to mark up the content with attributes like
idandclass.Cascading Style Sheets (CSS) adds styling to the page, letting us customize the look of the content, often using
idandclassattributes, in addition to the semantic elements, to target the elements we want to style.JavaScript does pretty much everything else and handles most of the dynamic behavior of a website. For example: reacting to user events (like clicking a button), changing the page's content without reloading, and executing network requests in the background. Like CSS, the joining of HTML elements and changes that happen when they're interacted with (clicked on, moused over, etc.) often happens by targeting elements by their
idorclassattribute.
When you hover your mouse over a button and it wiggles in anticipation, or when you see new notification alerts on Twitter without refreshing the page, or when new content progressively appears at the bottom of the page as you scroll down your Facebook news feed—that's all JavaScript. At this point, JavaScript is a fundamental aspect of most users' web experience.
JavaScript is one of the most popular languages in the world, and it shows no signs of slowing up. It's still the only programming language that can run in every major browser (HTML is a markup language and CSS is a style sheet language).
Outline the History of JavaScript
The first version of JavaScript was built incredibly quickly in 1995. There were a few other competitors vying to become the language of the web, but they never gained enough traction to knock off JavaScript. And then... not much happened. There were incremental improvements and adjustments, but JavaScript development around 2000 very much resembled JavaScript development in the mid-1990s.
The Emergence of Asynchronous JavaScript
Around the turn of the century, Microsoft wanted to give its customers a way to access their email via a web browser, so they added a new JavaScript feature to Internet Explorer that allowed an already-loaded web page to fire off a request for additional data. It was a huge improvement over existing webmail services that required the whole page to be reloaded in order to check for new email. The process of making requests for additional data became known as Asynchronous JavaScript and XML, or AJAX. (We'll take a long look at AJAX and asynchronous code execution later on in the JavaScript material.) By 2004, when Gmail came along with a heavy dependence on AJAX, JavaScript was in the early stages of a rise in popularity and usefulness that has continued to the present day.
Standardization and Modernization
Even though AJAX provided a lot of useful functionality to the language, JavaScript was still difficult to program. Different browsers implemented different features in different ways. There were a few competing camps which all had different ideas about what the language should be. In early 2009, everyone came together to agree on standardization. The fifth version of JavaScript was released in late 2009. It's known as ES5 ('ES' for ECMAScript, the official name of the JavaScript specification) or Harmony (because it harmonized competing implementations of the ECMAScript specification). (Note: We still refer to the language as JavaScript, and use the particular version titles only when we need to point to particular version features.)
Harmonization was great, but the language was still lacking modern language features common to most standard programming languages like PHP, Java, C, Python and Ruby. JavaScript began to address those concerns in 2015 with the unveiling of ES6 or ES2015, the sixth version of JavaScript. Since then, they have released updates every year, including ES2016 and ES2017, both of which have brought additional modern features into the language.
Compilation and JavaScript
The name JavaScript was chosen as a marketing ploy: the Java language was all the rage in 1995. The two languages share very little in common. Some JS syntax is borrowed from Java (to make it more familiar for those early developers coming over from the world of Java), but that's about it.
Unlike Java, JavaScript code doesn't need to be compiled. The code that you write in a JavaScript file is the exact same code that the web browser parses and runs. In a compiled language like Java, you write some code in a human- readable format, and then the compiler takes that code and essentially translates it into machine-readable code. That means that it's very difficult to open up the source code for an application written in a compiled language and poke around in it to understand what's going on.
Because JavaScript doesn't get compiled, that is exactly what we can do with JavaScript code. Towards the end of this JavaScript curriculum, you'll find yourself able to go to a website you like, open up the source code using your browser's developer tools, and look directly at all of the JavaScript code used on that site. This is a powerful feature of the language and an incredible tool for learning by example.
Write JavaScript in the Chrome Dev Tools Console
Every major browser comes with a built-in set of developer tools that you can use to inspect, modify, and debug the content of a web page.
The console is an environment in the browser where we can type and run arbitrary JavaScript code in the context of the current browser window. The console is sandboxed, meaning the only resources it has access to are those loaded on the current page. Once we start declaring variables and functions in separate JavaScript files, we'll be able to access and play around with them in the console. The console is the single best tool for debugging JavaScript in the browser, so start familiarizing yourself with it now.
The Ctrl+Shift+J / Cmd+Opt+J command should open up straight into the console. If, for whatever reason, it doesn't, you can always click on Console in the dropdown (when the dev tools are collapsed) or in the list of tabs:
To access the Chrome dev tools settings — for example, to change the theme from light to dark — click the three vertical dots:
If at any point the console becomes cluttered with errors, warnings, or anything else, click the Clear console button:
Okay, okay, enough background and setup. Let's write some code!
Coding
We'll start off with some simple math. In the console, type 1 + 1 and press enter. You should see the number 2 appear.
You just wrote and ran your first line of JavaScript code!
Next up, let's write some text. To make sure the JavaScript engine knows that we're trying to write some literal text, we need to wrap it in quotation marks, like so:
Go ahead and type that classic phrase, "Hello, world!", into the console and press enter. It returned "Hello, world!" right back to us. Try typing some more literal text into the console, such as your name. Don't forget the quotation marks!
Debugging
JavaScript comes with a number of built-in features that can help us build and debug our applications. One of the simplest is the alert() function, which creates a simple alert in the browser window:
Try it out yourself! Put some numbers, text, or maybe even a mathematical equation between alert()'s parentheses and see what happens.
This is just a quick demonstration of one of the many features JavaScript makes available to you in the browser. In the lessons to come, we'll learn a lot more about the built-in magic JavaScript provides for us.
Identify JavaScript Syntax and Best Practices
Using Semicolons
In JavaScript, ending each statement with a semicolon is optional. When you run some JavaScript code in the browser, the JavaScript engine actually makes multiple passes over the same code. The first pass is to parse the syntax of your code. The second pass is to initialize variables and functions and store them in memory. And the third pass is to actually execute the code line-by-line. We'll learn more about the second and third phases in an upcoming lesson.
Most programmers consider the first and second pass the "compilation phase." It's where JavaScript makes sure that your code is readable and it sets up the computer to run your code ("Hey, CPU, can we have enough memory to hold this Array?", etc.). It's a lot like setting up a chain of dominoes. The third phase, as we called it above, is often called the "execution phase." It's where the code is run top-down, left-to-right. It's where JavaScript tips over the first domino and starts the chain of "doing work."
During the first pass as it's parsing the syntax of your JavaScript file, the engine undertakes a process called automatic semicolon insertion. The name says it all, and this is why statement-ending semicolons are optional — the JavaScript engine will automatically insert them for us. There's one main gotcha that we'll talk about in the lesson introducing functions, but it generally works as expected. That being said, semicolons are part of the JavaScript syntax, whether you insert them or the engine does. It's not a bad idea to practice putting them at the end of your statements, at least until you become more comfortable with the overall syntax of the language. Many of the examples in upcoming lessons will include semicolons to show you where they go, and we recommend you follow the same patterns.
Referencing Functions, Keywords, and Variables
Throughout the JavaScript curriculum on Learn.co, we'll often refer to pieces of code in these READMEs. If the piece of code is a function, we'll include a pair of trailing parentheses to mark it as such, e.g., myFunction() or the already introduced alert(). If the piece of code is a keyword in the language or a variable that we're referencing, there'll be no parentheses: myVariable, debugger, if...else, etc.
Establish Good JavaScript Learning Habits
It's impossible to overstate how important practice is when you're learning a new programming language. You can read the READMEs and watch the videos, but the true education is in writing code — lots of it.
As you move through the JavaScript curriculum, you should almost always have a browser console open, either on the lesson page or in a separate window. Code along with every example. Get used to the syntax and familiarize yourself with the errors that arise when you mistype something. Clear the console or simply refresh the page whenever you need a clean slate. Code, code, code, code, code.
Resources
Conclusion
JavaScript is a popular and powerful programming language for the web. It works with HTML and CSS to provide many of the web experiences users now interact with daily. Its history shows that its evolution has been complicated, but improvements are happening now on a regular, yearly basis. We can use the console in Chrome Dev Tools to run JavaScript code and there are best practices to use when it comes to syntax and referencing functions, keywords and variables. The most effective way to understand JavaScript code is to practice writing it frequently.
Last updated