Elegant JavaScripts

Regular Expressions (Regex) in JavaScript - Part I

Regular Expressions are used to find a specific pattern within a big glob of text. Regular expressions are also known as regex or regexp among developers.

Read this post for how regular expressions are used in JavaScript methods.

In this post series i'm trying to give you an idea about how to create an regex that matches a particular string.

Very Basic Rules

Every regular expression literal starts and ends with a forward slash ("/").
Pattern that we are trying to match goes between those slashes.
After end slash "g", "i", "m" characters can be used as flags. Each letter has different purposes.

ES6 Part II : Const and Template literals

As I described in my previous post ES or else ECMAScript is the official name of JavaScript and ES6 that is ECMAScript 6 is the latest version of it.
This is the second of series of posts that explore new features of ES6 so in this post lets look at const keyword and template literals introduced in ES6.

const keyword

In previous versions of JavaScript there was no way to define a constant value. Developers just used only upper case letters to declare a constant variable like,var SEC_KEY="1234567";

But it could be changed at a latter part of the code.


var SEC_KEY="1234567";

SEC_KEY="abcdefg";

console.log(SEC_KEY);

ES6 part I : Let key word in ES6

Since this is the first post of a series of posts about ECMAScript 6, I'll explain what is ECMAScript is. ECMAScript is the “proper” name for the language commonly referred to as JavaScript. ECMAScript 6 is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.

It introduce many new and nice features to make easy programming for programmers.

Let key word

According to description from MDN let keyword allows us to declare variables that are limited in scope to the block, statement, or expression on which it is used.

Use routing in AngularJs

In a Single Page Application (SPA) routing is a important part. AngularJs also provide functions to make easy routing in our SPA. It helps us to,

Change the page without refreshing
Display different data on different pages

Lets see how to use AngularJs routing in our application to give a better user experience

Our simple app has a menu bar and when different tabs are clicked it should display different pages without refreshing the whole page. It should display list of employees only in home page.

Markup for Main page

<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>  
  <!-- CDN for bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- CDN for Angulat min and angular-route-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

Anatomy of call back functions in JavaScript

Call back function is a pattern that heavily used in JavaScript programming. Most of beginners in JavaScript programming have no clear idea about JavaScript programming. Specially Programmers from other programming paradigms except functional programming facing difficulties in adapting this idea.

JavaScript is a functional programming language. So functions are considered as first class objects. There for we can do may things with functions that can't be done in other programming languages.

Like,

Store functions in a variable.
Pass functions a arguments to another function.

What is a Call back function

A call back function is,

passed as an argument to another function.
It is invoked after some kind of event.

So basically Call back function is a function (func1) that pass to another function (func2) to be executed after finish the execution of second function (func2).

Nice file upload interface using Jquery

We all know how to upload a file using html form. But I thought to improve that interface a bit using JQuery (Of course I used CSS but i'm writing about JQuery part).

So here is the usual html file uploading interface

I wanted to show a button to choose file and After choosing display a button to upload that file. Chosen file name also displayed in a nice way. As follows

What are Services in AngularJs

According to AngularJs Documentation Services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

It lists two important properties of AngularJs services

Lazily instantiated – Angular only instantiates a service when an application component depends on it.
Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

There are some useful built in services such as $http and $animateoffered by angular but services can be implemented according to needs in application.