Category Archives: javascript

Data and Accessor Properties

July 30, 2015javascriptadmin

In order to define a property we use Object’s defineProperty method on a particular object. There is the value we want to initialize with, which is the passed in parameter of var firstName. The second writable simply means if we can write over it.

var createPerson = function(firstName, lastName) {

var person = {};

Object.defineProperties(person, {

firstName : {

value: firstName,

writable : true

//configurable, can we reconfigure it with another definition

//enumerable: let others enumerate over this object using this property

lastName : {

value: lastName,

writeable : true

fullName : {

get : function() { return this.firstName + ", " + this.lastName; }, //getter

set : function(onlyOneValue) { }

//A setter is invoked with the one value that is assigned to the property (obj.joe = "doe";) - you cannot assign multiple values at once.

}

});

Object.defineProperty(person, "firstName", {

value: firstName,

writable : true

});

};

var person = createPerson("John", "Doe");

Primitives and Objects

July 30, 2015javascriptadmin

Primitive types:

String
Number
Boolean
Undefined
Null
Symbol

Symbol is a primitive data type of JavaScript, along with string, number, boolean, null and undefined. It was introduced in ECMAScript 2015. Once you create a symbol, its value is kept private and for internal use.

Reference types. Objects:

Object
Array
Function
Date
RegExp

Example

“hello”.length

But how?

new String(“hello”).length;

notice the constructor

1	var obj = new String("hello");

type of obj –> “object”

typeof String(“hello”) –> “string”

obj.valueOf(); –> “hello”
typeof obj.valueOf(); –> “string”

Only way to create object is by using new String. All others will give you a string.

Similary,

//notice the constructor

1	var num = new Number(10);

typeof num; –> “object”
typeof 10 –> “number”

typeof Number(10) –> “number”
typeof num.valueOf() –> “number”

remember that our num is an object

1	var sum = num + 10;

typeof sum; –> “number”
typeof num; –> “object”

Even though num was used in a numeric operation, it did not get converted to number.

Cannot assign properties and methods to Primitives

For example

var num = 10;

num.property = "hello";

num.property // undefined

If we change num to object, then we can assign property and methods:

//notice the constructor, hence we creating object

var num = new Number(10);

num.property = "hello";

num.property //gives "hello"

Identity vs Equality aka (strict vs abstract)

July 29, 2015javascriptadmin

=== is called Identity Operator compares value AND type.

== will do type conversion. Namely, it converts the type down to a comparable value and match that way.

var strVar = "Ricky";

var strVar1 = "6680";

var strVar2 = "Ricky";

var strVar3 = "";

var intVar = 6680;

var nanVar = NaN;

var nullVar = null;

var undefinedVar = undefined;

console.log('------------------- STRING AND INT types ---------------------');

// typeof Ricky is string

console.log('typeof ' + strVar + ' is ' + typeof(strVar));

// typeof 6680 is number

console.log('typeof ' + intVar + ' is ' + typeof(intVar));

// typeof NaN is number

console.log('typeof ' + nanVar + ' is ' + typeof(nanVar));

// typeof null is object

console.log('typeof ' + nullVar + ' is ' + typeof(nullVar));

// typeof undefined is undefined

console.log('typeof ' + undefinedVar + ' is ' + typeof(undefinedVar));

// "Ricky" + 6680 = "Ricky6680"

var mixedVar = strVar + intVar;

console.log(`1) 'Ricky' + 6680 = '${mixedVar}', which is of type: ${typeof(mixedVar)}`);

// "Ricky" * 6680 = Nan

var mixedVar2 = strVar * intVar;

console.log(mixedVar2)

// 2 * "2" = 4

var mixedVar3 = 2 * "2";

console.log(`2) 2 * '2' = ${mixedVar3}, type ${typeof(mixedVar3)}`)

var bVar = true;

// true + "Ricky" = "trueRicky"

var mixedVar2 = bVar + strVar;

console.log(`3) true + "Ricky" = '${mixedVar2}' which is of type: ${typeof(mixedVar2)}`);

//true + 10 = 11

var mixedVar3 = bVar + 10;

console.log(`4) true + 10 = ${mixedVar3} which is of type: ${typeof(mixedVar3)}`);

//"Ricky" === "Ricky"

if(strVar === strVar2) {

console.log( typeof(strVar) + ' ' + strVar + ', and '

+ typeof(strVar2) + ' ' + strVar2 + ', are ===' );

}

//"Ricky" !== "6680"

if(strVar !== strVar1) {

console.log( typeof(strVar) + ' ' + strVar + ', and '

+ typeof(strVar1) + ' ' + strVar1 + ', are !==' );

}

var boolTrueVar = true;

var boolFalseVar = false;

console.log("-------------- boolean types -------------------");

// typeof true is boolean

console.log('typeof ' + boolTrueVar + ' is ' + typeof(boolTrueVar));

// typeof false is boolean

console.log('typeof ' + boolFalseVar + ' is ' + typeof(boolFalseVar));

// true === true

if(boolTrueVar === boolTrueVar) {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof(boolTrueVar) + ' ' + boolTrueVar + ', are ===' );

// true + true = 2

let ans = boolTrueVar + boolTrueVar

console.log(` true + true = ${ans}`)

}

// true !== "true", their types do not match

if(boolTrueVar !== "true") {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof("true") + ' ' + "true" + ', are !==' );

}

