Cheat Sheet - International JavaScript Conference

JavaScript Crib Notes

mrbean — Mon, 04 Sep 2017 09:34:13 +0000

When it comes to programming languages it is worth mentioning JavaScript, which has become one of the most popular and used languages nowadays. The main purpose of this article is to give you a quick overview of its most noticeable characteristics. Thus, it is very suitable for junior programmers who have just started their career as well as for experienced developers who want to brush up their knowledge while they have a cup of coffee in the morning. We have no time to waste, so let’s dive into the world of JavaScript.

What is JavaScript?

Briefly, it is a powerful language used for programming on the web. While HTML and CSS take care for defining the content skeleton of the web page and specifying its layout respectively, JavaScript is responsible for programming its behavior. It is a high-level interpreted runtime language that supports imperative, object-oriented and functional programming styles. It was created in 1995 by Brendan Eich. Soon, in 1997 it was standardized in the ECMAScript language specification

Hello World example

I will begin with the well-established tradition of acquaintance with a new programming language, namely how to write Hello World. You can display this message in the following ways:

By using an alert box that pop-ups in the browser window
alert("Hello world!");Enumeration structured
By using the browser console
console.log("Hello world!");
By writing into the HTML output using document.write().
document.write("Hello world!");
By writing into an HTML element, using innerHTML.
document.getElementById("para").innerHTML = "Hello world!";

You can also write these statements in two places:

Between tags, inserted directly in HTML. This script can be placed in the , in the section of an HTML page or in both.
External JavaScript file, which is useful, when you have to use it in a lot of different pages. You should simply specify the name of the script file. All JavaScript files have .js extension. < src="script.js">

Visit our iJS ’17 Sessions with a focus on JavaScript/ECMAScript

→ Best Practices for Writing JS Libraries

→ Write solid JavaScript Code with TypeScript

→ SonarJS: a static Tool to detect Runtime Exceptions in JavaScript

All About JavaScript/ECMAScript at iJS ’17

Common mistakes

In this section, I will talk about the most common mistakes people usually make and how to avoid them.

Forgetting about JavaScript block-level scope

One of the most noticeable quirks of JavaScript is that it does not create a new scope for each code block. Consider the following code:

for ( var i = 0 ; i < 10 ; i ++) {
// some code
}
console . log ( i ); // What will be logged here?

Most of the experienced developers will say that the output would be null, undefined or an error. All of them are wrong, although this is true in many other languages. The actual output for the i variable is 10. This is so because the scope of the variable is not restricted to the for loop scope and its value remains as it was during the last loop iteration. You can solve this problem by using the let keyword instead of var. It will overcome the upper problem and the code will acts as it is in many languages. You can find more information about let here.

Undefined is not null

JavaScript uses both undefined and not null, but they are used in different context. Null is default value for objects, while undefined is for variables and properties. For an object to be null, it must be defined, otherwise it will be undefined. The following code depicts this case.

if ( obj !== null && typeof obj !== "undefined" ) // throws an error, obj must be defined first before check for null
if ( typeof myObj !== "undefined" && myObj !== null) //

Equality

Unlike some other languages, JavaScript has an additional operator for comparison – = = =. The basic difference between = = and = = = is called type coercion (More information: here). Shortly, it means that when the operands of an operator are different types, one of them will be converted according to ECMA-262 specification.

When you use ==, values may be considered equal, even if they are different types, since the operator will force coercion of one or both operators into a single type before performing a comparison. For example:

console . log ( 5 == '5' ); // Output: true. Both 5 and '5' are coerced to true
console . log ( null == undefined ); // Output: true. Both null and 'undefined' are coerced to false
console . log ( '' == 0 ); // Output: true. Both '' and 0 are coerced to false
console . log ( '0' == false ); // Output: true. '0' is coerced to false

However, if you use the non-converting comparison operator = = =, no conversion occurs. In other words, it only compares the values when they are of the same type. If the operands are of different types the answer is always false.

console . log ( 7 === 7 ); // Output: true
console . log ( 4 === '4' ); // Output: false.

“This” keyword

“This” keyword is one of the strangest and confusing things for both new and skilled JavaScript developers. In JavaScript ‘this‘ is the current execution context of a function. It is a reference to the object which calls the function.
Consider the following example:

window . name = "Super Window" ;

var mark = { age : 21 , name : "Mark" };
var sayHi = function () {
return "Hi, I am " + this . name ;
};

