js教程實踐（JS基礎）

1.基本配置

//nodejs 環境搭建與更新 去官網下載啊
//pwershell的使用 目錄下 shift +右鍵 選擇在此處打開p…shell窗口
//下載 Sublime Text 3 編寫js代碼
//在pwershell中預覽變量以及邏輯結果
//node 命令1 執行指定js腳本 ex: node main.js
// pwershell 按tap 可補全路徑

2.變量以及基礎表達式的使用

//1.變量以及基礎表達式的使用
//pwershell的使用 目錄下 shift +右鍵 選擇在此處打開p..shell窗口
//下載文本編輯器

console.log("hi szw");

//整數和小數 通用小數處理(number 類型)
var num=0;
console.log(num);
num=7.5;
console.log(num);

num="nmb";
console.log(num);
console.log(typeof num);
num=true;
console.log(num);

//typeof 以字符串返回變量類型
console.log(typeof num);


//邏輯運算符
var num1=2.5;
var sum=num1+7;
console.log(sum);
//取餘 針對整數（數論）
var temp=sum%5;
console.log(temp);

console.log(3>temp);
sum+=temp;
console.log(sum);

// ++ -- (複雜運算不建議使用)
var jiajia=(sum++)+4;
//(sum++) sum=15 在運算式中現在的sum 卻是等於14 最終運算結果是18 不是19 
console.log(sum);
console.log(jiajia);

var jiajia2=(++sum)+4;
console.log(jiajia2);

var jianjian=(--sum)-4;
console.log(jianjian);

3.順序執行條件判斷以及循環

什麼是使用範圍 以及使用範圍的定義和使用

var lhs=4;
var rhs=5;

console.log(lhs+rhs);

if(lhs > rhs)
{
console.log(true);

}
else if (lhs==rhs)
{
console.log("==");
}
else
{

	console.log(false);
}
var v=9;

switch(v)
{
	case 10:
	console.log("10");
	break;
	default:
	{
		console.log("0");
	}
	break;

}
console.log("endSwitch");

//打印從1 -10
var index=0;
while(index<10)
{
index++;
	//console.log(index);
}
// for(初始化; 條件表達式; 循環迭代) {}
for(i=0;i<10;i++)
{
//console.log(i);
}

//continuel 與 break 
//跳過單次循環
//跳出整個循環
for(i=0;i<10;i++)
{
	if(i==5)
	{
		
		continue;
	}
	console.log(i);
}
for(i=0;i<10;i++)
{

	if(i==1)
	{
		console.log(i);
		break;
	}
	console.log(i);
}

4.數組與表的使用

//數組與表的使用
var paras=[];
paras=[1,2,3,"hi",true];
console.log(paras[1]);
console.log(typeof paras[3]);

//表 類型(用key 查找val)
var table={};
table={
	//key : val(鍵值對)
	age:30,
	name:"szw",
	pNum:"110",
	array_data:[1,2,{age:18,name:"swk"}],
	array_data_2:paras,
	250:"249+1"
}
console.log(table);
console.log(table.name);
console.log(table["array_data"][1]);
//整數key的訪問
console.log(table[250]);

5.代碼塊的定義與使用（方法）

//函數：代碼塊的定義（重複邏輯）
function JsStart(a,b)
{

	console.log(a+b);
	//返回語句 返回到調用函數位置的下一個語句
	return a+b;
}

var res= JsStart(3,5);
console.log(res);

var funTab={
	Add:JsStart,
	fun:function(a,b)
	{

		return a-b;
	},
};

var res2= funTab.fun(9,7);
console.log(res2);

6.Math工具函數以及數組和表的一些基礎操作

////atan2 通過座標 返回一個角度(-pi,pi] –
//把角度在象限中去理解。

//math.pi 3.14...
var pi=Math.pi;
//0-1 的一個小數 [0,1) 包括0，不包括1
var rnd=Math.random();
console.log(rnd);
rnd=Math.floor(rnd);
//隨機產生一個隨機整數
function CreatRandIntNum(a,b)
{
	 var v= a+(b-a+1) *Math.random();
	 return Math.floor( v);

}

var newNum=CreatRandIntNum(100,1000);

console.log("bigNum",newNum)
//三角函數
//sin 參數式弧度
//弧度： 
//90--> pi/2 
//45--> pi/4
//sin(45)=根號（2）/2==0.707....

var out=Math.sin(Math.PI/4);
console.log(out);

//正弦 餘弦 正切

//弧度 度 轉化

//反三角函數
//[-pi/2, pi/2] 半個區間

// 通過三角函數獲得角度或弧度


//atan2 通過座標 返回一個角度(-pi,pi] --

//開根號有什麼用

//數組長度
var paras=[1,3,2];
console.log(paras.length);
//加元素到末尾
paras.push("520");

function mTable(t)
{
	t.add=10;
}

var tab={

	name:"black",
};
//push 的都是引用
mTable(tab);
paras.push(tab);

//遍歷索引
for(var i in paras)
{
	console.log(i);
	console.log(paras[i]);
}
var res=paras.indexOf(3);
console.log(res);

//splice
var deleteData= paras.splice(2,2);//返回刪除的數組 原數組成員缺失
console.log(deleteData);
console.log(paras);


//數組的排序
paras= [5,8,9,3,4,1];

//比較和排序
paras.sort(function(a,b)
	{
		if(a<b)
		{

			return -1;
		}else if(a>b)
		{

			return 1;
		}else
		{
			return 0;

		}
	});
console.log(paras);

