• Home
  • The Ultimate JavaScript Introduction

The Ultimate JavaScript Introduction

Leave a Comment

Variables

Variables are containers that you can store values in. You start by declaring a variable with the var keyword, followed by any name you want to call it:

var myVariable;

A semicolon at the end of a line indicates where a statement ends;

String

We indicate a string by surrounding the string value with quotes, like this:

var variableName = "string content in here";

Now you try it!

See the Pen JS-Intro by Angel Grablev (@agrublev) on CodePen.

  • Number – 1, 5200, 95.34
  • Boolean – true/false
  • Array – store a list 
    • var myArray = [1,2,3,4,5];
    • Accessing a list
    • var myArr = [1,2,3,4];
myArr[0]; // returns 1 because arrays start from 0
    • Looping lists
    • var myArr = [1,2,3,4];
// Using jQuery! As it's much simpler/prettier
$.each(myArr, function( index, value ) {
  console.log( index + ": " + value );
});
// will return
// 0: 1
// 1: 2
// 2: 3
// 3: 4
    • Push unshift splice
    • var myVar = [1,2,3,4];
// add to end of array
myVar.push(5);
console.log(myVar);
// [1,2,3,4,5]

// add to beginning of array
myVar.unshift(0);
console.log(myVar);
// [0,1,2,3,4,5]

// remove 1 item at index 0
myVar.splice(0,1);
console.log(myVar);
// [1,2,3,4,5]
  • Object – store name: value properties
    • Accessing objects [] vs .
    • Looping object (no order!!)
    • Adding/removing properties
    • // empty object
var myVar = {};
console.log(myVar);
// {}

// predefined object
var myVar2 = {
    // property
    "name":"value"
}
console.log(myVar2);
// {"name":"value"}

// predefined object
var myVar3 = {
    "firstName":"Angel"
}
// safer way to get the value of a property
console.log(myVar3["firstName"]); // Angel
console.log(myVar3.firstName); // Angel
// adding a new property to an existing object
myVar3.lastName = "Grablev";
console.log(myVar3.lastName); // Grablev

console.log(myVar3); // {"firstName":"Angel","lastName":"Grablev"}
// removing a property
delete myVar3.lastName;
console.log(myVar3); // {"firstName":"Angel"}


// looping is similar to array, but instead of the index we get the name
// this loops follows NO ORDER!
$.each(myVar3, function( propertyName, propertyValue ) {
  console.log( propertyName + ": " + propertyValue );
});
// firstName: Angel
// lastName: Grablev

Functions

Are a way to set blocks of executable code that can be called later as many times as needed. You can set a name for the function and set parameters to be passed into it.

function add(x, y) {
  // can return a value, but it's not required
  return x + y;
}
console.log(add(1,1)); // 2

var aNumber = 0;
function addToNumber(x) {
  aNumber = aNumber + x;
}
addToNumber(5);
console.log(aNumber); // 5
addToNumber(5);
console.log(aNumber); // 10

See the Pen JS-Intro by Angel Grablev (@agrublev) on CodePen.

To execute a function we simply use its name and pass any needed parameters inside the parenthesis. If no parameters then simply adding parenthesis executes the function.

function loveIt() {
    console.log("Love it");
}

loveIt(); // Love it

Anonymous functions

An anonymous function has no name and is always executed right away. Most commonly we pass an anonymous function to libraries like jQuery so it knows what code to execute for us.

// Passing anonymous function to jQuery to do something
// on click
$("#click").on("click",function(){
    $("#click").addClass("clicked");
});

// Can be done just as easily with a named function like this
function whenClicked() {
    $("#click2").addClass("clicked");
}
// jQuery will simply execute the function
$("#click2").on("click",whenClicked);

Storing function in a variable

We can store a function in a variable, which does almost the same thing as a normal function declaration.

function add(x,y) {
    return x+y;
}
// is identical to
var add = function(x,y) {
    return x+y;
}
// we're simply storing an anonymous function
// inside our add variable

Comparisons and if statements

// 3 = signs means absolute comparison
console.log("1" === 1); // false - string is not number

