شگفتی های جاوا اسکریپت

بیاین یه کم دیپ تر به جاوا اسکریپت نگاه کنیم :

The World's Most Misunderstood Programming Language. Douglas Crockford

typeof:
string, boolean, number, function, object(object,null,array)

var amir;
console.log(typeof amir);
//undefined

function getPost(){
  //nothing
}
var post = getPost();
console.log(post);
//undefined

var num=070;
console.log(num);
//56
//(0*1)+(7*8)=56

var num=088;
console.log(num);
//88
//because not octal

'use strict'
var num=070;
console.log(num);
//SyntaxError

var a= NaN;
if(isNaN(a))
   console.log('NaN!');
//NaN!

console.log(typeof NaN);
//number

//every variable when initialize is set to undefined
var a;
console.log(a===undefined);
//true

//exceution context is created is 2 phase :
//creation phase:
//Global object set to memory , this, setup memory space for variable and functions hoisting
//befor ur code, ur code is executed line by line
//execution phase:
function b(){
 console.log('called b!')
}
b();
console.log(a);
var a='hello amir';
console.log(a);
//called b
//undefined
//hello amir

//if first is obj, javascript return second
var obj={
    amir:'my strting';
}
var value= obj && 0;
console.log(value);
//0

//if first is boolean, javascript return second
var value= true && obj;
console.log(value);
//object {amir:'mystring'};

//if one of them is null, answer is null
var value='Z' && null
console.log(value);
//null

//if one of theme is undefined or NaN, answer is NaN or undefined
var value = 'M' && undefined
console.log(value);
//undefined

//if first is false ,javascript ignore next and return false
var value = false && 'Z';
console.log(value);
//false

var value = true && true;
console.log(value);
//true


var value = true && false;
console.log(value);
//false


var value = false && true;
console.log(value);
//false

var value = false && false;
console.log(value);
//false

var value = obj && 99;
console.log(value);
//99

var value= !&quot "
console.log(value);
//false

var value= !&quot"
console.log(value);
//true

var value= !NaN;
console.log(value);
//true

var value= !undefined;
console.log(value);
//true

var value= !0;
console.log(value);
//true

var value= !99;
console.log(value);
//false

var value= !!false;
console.log(value);
//false

var value= !'A';
console.log(value);
//false

var value= !undefined;
console.log(value);
//true

var value= !new Object();
console.log(value);
//false

var value= !null;
console.log(value);
//true


//if first is obj ,javascript return obj
var value = obj || 'Z';
console.log(value);
//object {amir:'mystring'}

//if first is false ,javascript return second
var value = false || 'Z';
console.log(value);
//Z

//when javascript attempt to numeric calculate, if one of them is undefined, its not gonna throw exception , its return NaN
//whenever you are performing mathematical operation , javascript wants answer to be a number and if it cant figure it out, it will just set the result to NaN , which is still a type number, 
var exam;
var math=12;
console.log(exam/math);
console.log(exam+math);
console.log(exam*math);
//NaN
//NaN
//NaN

//whenever you are performing mathematical operation , javascript wants answer to be a number and if it cant figure it out, it will just set the result to NaN , which is still a type number, 
console.log(typof NaN);
//number

console.log(Boolean(&quotamir&quot));
//true

console.log(Boolean(&quot&quot));
//false

console.log(Boolean(&quot &quot))
//true

console.log(Boolean(0));
//false

console.log(Boolean(true));
//true

console.log(Boolean(NaN))
//false

console.log(Boolean(undefined))
//false

console.log(Boolean(null))
//false

//! convert to Boolean
var value=99.99;
console.log(!value);
//false
console.log(!!value);
//true

console.log(typeof null);
//object

console.log(null == undefined)
//true

console.log(null == 0)
//false

console.log(0 == undefined)
//false

console.log(this===window)
//true
var variable= &quotamir&quot+&quot agha"
console.log(variable);
//amir agha

//there is no convert , be calm!
var variable= &quot13&quot+&quot95"
console.log(variable);
//1395

var variable= 13+&quot95"
console.log(variable);
//1395

var variable= 1395+undefined;
console.log(variable);
//NaN

//javascript see 1395 is a string so its gonna expect undefined be a string 
var variable= &quot1395&quot+undefined;
console.log(variable);
//1395undefiend

var variable= &quot1395&quot+null;
console.log(variable);
//1395null

//in numeric javascript set null to 0
var variable= 1395+null;
console.log(variable);
//1395

//javascript has no idea how to do this calculation so return NaN
var variable= 1395+NaN;
console.log(variable);
//NaN

var variable= 3.8 - 2.1;
console.log(variable);
console.log(variable.toFixed(2));
//1.6999999999999997
//1.69

var variable= &quot130&quot-&quot9"
console.log(variable);
//131


var variable= &quotamir130&quot-&quotagha9"
console.log(variable);
//NaN

var variable= 130 - undefined;
console.log(variable);
//NaN

var variable= 130 - null;
console.log(variable);
//130

var variable= 130 - NaN;
console.log(variable);
//NaN

