JS - Libraries

Remember CSS frameworks providing pre-written solutions for styling our pages? There also exist this kind of open-source tools for JavaScript: JS Libraries.

Libraries are collections of functions and variables and other JS bits we've seen previously, and each are specialized for one particular domain. There exist libraries for everything that can be done with JS, from manipulating images to controlling micro-controllers. JS libraries are compilation of JavaScript code that we can use without rewriting it.

We're going to have a look at the most widely used library on the web:

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code, like:

• HTML/DOM manipulation: create or remove elements, retrieve or modify their content
• CSS manipulation: modify the style of our elements
• HTML event methods: call functions when a user interacts with our pages
• Effects and animations: create transitions for our elements
• AJAX: for loading data
• And more…

Just like CSS frameworks, to use a JS library like jQuery, we first need to include it in our document, with a few differences:

• instead of a link, we are going to use a script element, since this is a JS file.
• instead of including it in the head of our document, we'll put it at the end of the body of our pages with our other scripts.

We can load jQuery from CDNjs, a service that host thousands of libraries for us, as well as CSS frameworks (actually we already used it for loading normalize.css and Skeleton):

So at the end of our document's body, we can include jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The jQuery library exposes a single object, with a lot of methods, that can be accessed using the variable name jQuery or its shorter alias: $

jQuery works with selectors just like CSS to target specific elements, i.e. $( "#title" ) will select the element with the title id, and wraps it in a JS object with jQuery methods like $( "#title" ).text() to get its text, or $( "#title" ).text( "hello jQuery!" ) to set its text:

// we select all the elements with the "important" class and store that in a variable
var importants = $( ".important" );

// now we can use its methods
importants.text( "this is a paragraph" );
importants.css( "color", "red" );

// or we can chain methods:
// importants.text( "this is a paragraph" ).css( "color", "red" );

With jQuery's methods, we can also pass a function that returns a value, instead of a fixed value (cf. "this is a paragraph" or "red" in the previous note):

$( "#date" ).text( function() {
    var date = new Date();
    return date.toLocaleDateString();
} );

When passing a function as argument we can also have access to the element on which the function is executed using this (remember JS Objects?):

jQuery also provides an on method to add interaction by listening to events on elements, for example changing the size of a paragraph when the value of a slider changes:

Or we could do a simple task manager:

Good job! This is our first app! Without the pre-added tasks and all the comments, we have a simple yet functionnal task manager with 11 lines of JS! 🔥

Before letting you explore jQuery on your own, there is one last functionality of jQuery that we need to study: loading data.

We've talked about data formats like CSV, XML and JSON in previous parts. JSON is the most used nowadays because of its many advantages such as being lighter and a part of JavaScript.

In JS - Objects, we had this example:

We can store the value of authors in a authors.json file, we just need to put the name of the keys inside double quotes to make it valid JSON:

[
    {
        "name": "H. P. Lovecraft",
        "birthDate": "20/08/1890",
        "dateOfDeath": "15/03/1937",
        "books": [
            {
                "title": "The Rats in the Walls",
                "year": "1924"
            },
            {
                "title": "The Call of Cthulhu",
                "year": "1928"
            }
        ]
    },
    {
        "name": "J. R. R. Tolkien",
        "birthDate": "01/03/1892",
        "dateOfDeath": "09/02/1973",
        "books": [
            {
                "title": "The Hobbit",
                "year": "1937"
            },
            {
                "title": "The Lord of the Rings",
                "year": "1954"
            }
        ]
    },
    {
        "name": "Philip K. Dick",
        "birthDate": "12/16/1928",
        "dateOfDeath": "03,02,1982",
        "books": [
            {
                "title": "Do Androids Dream of Electric Sheep?",
                "year": "1968"
            },
            {
                "title": "Ubik",
                "year": "1969"
            }
        ]
    }
]

jQuery provides a .getJSON() method to load a json file and execute a function once the data is loaded. This method takes 2 arguments:

• the path to the json file
• a callback function to execute once the data is loaded. This function will gives us a myDataset argument containing the whole dataset.

Today thousands of services provide access to their data in JSON format, let's have a look at Random User Generator, a service that generates random user data (ideal to test your applications or fake your 10K firsts users) and provides an access to get this data as JSON

