Category Archives: Javascript

JAVASCRIPT ES6

JavaScript ES6

JavaScript ES6 brings new syntax and amazing features to make the users code more up-to-date and readable. It allows the user to write less code and do more. ES6 introduces the user to many great features like arrow functions, template strings, class destruction, Modules, and much more. So, let’s dive deep in and study the new features on JavaScript ES6.

CONST & LET

Const is a new keyword in ES6 for declaring variables. const is more influential than var. Once it is used, the variable cannot be reassigned. In other words, it is an immutable variable except when it used with objects. This is really useful for targeting the selectors.

const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = “Constant variable”;
b = “Assigning new value”; // shows error.

LET

Let is similar to var but let has scope. Let is only accessible in the block level it is defined.

JavaScript ES6
if (true) {
let a = 40;
console.log(a); //40
}
console.log(a); // undefined
In the above example variable ‘a’ is defined inside If statement and so it’s not accessible outside the function.

ARROW FUNCTIONS

The arrow function makes the users code more readable, more structured, and look like modern code.

// Old Syntax
function oldOne() {
console.log(“Hello World..!”);
}
// New Syntax
var newOne = () => {
console.log(“Hello World..!”);
}
The new syntax may be confusing a bit.
There are two parts of the syntax.
var newOne = ()
=> {}

The first part is declaring a variable and assigning the function () to it.
The second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.

DEFAULT PARAMETERS

If you are familiar with other programming languages such as Ruby, Python then default parameters is not new to you.

Default parameters are parameters which are given by default while declaring a function. But the value can be changed when calling the function.

let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30

In the above example, we are passing only one parameter. The function makes use of the default parameter and executes the function.

MAPS

Map holds key-value pairs, it is similar to an array but we can define our own index and indexes are unique in maps. In maps, all indexes are unique and we can use any value as key or value.

var NewMap = new Map();
NewMap.set(‘name’, ‘John’);
NewMap.set(‘id’, 2345796);
NewMap.set(‘interest’, [‘js’, ‘ruby’, ‘python’]);
NewMap.get(‘name’); // John
NewMap.get(‘id’); // 2345796
NewMap.get(‘interest’); // [‘js’, ‘ruby’, ‘python’]

GETTERS AND SETTERS

Getters and setters are one of the useful feature introduced in ES6. It will come in handy if you are using classes in JS.

class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People(“Jon Snow”);
console.log(person.getName());
person.setName(“Dany”);
console.log(person.getName());
Output:
Jon Snow
Dany

WHAT ARE THE PROS AND CONS OF USING JAVASCRIPT ES5 VERSUS ES6?

What are the pros and cons of using JavaScript ES5 versus ES6?

Pros

ES5:

You have a lot of browser support.

ES6:

You have tail call optimization.
You have import statements.
Lamba’s are pretty amazing.
Immutable and block scoping objects with “const” and “let”.
Classes and OO Inheritance.
Functors, and all that functional goodness.
String templates that handle interpolation for you.

Cons

ES5:

It doesn’t have everything that ES6 has.

ES6:

It doesn’t have all the support that ES5 has, but you can always transpile your ES6 code.

WHAT ARE THE PROS OF USING THE HANDLEBARS TEMPLATE OVER UNDERSCORE.JS?

What are the pros of using the Handlebars template over Underscore.js?

Picking one over the other is a subjective thing – it really comes down to your preferred programming style – but when compared, handlebars edges out underscore.js as below:

Logic-less templates do a great job of forcing you to separate presentation from logic.

Clean syntax leads to templates that are easy to build, read, and maintain.

Compiled rather than interpreted templates.

Better support for paths than mustache (ie, reaching deep into a context object).

Better support for global helpers than mustache.

Requires server-side JavaScript to render on the server.

Clean syntax leads to templates that are easy to build, read, and maintain.

Compiled rather than interpreted templates.

Better support for paths than mustache (ie, reaching deep into a context object).

Better support for global helpers than mustache.

Requires server-side JavaScript to render on the server.

MACHINE LEARNING IN JAVASCRIPT

Machine Learning in JavaScript

Machine learning libraries are growing faster and more available with each passing year, showing no signs of breaking down. While traditionally Python has been the go-to language for machine learning, now-a-days neural networks can run in any language, including JavaScript!

The web system has made a lot of development in recent times and although JavaScript and Node.js are still fewer performers than Python and Java, they are now dominant to handle many machine learning hitches.

Most of the JavaScript machine learning libraries are fairly new and still in improvement, but they do exist and are ready for the users to try them. In this article, we will look at some of these libraries, as well as a number of cool AI web app instances to get you started.

BRAIN

The brain is a library that makes the user to easily create neural networks and then train them depending on input/output data. As training takes up a lot of resources, it is better to run the library in a Node.js location, though a CDN browser version can also be loaded directly onto a web page. There is a small demo on their website that can be trained to identify color contrast.

SYNAPTIC

