05

Enhancing With JavaScript

Excerpt

Your website is a building. The markup is the rebar and cement. CSS is the drywall and furniture. JavaScript is the electricity. Electricity is amazing and important and makes a whole lot work, but if you’re not careful, you can start a big fire with it.

JavaScript is a dynamic programming language. That means it executes its behaviors when the code is being executed on the client (runtime), rather than when it is being compiled. Here’s an actual example:

In a static programming language, such as Java or Objective-C, the type of a variable must be declared explicitly in the code, like this:

  String myString = "Hello world";

In a dynamic programming language, such as JavaScript, the variable does not need a type, as the language will figure it out at runtime. Here is an example:

  var myString = 'Hello world';

Moreover, in a static programming language, once a variable is set as a type, it remains that type. Trying to do the following will result in a compile type warning:

  String myString = "Hello world";
  myString = 1; // Compile type warning

In a dynamic programming language, you are free to change an object’s type for the same variable. Names are bound to an object with an assignment operator. Therefore, the following works totally fine:

  var myString = 'Hello world';
  myString = 1; // Go for it, superstar.

There are many more differences between these programming languages than just how type handling works, but the lesson here is that there’s more freedom, and freedom to make mistakes, using a dynamic language.

Although JavaScript is available in plenty of non-web platforms, such as PDFs, desktop widgets, and virtual machines, for the purposes of this discussion it’s important to understand that JavaScript is part of the user’s browser. It’s used to implement scripts that interact with the user, modify the DOM, communicate asynchronously with the server, and control the browser itself.

Try it

  • Exercise One (Easy)

    Check out the code from the repository. You have all the assets ready to pull three different JavaScript files into your page, but are not yet pulling them in. Build the logic switch to pull js_small.js, js_medium.js, and js_large.js in at the correct sizes.

    A sample solution is also given in the repository.

  • Exercise Two (Intermediate)

    Expand on the preceding question by handling resize and orientation events within your logic switch.

    A sample solution is also given in the repository.

  • Exercise Three (Hard)

    Check out the code from the repository. It’s a page with one main section, and two optional sections. You’ll notice other files containing JSON representations of the optional sections. Rewrite the index.html page to load only the main section by default, and push the loading of the other sections after initial page load.

    A sample solution is also given in the repository.

  • Exercise Four (Expert)

    Expand on the preceding question by only pulling the additional sections in when users request them. Explore different ways to make the performance of this operation feel faster to a user.

    A sample solution is provided in the repository.

Enjoying what you're reading? There's plenty more.

Order the book