Understanding JavaScript Basics

This document assumes you have a little experience writing some JavaScript.

The Bubble

  Imagine the <script> tag in an HTML page as an opening into a big bubble. Multiple <script> tags are openings into that same bubble.

  Example 1

 


<script type=“text/javascript”>

//variable defined inside of the bubble

var observation = “I’m inside a bubble”;

</script>

<div id=“foo”>

</div>

<script type=“text/javascript”>

//retrieve the variable “observation” from inside the bubble

document.getElementById(‘foo’).innerHTML = observation;

</script>

 

  http://jsbin.com/ucegan/edit

  In reality we have names for things we can see. The room you are in now surely has walls. Walls help to ignore the other things that exist elsewhere in your bubble. Scope refers to the things you can see around you in the room you are in.

  Walls are constructed when you create functions. You can think about walls as being made of double sided mirrors. The inside can see out but the outside can’t see back in.

  Example 2 [sourcecode language=“javascript”]
//create a variable in the main bubble
var builder = “Aaron”;

  //define a room inside the main bubble
function MirrorRoom(){
var floor = "flat";
console.log(builder); //Aaron
}
//run the code inside MirrorRoom
MirrorRoom();

  console.log(MirrorRoom.floor); //undefined
[/sourcecode]

  http://jsbin.com/iyaxah/4/edit

  In this next example I’m introducing the keyword this. this points to what room you are standing in. If you are not in a defined room, this is null. When it is null, JavaScript reassigns this to the document’s top level DOM element. Confused?. Ignore what I just said. For now, just say to your self, “this room”. And if you’re not in a room say to yourself, \“this html document\”.

  Defining a variable using the this keyword, like: this.variableName saves variableName in the wall of the function. Code on either side of the wall has access to it.

  Example 3 [sourcecode language=“javascript”]
//create a variable in the main bubble
var builder = “Aaron”;

  //define a room inside the main bubble
function MirrorRoom(){
//floor exists while standing in this object.
this.floor = "flat";
console.log(builder); //Aaron
}
//assign a portable version of the function to a new variable
var firstRoom = new MirrorRoom();

  //defining this.floor inside of MirrorRoom gives us access to it by thinking of it as a property of firstRoom
console.log(firstRoom.floor); //flat
[/sourcecode]

  http://jsbin.com/iyaxah/7/edit

Functions

  At the most basic level a function’s job is to encapsulate code so that it can be reused from different places. In the following example I create a function that adds 2 numbers and spits out the sum. I use the return keyword to spit out the variable that holds the sum.

  Example 4

  [sourcecode language=“javascript”]
function addNumbersTogether(num1, num2){
var sum = num1 + num2;
return sum;
}
//
var computeAddition = addNumbersTogether(5, 7);
console.log(computeAddition); //12
[/sourcecode]

  http://jsbin.com/icakiy/4/edit

  In a function, there should not be any code after the return statement. Return specifies that the function’s duty has been done.

Linking it to the DOM. Onward to jQuery.

  If you have never touched jQuery, this won’t make much sense. Hopefully you’ve used it to trigger events, animate elements, and you know a little about selectors.

  What does a selector give me? A selector returns an array of elements that match the given selector.

  Example 5

  [sourcecode language=“html”]
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Grapes</li>
<li>Limes</li>
</ul>
[/sourcecode]

  JavaScript

  [sourcecode language=“javascript”]
//with jQuery loaded
var LIs = $(‘li’);
console.log(LIs); //<li>​Apples​</li>​, <li>​Oranges​</li>​, <li>​Grapes​</li>​, <li>​Limes​</li>​
[/sourcecode]

  http://jsbin.com/ipuzoj/edit

  It’s important to note that the items in the array are the actual elements in the DOM. If you change the innerHTML of the elements in the array, the text on the page will change.

 

 
Example 6 [sourcecode language=“javascript”]
var LIs = $(‘li’);
LIs[0].innerHTML = “Bananas”; //Apples gets changed to Bananas
[/sourcecode]

  http://jsbin.com/ipuzoj/2/edit

  So now lets talk a little about why we’d want to do that. To start, lets demonstrate adding a variable to our jQuery selectors. The variable $.fn is the object that is used when you create any jQuery object. Adding properties to $.fn is where the fun starts. Lets start with a basic example.

  Example 7

  [sourcecode language=“javascript”]
/*
Assuming we have some markup like this
<p id=“hello”>Hello World</p>
*/
$.fn.skyColor = “blue”;

  console.log($(’#hello’).skyColor); //blue
[/sourcecode]

  http://jsbin.com/eluruc/6/edit

  In the above example we are giving our $.fn object a property of skyColor. This means when we use our selector $(’#hello’) it has the property skyColor too. Next we’ll add a function which is much more useful.

  Example 8

  [sourcecode language=“javascript”]
/*
Assuming we have some markup like this
<p id=“hello”>Hello World</p>
*/
$.fn.clear = function(){
this[0].innerHTML = "";
};

  $(’#hello’).clear(); //removes Hello World
[/sourcecode]

  http://jsbin.com/otojut/3/edit

  There are a few things going on here. You might recall from Example 6 jQuery selectors return an array of html elements that match the query. The keyword this points to the array of matching elements. Since there is only 1 element in the example this[0] is the one we are looking for. If we want to match more than 1 element, we’ll need to loop through this. Let’s take a look at that now.

  Example 9

  [sourcecode language=“javascript”]
/*
Assuming we have some markup like this
<p class=“target”>Hello</p>
<p class=“target”>World</p>
*/
$.fn.clear = function(){
for(var i in this){
this.innerHTML = "";
}
};

  $(’.target’).clear(); //removes Hello World
[/sourcecode]

  http://jsbin.com/otojut/4/edit

  Now we’re getting somewhere. We’ll continue this discussion and go deeper into structuring jQuery plugins and discuss JavaScript and DOM manipulation further.