Ubuntu - Install CodeBlocks

To be able to install CodeBlocks in Ubuntu 18.04

Step 1: Download codeblocks software from the website: http://www.codeblocks.org/

Step 2: Downloding it from sourceforge website:

$ wget -c https://excellmedia.dl.sourceforge.net/project/codeblocks/Binaries/17.12/Linux/Debian%20stable/codeblocks_17.12-1_amd64_stable.tar.xz
--2018-09-20 11:48:57--  https://excellmedia.dl.sourceforge.net/project/codeblocks/Binaries/17.12/Linux/Debian%20stable/codeblocks_17.12-1_amd64_stable.tar.xz
Resolving excellmedia.dl.sourceforge.net (excellmedia.dl.sourceforge.net)... 202.153.32.19
Connecting to excellmedia.dl.sourceforge.net (excellmedia.dl.sourceforge.net)|202.153.32.19|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 13759596 (13M) [application/octet-stream]
Saving to: ‘codeblocks_17.12-1_amd64_stable.tar.xz’

codeblocks_17.12-1_amd64_stable.tar. 100%[===================================================================>]  13.12M   155KB/s    in 96s     

2018-09-20 11:50:41 (140 KB/s) - ‘codeblocks_17.12-1_amd64_stable.tar.xz’ saved [13759596/13759596]

$

Step 3: Uncompress the tar archive:

$ tar xvf codeblocks_17.12-1_amd64_stable.tar.xz 

codeblocks_17.12-1_amd64.buildinfo

codeblocks_17.12-1_amd64.changes

codeblocks_17.12-1_amd64.deb

codeblocks-common_17.12-1_all.deb

codeblocks-contrib_17.12-1_amd64.deb

codeblocks-contrib-common_17.12-1_all.deb

codeblocks-dev_17.12-1_amd64.deb

codeblocks-headers_17.12-1_all.deb

codeblocks-libwxcontrib0_17.12-1_amd64.deb

codeblocks-wxcontrib-dev_17.12-1_amd64.deb

codeblocks-wxcontrib-headers_17.12-1_all.deb

libcodeblocks0_17.12-1_amd64.deb

libwxsmithlib0_17.12-1_amd64.deb

libwxsmithlib0-dev_17.12-1_amd64.deb

wxsmith-dev_17.12-1_amd64.deb

wxsmith-headers_17.12-1_all.deb

$ 

Step 4: There are numerous files here. Let us install them in the following order:

1. sudo dpkg -i codeblocks-common_17.12-1_all.deb
2. sudo dpkg -i wxsmith-headers_17.12-1_all.deb
3. sudo apt-get install -f
4. sudo dpkg -i libcodeblocks0_17.12-1_amd64.deb
5. sudo dpkg -i libwxsmithlib0_17.12-1_amd64.deb
6. sudo dpkg -i libwxsmithlib0-dev_17.12-1_amd64.deb
7. sudo dpkg -i wxsmith-dev_17.12-1_amd64.deb
8. sudo apt-get install -f
9. sudo dpkg -i codeblocks-libwxcontrib0_17.12-1_amd64.deb
10. sudo dpkg -i codeblocks-wxcontrib-dev_17.12-1_amd64.deb
11. sudo dpkg -i codeblocks-wxcontrib-headers_17.12-1_all.deb
12. sudo dpkg -i codeblocks-headers_17.12-1_all.deb
13. sudo dpkg -i codeblocks-dev_17.12-1_amd64.deb
14. sudo dpkg -i codeblocks-contrib-common_17.12-1_all.deb
15. sudo dpkg -i codeblocks_17.12-1_amd64.deb
16. sudo apt-get install libcanberra-gtk-module:i386

To check the installation codeblocks:

$ which codeblocks
/usr/bin/codeblocks

To run codeblocks:
$ codeblocks

JavaScript - Events - Event Behaviors

In JavaScript there are certain events we need to know. Consider the following body code:

<body>
  <div style="width: 100px
              ; height: 100px
              ; background-color:green"
       id = "greenDiv">
    <div style="width: 40px
                ; height:40px
                ;background-color:yellow"
         id = "yellowDiv">  </div></div>
</body>

This is a nested HTML code - where the yellow div square is inside the green div square. Now, let us add a click listener to the yellow div here.

var yellow = document.querySelector("#yellowDiv");

yellow.addEventListener("click", yellowListener);

function yellowListener(event){
  console.log("clicked Yellow Square!");
}

var green = document.querySelector("#greenDiv");

green.addEventListener("click", greenListener);

function greenListener(event){
  console.log("clicked Green Square!");
}

Now, the question is - where does this event argument come from?

JavaScript passes this event object automatically to the listeners and this object will depend on the type of event. Example:

• mouse Click Events
• mouse Enter Events

different types of events to which you can listen and all those types will have their own properties and methods which we can access on the event object which we are passing as the argument here. To use the object is optional. 

Now, to find out more about which properties and methods are available for each event object. We can do the following:

- log it to the console and have a look there. 

- google for JavaScript click event and we can get access to articles with information.

Now what happens when I click on the yellow button. We get two messages. This is because events in JavaScript by default - propagate. This means that:

If I am clicking on the yellow div here. It means that I am also clicking on the green div. Since, the green one holds the yellow square. 

