HTML & JavaScript Introduction

The client
The server
An Internet connection
TCP/IP
HTTP
DNS
HTML, CSS, & JavaScript
Assets

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
</style>
</head>
<body>
<h1>Header</h1>
<p>First paragraph with <em>emphasized text</em>.</p>
<p>Second paragraph.</p>
<script>

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 a = 1;
var b = 2,
c = b;
Weakly typed
var a = 2;
a = 3.14;
a = 'This is a string';
Initialized with the value
var a;
console.log(a); //undefined
console.log(a === undefined); //true

Primitive values:
Number
String
Boolean
null
undefined
Object:
Function
Array
Date
RegExp

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!'
}
}
a hash of pairs;
the key can be a Number or a String;
the value can be anything and it can be called a
;
if a value is a function, it can be called a .
Example:

also objects;
have numeric properties that are auto-incremented;
have a property;
inherits some methods like:
push();
splice();
sort();
join();
and more.
var array = [1,2,3];
console.log(array.length); //3
array.push("a value");
console.log(array.length); //4
Example:

also objects;
have and ;
can be copied, deleted, augmented;
special, because can be invoked;
all functions return a value (implicitly );
can return other functions.
//Function Declaration
function fn(x){
return x;
}
//Function Expression
var fn = function(){
return x;
}
Example:

return when they are invoked with ;
can be modified before it's returned;
can return another object.
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:

a property of the ;
can be overwritten or augmented.
this.name = name;
this.sayName = function(){
};
};
//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:

it's not directly exposed in all browsers;
it's a reference to constructor property.
this.name = name;
};
Person.prototype.changeName = function (newName) {
this.name = newName;
};
Person.prototype.sayName = function(){
};
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
function fn(){
var private = true;
//private it's available here
}
>>private //undefined

(function(){
var a = 1;
var b = 2;
alert(a + b);
})();

Closures are that refer to independent (free)
variables.;
In other words, the function defined in the closure
' ' the environment in which it was created.
(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);
}

Follows the prototype model
One object can from another
Functional language
Can pass
A function can another ( )
Dynamic:
Types are associated with values - not variables
Define new program elements at run time
Weakly typed:
Leave out to methods
Access non-existing object properties
Truthy and falsy values
Implicit conversions:

the object represents the window of your
browser that displays the and its properties
include all the global variables;
the object represents the displayed HTML;
object has property arrays for forms, links,
images, etc.
of a are objects with data and
operations, the data being their properties.
<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
It can change HTML Elements
It can change Attributes
It can modify CSS
It can add new Elements and Attributes
It can delete Elements
It can react to Events in a page
document.getElementById("id");
document.getElementsByClassName("class_name");
document.getElementsByName("name");
document.getElementsByTag("tag_name");
So, how does Javascript Manipulate the DOM?

an is a notification that something specific has
occurred in the browser
an is a script that is executed in
response to the appearance of an
are also JavaScript objects
Event types:
click
keydown
mousedown
mouseout
mouseover
submit
much more

<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');
});

HTML & JavaScript Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML & JavaScript Introduction

Similar to HTML & JavaScript Introduction (20)

More from Alexe Bogdan

More from Alexe Bogdan (8)

Recently uploaded

Recently uploaded (9)

HTML & JavaScript Introduction