// true !== false

if(boolTrueVar !== boolFalseVar) {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof(boolFalseVar) + ' ' + boolFalseVar + ', are !==' );

// true + false = 1 + 0 = 1

let ans = boolTrueVar + boolFalseVar

console.log(` true + false = ${ans}`)

}

// true == 1

if(boolTrueVar == 1) {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof(1) + ' ' + 1 + ', are ==' );

// true + 1 = 2

let ans = boolTrueVar+1;

console.log(`${boolTrueVar} + 1 = ${ans}, type is: ${typeof(ans)}`)

}

// true == "1"

if(boolTrueVar == "1") {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof("1") + ' ' + "1" + ', are ==' );

// true + '1' = 'true1'

let ans = boolTrueVar+"1"

console.log(`true + '1' = ${ans}, type is: ${typeof(ans)}`)

}

Notice that true != “true”, I want to comment that by rule 5, since true is Boolean, it gets converted into a number.
Hence, 1 != “true” is true.

// true != 'hello'

if(boolTrueVar != "hello") {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof("hello") + ' ' + "hello" + ', are !=' );

// true + 'hello' = 'truehello'

let ans = boolTrueVar + "hello";

console.log(`true + 'hello' = '${ans}', type ${typeof(ans)}`)

}

// true != 'true'

if(boolTrueVar != "true") {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof("true") + ' ' + "true" + ', are !=' );

// true + 'true' = 'truetrue'

let ans = boolTrueVar + "true";

console.log(`true + 'true' = ${ans}, type ${typeof(ans)}`)

// true * 'true' = Nan

let ans2 = boolTrueVar * "true";

console.log(`true * 'true = '${ans2}, type ${typeof(ans)}`)

}

// true != 5

if(boolTrueVar != 5) {

console.log( typeof(boolTrueVar) + ' ' + boolTrueVar + ', and '

+ typeof(5) + ' ' + 5 + ', are !=' );

// true + 5 = 1 + 5 = 6

let ans = boolTrueVar + 5

console.log(`true + 5 = ${ans}, type ${typeof(ans)}`)

}

// false === false

if(boolFalseVar === boolFalseVar) {

console.log( typeof(boolFalseVar) + ' ' + boolFalseVar + ', and '

+ typeof(boolFalseVar) + ' ' + boolFalseVar + ', are ===' );

}

Similarly, remember that in “==”, from rule 5), booleans are converted to numbers first.

// typeof true is boolean

console.log('typeof ' + boolTrueVar + ' is ' + typeof(boolTrueVar));

// typeof false is boolean

console.log('typeof ' + boolFalseVar + ' is ' + typeof(boolFalseVar));

// false == 0, 0 == 0

if(boolFalseVar == "0") {

console.log( typeof(boolFalseVar) + ' ' + boolFalseVar + ', and '

+ typeof("0") + ' ' + "0" + ', are ==' );

}

// false != "false", 0 != "false'

if(boolFalseVar != "false") {

console.log( typeof(boolFalseVar) + ' ' + boolFalseVar + ', and '

+ typeof("false") + ' ' + "false" + ', are !=' );

}

// false !== "false", type mismatch

if(boolFalseVar !== "false") {

console.log( typeof(boolFalseVar) + ' ' + boolFalseVar + ', and '

+ typeof("false") + ' ' + "false" + ', are !==' );

}