mark . sayHi = sayHi ;
sayHi (); // Hi, I am Super Window
mark . sayHi (); // Hi, I am Mark

When we call sayHi() the execution context is the global object. In this case it is window. It will be important and useful to remember that the value of this used in a function is the object that “owns” the function. The value of this used in an object is the object itself. This is not a variable. It is a keyword. You cannot change the value of this. (More information: here)

As much as I write about the most common mistakes, they will never end up. I recommend you to look at the references Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make and The Top 11 Mistakes That JavaScript Developers Make for further information.

Regular expressions

Can you imagine if you had to search for data in a text and to have something to describe what you are searching for? As you already know, regular expressions will do a great job for your task. They are patterns (sequence of characters) used to match character combinations in strings. This sequence forms a search pattern which can be used for operations like text search and replace.

You can create regular expressions in two ways:

Using a literal, which consists of a pattern enclosed between slashes and a modifier.
var pattern = /dreamix/ i ; // The template is / pattern / modifiers;
Calling the constructor function of the RegExp object, as follows:
var regExpr = new RegExp ( 'dreamix' );

In the first example /dreamix/i is a regular expression, dreamix is a pattern which is used in the search and i is a modifier (modifies the search to be case-insensitive).

Working with regular expressions

You must have noticed the “ modifier ” word in the previous bullet. Modifiers are used to perform different type of searching. (For example: i – case-insensitive matching; g – all matches without stopping after the first match; m – multiline matching)

Also, there are special characters that have special value when they are used in regular expression. You can check their full list for better understanding.

There are two sets of methods to deal with regular expressions. The first set is composed by so called String methods – match(), replace(), search(), and split(). The second one consists of test() and exec() and are used with RegExp. Examples:

var str = "The best company is Dreamix";

var n = str . search ( /dreamix/ i ); // Output: 20. Returns the index of the match

var repl = str . replace ( /company/ i , "company in the world" ); // Output: "The best company in the world is Dreamix". Replace the matched substring with a replacement substring.

var res = str . match ( /company/ g ); // Output: ["company"]. Returns an array of all matches or null on a mismatch.

var res = str . split ( /\s/ ); // Output: ["The", "best", "company", "is", "Dreamix"]. Splits the string using a substring or regular expression as a delimiter.

var res = /^The/ . test ( str ) // Output: true. Tests for a match in a string. It returns true or false

var res = /best/ . exec ( str ); // Output: ["best", index: 4, input: "The best company is Dreamix"]. Searches for a match in a string and returns an array of information, otherwise null.

If you are interested in regular expressions you can check the following pages at the Mozilla Development network on RegExo and Regular Expressions for more details.

JSON

Do you know that the data which is exchanged between a client (web-browser) and a server can only be text? Did you remember that there is a flexible format which can convert any JavaScript object into text and send it to server, and vice versa. The solution here is JSON (JavaScript Object Notation). It is a file format for transmitting data which is built on two structures:

A collection of key-value pairs. This collection can be considered as object, dictionary, hash table or associative array in most programming languages.
A list of values. In various languages this is called array, vector or list.

Example:

{
"companyName" : "Dreamix",
"address" :{ "city" : "Sofia",
"country" : "Bulgaria"
},
"website" : "http://dreamix.eu",
"keywords" :[ "Java EE", "AngularJS", "Oracle ADF", "Oracle SOA And BPM" ]
}

As you see from the example above all of the keys and string values are put in double quotes. The values must be only String, Number, Object, Array, true, false or null.

JavaScript object – JSON and JSON – JavaScript object

var company = { "name" : "Dreamix" , "city" : "Sofia" };
var companyJSON = JSON . stringify ( company ); // Output: {"name":"John", "age":31, "city":"New York"}

Note that JSON.stringify(obj) function is used for converting a JavaScript object into a string following JSON notation.

var companyJSON = '{ "name":"Dreamix", "city":"Sofia" }';
var obj = JSON . parse ( companyJSON );
console . log ( obj . name ); // Output: Dreamix

In this case JSON.parse(json) is used for converting a JSON string to a valid JavaScript object. The main benefit of JSON is that it is a platform and language independent. It is easy for machines to generate to parse it and for people to read or edit it. It is more useful than XML, because JSON can be parsed by a simple JS function, while you will need a XML parser for XML. What is more, JSON is shorter, does not use tags and it is quicker to read and understand.

