Below are my notes from the JavaScript presentation last week.
“use strict”;
JavaScript
JavaScript is an embedded scripting language. JavaScript does not do anything useful on its own. It must be embedded in a host application which provides useful functionality.
class MyClass{ ... }
MyClass myObj = new MyClass();
engine.put("theObject", myObj);
The most common hosts are Web browsers.
The main implementations are:
- Google V8
- Mozilla SpiderMonkey
- Microsoft JScript
You can write your own host.
- Java Scripting API allows you to write a host in Java.
- QScript module allows you to write a host using Qt.
- You can embed an existing interpreter in your own C/C++ application.
Other noteworthy implementations:
- Node.js is a host for V8 that enables low-level access to the OS. It is getting popular to use on Web servers (see MEAN stack).
- Windows Script Host allows JScript to access ActiveX objects. This is the closest thing Windows has to Bash (including “Bash for Windows”).
- Java 6 and later ship with a JavaScript interpreter (either Mozilla Rhino or Oracle Nashorn) which can be accessed through the Scripting API.
JavaScript Basics
Types
Everything is an Object. Variables are just pointers to Objects. “Primitives” are just Objects which can be created using special syntax. There are 7 primitive types and 2 special values.
The special values are null
and undefined
.
Variables which are not initialized are automatically set to undefined
.
Otherwise, there is no significant difference between undefined
and null
.
The 7 primitive types are Boolean, Number, String, RegExp, Object, Array, and Function.
Booleans
Booleans are created using the literals true
and false
.
They can be combined using the operators &&
and ||
.
Booleans can be flipped using !
.
Numbers
JavaScript does not have distinct integer and floating-point types.
There are also the special numbers NaN
and Infinity
.
1/0
evaluates to Infinity
and 0/0
evaluates to NaN
.
You can convert a String to a Number using Number.parseInt
or Number.parseFloat
.
They return NaN
if the String cannot be parsed.
If you need to use integers, use Math.round
, Math.floor
, or Math.ceil
.
To check if a number is an integer, use num === Math.round(num)
.
Strings
Strings can contain any Unicode character except a newline.
RegExps
Objects
Arrays
Functions
var myFunc = function(){};
var myAr = [function(){}];
var myObj = { method: function(){ return this.x; }, x: 4 };
myObj.method();
var method = myObj.method;
method.call(myObj);
Web JavaScript
DOM (Document Object Model) enables JavaScript to access and manipulate the browser’s internal representation of the web page.
AJAX (Asynchronous JavaScript And XML) enables JavaScript to send HTTP requests to the server and process the responses.
Libraries
General
jQuery is an abstraction on top of DOM and AJAX which ensures cross-browser compatibility and offers convenient higher-level operations.
Bootstrap is a framework for creating responsive mobile-first applications. It enables a web page to automatically reorganize itself based on the size of the user’s screen.
Underscore.js is a library for high-level array processing.
Backbone.js is a lightweight MVC framework. It offers better structure for your client-side code than jQuery offers on its own. It is smaller and easier to learn than AngularJS.
AngularJS is the most popular client-side MVC framework. Almost all Web Developer job postings require it.
RequireJS is a JavaScript file and module loader. It can improve download performance by downloading scripts asynchronously. It also ensures that scripts are loaded in the correct order, which can be difficult otherwise, since the order in which the script tags should be placed is not always obvious.
Games
Phaser.js is the most-starred HTML5 2D game library on GitHub. It is flexible and easy to learn, and there are many resources available for it.
Three.js, while not technically a game library, is often used for games. Three is a 3D library built on top of WebGL.
Babylon.js is a framework for building 3D games.
Tools
Node.js includes npm
, the “Node.js Package Manager”.
There are many Web-oriented development tools available for download.
You can use npm init
to create a package.json
file in your project directory,
which lists the project’s build-time and run-time dependencies.
You or other developers on your team can then use npm install
to install the dependencies.
Grunt and Gulp are two build systems written for Node.js. At a minimum, they can be used to create “minimized” versions of your scripts. These remove all unnecessary whitespace and rename local variables to have single-letter names, improving download time. They can also be used to copy files or run other tools (such as Cordova or the Closure Compiler).
Apache Cordova is used to create cross-platform apps using HTML5 technologies. You write your app in HTML5, CSS, and JavaScript, and Cordova generates a custom browser for your app. The custom browser exposes device APIs that the default browser does not (for security reasons). Ionic provides Cordova with a set of components that let your app look like a native app.
Google’s Closure Compiler is used to optimize your JavaScript and check for common pitfalls. It can also be invoked during Grunt or Gulp builds.
GWT (the Google Web Toolkit) compiles Java source code to JavaScript.
Emscripten is like GWT, but for C/C++.
Other Full-Stack Frameworks
- Java
- J2EE
- Spring
- Python
- Django
- Pyramid
- Bottle
- Ruby on Rails
- .NET MVC
See Also
- The Mozilla Developer Network has the most comprehensive reference documentation for JavaScript and other standard Web technologies.
- W3 Schools contains many simple tutorials and reference material. It’s useful for quick lookups, but MDN is more comprehensive and authoritative.
- Eloquent JavaScript is a good introductory book on JavaScript.