// false != "hehe", 0 != "hehe"

if(boolFalseVar != "hehe") {

console.log( typeof(boolFalseVar) + ' ' + boolFalseVar + ', and '

+ typeof("hehe") + ' ' + "hehe" + ', are !=' );

}

Null manipulation

console.log('-------------- NULL UNDEFINED TYPES ---------------');

var nullVar = null;

var unDefVar = undefined;

// null is object

console.log('typeof ' + nullVar + ' is ' + typeof(nullVar));

console.dir(nullVar); // null

// typeof undefined is undefined

console.log('typeof ' + unDefVar + ' is ' + typeof(unDefVar));

// null + null is: 0, which is of type: number

console.log('null + null is: ' + (nullVar + nullVar) + ', which is of type: ' + typeof(nullVar + nullVar));

// null + 1 is: 1, which is of type: number

console.log('null + 1 is: ' + (nullVar + 1) + ', which is of type: ' + typeof(nullVar + 1));

// null + abc is: nullabc, which is of type: string

console.log('null + abc is: ' + (nullVar + 'abc') + ', which is of type: ' + typeof(nullVar + 'abc'));

Adding and removing elements

June 9, 2015javascriptadmin

given

<h1 class="heading" id="mainHeading"><p>JavaScript Fundamentals</p></h1>

<h2 class="heading subHeading">Part of the Front End Development learning path by Tuts+</h2>

</header>

1	var subHeading = document.getElementsByClassName('heading')[0];

where subHeading is a h1 element with text.

We now look at how the DOM’s body property deals with moving elements around

appendChild

appends the subHeading element to the body, which puts it in the very last place. In the DOM, you will see the subHeading element right before the closing body tag.

1	document.body.appendChild(subHeading);

insertBefore

puts the subHeading element in front of the heading element.

1	document.body.insertBefore(subHeading, heading);

Notice the h1 in front of the header element

<body>

<h1 class="heading" id="mainHeading" contenteditable="true">I love Envato!</h1>

<h2 class="heading subHeading">Part of the Front End Development learning path by Tuts+</h2>

</header>

contains and removeChild

first we check to see if heading element exist, if we do, just remove it

if (document.body.contains(heading)) {

console.log('heading exists, lets remove it');

document.body.removeChild(heading);

}

Notice no more header

<body>

<h1 class="heading" id="mainHeading" contenteditable="true">I love Envato!</h1>

<a name="historyLink" href="history.html">History</a>

<a href="#">empty</a>

</body>

Swapping out

our subHeading element is the 0th index or first header we see. Let’s say we want to replace that with an italic element.

Thus, we create an italic element first by using createElement and giving it a tag name ‘i’, which stands for italic. We then assign text content of that italic element. Finally we use DOM’s body property and use replaceChild to replace the header element with our italic element.

var substitute = document.createElement('i');

substitute.textContent = 'I have been swapped in';

document.body.replaceChild(substitute, subHeading);

Traversing DOM

June 9, 2015javascriptadmin

code

<h1 class="heading" id="mainHeading"><p>JavaScript Fundamentals</p></h1>

<h2 class="heading subHeading">Part of the Front End Development learning path by Tuts+</h2>

</header>

//get first (0th index) header

var heading = document.getElementsByTagName('header')[0];

console.log(heading);

console.log(heading.childNodes);

console.log(heading.childNodes.length); // 5

You’d get the element by tag name which is header. Then you the childNodes list, which can contain any node types. This includes:

NodeType Description
1 Element Represents an element Element, Text, Comment,
2 Attr Represents an attribute Text, EntityReference
3 Text Represents textual content in an element or attribute None
…..
….
….

Hence that’s why we see type Element and Text in our results. Finally, we see the total number of nodes representations which is 5.