Now, if i don't want the propagation to occur then, I need to modify the yellowListener function to include the event.stopPropagation():

function yellowListener(event){

  event.stopPropagation();

  console.log("clicked Yellow Square!");

}

Hence stopPropagation is a very important method here. We can check if the event has the tendency to bubble up. 

function yellowListener(event){
  console.log(event.bubbles);
  event.stopPropagation();
  console.log("clicked Yellow Square!");
}

We can see that true is output to the console.

JavaScript - Events - Event Listeners

As an alternative to Event handlers, JavaScript has event listeners. This alternative mainly addresses the problem that you cannot have multiple event handlers for the same event on the same element.

Consider the following code snippet

var btn = document.querySelector("button");
btn.addEventListener("click", myListener1);
btn.addEventListener("click", myListener2);

function myListener1(){
  console.log("inside Listener 1");
}

function myListener2(){
  console.log("inside Listener 2");
}

addEventListener is a method available on each HTML element. The first argument is the name of the event. In the above code the event is click. The second argument is the function I want to run when the listener fires when this event is recognized.

It is also possible to remove a listener:

var btn = document.querySelector("button");

btn.addEventListener("click", myListener1);
btn.addEventListener("click", myListener2);

function myListener1(){
  console.log("inside Listener 1");
}

function myListener2(){
  console.log("inside Listener 2");
}

setTimeout(function(){btn.removeEventListener('click',myListener1);
                     console.log("Listener 1 removed.");
                     },2000);


removeEventListener method allows to remove listener. In the above example, Listener 1 is removed after 2 seconds.

JavaScript - Events - Event Handlers

window.onload = function() {
  console.log("Window loaded.");
};


Now, say - I have the following code snippet:
<body>
  <button>Click Here</button>
</body>

Now, let us add an onclick event on this button:

var btn = document.querySelector("button");

btn.onclick = function(){
  console.log("Button Clicked");
};

We have setup the onclick handler. On pressing the button we can see the output on the console. This is a very useful concept.

But, how can we know, which specific functions are available on the HTML element?
Technique 1: Log the element to the console and then check the properties and then we can identify the event handlers by the on* prefix on the event handler variables.
Technique 2: Google for JavaScript <<element name>> <<events >> and we can find the relevant links with information about it.

We can add the onclick event on any HTML element. We can add the onclick event on the document itself:

document.onclick = function(){
  console.log("Clicked");
};

But, there is one major disadvantage of this approach. Now, suppose we have two event handlers associated with the same button element:

var btn = document.querySelector("button");

btn.onclick = function(){
  console.log("Button Clicked");
};

btn.onclick = function(){
  console.log("Button Clicked 2");
};

Now we see only the message:
Button Clicked 2

.. on the console.

This has happened because the first event handler is simply overwritten. Hence, it is no longer available. Hence, this can become a problem as there will be times when you will need multiple listeners!

JavaScript - Events - How does it work?

You have a general event interface which JavaScript offers. Then you have multiple specific events which implement the top level event:

The following link lists the interfaces based on the main event interface:
https://developer.mozilla.org/en-US/docs/Web/API/Event#Introduction

 Therefore all events in JavaScript share certain properties and methods. Also, there are certain events and properties which are important and more frequently used than others.

The following link lists the properties of the general event interface or object and also specific events which you can listen:
https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties




Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Practice at:
http://jsbin.com/?js,console

JavaScript - Document Object Model - Dialogs

There are built in dialogs the window object offers. Dialogs are basically pop-ups the user will see and the one very prominent one which is used for debugging instead of console.log is the Alert.

Alert:
It is a function on the window object. It is used like this:
alert("This is an alert");

I get this window here. We can only click OK.

Confirm:
Apart from alert we have confirm function which will provide the user with two options:

• Cancel
• OK

confirm("Are you sure?");

I can also use this with console.log():

console.log(confirm("Are you sure?"));

If the user chooses OK. Then true is returned.
If the user chooses Cancel. Then false is returned.

Prompt:
The prompt dialog will provide the user with a textfield for inputting:
console.log(prompt("What is your Name ?"));

Once the user types in the answer in the textField and presses OK. The answer is returned.
We must really think before using them as there are better ways with modals - as in page pop ups.



Practice at:
http://jsbin.com

Refer:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
• https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
• https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
• https://getbootstrap.com/docs/3.3/javascript/#modals
• https://www.appcues.com/blog/67-open-source-modal-window-plugins-made-with-jquery-javascript-css-and-more

JavaScript - Document Object Model - Elements and Nodes

Let us first explore the cross browser method of deleting elements. Consider the following body code:

<body>
  <h1 id="firstId">hey there</h1>
<ul>
  <li ><a href="#">Link 1</a></li>
  <li class = "dimple">full</li>
  <li class = "pimple">ness</li>
  </ul>
</body>

Now, instead of the following:

var a = document.querySelectorAll("li")[1];

a.parentElement.removeChild(a);

we can also use:

var a = document.querySelectorAll("li")[1];

a.parentNode.removeChild(a);

In both cases the second list item is removed. Now, when we open in developer tools of chrome. We can see that in the Elements tab - there are numerous nodes. Now, all elements are nodes. But the DOM also contains nodes which are not HTML elements. Hence, we cannot use parentElement and parentNode interchangeably all the time. But, if you are using elements in an HTML then parentElement is the one which we need to use.