Interesting JavaScript plugins and libraries

In general, the strength of a programming language comes from all of its plugins and libraries which are developed for it. In JavaScript, there are great amounts and most of them are useful and offer lightweight and problem-solving solutions that make the web development process much easier and faster for every JS developer.

Leaflet.js is an open-source JavaScript library for mobile-friendly interactive maps. It uses OpenLayers and the Google Maps API and it has become one of the most popular JavaScript mapping libraries and is used by major web sites such as FourSquare, Pinterest and Flickr. More Information and examples: http://leafletjs.com.

Chart.js is a powerful library, which is responsible for rendering different types of charts in the browser. It is perfect for small projects – when you need clean and elegant javascript charts. It includes 6 core chart types (line, bar, radar, polar, pie and doughnut), separated in modules. This means that you can load only the module you need. The entire chart is responsive. More Information: http://www.chartjs.org and https://github.com/chartjs/Chart.js.

Flexdatalist is a jQuery plugin for creating autocomplete input fields with support for . It has a clear UI and it is easy to implement. For more information and examples: GitHub repository of Flexdatalist and http://projects.sergiodinislopes.pt/flexdatalist/.

Tabulator is an easy to use interactive table generation plugin for jQuery. It allows you to create interactive tables in seconds from any HTML Table, Javascript Array, AJAX data source or JSON formatted data. It comes with a complete set of CSS classes to make a perfect styling. For more information and examples: http://olifolkerd.github.io/tabulator/.

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it. Examples and source code: https://github.com/fdansv/marginotes.

Philter is a JS plugin giving you the power to control CSS filters with HTML attributes. It is available as either a jQuery plugin or as vanilla JavaScript. For examples visit its official site.

D3.js is a library for producing dynamic, interactive data visualizations in web browsers. It helps you bring data to life using HTML, SVG, and CSS. The latest version changed the monolithic conception and it is separated to multiple modules that can be included in case you need one or more of them. More information and examples: https://d3js.org and https://github.com/d3/d3/wiki/Gallery.

As you can guess this is not the full list of all JS libraries and plugins. It is just a quick overview of some of them and the things they can do.
In addition here’s a short list of more libraries:

You can also find more informations in the article The ultimate JavaScript Plugin Cheat Sheet.

Conclusion

While we have to come to the end of the JavaScript cheat sheet, this definitely does not mean that I have told everything about the language characteristics, libraries or mistakes. There are so many to cover and we only had time for a quick overview. I hope you learned something new which will be helpful for your everyday work.

Discover all Tracks and Sessions of iJS ’17

→ Robust Production-ready Node.js/

→ Writing React Components: The Functional Way

→ Write solid JavaScript Code with TypeScript

The full Program of iJS ’17

The post JavaScript Crib Notes appeared first on International JavaScript Conference.

The ultimate JavaScript Plugin Cheat Sheet

mrbean — Wed, 28 Jun 2017 09:22:12 +0000

JavaScript is one the most powerful and dynamic interpreted language that has been standardized in the ECMAScript language specification. It is considered as one of the three core technologies of Internet content production along with HTML and CSS. Today, the majority of websites employ JavaScript and all the modern web browsers support it without the need of any plugins. Moreover, this high-end language is prototype-based with top class functions that make JavaScript a multi-program language, supporting object-oriented, imperative and functional programming styles.

What are regular expressions?

Regular expressions are patterns that are mainly used to match character combinations in strings. While in JavaScript, they are also objects that used with the exec and test methods of RegExp and with the match, replace, search and split methods of String.

JavaScript regular expressions (suffixes):

g – global
i – case-insensitive
s – single line
m – multi-lines

Regular expressions (masks):

^ – start of string
$ – end of string
(…) – grouping
!() – but this group
. – any character
(x|y) – either x or y
[xyz] – among x y or z
[^xyz] – any but x y or z
a? – holds a once
a+ – at least a once
a*zero – or several times a
a{5} – five times a
a{5,} – at least five times a
a{1, 4} – a between 1 and 4 times

Regular expressions (Quantifiers)

n+ – Matches any string that contains at least one n
n* – Matches any string that contains zero or more occurrences of n
n? – Matches any string which comes zero or one occurrence of n
n{X} – Matches any string, containing a sequence of X n’s
n{X,Y} – Matches any string that contains a sequence of X to Y n’s
n{X,} – Matches any string that contains a sequence of at least X n’s
n$ – Matches any string with n at the end of it
^n – Matches any string with n at the beginning of it
?=n – Matches any string that is followed by a specific string n
?!n – Matches any string that is not followed by a specific string n

