Theme images by Storman. Powered by Blogger.

Thursday 29 September 2016

Setup a simple server using Python

- No comments
Today I will share you how to setup server quickly using Python in Windows in 5 easy steps.

Step 1 : Download python

Go to Python's official site and select the suitable version for your system and download.
Here is the link to download : https://www.python.org/downloads/

          
Step 2 : Install it

To install Python go to download location on your computer, double click the file and press Run when pop-up appears.

If you have multiple accounts on your computer and you don’t want to install it for all, select the “Install just for me” option then press "Next". move forward and finish the installation process.

Step 3 : Add Python to System Path Variable

Go to control panel then “Edit the system environment variables". when “System Properties” window appears, click on “Environment Variables…” and click on "New.." which appears in the bottom.


Give Variable name as "Path" and Variable value  as "c:\python27;c:\python27\script" . Variable value depends on where you Python script folder resides.


Step 4 : Run server

Go to your project directory and run given command.

#  for Python 2
python -m SimpleHTTPServer <portNo>

# for Python 3
python -m http.server <portNo>
or
python -m http.server

ex.
python -m http.server

For example, I run Python3.3 and the command I use is python -m http.server



Step 5 : Run URL in browser

 At last, go to your favorite browser.
 Paste the given URL in address bar  " http://localhost:8000/index.html "  and enter now, you can debug  your application in browser.








Wednesday 28 September 2016

Event bubbling and capturing in JavaScript

- No comments



 In the HTML DOM API event bubbling and capturing are two ways to determine event propagation or which element is going to receive handler first for given event.

       when an event occurs in an child element and both(parent and child) elements are register a handler for that event. The event propagation mode determines in which order the elements receive the event.

Bubbling:

The event is first captured and handled by the child element and then propagated to parent elements.

Example:

<!DOCTYPE HTML>
<html>
<body>
<div class="div1"> block 1  
    <div class="div2">block 2
        <div class="div3">block 3</div>
    </div>
</div>
</body>
</html>

From above given code click on div3 will trigger event  first on the child element 3 , then on the element 2, and the last will be element 1.

Capturing:

The event is first captured by the parent element and propagated to the child elements.

Example :

<!DOCTYPE HTML>
<html>
<body>
<div class="div1">block 1
    <div class="div2">block 2
        <div class="div3">block 3</div>
    </div>
</div>
</body>
</html>

From above given code click on div will trigger event  first on the parent element 1 , then on the element 2, and the last will be element 3.

Enable event capturing on element :

element.addEventListener("click", doSomething, useCapture);

useCapture = true
The handler is set for the capturing .
useCapture = false
The handler is set for the bubbling.

Example :

<!DOCTYPE HTML>
<html>
<body>
<div id="div1"> block 1  
    <div id="div2">block 2
        <div id="div3">block 3</div>
    </div>
</div>
</body>
</html>

var element = document.querySelector("#div3");

// set capturing
element.addEventListener("click", doneClick, true);

// set bubbling
element.addEventListener("click", doneClick, false);

Stop event capturing/bubbling :

W3C standard:
event.stopPropagation()

IE:
event.cancelBubble=true

Example:

function doneClick(e) {
    e.stopPropagation();
}

Trick to remember the propagation order:

Trickle(capture) down, bubble up

Note:
  • There are events which don’t bubble, but can be captured. For      example, onfocus/onblur.
  • In IE<9 Events are only bubble.