result:
header
[text, h1#mainHeading.heading, text, h2.heading.subHeading, text]
5

Now let’s traverse this list. We go through each node in the childNode property and list their attributes. We want to see what kind of node types they are. In our case, we see that its all node types 1 and 3.

We also say that if the node type is 1, we want it to print out its tag name

console.log('-----------------------');

var x, length;

for (x = 0, length = heading.childNodes.length; x < length; x += 1) {

console.log('nodeType: ' + heading.childNodes[x].nodeType);

if (heading.childNodes[x].nodeType === 1) {

console.log('Its of nodeType 1! ....I am a ' + heading.childNodes[x].tagName

+ ' tag'); // I am a P...

}

console.log('-----------------------');

result:

———————–
elements.js:89 nodeType: 3
elements.js:89 nodeType: 1
elements.js:92 Its of nodeType 1! ….I am a H1 tag
elements.js:89 nodeType: 3
elements.js:89 nodeType: 1
elements.js:92 Its of nodeType 1! ….I am a H2 tag
elements.js:89 nodeType: 3
elements.js:97
———————–

Most of the time, we just want to see the children element nodes, thus you can use the property children. Hence some of the more common properties can you can use are childNodes, children, and also firstChild/lastChild and nextSibling/previousSibling.

console.log('length of heading.children (child elements only): '

+ heading.children.length); // 2

console.log(heading.childNodes[0].nodeName); // #text

console.log(heading.children[0].nodeName); // P

console.log(heading.firstChild.nodeName); // #text

console.log(subHeading.parentNode.nodeName); // HEADER

console.log(heading.firstChild.nextSibling.nodeName); // P

console.log(heading.lastChild.previousSibling.nodeName); // H

Manipulating DOM

June 8, 2015javascriptadmin

Changing element’s id

1 2	var mainHeading = document.getElementById('mainHeading'); mainHeading.id = 'firstHeading';

mainHeading is reference object. We change the property of the
reference object and it will reflect back on the page.

You can also see the results by console

1 2	console.log("mainHeading.id is: - "); console.log(mainHeading.id);

result:

1	<h1 class='heading' id='firstHeading'> Javascript Fundamental </h1>

getting the class names

1	<h2 class="heading subHeading">Part of the Front End Development learning path by Tuts+</h2>

1 2	var subHeading = document.getElementsByClassName('heading')[0]; console.log(subHeading.className);

result: heading subHeading

adding/removing a new class to an Element

subHeading.classList.add(‘special’);

You will then see the special class added to the element referenced by subHeading variable.

subHeading.classList.remove(‘special’);

Tag Name

console.log(‘mainHeading.tagName: ‘ + mainHeading.tagName); // H1

innerHTML

Contents of the elements
mainHeading.innerHTML = “” + mainHeading.innerHTML + ““;

outerHTML

Contents of the elements including the element itself.

mainHeading.outerHTML = “

” + mainHeading.innerHTML + “

“;

setAttribute

You can use methods setAttribute to

var subHeading = document.getElementsByClassName('heading')[0];

subHeading.textContent = 'I love Envato!';

subHeading.setAttribute('contenteditable', true);

In the html you will see the attribute set in the h1 tag:

1	<h1 class="heading" id="mainHeading" contenteditable="true">....</h1>

1	subHeading.removeAttribute('contenteditable')e;

Does this element have attribute x ?

1	console.log(subHeading.hasAttribute('contenteditable'));

Selecting elements using DOM

June 8, 2015javascriptadmin

Document Object Model methods used for selecting elements on a web page

Elements are represented by objects which contains useful properties and methods for working with them.

getElementById

– get element by their id

Fastest and easiest way of selecting something from the page is by select using
the element associated with the element.

<h1 id="mainHeading"><p>JavaScript Fundamentals</p></h1>

<h2>Part of the Front End Development learning path by Tuts+</h2>

</header>

Notice we have id “mainHeading” in the h1 element.

We can use

1	console.log(document.getElementById('mainHeading');

result:

1	<h1 id="mainHeading"><p>JavaScript Fundamentals</p></h1>

getElementsByClass

– Get collection of elements by class name.

Given,

1 2	<h1 class="heading" id="mainHeading"><p>JavaScript Fundamentals</p></h1> <h2 class="heading">Part of the Front End Development learning path by

We use

1	console.log(document.getElementsByClassName('heading');

results:

[h1#mainHeading.heading, h2.heading.subHeading, mainHeading: h1#mainHeading.heading]

getElementsByTagName

html:

<body>

<h1 class="heading" id="mainHeading"><p>JavaScript Fundamentals</p></h1>

<h2 class="heading subHeading">Part of the Front End Development learning path by Tuts+</h2>

</header>

<a href="history.html">History</a>

<a href="#">empty</a>

</body>

1	console.log(document.getElementsByTagName('a'));

result:

[a, a]

getElementsByName

html:

1	<a name='historyLink' href="history.html">History</a>

js:

1	console.log(document.getElementsByName('historyLink'));

result:
[a]