function RandomSort()
{
	if(Math.random()<=0.5)
	{
		return 1;
	}else
	{
		return -1;

	}
};
//隨機排序 隨機值獲取：隨機完抽取第0個值
paras.sort(RandomSort);

console.log(paras);

var num=paras[0];
console.log(num);

//表的高級使用

var testTable={

	name:"szw",
	age:30,
	sex:true,
};
//刪除key and val
delete testTable["age"];
delete testTable.name;
for(var key in testTable)
{
	console.log(key,testTable[key]);
}

//字符串對象的高級使用

var len="nishishui";
console.log(len.length);
//首次出現的索引位置
console.log(len.indexOf("shi"));

//產生了新的字符串對象 ，不改變原始值
var newStr= len.replace("shu","nmb");
console.log(newStr);

var lowStr=newStr.toLowerCase();
var bigStr=newStr.toUpperCase();
console.log(lowStr);
console.log(bigStr);

7.代碼模塊中的互相調用

8.this的理解與使用

console.log("szw");
function show()
{
	console.log(this);

}
//show(); //不確定的值

//顯示的傳遞this 
show.call({});
// biao.函數() --> this --> 表
var tool={
	show:show,
};
tool.show();

//強制綁定this
var new_func=show.bind({name:"szw"});
//產生一個新的函數對象，不會改變原來的this
new_func();
//
//show();

//call 與bind 的區別
//bind  綁定this的時候不是由調用者來決定的（函數調用者只管調） 優先級最高

//this 是什麼 是由調用環境來決定的 不清楚的一般不使用

//============new 與構造函數 機制
function person(name,age){

this.name=name;
this.age=age;
}

//1.每個函數都有一個表（prototype）
console.log(person.prototype);
person.prototype.get_age=function() {

	return this.age;
};

person.prototype.get_name=function(){

	return this.name;
};

//2. new  關鍵字 +函數（參數）
// step1 : 創建了一個新的表
// step2： 進行this 傳遞 （往新的表裏加了key）
// step4: 返回新的表
// step3: prototype 傳遞到新表的__proto__

//構造出了一個表 ，初始化表對象
var obj= new person();
var tom= new person("tom",18);

console.log(tom);
console.log(tom.__proto__);

//將成員函數寫到prototype 中更方便
console.log(tom.get_age());
//搜索機制
//先在表中找
//然後在__proto__ 中找

//new ==func 原理如下(模仿new 關鍵字)
function new_person(name,age)
{
	//1
	var inst={};
	//2
	person.call(inst,name,age);
	//3
	inst.__proto__={};
	for(var key in person.prototype)
	{

		inst.__proto__[key]=person.prototype[key];
	}
	return inst;

}
//表 原理構建分析
var tale_newPerson={

	name:"szw",
	age:12,
	get_name:person.get_name(),
	get_age:person.get_age();

};



var xiaohong=new_person("redgirl",8);
console.log(xiaohong);
console.log(xiaohong.get_age());
console.log(xiaohong.get_name());

//==================== 

9.類的構造函數與繼承

10 類的終篇（js 沒有類，繼承語法， 通過new this 模擬）

//js 沒有類，繼承語法， 通過new this  模擬
function Class(class_desic)
{
	//先構造數據 在構造原型
	var new_calss=function(name,blood){

		//有基類
		if(class_desic.extend)
		{

			class_desic.extend.call(this,name);
		}
		else
		{

			class_desic.init.call(this);
		}

	};
	//構造原型
	if(class_desic.extend)
	{
		var a=function(){};

		a.prototype=class_desic.extend.prototype;

		new_calss.prototype=new a();


	}else
	{
		new_calss.prototype={};
	}
	for(var i in class_desic)
	{

		if(i=="extend")
		{
			continue;
		}
		new_calss.prototype[i]=class_desic[i];
	}
	return new_calss;
}


var boss2= Class ({
	//定義寫死的關鍵字 extend是繼承自哪個基類
	extend:Enemy,
	init:{

		//Enemy.call(this,);
	},

	attack:function(){
		Enemy.prototype.attack.call(this);
		console.log("boss2 attack");
	},
	addBlood:function(){}
})

var bossenemy2=new boss2("花蝴蝶",10);
bossenemy2.attack();

10編碼規範與建議

/* 學會寫代碼的時候，使用ctrl + c, ctrl + v;
   編寫函數是的時候，我們經常手輸入會寫錯， ctrl+c, ctrl + v;
   初學者經常寫錯了字母，或者字母寫反的時候;
*/

/* 寫代碼要學會用快捷方式, 不用用鼠標，爲了你的手;
跳過單詞: ctrl + left or right;
選中這個單詞: ctrl + shift + left or right
shift + home or end: 選中一行;
shifr + up or down 選折多行;

win + E 
shirt + 右鍵;
*/

/*
  不管怎麼樣，要把縮進做好;
  命名在正式的項目裏面一定要規範;
  3種命令方式:
     (1) 駝峯命名法:  第一個單詞小寫,後面的單詞大寫;
         getName, getAge(), setPosition

     (2) 匈牙利命令法: 第一個單詞的字母都大寫;
     	 GetName, GetAga(), SetPosition()
     	 類型，也要帶上表示  iAge, fDistance;... 
     (3) Linux命名法: 每個單詞都小寫，中間用_
         get_name, get_age, set_position()

   表達式寫法要規範:
      每一個符號的左右，我們都加上了空格

   不管你有多少條語句，你都寫上括號

   每一句代碼結束以後加上分號;
*/