Skip to content Skip to navigation

OpenStax_CNX

You are here: Home » Content » JavaScript resources

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

JavaScript resources

Module by: Hannes Hirzel. E-mail the author

Summary: This module presents resources for JavaScript programming.

Motivation

Douglas Crockford asks in his book "JavaScript: The Good Parts" (O'Reilly, 2008) “Why should I use JavaScript?” (p.6). He gives two answers. The first one is that there is no choice if you want to do client side web programing. JavaScript is found in all browsers. In the nineties Java was introduced in that environment but was not much used in web browsers after that. So as JavaScript is widely used, he says, this is evidence that JavaScript did something right.

Introduction

JavaScript is an untyped dynamic languages which is interpreted. The syntax is similar to Java but it is a different language as functions are objects and inheritance is prototype-based.

Brendan Eich is the original author of JavaScript. He claims that he wrote the first version of the language in 10 days in 1995. He was told by the engineering management that the language must “look like Java”. And he says that he used first-class functions as in Scheme (a Lisp dialect) and prototypes (as in Self, but singular) as the main ingredients.

JavaScript is known most for adding interactive elements to web pages. JavaScript programs then run in a browser. Some predefined global objects in the client program (= the web browser) make programming easier. With JavaScript you may work on the DOM (Document object model) and change it interactively. Event handlers are defined in JavaScript. The jQuery JavaScript library is well known to access the DOM in a browser interdependent way.

If one goes beyond adding simple interactive elements to web pages it turns out that the language tends to be quite difficult as it supports many ways of programming. This includes procedural, functional and object-oriented styles. And recently web servers have been written in JavaScript.

Objects

In JavaScript an object is an unordered collection of key-value pairs - or a collection of named values. In other languages this is called hash or associative array (More).

Arrays

JavaScript arrays are specialized objects.

Functions

Functions may be defined and used as in a procedural language. But functions are objects too. If they are added to objects then they may be used as methods/member functions of that object. Functions without a name (=anonymous functions) are possible.

Control structures

Control structures page from Wikibooks

ECMAScript

JavaScript is standardized under the name ECMAScript. ECMAScript 3 was published in December 1999. ECMAScript 5 in December 2009. No version 4 was released.

Tutorials / Introductions

Christopher Vickery

The Tutorial by Christopher Vickery gives you an introduction to JavaScript. It assumes that you already know how to program in another language. It does not go into the depths of JavaScript. It explains how to define objects.

  • Variables, Values, and Expressions
  • Functions (with the 'function' keyword; sequence of statments)
  • Objects
  • Arrays
  • Loops
  • Script tags
  • Events
  • Events and Forms
  • DOM objects

Some notes how to set up JavaScript applications by the same author. In particular he writes about the importance of using event listeners instead of event handlers.

Rebecca Murphey

A similar introduction introduction by Rebecca Murphey. (Part of a book about jQuery, see below).

Mozialla Guide

A comprehensive Guide to JavaScript by Mozilla. In particular it explains the new features which were included in new releases of JavaScript.

"Re-introduction"

A concise https://developer.mozilla.org/en/A_re-introduction_to_JavaScript for people who have read about JavaScript before.

Eloquent JavaScript

Open content book Eloquent JavaScript, A Modern Introduction to Programming by Marijn Haverbeke (14 chapters including a chapters about funtioncal programming and object oriented programming).

FAQ

FAQ, has a good resources section.

Object Oriented Programming

Dmitry Soshnikov: OOP, General Theory and Implementation. A shorter article.

Google video lecture

JavaScript lecture as part of an introduction to HTML/CSS/JavaScript.

Codecademy glossary

JavaScript glossary

Document Object Model

On the client side (in web browsers) JavaScript is used to access the elements of an HTML or XML document. The way how this is done is specified by the World Wide Web Consortium (W3C) in an API documentation since 1998. There are several versions (called "levels") of it.

DOM compatibility tables

Methods to walk through the DOM tree

  • childNodes[]
  • children[]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling
  • parentNode

Note

childNodes holds all child nodes (this includes white space and comments) whereas children only holds element nodes (HTML tags).

More on the Document Object Model.

Advanced Javascript

John Resig (creator of jQuery): http://ejohn.org/apps/learn/

Arrays

Array "extras" in detail

Functions

About the three function types

Closures

David Flanagan in 'Javascript - The Definitive Guide' (6th edition, 2011, p. 180): "Technically all JavaScript functions are closures: they are objects, and they have a scope chain associated with them." In most cases when functions are invoked the scope chain used is the same as when the function was defined. But in case the scope chaing is different it offers powerful programming possibilities.

Good explanation of closures on Mozilla Developer Network; it includes an example how to do private methods with closures and mentions a common mistake with closures. The background for closures is that variables are scoped by functions.

Some JavaScript closures examples.

Immediately Invoked Function Expression (IIFE)

A anonymous function may be invoked immediately


(function () {
	// ... all vars and functions are in this scope only
	// still maintains access to all globals
}());
With this pattern modules can be defined. Often one sees the variant (function(){ /* code */ })(); which works fine as well (Details). Ben Cherry calls this the feature which makes modular programming possible in JavaScript. More in this cnx module.

Module pattern

The Module pattern provides a way to hide state and private methods. In-depth article.

More patterns

On-line book about JavaScript patterns. Another reference is 'JavaScript patterns' by Stoyan Stefanov (O'Reilly, 2010).

Server side JavaScript

nodejs.org is an event-driven environment for server-side JavaScript programming.

What is Node.js? (O'Reilly)

CNX module on Node.js.

Code snippets

The following code snippets give you an impression how JavaScript programs look like.

Displaying the properties of an object

for (prop in obj)
 {document.write("<p>" +prop + "</p>");}

for(var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            console.log(prop)
        }
    }

List only the properties of the object (= do not include the ones from the prototype chain)

Accessing an element by identification

elem = document.getElementById("myPara");

Changing a style property

document.getElementById("myNote").style.display = "none";

Accessing a cell of a table

document.getElementById("myTable").rows[n].cells[m]

For loop

le = myTable.length;
for (var i=0; i < le; i++) {
      elem = myTable[i];
      // ...
}

Creating an object based on a prototype



var theBase = {};  // literal object notation; empty object (i.e. based on Object)

theBase.name = "lemon";   // adding a property name and assigning a value.

console.log(theBase);

var myObj = Object.create(theBase);  // create myObj based on prototype 'theBase'

console.log(myObj);

myObj.count = 3;   // add property 'count' with value 3

console.log(myObj);

myObj.name = 'tomato';

console.log(myObj);


Reference

ECMA reference

Standard ECMA-262 ECMAScript Language Specification . Chapter 15.12 is about JSON. It describes the new JSON global object and contains a JSON grammar. However the web site json.org shows the much more readable railroad diagrams. However the eval function to create JSON objects mentioned there is obsolete. This has to be done with the JSON object.

Firefox

JavaScript Reference as implemented in Firefox

Microsoft library

JavaScript reference (as of IE9). Has a good 'How-to' section including 'regular expressions'.

Flanagan, The Definitive Guide

David Flanagan, JavaScript, The Definitive Guide, O'Reilly, 6th edition 2011; part one covers core JavaScript (lexical structure, types, values, variables, expressions, operators, statements, objects, arrays, functions. regular expressions, JavaScript subsets); part two covers client side JavaScript (web browsers), window object, DOM, handling CSS, events, a chapter on jQuery, client side storage, SVG, HTML5 APIs); Part three contains a reference. This book is comprehensive and saves a lot of time otherwise spent on web browsing looking for explanations.

Tools and Techniques

Scratchpad

Scratchpad is a JavaScript editor in the Firefox web browser which gives access to all objects defined in in a web page and allows to key in and execute additional code. (more).

40 techniques

http://www.tutoriallounge.com/2009/09/40-techniques-of-javascript-for-professional-ui/

Lint

The JSlint to do a static code analysis and mark suspicious constructs.

Conformance

Googlelab conformance tests

Testing

Writing testable JavaScript

Compatibility

www.quirksmode.org; a lot of tests. Note: If you use a library like jQuery you avoid a lot of compatibility problems.

Efficiency

Efficient JavaScript (dev.opera.com)

Compressor

Utility to compress JavaScript code to reduce loading time

Libraries

JavaScript libary overview by John Resig (2008).

Today jQuery is widely used (usage statistics). This does not mean that it is the only library which should be used. It defines and uses a global jQuery object with which all operations are done by cascading functions calls on it. It uses "$" as a shortcut for the jQuery object (more ...). In JavaScript variable names may start with "$".

Information visualisation

Small libraries

List of small libraries http://microjs.com/

Storage

jstorage

Notes and further reading

"JavaScript garden"

Notes about possible pitfalls and non-obvious issues for programmers coming from another language starting to use JavaScript.

Inheritance

Classical inheritance in Javascript by Douglas Crockford.

Blog

A JavaScript blog; for example article about iterating over arrays and objects or multiple roles of objects and arrays; quick overview

Memory management

The JavaScript interpreter releases memory which is no longer used. This process in known as 'garbage collection'. The programmer rarely has to think about memory issues.

Everything is an object?

In JavaScript basically everything is an object. Functions are objects too. There are primitive types: numbers, strings, boolean values. However these primitives types have properties and methods as well. They may be used only for reading. In terms of implementation you may think that a wrapper object is automatically created, the method executed and later the object discarded. The implementation however does not necessarily have to do this. The primitive types have to be made _behave_ like objects which have some properties which may be used for reading. But the state of those does not change. The only primitive values are null and undefined. (more)

Classes?

JavaScript does not need classes.

JSON

There is a literal notation for objects and arrays. More in module JSON - JavaScript Object Notation.

Style guide

Idiomatic JavaScript

Equality

Notes on equality operators (=== and !==) by Dmitry Soshnikov. See also note by John Resig about teaching JavaScript as a first language.

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks