Event propagation in javascript – Capturing and Bubbling

Event propagation is the propagation of an event through the elements in the HTML DOM. When an event happens phase1 – Event Capturing is done until the target is reached phase2 –  Bubbling is done executing handlers on the way Event bubbling and capturing are the two ways of event propagation in processing an event by the HTML DOM API.Event bubbling means that when an event happens, it propagates all the way up the parent to the ancestor elements. Bubbling When an event happens on an element,say click, it first runs the handlers on it, then on its parent, then all the way up.See the below example -The button inside the wh4 div was clicked. Onclick handler is on the ancestor wh4 is run.   Not every event get bubbled.Here is a list of  the most common event handlers. onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload Not every event bubbles.

If x is true then the event bubbles.You can check this creating the event By default all the Browsers support event bubbling. Event Capturing When an event happens capturing occurs in a way …

Closures in JavaScript

A closure is the combination of a function and the lexical environment within which that function was declared. We will take a detailed look in to closures using the following examples.

In this example,you can see that variable a is in Global scope.The variable a is available inside the example() function so that , we don’t have to pass it as an argument to the example() function. Now if you do a console.dir on the function example() (console.dir is the way to see all the properties of a specified javascipt) ,you can see that there is a scope property which has global value a. CLOSURE Now,we define a function inside a function and do the same addition operation given in the previous example.Here the scope of variable a and variable passed ,is the function example().The variable a and variable passed is available inside the inner function exampleinner().

If you do a console.dir on the inner function exampleinner(), we can see that there is a property called closure which has the values of variable passed and variable a.   So what closure means is that the inner function will have access to the scope of the outer function(FUNCTION INSIDE FUNCTION)…

What are cookies and how to set and get them with Javascript

Cookies are data stored as text files in the computer.They are used store data that are needed to be remembered , like user information.Cookies can be set in client side and server side. For example,consider a user sign in to your website.The server sends back some response.The response have a token/id that can be stored as a cookie.This cookie value can keep the users details status in the client side. Cookie has a name and value pair,expiry time,path and secure . The security flags that are used to provide more security HttpOnly – HttpOnly flag sets the cookie unavailable to client side scripts.This prevent cross site scripting attacks(XSS) secure – Sets cookie to be send via a secure encrypted channel.Browser will send cookie only via an HTTPS request and prevent sending cookie via HTTP request. setcookievalue This function has three arguments name – cookie name. value – value of the cookie. hours- hours determine the expiry hours. document.cookie lets us store the cookie associated with the current document. getCookie This function has one argument ,cookie name document.cookie gets all the cookies associated with the current document.A cookie with a specific name can be obtained using the getCookie function.   getCookievalue This function has…

Understading working of javascript : Google’s JavaScript V8 Engine

What is javascript? Javascript is a single threaded,aynchrounous,non-blocking concurrent language.If you have an javascript code ,it is run by engines.Javascript v8 Engine powers Node.js ,Chrome browser,Electron(Desktop Application dev).There are many Javascript engines like Chakra(Microsoft), Spidermonkey(Firefox). We focus on V8 Javascript engine to understand more about JavaScript engines here.What V8 basically does is that it generate machine code from source code . All modern JavaScript engines use Just In Time(JIT) compilation also V8. V8 does’nt generate machine code Ahead of time but on run time when we need it.Compilation and execution goes at the same time. V8 features an interpreter called Ignition and an optimizing compiler  called TurboFan. Bookmark this page . Detailed study on V8 Engine will be available here soon…..  

Javascript try,catch and finally : Error handling
interview questions , Javascript / June 21, 2018

When we run Javascript code unexpected errors can happen but how to handle these errors… Handling the errors are necessary for providing a better end user experience and Javascript provides some features to efficiently handles the errors Try statement – Try statement checks for errors in a block of code. Consider the following code,the httpGet function send a Get request to a dummy api

This successfully runs , but what if we provide a wrong api url

  As you can see try and Catch Statement lets us handle errors while the code is being executed Throw Statement Throw statement lets us throw custom errors.The error thrown can be a string,number or an object Consider the following example

Here the request was successful but we expected a.userId to be 100.Since the result was not the expected one we throw a custom error.  ‘Not Expected Result’; Using the try and catch statements together, we can control the  program flow and generate custom error messages. Finally statement Finally statement ,lets us execute a block of code irrespecitve of the results of the try and catch.Consider the above example in which we throws a custom error.Now we add a finally…

An introduction to Eloquent ORM in Laravel
interview questions , PHP , Uncategorized / June 20, 2018