It is the most vigorously maintained project on the list, Synaptic is a Node.js and browser library that is architecture-agnostic, allowing the developers to build any type of neural network they want. It has some narrow built-in architectures, making it likely to test and relate different machine learning algorithms. It also features a well-published introduction to neural networks, a number of practical demos, and many other great tutorials illustrating how machine learning works.

FLAPPYLEARNING

FlappyLearning is a JavaScript project that is of hardly few lines of un-minified code copes to build a machine learning library and implement it in a fun demo that learns to play Flappy Bird like a virtuoso. The AI method used in this library is called Neuroevolution and applies algorithms motivated by nervous systems found in nature, dynamically learning from each iteration’s success or failures. The demonstration is super easy to run – just open index.html in the browser.

CONVNETJS

Though it is no longer actively maintained, ConvNetJS is one of the most progressive deep learning libraries for JavaScript. It works directly in the browser, supports several learning techniques, and is rather low-level, making it appropriate for people with better experience in neural networks.

NEUROJS

Framework for building AI systems based on reinforcement learning. Miserably, the open-source project does not have a right documentation but one of the demos, a self-driving car experiment, has a great description of the different parts that make up a neural network. The library is in pure JavaScript and made using modern tools such as web pack and babel.

CONCLUSION

Although the JavaScript machine learning ecosystem is not completely developed yet, we suggest using the resources on this list to make your first steps in ML and get a feel for the core techniques. As the experimentations in this article show, there are loads of exciting stuff you can make by using only the browser and some familiar JavaScript code.

JAVASCRIPT ES8

Javascript ES8

EcmaScript 8 or EcmaScript 2017 was officially released at the end of June by TC39. It seems that we are talking a lot about EcmaScript in the 2016. The standard is to publish a new ES specification version once a year. ES6 was published in 2015 and ES7 was published in 2016, but do someone remember when ES5 was released? It happened in 2009, before the magical rise of JavaScript. In this article we are going to discuss about ES8 and its new features. So, explore this article and know more about EcmaScript 8.

OBJECT.VALUES AND OBJECT.ENTRIES

The Object.values method returns an array of a given own object’s enumerable property values, in the same order as that provided on behalf of a loop. The declaration of the function is trivial.

Object.values(obj)

The obj parameter is the source object for the operation. It can be an object or an array.

const obj = { x: ‘xxx’, y: 1 };
Object.values(obj); // [‘xxx’, 1]

const obj = [‘e’, ‘s’, ‘8’]; // same as { 0: ‘e’, 1: ‘s’, 2: ‘8’ };
Object.values(obj); // [‘e’, ‘s’, ‘8’]

2

// when we use numeric keys, the values returned in a numerical
// order according to the keys
const obj = { 10: ‘xxx’, 1: ‘yyy’, 3: ‘zzz’ };
Object.values(obj); // [‘yyy’, ‘zzz’, ‘xxx’]

Object.values(‘es8′); // [‘e’, ‘s’, ‘8’]

The Object.entries method returns an array of a given object’s own enumerable property [key, value] pairs, in the same order as Object.values. The declaration of the function is trivial:

const obj = { x: ‘xxx’, y: 1 };
Object.entries(obj); // [[’x’, ‘xxx’], [’y’, 1]]

const obj = [’e’, ‘s’, ‘8’];
Object.entries(obj); // [[’0’, ‘e’], [’1’, ‘s’], [’2’, ‘8’]]

const obj = { 10: ‘xxx’, 1: ‘yyy’, 3: ‘zzz’ };
Object.entries(obj); // [[’1’, ‘yyy’], [’3’, ‘zzz’], [’10’, ‘xxx’]]

Object.entries(‘es8′); // [[‘0′, ‘e’], [‘1′, ‘s’], [‘2′, ‘8’]]
This section adds two functions to the String object i.e. padStart & padEnd.

As their names, the purpose of those functions is to pad the start or the end of the string, so that the resulting string reaches the given length. The user can pad the specific character or string or just pad with spaces by default. Below are the functions declaration.

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

As we can see, the first parameter of the functions is the targetLength, that is the total length of the resulted string. The second parameter is optional padString that is for the string to pad the source string. The default value is space.

‘es8′.padStart(2); // ‘es8′
‘es8′.padStart(5); // ‘ es8′
‘es8′.padStart(6, ‘woof’); // ‘wooes8′
‘es8′.padStart(14, ‘wow’); // ‘wowwowwowwoes8′
‘es8′.padStart(7, ‘0’); // ‘0000es8′
‘es8’.padEnd(2); // ‘es8′
‘es8’.padEnd(5); // ‘es8 ‘
‘es8’.padEnd(6, ‘woof’); // ‘es8woo’
‘es8’.padEnd(14, ‘wow’); // ‘es8wowwowwowwo’
‘es8’.padEnd(7, ‘6’); // ‘es86666′

OBJECT.GETOWNPROPERTYDESCRIPTORS

EcmaSript lacks a method for properly copying properties between two objects. This proposal solves this seemingly simple but complex problem that has been implemented at times in almost every JS toolkit or framework. Currently it is a stumbling block for efficient immutability, true composition of ES Classes, something that would benefit Decorators, and just less surprising in general than Object.assign.