Visit our iJS ’17 Sessions with a focus on JavaScript/ECMAScript

→ A Glimmer Of Hope – Creating Modern Web Components with Glimmer.js

→ Web goes Native: Progressive Web Apps (PWA) – with Angular

Program of iJS ’17

2017’s top JavaScript plugins

Cheat sheets are all very well and good, but sometimes you just need a plugin or two to make your JavaScript experience better. 2017 is nearly half gone; let’s take a look at some of the top plugins that have hit the ecosystem thus far.

Lory: The Lory is one of the top plugins that is a touch-enabled photo slider. Unlike others plugins that are available, it doesn’t use the lightbox effect. Rather, this plugin enables you to embed slideshows with number of slides, fixed or variable widths and fix them into any container element.
Using this tool is extremely easy, so you can customize the swipe options with JavaScript. Moreover, the plugin’s GitHub page has enormous source code samples and live demos you can try to see if this could fit into your next project.

Tingle: Today, modal windows are all the fury from email captures to interface notifications. Tingle is a widely-used plugin that takes modal windows to the next level with the basic CSS transitions and a completely clean JS options API for customization.
You can check out a live demo on their site with different features, including buttons and embedded videos. Moreover, you can apply custom CSS classes, attach internal content and even develop callback functions with JavaScript options. It will also help you to develop callback functions after the modal opens and closes.

Jump.js: A lot of developers know how to code hyperlinks, which help users to jump across the page. However, how many devs want to write their own smooth scrolling library? The answer of this question is none. Jump.js is a valuable plugin.
To use this plugin, you just need to drop it and add the function call to whatever links require smooth scrolling. Within minutes, you will be up and running in no time with essentially no maintenance whatever.

Plyr: Usually, I do not recommend using external video players; however, Plyr is one of the phenomenal plugins. This default player feels like a premium interface with closed captions, the space key shortcut to play/pause media and fullscreen mode.
Moreover, you can embed native HTML5 videos or external videos from YouTube/Vimeo. It also comes with a custom audio player for a similar visual without the video pane. No doubt, it is a wonderful and widely used video/audio media player running on HTML5 and vanilla JS. It is completely free and easy to customize with least efforts.

DropZone: DropZone is a totally free drag-and-drop JavaScript library that can be used to upload anything on the web. Generally, drag-and-drop is the common behavior in upload forms, whereas it is a highly popular feature and hard to develop from scratch.
But DropZone is one such plugin which is full of documentation. You can find much more information and a live demo on the official Dropzone website. It is popular for working right out of the box with very little customization required. You are allowed to expand this library with your own JS code that makes this plugin more than just a plugin.

baguetteBox.js: baguetteBox.js is the most advanced plugin, which can be used to develop reusable lightbox effects with an unlimited number of pictures. The plugin supports all the touch/swipe gestures for mobile users and it is completely responsive.
It even supports some of the extra features, including CSS3 transition effects, image captions and more. Moreover, this plugin is the dependency-free and open source, so it is completely recommended to go with it.

Headroom.js: With Headroom plugin, you can target your website’s navbar and auto-hides past some of the points. The plugin will also make the navbar re-appear whenever the user scrolls back up the page.
It is popular for its lightweight, high-performance JS widget, which enables you to react to the user’s scroll. What’s more, the header on this website is a live example as it slides out of view at the time of scrolling down and slides back.

Conclusion

One of the best things about JavaScript is the community. These cheat sheets and plugins would not have been possible without the help and knowledge of developers all around the world. JavaScript’s community makes it possible to create and build together, whether you’ve just started or have been in the business for years.

Thanks to these cheat sheets and plugins, the hassle of work can be made easy and effortless to save time and money. In any case, there’s always going to be professionals for help if the problem proves too insurmountable. Either way, good luck and good coding!

iJS ’17 is all about JavaScript

→ https://javascript-conference.com/node-js/production-ready-node-js/

→ Writing React Components: The Functional Way

→ Write solid JavaScript Code with TypeScript

Program of iJS ’17

The post The ultimate JavaScript Plugin Cheat Sheet appeared first on International JavaScript Conference.