ORM refers to Object Relational Mapping.What ORM tools like  Eloquent does is that they are equipped with a metadata descriptor which helps in connecting object code to a relational database.To learn more on ORM refer this article. https://truetocode.com/orm-using-sequelize-orm-with-express-node-js/418/ Now,we know that sequelize is an ORM tool that is used to connect node applications to relational databases such as Mysql/postgres.For PHP Developers ,Laravel is equipped with a very simple,efficient ORM called Eloquent ORM. Using Eloquent To create model class we use the following command

Now in case you dont know,Artisan is a command line interface provided with Laravel just like the other command line interfaces you might have used,like angular-cli,Artisan helps you to generate files while working with Laravel. The above command creates a model file for our Table and it looks like this

As you can see all models extend “Illuminate\Database\Eloquent\Model” Also note that the table has ‘snake case plural’ name of the class.That is ‘televisions’ table and ‘television’ class.Uncomment the $table variable in the above code to use custom table name. Now,To generate a migration script on creating the model.This can be done using the following command.

The migration file looks like this

To run the…

Persistent data structures,trie and immutable js
interview questions , Javascript / June 18, 2018

If you do not know about immutability read more here http://truetocode.com/understanding-concepts-of-immutables-and-mutables-in-javascript/378/. Immutable data is never changed once it is created.It can prevent unwanted alteration of data and helps us in more efficient programming.Mutability may cause unwanted bugs as the data may get changed accidentally. Consider we have an array that contains the name of fruits say,  

Now consider that  for some reason we want to push the name of an Car into the array and do some thing with it.For that we call the pushCar method . After that  we want to  push the name of a fruit into the array and do some thing with it using the pushFruit method. In the push fruit method we expect the array to only contain fruits but our array has the name of a car since it was mutated. See the below code to get better understanding

  We can achieve our requirement using spread operator as the spread operator copies the parent a

But,when we have a large data set this is very expensive as spread operator copies the parent and copying is very expensive. To tackle this problem and make the array of fruits not to change every…

HttpInterceptor in angular with example-Adding token to every request

HttpInterceptor –  feature in Angular 4.3. We may need to intercept Http request while building apps with Angular. Sometimes we may you need to intercept Http request to add something to request header or to do something with the response. We can use Http Interceptor to do some action when sending  a request.This can be achieved using  the following interceptor class which implemenets Httpinterceptor.The interceptor adds an ‘access_token’ and a  ‘token’ to the header.The tokens are stored in the local storage.To use HttpInterceptor we need to  implement HttpInterceptor in the following way

Import the interceptor the following way in module.ts files

  Modify and use the above class to implement Intercepror. For official documentation visit this page https://angular.io/api/common/http/HttpInterceptor

Understanding variable scope(let,var,const),hoisting in Javascript and Temporal Dead Zone(TDZ)
interview questions , Javascript / June 11, 2018

Hoisting in Javascript  To hoist means to pull or move up. Javascript hoisting means variable and function declarations are pulled to the top of the scope while compilation. What actually happens is that declarations are stored in memory. In the following example, we will see how hoisting works.

Here the function test can be used called before it is declared in the code because during the compilation the declaration is hoisted or moved to the top of the scope(current script or current function). Javascript only hoists declarations, not initializations. All declarations (var, let, const, function, class) are hoisted Variable scope in JavaScript Var  The scope of var is the current execution context. That is, the scope of var is global if used outside a function and the scope is the function block while being used inside the function. assigning value to a variable without declaration creates and adds variable to the global scope. This is discouraged and throws an error in strict mode

As you can see the scope of a is the function. Let – block scope The scope of let is the block in which they are defined .let defines block-scoped variables. Let has a scope from the block…

“use strict” – Understanding Strict Mode in JavaScript
interview questions , Javascript / June 10, 2018

While using certain JavaScript libraries,you might have seen some thing like

  inside the code.Many of us doesn’t exactly know what this exactly mean.In this article we take a look at the JavaScript  strict mode(ECMAScript 5) which might become handy while  appearing in JavaScript Developer Interviews. Strict mode literal expression, ignored by earlier versions of JavaScript,  lets us create secure JavaScript code.It  enforces better programming practices and removes some of the language’s insecure and ill-advised features.Strict mode throws exception to some of the basic coding bloopers and throws error to some insecure actions that are usually ignored in normal mode. Use strict can be used on top of the file or can be used inside a function in the following way 1  In a file

2 Specifically inside a function

Things that are prevented in strict  1  It prevents use of variables with out declaration.

2 Deleting function or variable is not allowed in strict mode  

3 Prevent global  access

4 Duplicating object properties not allowed

5 Cannot duplicate parameters of a function

 

6 eval is not allowed to create variable

7  Writing…

Share this page in social media platforms