var variable= 130 - &quot"
console.log(variable);
//130

var variable= 130 * NaN;
console.log(variable);
//NaN

var variable= 130 * null;
console.log(variable);
//0

var variable= 130 * undefined;
console.log(variable);
//NaN

var variable= 130 * &quotamir"
console.log(variable);
//NaN

console.log(9/0);
//Infinity

var variable= 120 / &quot40"
console.log(variable);
//3

var amir=5;
var agha=4;
var Variable= amir--*agha;
//20

var amir=5;
var agha=4;
var Variable= --amir*agha;
//16

var amir;
console.log(++amir)
//NaN

var amir=null;
console.log(++amir)
//1

var amir=5;
var variable = false && ++amir;
console.log(amir);
//5

console.log(1==true);
//true

console.log(2==true);
//false

console.log(0==false)
//true

console.log('42'==42)
//true

//each object has it own individual memory space, despite having same exact properties.
var obj={
 name: 'amir'
};
var obj2={
 name: 'amir'
}
if(obj==obj2)
console.log('ok')
else
console.log('no')
//no

var obj2={
 name: 'amir'
}
var obj=obj2;
if(obj==obj2)
console.log('ok')
else
console.log('no')
//ok

console.log(null==0)
//false

console.log(NaN==NaN);
//false

//take every thing from number[2] and after that
var number=[1,2,3,4,5,6];
console.log(number.slice(2).toString()).
//3,4,5,6

//start point is number[1] take from from number[1]and after befor number[4].
console.log(number.slice(1,4))
//2,3,4

//lest just take a last 3 entries
console.log(number.slice(-3).toString());
//4,5,6

//delete startfrom 0,and 3after ()
number.splice(0,3);
console.log(number.toString());
//4,5,6

//delete number 3 and replace 99
number.splice(0,3,99);
console.log(number.toString());
//[1,2,3,99,5,6]

//delete number 3 and replace 99,200,300
number.splice(0,3,99,200,300);
console.log(number.toString());
//[1,2,3,99,200,300,5,6]

//just reverse
number.reverse();
console.log(number.toString());
//[6,5,4,3,2,1]

//its obviously sorting by string values of the element
number.push(10);
console.log(number.sort()toString());
//1,10,2,3,4,5,6

//fix sorting plan
number.sort(function (value1,value2){
   return value1-value2
});
console.log(number);
//1,2,3,5,6,10

console.log(number.indexOf(3));
//2

//indexOf cant find and return -1
console.log(number.indexOf('3'));
// -1

//indexOf cant find and return -1
console.log(number.indexOf(222));
// -1

array.push(2);
console.log(number.indexOf(2));
console.log(number.lastIndexOf(2));
//1
//6

var amir = new Object();
amir.test=22;
amir.family=&quotaskari"
console.log(amir.family);
console.log(amir['family']);
//askari
//askari

//we have some kind dynamic access to object
var field='family';
console.log(amir[field]);
//askari

var amir={};
console.log(typeof amir);
//object

var amir={
    family:'askari',
    birth:'1989'
};
console.log(amir.birth);

var amir={
    work:[
           {main:'programming'},
           {type:'type1'}
     ]
};
console.log(amir.work[1]);
console.log(amir.work);
//{type: &quottype1&quot}
//(2) [{…}, {…}]....

var project = {name:'amir'};
console.log(project.foo);
//VM281:1 Uncaught TypeError: amir.ss is not a function

//there is a function called toString() on project, but we didnt, specify that, so where the toString lives? it's on the prototype
console.log(project.toString());
//{name: &quotamir&quot}

console.log(typeof Object.prototype);
// Object

console.log(typeof Object.prototype.toString());
// string
var project = {name:'amir'};

//its not that mean object havnt a prototype, we cant access to prototype
console.log(project.prototype);
//undefined

console.log(project.__proto__);
console.log(typeof project.__proto__);
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}....
//Object

var num={};
Object.defineProperty(num,'name',{
	value: 'amir'
});
num.name='hasan';
console.log(num.name)
//amir

var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        writable: true
});
num.name='hasan';
console.log(num.name)
//hasan

var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        enumerable: true
});
num.name='hasan';
for(var f in num)
   console.log(f)
//name

var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        enumerable: false
});
num.name='hasan';
for(var f in num)
   console.log(f)
//undefined


var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        configurable: false
});
Object.defineProperty(num,'name',{
	value: 'amir2'
});
console.log(num.name);
//Uncaught TypeError: Cannot redefine property: name
//   at Function.defineProperty (<anonymous>)
//   at <anonymous>:6:8

var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        configurable: false
});
Object.defineProperty(num,'name',{
	value: 'amir2'
});
console.log(num.name);
//amir

var num={};
Object.defineProperty(num,'name',{
	value: 'amir',
        configurable: true
});
Object.defineProperty(num,'name',{
	value: 'amir2'
});
console.log(num.name);
//amir2

Object.defineProperty(num,'getName',{
	get:function(){
		return this.name;	
	},
	set: function(newValue){
		this.name=newValue;
	}
});
num.getName;
num.getName='hasan';
num.getName;
//amir
//amir

