JS學習指南(1)
Node.js可以在命令行、服務端運行Js。
Chrome則運行在瀏覽器。
VScode是比較輕的一個編輯器。
1.在node使用
創建文件 demo1.js
輸入內容 (不怎麽需要HTML基礎)
命令行到該目錄 (如果不會命令行可以去看cmd命令)
node demo 或 node ./demo.js
2.在瀏覽器使用
創建文件 demo.html demo.js
輸入內容(這裏可能需要HTML基礎)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<-- 在script標簽引入 src屬性寫地址-->
<script src="./demo.js"></script>
<-- 也可以在script標簽寫-->
<script>
//內容
</script>
</body>
</html> 一、輸出
console.log("Hello World!"); //輸出在控制臺
alert(‘Hello World!‘); //輸出彈窗
document.write("Hello World!"); //輸出在網頁因為Node沒有dom和bom所以alert和document不能在Node運行
console 在F12控制臺可以查看
alert 在瀏覽器中會彈窗
輸出的 字符 需要使用雙引號、單引號還有反引號括起來
數值 則不用這裏 字符串 和 數值 就屬於 數據類型
二、變量
var box = 10; //數值
let box = "String"; //字符串
const box = true; //布爾值 數值 就是數字，可以包含整數、小數、二進制、八進制等數值
字符串就是字符、文本，其中字符需要使用括號引起來
布爾值 的意思就是真(true)或假(false) 其中數值的0 和 空 字符串 為false這裏的var let const可能有些看不懂，其實意思就是聲明變量，在Js裏面有一個東西叫做作用域。
var 是 函數級 作用域 並且可以重復聲明
let 是 塊級作用域 不能重復聲明
const 是 塊級 作用域 不能重復聲明 不能進行運算
這裏有一點需要註意 就是 let 和 const 不支持老瀏覽器，
但是可以使用babel轉化成為ES5(因為這是ES6新版本)。
三、運算符
1+1 //2 數值相加
1+"1" //11 數值和字符串相加
1-1 //0 數值相減
1*1 //1 數值相乘
1/1 //1 數值相除
1%1 //數值取余
box = 1 //賦值
box += 10 //加並賦值(box = box-10)，還有-=、*=... 四、函數
函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。
函數也是變量的一種
function main(){ //聲明函數
//函數裏面的內容
console.log("調用函數");
}
var main = function(){ //變量式聲明函數
//函數裏面的內容
console.log("調用函數");
}
var main = ()=>{ //箭頭函數
//函數內容
}
/*同時函數有傳參數功能*/
function main(num1, num2){
//打印傳進來的兩個參的和
console.log(num1 + num2);
}
/*返回值*/
function sum(num1, num2){
return num1+num2;
}
var a = 10; //返回值a為10
var b = a; //把a賦值給b
var c = sum(5,5); //把sum函數賦值給c c等於10五、數組和對象
數組和變量也是變量的一種。
數組就是一些數據類型的集合。
//數組
var array = [123,"String",true];
console.log(array[0]); //數組的調用 數組是從0開始數
//對象
var Obj = {
name: ‘Jack‘,
age: ‘35‘,
getName: function(){ //對象裏的函數寫法1
//這裏的this指向的就是Obj 即對象本身
return this.name;
},
getAge(){ //對象裏的函數寫法2 ES6寫法
return this.age;
},
setName(name){
//設置名字
this.name = name;
}
};
console.log(Obj.name); //Jack
console.log(Obj.age); //35
console.log(Obj.getAge); //35
Obj.setName(‘Tom‘); //Obj的name變成了Tom
console.log(Obj.getName()); //Tom在Js裏面每一個變量都是對象
比如字符串:
console.log("Hello World".search("W")); //6 W在字符串裏是第6位比如數組
[123, "String", true].map(function(item){
console.log(item);
//123
//String
//true
}); //遍歷數組
console.log([123, "String", true].length); //3 數組長度還有很多這樣的對象沒有一一列舉
六、循環語句、條件語句
1.if語句
條件語句用於基於不同的條件來執行不同的動作。
/*
一個花括號就是一個塊 {}
如果沒有使用塊 只能執行一行
*/
//能執行一塊
if(true){ //條件 需要為true 例如非0 或者非空字符串
//括號裏的參數是true的情況下就執行
console.log("這是true的");
}else{
//括號裏的參數是false的情況下就執行
console.log("這是false的");
}
if(true) console.log("True"); //只能執行一行2.switch語句
switch 語句用於基於不同的條件來執行不同的動作。
/*
switch(變量){
case 變量的值:
//內容
break; //中斷
default: //如果沒有值相同
}
*/
var a = 10;
switch(a){
case 10:
console.log("a的值是" + a);
break; //中斷
default: //如果沒有值相同
console.log("a的值是" + a);
break;
}3.for語句
循環可以將代碼塊執行指定的次數。
//for語句 for(先執行的; 執行條件; 語句執行後執行的)
for(let i = 0; i < 10; i++){
console.log("for語句"); //打印十次
}
console.log(i); //報錯 上面let 是在一個塊級 出了{}以後就不能獲取
for(i in [1,2,3]){ //遍歷值賦給i 隨後打印i
console.log(i); //1 2 3
}4.while
只要指定條件為 true，循環就可以一直執行代碼塊。
這個方法要主要不要寫成死循環
/*
while(true){ //條件
//內容
}
do{
//內容
}while(true) //條件
*/do...while是先運行一遍 然後判斷條件 如果成立就再執行
var i = 0;
while(i < 5){
console.log("while"); //循環5次
i++;
}
do{
console.log("do...while");
i++;
}while(i < 5) //條件
作者：INS_null
鏈接：https://www.imooc.com/article/24662?block_id=tuijian_wz
來源：慕課網
JS學習指南(1)