// 2 = signs means relative comparison
console.log("1" == 1); // true - they are relatively the same

// < less than | <= less than or equal to | > and >= same but opposite
console.log(0 < 1); // true
console.log(1 <= 1); // true

// && says "and" meaning both must be true 
// || says "or" means either must be true
console.log(0 < 1 && 1 < 1); // false
console.log(0 < 1 || 1 < 1); // true

If statements

var name = "angel";
if ( name === "angel" ) {
    // yep
} else {
    // nope
}

Variable scopes!

Every variable we define exists in a scope. We can only call variables from parent scopes.

// window scope - think of it as browser wide
var parent = "Im at top";

function child() {
    var child1 = "I'm inside child!";
    console.log(parent); // Im at top
}
console.log(child1); // undefined - IT DOES NOT exist in this scope

// Also you can't use variable/function before it's defined
test(); // error
function test() {
    console.log("Will NOT be executed!");
};

Brain teasers

var a = 1;
var b = 2;

(function() {
  var b = 3;
  a += b;
})();

a; // What's a?
b; // What's b?
function parentFunc() {
    var a = 1;
    function nestedFunc() {
        var b = 4; // parentFunc can't use this

        return a + b;
    }
    return nestedFunc(); // what's returned?
}

function createAdder(x){
    return function(b) {
        return x+b;
    }
}
var adder1 = createAdder(5);
console.log(adder1(1)); // what's the result?

 

Useful snippets

Adding jQuery to your website

  <!-- add jquery right before the ending body tag -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <!-- make sure to add your JS after jQuery otherwise you can't use it -->
  <script src="js/main.js"></script>
</body>

Using jQuery

// This is jQueries way of waiting for page to load
// we simply pass an anonymous function to the jQuery function
$(function(){
    
});

// Basically equiavelnt of this
var $ = function(runThisCodeWhenPageLoaded) {
    // some magic happens and then it calls your annonymous function
    runThisCodeWhenPageLoaded();
};
// Then you'd call it as usual
$(function(){
    console.log("TEST!"); // TEST!
});

Common jQuery usecases

// Handle a click on element with class .some-element
$(".some-element").on("click",function(){
    // do something
});

// Handle a click on an anchor with href="#"
// without moving to top of page
$(".button a").on("click",function(browserEvent){
    // take the browser event and prevent the default reaction
    browserEvent.preventDefault();
    // do something
});

// Handle a click on element with class .some-element
// and since you can have 100 elements with that class
// we can reference the exact one we clicked with $(this)
$(".some-element").on("click",function(){
    $(this).hide(); // will ONLY hide the clicked element
});

// Common interactions with elements

// <div class="some-element"
// becomes <div class="some-element test"
$(".some-element").addClass("test");

// hide/show the element
$(".some-element").hide();
$(".some-element").show();
// if an element has display:none; css applied
// or it was hidden with jQuery you can show it
$(".some-element").fadeIn(3000); // fades it in in 3seconds
$(".some-element").fadeOut(5000); // fades it out in 5seconds

// find a child
$(".some-element").find(".test"); // finds a child of .some-element with class .test
$(".some-element").find(".test").hide(); // hides the child .test

// find a parent of the element
// <div class="test">
//		<div class="doesnmatter">
//			<a href="#" class=".some-element">ME!</a>
$(".some-element").parents(".test"); // finds the first parent of .some-element with class .test
$(".some-element").parents(".test").hide(); // hides the child .test

// Adds an element inside and at the end of the chosen element
$(".inside-me").append("<div class='test'>Awesome</div>");
/*
<div class="inside-me">
    <div class="random">
        Random element
    </div>
    <!-- WE ADD THE DIV CLASS TEST HERE -->
</div>
*/

// Adds an element after the chosen element
$(".inside-me").after("<div class='test'>Awesome</div>");
/*
<div class="inside-me">
    <div class="random">
        Random element
    </div>
</div>
<!-- WE ADD THE DIV CLASS TEST HERE -->
*/

 

Leave a Reply

Your email address will not be published. Required fields are marked *