ASYNC FUNCTIONS

The async function declaration defines an asynchronous function, which returns an AsyncFunction object. Internally, async functions work much like generators, but they are not translated to generator functions.

function fetchTextByPromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(“es8″);
}, 2000);
});
}

async function sayHello() {
const externalFetchedText = await fetchTextByPromise();
console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}

sayHello();

The call of sayHello will log Hello in es8 after 2 seconds.
console.log(1);
sayHello();
console.log(2);

async function
And now the prints are:
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

This is because the function call does not block the flow.

Pay attention that an async function always returns a promise and an expect keyword may only be used in functions marked with the async keyword.

SHARED MEMORY AND ATOMICS

When memory is shared, multiple threads can read and write the same data in memory. Atomic operations make sure that predictable values are written and read, that operations are completed before the next operation starts and that operations are not interrupted. This section introduces a new constructor SharedArrayBuffer and a namespace object atomics with static methods.

The atomic object is an object of static methods such as math, so we cannot use it as a constructor. Examples for static method in this object are:

add / sub— add / subtract a value for the value at a specific position.
and / or / xor — bitwise and / bitwise or / bitwise xor.
load — get the value at a specific position.

THE VERDICT

JavaScript is in production, but it is always getting improved. The process of adopting new features to the specification is very arranged and composed. In the previous stage, these features were confirmed by the TC39 committee and implemented by the core developers. Most of them are already parts of the Typescript language, browsers or other polyfills, so the user can go and try them right now.

WHAT IS JAVA SERVLET API?

What is Java Servlet API?

The Java Servlet API lets you define HTTP-specific classes. A servlet class extends the capabilities of servers that host applications that are accessed by way of a request-response programming model. Although servlets can respond to any type of request, they are commonly used to extend the applications hosted by web servers. For instance, you might use a servlet to get the text input from an online form and print it back to the screen in an HTML page and format, or you might use a different servlet to write the data to a file or database instead. A servlet runs on the server side — without an application GUI or HTML user interface (UI) of its own. Java Servlet extensions make many web applications possible.

IMPORTANCE OF CLIENT-SIDE JAVASCRIPT SECURITY

Importance of Client-Side JavaScript Security

Javascript is extensively used for several years ever since it was first developed. There are so many reasons in the bucket that why we need to use Javascript. Firstly, Javascript is so natural to learn and utilize. And another reason is, it has the wide accessibility to simple-to-join, open source libraries like jQuery, React.js, Backbone.js, Angular.js, and Ember.js.

To better understand of Javascript security, let’s explore in deep to outline and know why it has become the future wave in developer’s perspective

Javascript is everywhere

As we all know Javascript is incredibly powerful language. It is a high-level and interpreted programming language that has been widely used since its release. Javascript is world’s 11th most prominent programming language. It is commonly used in dynamic web pages to provide extended functionalities such as interactivity, animations, user activity, tracking and more. In order to do this, the Javascript is embedded in an HTML page, where it can interact with pages Document Object Model (DOM) to perform specific functions. In addition to its usage in web browser applications, Javascript is progressively used in mobile applications via cross-platform development tools like Titanium and PhoneGap, and in server-side code via frameworks like Node.js.

Javascript Security

Since its release, there have been several Javascript security issues that have gained outspread attention. The way javascript interacts with the DOM poses a risk for end users by enabling deleterious actors to deliver scripts over the web and run them on client computers. There are two measures that can be taken to contain this Javascript security risk. The first one is sandboxing, or running scripts separately so that they can only access certain resources and perform only specific tasks. Secondly, implementing the same origin policy, this prevents scripts from one site, accessing the data that is

Javascript is one of the most versatile and effective languages used to extend functionality in websites. However, it also possesses some negative effects that might make you think twice before implementing Javascript on your websites. Every programming language has its own advantages and disadvantages. Let us review some of its pros and cons.

Advantages :

Javascript is executed on the client side: The code is executed in the user’s processor rather in the web server, thus saving the bandwidth on the web server.

Extended functionalities to web pages: Third party ad-ons like Greasemonkey enable Javascript developers to write snippets, which can execute on desired web pages to enhance its functionality. If you are using a website and you wanted to add some certain features, you can write it by yourself and can use add-ons like Greasemonkey to implement it on the webpage.

Disadvantage:

Security Issues: Javascript snippets, once it is adjoined onto the web pages, it executes on the client server immediately and, therefore, can also be used to exploit the user’s system. While a cer tain restriction is set by modern web standards on browsers, the malicious code can be still execut ed by compiling with the restrictions set.

Javascript rendering varies: Different layout engines may render the Javascript differently, thus resulting in inconsistency in terms of functionality and interface. Though the latest versions of Java script and rendering have been regulated towards a universal standard, certain variations still exist.

Thus, the rise in the use of Javascript brings you with a great promise, but the combination of its interpreted nature and its increase use also opens the entryway to more risk. You need not to be scared off, as there is much you can do to reduce the risks for your business.