Object.defineProperties(num,{
	'family':{
		value:'askari',
		writable:true
    },
	'age':{
		value:18,
		writable:true
	}
})
var descriptor = Object.getOwnPropertyDescriptor(num,'name');
//{value: &quotamir&quot, writable: false, enumerable: false, configurable: false}...

var obj={};
var obj2=Object.create(obj);
Object.defineProperties(obj,{
	'name':{
		value:'amir'
	},
	'age':{
		value:30
	}
});
console.log(obj.hasOwnProperty('name'));
console.log(obj2.hasOwnProperty('name'));
console.log(obj2.hasOwnProperty('toString'));
console.log(obj.__proto__.hasOwnProperty('toString'));
console.log(Object.prototype.isPrototypeOf(obj));
console.log(obj.isPrototypeOf(obj2))
console.log(Object.prototype.isPrototypeOf(obj2));
console.log(obj.__proto__.isPrototypeOf(obj2))
//true
//false
//false
//true
//true
//true
//true
//true

var obj={amir:'agha'};
var obj2=Object.create(obj);
console.log('amir' in obj2);
console.log('toString' in obj2);
console.log('amir' in obj.prototype);

//true
//true
//false


//invocation: running a function or calling a function

var func = function(name){
	throw('Erroooooor')
};
var func2=func;
func2('2222');
//Uncaught Erroooooor

var func3 = function myFunc3Fn(name){
	throw('Erroooooor');
};
var func4=func3;
console.log(func4('2222'));
//VM859:2 Uncaught Erroooooor
//myFunc3Fn @ VM859:2
//(anonymous) @ VM859:5

console.log(typeof Object);
//function

//constructor
var func= function myFunc(name,family){
   this.name=name;
   this.family=family
}
var myFunc=new func('amir','agha');
console.log(myFunc.name+&quot &quot+myFunc.family);
console.log(typeof myFunc);
//amir agha
//object

var myFunc=new func('amir','agha');
var myFunc2= new func('amir2','agha2');
console.log(myFunc2.__proto__===myFunc.__proto__);
//true


//what if we have 1000 object? this function is going to be duplicate 1000 times,and its not good, so we dont add function in constructor 
var func= function myFunc(name){
    this.name='nothing',
    this.fun= function(){
    
    }
}
var func1= new func();
var func2= new func();
console.log(func1.fun===func2.fun)
//false

//when we use constructor , we can access prototype and not use __proto__
//when we use JSON object, we cant access to prototype and use __proto__
var func= function myFunc(name){
    this.name='nothing'
}
var myfunc2=console.log(typeof func.prototype);
var myfunc2=console.log(typeof func.__proto__);
console.log(func.prototype===Object.prototype);
//object
//function
//false

var amir = function(name){
    this.name=name
};
amir.prototype.myFunc=function(){};
var obj1 = new amir('sss');
var obj2 = new amir('sssss2');
console.log(obj1.myFunc===obj2.myFunc)
//true

var amir = function(){
    console.log(this);
}
amir();
amir({});
//window{...
//window{..

//the call function let us pass an object, which becomes the this keyword and this variable whithin that function
amir.call({});
//object

var amir= function(zip,country){
   console.log(zip+&quot  &quot+country);
}
var zipCode= { zip:'1111111' };
amir.call(zipCode,'newZip','italy');
//newZip  italy

//function running:
function b(){

}
function a(){
   b();
}
a();

//run in stack: first:Global execution, a() create and execute , b() create and execute

//Browser Object Model
//Document Object Model
//timer is a part of browser and can be access by window object

var timer=20;
var counterFunc	=	setInterval(function(){
	console.log(timer);
	timer--;
	if(timer<1){
		console.log(timer);
    }
},1000);
//echo 20 until 1 every second

if(confirm('what is ur answer?')){
	console.log('ok')
}else{
	console.log('no')
}
var name = prompt('what is ur name?');
alert(name)

console.log(document.getElementById(''));
console.log(document.getElementsByClassName(''));
console.log(document.getElementsByName(''));
console.log(document.getElementsByTagName('<p>'));
var myid = document.getElementById(&quotyui_3_18_0_3_1520878684494_104&quot);
var myclass= myid.getAttribute('class');
console.log(myclass);
myid.setAttribute('style','display:none');
var myDiv = document.getElementById('main-frame-error');
var nodes	=	myDiv.childNodes;
console.log(document.querySelector(&quotarticle&quot));

//select one .article
console.log(document.querySelector(&quot.article&quot));

console.log(document.querySelector(&quot#article&quot));

//select All .article
console.log(document.querySelectorAll(&quot.article&quot));

//event, load is fired when webpage has loaded, unloaded.
//abort if loading gets interrupted 
//error in case something goes wrong in the browser

var button = document.getElementById('main');
button.addEventListener('click',function(){
   console.log('click shod');
});
//click shod

var myFunc = function myFuncMe(){
   console.log('click shod');
}
button.addEventListener('click',myFunc)
//click shod