Alexe Bogdan
Web Developer, JavaScript Lover, User Experience Professional, working in the web and mobile application development industry.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
//CSS Styles...
</style>
</head>
<body>
<h1>Header</h1>
<p>First paragraph with <em>emphasized text</em>.</p>
<p>Second paragraph.</p>
<script>
//JavaScript code...
</script>
</body>
</html>
HTML documents are delivered as "documents". Then web browser turns them into the Document Object Model (DOM) internal representation.
HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags.
Declared by prefixing with var
var a = 1;
var b = 2,
c = b;
Weakly typed
var a = 2;
a = 3.14;
a = 'This is a string';
Initialized with the value undefined
var a;
console.log(a); //undefined
console.log(a === undefined); //true
if( a >= 0){
a++;
} else if(a < -1){
a *= 2;
}
switch(a){
case 1:
a += 1;
break;
case 2:
a += 2
break;
default:
a = 0;
}
for( var i = 0; i < 5; i++ ) {
console.log(i);
}
while(a < 100) {
a++;
}
do {
a++;
} while(a < 100);
Conditional:
Iterative :
var animal = {
isDog: true,
name: 'Sparky',
bark: function(){
return 'Bark!'
}
}
Example:
var array = [1,2,3];
console.log(array.length); //3
array.push("a value");
console.log(array.length); //4
Example:
//Function Declaration
function fn(x){
return x;
}
//Function Expression
var fn = function(){
return x;
}
Example:
var Person = function(name){
this.name = name;
this.sayName = function(){
return 'My name is ' + this.name;
};
};
//Create new instance
var john = new Person('John');
>> john.sayName(); //John
>> john instanceof Person //true
>> john instanceof Object //true
Example:
var Person = function(name){
this.name = name;
this.sayName = function(){
return 'My name is ' + this.name;
};
};
//Create new instance
var james= new Person('James');
//Augment the prototype object
Person.prototype.changeName = function (newName) {
this.name = newName;
};
james.changeName('Joe');
>>james.sayName(); //Joe
Example:
var Person = function(name){
this.name = name;
};
Person.prototype.changeName = function (newName) {
this.name = newName;
};
Person.prototype.sayName = function(){
return 'My name is ' + this.name;
};
var james= new Person('James');
>> james.hasOwnProperty('changeName'); //false
>> james.__proto__.hasOwnProperty('changeName'); //true
Example:
No block scope
if(true){
var inside = 1;
}
>>inside //1
Every variable is global unless it’s in a function and is declared with var
function fn(){
var private = true;
//private it's available here
}
>>private //undefined
(function(){
var a = 1;
var b = 2;
alert(a + b);
}());
(function(win){
var a = 1,
b = 2,
sum = function(){
//Closure Function
return a + b;
}
win.sum = sum;
})(window);
>> sum()//3
//bad
for (var i = 0; i < 5; i++) {
window.setTimeout(function(){
alert(i); // will alert 5 every time
}, 200);
}
//good
for (var i = 0; i < 5; i++) {
(function(index) {
window.setTimeout(function() {
alert(index);
}, 100);
})(i);
}
<img src="myImage.jpg" alt="my image">
img = { src: "myImage.jpg", alt: "my image" }
Example:
Javascript possesses incredibly power, it can manipulate the DOM after a page has already been loaded
document.getElementById("id");
document.getElementsByClassName("class_name");
document.getElementsByName("name");
document.getElementsByTag("tag_name");
So, how does Javascript Manipulate the DOM?
Event types:
<!-- HTML -->
<button id="myButton">Click me</button>
//Js
var element = document.getElementById('myButton');
function eventHandler(){
alert('You have clicked the button');
}
element.addEventListener('click', eventHandler);
$("#myButton").on('click', function(){
alert('You have clicked the button');
});
By Alexe Bogdan
HTML Structure, JavaScript Syntax, DOM manipulation
Web Developer, JavaScript Lover, User Experience Professional, working in the web and mobile application development industry.