The .getJSON() method can take the url of a service that sends JSON instead of the path to a .json file, from this we could access the data of a generated user this way:

$.getJSON( "https://randomuser.me/api/", function( myDataset ) {
    var user = myDataset.results[ 0 ];
    console.log( user.name.first, user.name.last );
} );

From its documentation, Random User allows us to request multiple users at once, let's try that:

And that's the meaning of adding dynamism to web pages using JS!

We're approaching the end of the first part of this course and will soon explore new libraries/methods, there are a few things to consider: whether for manipulating DOM like jQuery, doing animation, creating generative visuals, working with spreadsheets, visualizing data, making interactive music, or anything else, there is a JS library for it. Google something like "JS library 3D modeling", open the result that seems most promising, look at the examples, check the documentation, maybe the number of stars if it's on GitHub to get an idea of the popularity of the lib, and you're ready!

Let's have a look at jQuery's documentation and more particularly to the .css() method we've already used:

And before using a library in your projects, there are also a few things to consider. Let's have a look at Sweet Alert, a library that makes popup messages easy and pretty.

• Libraries are sets of specialized code for a given field
• To use libraries, we need to load them before using them
• Good libraries come with great documentation. If the doc is not clear search for another library
• We can look for and tweak simple examples/snippets to learn from them
• Using the Console and console.log() is useful to keep track of what our code is doing

Quiz

Test your knowledge

JS Project

JS Assignment

Instructions

Remember your manager from the last assignment? They have a new job for you:

Bummer… did all your work go down the drain? Of course not! Now that we've learnt how to load and display data dynamically using jQuery, we will simply update our previous piece of work. We will keep the styling and simply create all elements using JavaScript!

Here are a few steps to start this assignment:

1. To begin with, duplicate (remix) your previous project that you did for assignment 1, in the Design Resources chapter.
   (To remix of project of yours, open it in the editor, click on its name in the upper-left corner, and hit "Remix project".)
2. Then, in your newly created project, create a JavaScript file and name it however you like (for instance, main.js).
3. To have your JS file be loaded in your webpage, don't forget that you have to add a <script> tag just before the end of your <body> tag in your HTML file.
4. Finally, remember that we're going to use jQuery for this exercise. Therefore, you want to also add a <script> tag for jQuery.

Here's what the end of your HTML file should look like:

<body>
    <!-- Your content goes here -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

Have a look at the example below to see it all together.

Your project should: To validate, your project must:

• use the dataset that was provided to you
• combine HTML, CSS, and JS
• load data using $.getJSON()
• create HTML elements using at least 2 pieces of information from the JSON data

Evaluation criteria

Resources

If you need more informations regarding the $.getJSON() method, you can consult the following links:

• jQuery.getJSON()
• Ajax/jQuery.getJSON Simple Example
• JQuery getJSON Example

Note on $.each( array, function(){ … } ):

$.each( json.data, function( index, gifObject ){
    console.log( gifObject.images.downsized.url );
} );

// is equivalent to the following for loop:
for( var index = 0; index < myDataset.data.length; index = index + 1 ) {
    var gifObject = myDataset.data[ index ]; // create a reference Object for the element in myDataset.data at index i
    console.log( gifObject.images.downsized.url );
}

See $.each() reference

Troubleshooting

Oh no, something's not working! Don't worry, here are a few frequent questions and answers, and tips on how to solve your issues. Click on a question that you have to see the answer.

var person = {
    name: {
        first: "John",
        last: "Doe",
    },
    age: 42,
}

console.log(person.first); // undefined (that would be person.name.first)
console.log(person.job);   // undefined (that key doesn't exist here)

var person = {
    name: {
        first: "John",
        last: "Doe",
    },
    age: 42,
}

console.log(person.nam.first); // error (we made a typo: person.nam is undefined, and we cannot access the property 'first' of undefined)

If none of these helped you solve your issue, feel free to ask on Slack.

Finally, here are a few things to watch out for:

• It's spelled length, not lenght 😉
• Also, it's spelled .html, not .htlm!
• Skeleton's grid system relies on a 12-column grid. Make sure that the size of your columns add up to 12, and that they're the only direct children of an element that has the .row class.

And that's it for the first part! Congratulations, you're doing great!

We've covered the basics of the different languages used for designing the Web.

It is now time to take a step back from these technical skills and to start reading the second part of this course.