Thinking about a career change?

Coding is the skill of the 21st Century!

Be a part of the digital revolution. HTML, CSS and Javascript are the building blocks for your future in computer technology.

JavaScript is a programming language that adds interactivity to your website (for example: games, responses when buttons are pressed or data entered in forms, dynamic styling, animation).

This article helps you get started with this exciting language and gives you an idea of what is possible.

JavaScript is incredibly versatile. You can start small, with actions after a button click, make stuff appear if a certain statement is true, easily animate objects, create pop-ups and lightbox galleries. With more experience, you’ll be able to create games, animated 2D and 3D graphics, web and mobile apps, and much more!

This language itself is fairly compact yet very flexible. Many developers had made some open-source libraries that can make you do a lot writing less code like JQuery for example, this library has become a must if you want to build a simple website.

JQUERY

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Here’s are some examples of what you can do with it compared with the Vanilla Javascript (Plain Javascript Code):

.attr( attributeName )

The .attr() method gets the attribute value for only the first element in the matched set.

Example 

$(p).attr('class'); ==> gets the classes assigned to that element
$(p).attr('class', 'lead') ==> assign "lead" class to "class" attribute
Element.setAttribute(name, value); ==> same thing in plain Javascript code

.click( handler )

Description: Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML: 

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

The event handler can be bound to any 

$( "#target" ).click(function() {
    alert( "Handler for .click() called." );
});

These are just a couple of functions that you can use to interact with the DOM (Document Object Model, basically it connects the web pages to scripts or programming languages).

Image result for underscore js logo

UNDERSCORE.JS

Another useful but a little more advanced is Underscore.JS which provides over 100 functions that support both functional helpers: map, filter, invoke — as well as more specialised goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.

It is also useful if you want to easily build objects and functions, do some loops through objects and arrays, some of the functions that this library provides are:

each

_.each(list, iteratee, [context]) , short for: forEach in Javascript.

Iterates over a list of elements, yielding each in turn to an iteratee function. The iteratee is bound to the context object, if one is passed. Each invocation of iteratee is called with three arguments: (element, index, list).

If list is a JavaScript object, iteratee‘s arguments will be (value, key, list). Returns the list for chaining. 

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...

map_.map(list, iteratee, [context]) also called: collect in Javascript.

Produces a new array of values by mapping each value in list through a transformation function (iteratee). The iteratee is passed three arguments: the value, then the index(or key) of the iteration, and finally a reference to the entire list. 

_.map([1, 2, 3], function(num){ return num * 3; }); => [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; }); => [3, 6, 9]
_.map([1, 2], [3, 4], _.first); => [1, 3]
Want to find out more about these libraries and what you can do with Javascript? More post and tutorials will be coming out soon! In the meanwhile you can check out these important resources:
Share