Subscribe

Understanding JavaScript Basics

Written by
on

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.

 

 

Get more insights right to your inbox.

Email