1 Overview
This guide serves as a quick walkthrough of JavaScript and it assumes that you have familiarity with Ruby. It isn't meant to be an exhaustive resource, just enough to get you comfortable with the purpose of the language and what it can be used for.
JavaScript started life as LiveScript, but Netscape changed the name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allow you to build interactivity into otherwise static HTML pages. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
JavaScript is:
- A lightweight, interpreted programming language
- Designed for creating network-centric applications
- Complementary to and integrated with HTML
- Open and cross-platform
Progressive enhancement is the fundamental base for all front-end development. It emphasizes creating a functional separation between HTML, CSS, and JavaScript.
Progressive enhancement is a layered approach to web design, where the focus is put on content, the user, and accessibility. In the world of web design, there are different languages responsible for each of these components. These languages are HTML, CSS, and JavaScript . We may refer to these three “layers” as structure, presentation, and behavior, probably so the methodology can be accurately applied to future areas beyond the current state of web design. JavaScript is responsible for behaviour in web design.
Everything must be fully functional without JavaScript. In many cases, JavaScript is nothing more than a luxury. You use it to smooth out interactions, make AJAX calls, slide elements around a page, and modify HTML.
If you didn't have JavaScript it wouldn't be as nice of a user experience, but if you can make it work without JavaScript, you will not only have built-in fallbacks if JavaScript fails, but you will have to write far less JavaScript to accomplish the same smooth experience for your users. Of course, less code means better performance, and better performance means a better user experience. This is all about providing the best user experience possible. If you can do that with less code, you absolutely should.
JavaScript can do almost anything; it’s a very dynamic language. It can create and destroy HTML, add and remove CSS, and even inject more JavaScript into a document. It’s crazy, and you certainly need to keep yourself in check or you can easily go overboard and code yourself into a corner. Hopefully you’ll avoid that by first learning what you can do with JavaScript and its core capabilities and intentions. Eventually you'll build enough experience to know how you should use it.
Being introduced to the capabilities of JavaScript can be pretty overwhelming, so right out of the gate we’ll lay out the three main functions of JavaScript:
- Modifying HTML
- Communicating with the server
- Storing data
Now let's look at where we can place this powerful stuff.
Inline JavaScript, like inline CSS, is when you insert JavaScript directly in the HTML. This has the same pitfalls that inline CSS has, but you still see this quite a bit, where inline CSS is all but dead in the wild.
<nav>
<ul>
<li><a href="/about" onclick="alert('this is the thing'); ">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Using inline JavaScript is generally not a good idea, but it is a good way to illustrate interacting with the user through JavaScript events. Using JavaScript this way will clutter your HTML with unnecessary behavior, which should be sectioned off and isolated in its own layer. When JavaScript is inserted in the HTML like this, we refer to it as obtrusive JavaScript because it’s kind of in the way. Our goal is to write unobtrusive JavaScript.
Embedded JavaScript is JavaScript that is inside an HTML document, but contained within a <script> element and executed only on that page.
<body>
<nav>
<ul>
<li><a href="/about" id="about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<script>
// The Function - define the thing you want to happen
function doTheThing(){
alert('This is the thing!');
}
// The Variable - get the element you want to do it on
var elem = document.getElementById("about");
// The Event Listener - set up something to listen for the event you want, then execute the function
elem.addEventListener("click", doTheThing, false);
</script>
</body> Although this JavaScript is completely unobtrusive, it still lives in the HTML document, and that’s not something that conforms to the idea of progressive enhancement. Ideally, all that JavaScript should be placed in an external file.
Making a JavaScript file external isn’t that different from doing the same to a CSS file. The <script> element you learned about in the previous section has an available attribute called src (source), which allows you to pull an external JavaScript file into an HTML document and execute the containing functions.
<script src="js/script.js"></script>
</body>
</html>You might notice that this script has been placed just above the closing body tag. Why? If we put these files in the <head>, they will need to load before the rest of the page is rendered. By putting the <script> tags at the end of the document body, they don't block rendering of the page.
JavaScript ignores spaces, tabs, and newlines.
Because you can use spaces, tabs, and newlines freely in your program, please format and indent your programs in a neat and consistent way that makes the code easy to read and understand.
Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
<script>
// This is a comment
/*
This is a multiline comment
*/
</script>
</body> Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if your statements are each placed on a separate line. For example, the following code could be written with or without a semicolon.
<script>
// a function with a semi colon
function doTheThing(){
alert('This is the thing!'); // <-- semi colon
}
// a function with a semi colon
function doTheThing(){
alert('This is the thing!') // <-- no semi colon
}
</script>
</body> By externally linking your CSS and JavaScript files, you are allowing the browser to cache them in memory for each user. What does this mean? When someone accesses your home page, many of the assets get saved so the user doesn’t have to redownload them. This betters the performance of your site from a user perspective.
If all the JavaScript for the entire site gets downloaded at the first visit to a site or application, as the user navigates around, there is no need to download that asset again, hence speeding up the load time for the site and minimizing HTTP requests.
The same rules apply for CSS. All the user needs to download after the assets are cached is the new, clean HTML you build for the internal pages. Because no inline CSS or JavaScript is in there, it is extremely fast to download.