js的基本语法
今天給大家帶來的是js的基本語法，相信大家對網站都不陌生，那么想要做出好看的網站js就是一大利器了。
前端的三大要素：
- ?htem（網頁骨架）
- ?css（網頁樣式）
- ??js（讓網頁具備動態效果）
什么是js？
- JavaScript 一門弱類型的語言（弱類型：對代碼的約束性不高）
- 用于給HTML頁面上添加動態效果與交互操作
- ECMA：相當于js的語言標準，目前最高是ES6
java與JavaScript的比較
- java代碼需要編譯才能執行，而js代碼不需要編譯就能執行；
- js可以動態的增加屬性
- js中所有變量全部使用var來定義
- java是基于服務端的語言，js是基于客戶端的語言；
（什么叫基于服務端和客戶端？簡單理解，就是需要服務端執行的或者需要在客戶端執行的。）
如何使用js？
- 使用script標簽，一般而言都是放在head標簽中
- 編寫js文件，通過script標簽中的src屬性引入
- 可以在同一個界面中引入多個文件，執行順序與引入順序一致
js的調試
瀏覽器：控制臺（Console）
console.log() 打印信息
console.dir() 打印一個對象的所有屬性和方法
基本語法
JavaScript的語法和java語言類似，每個語句以;結束，語句塊用{}
JavaScript并不強制要求在每個語句的結尾加;
//? 行注釋
/*? */? ?塊注釋
JavaScript嚴格區分大小寫
怎樣區分整數變量和字符串變量？
可以通過控制臺輸出的顏色分辨，整數是藍色，字符串是黑色
也可以通過在輸出時加個typeof：
//js中所有變量全部使用var來定義//整數，小數叫做numbervar i=1;//定義字符變量 stringvar s="哈哈哈";console.log(typeof i);console.log(typeof s);怎樣將整數添加到字符串
可以直接跟java一樣用+連接
在反引號中可以用${}直接添加到字符串中
var s2='數字的值'+f+"hello world";var s3=`的點點滴滴${f}多多多多多`;//``在tab鍵位的上方在js中字符串的數字與整數是可以運算的，如果是非數字控制臺輸出的是NaN（not a number 不是一個數字）
在js中1/0是可以的，輸出的結果是Infinity（無窮大）
數字類型的轉換：
console.log(parseInt("1.23"))console.log(parseFloat("1.23"))取小數的后幾位：
//在所有的編程運算中 基本小數的運算都不靠譜console.log(0.6-0.2);//小數的取幾位console.log((1.23545).toFixed(2))boolean：
var f1=true;var f2=false;console.log(f1||f2)//trueconsole.log(f1&&f2)//falseconsole.log(!f1)//falseconsole.log(!!f2)//true !!將這個變量變成boolean什么情況下會得到false？
什么是短路？
如果前面為真就停止，如果為假就往后繼續運行
在&&中如果全為真就會運行到最后，如果有假就停止
//短路 如果前面為真就停止，如果為假就往后繼續運行console.log(""||0)//0console.log(1||0)//1console.log("2"||"1"||0)//0//在&&中如果全為真就會運行到最后，如果有假就停止console.log("2"&&"1"&&1)//1console.log("2"&&0&&1)//0如何判斷用戶到底輸入了沒有？
var m=prompt("請輸入一個數字")//判斷用戶到底輸入了沒有？// "" 為false ！->true// null 為false ！->trueif(!m){alert("輸入不準確")}console.log(m);js數組的特征：
js如何定義對象？
//定義對象var stu={"stu_no":1,"stu_name":"小明"，"stu_age":38}//可以動態的增加屬性stu.stu_address="xx"//給對象新增了地址屬性console.log(stu);js中的彈框
主要有三種彈框：提示框（alert）、詢問框（confirm）、輸入框（prompt）
//js中的彈框//alert("你好嗎？");//提示框//var f4=confirm("確定要刪除嗎？")//詢問框var f5=prompt("請輸入");//輸入框console.log(f5);關于js中的“=”的意思
- = 賦值
- == 比較（無視類型的比較）
- === 轉換類型的比較（先比較類型在比較值）
關于js中的循環：
switch結構：用戶輸入1~7，控制臺輸出周一~周天
//NaN不能用等于判斷 只能使用isNaNvar f6=prompt("請輸入星期幾")if(!isNaN(parseInt(f6))){//如果不是非數字switch(parseInt(f6)){//轉成int類型case 1:console.log("周一")breakcase 2:console.log("周二")breakcase 3:console.log("周三")breakcase 4:console.log("周四")breakcase 5:console.log("周五")breakcase 6:console.log("周六")breakcase 7:console.log("周天")breakdefault:console.log("你是xx")}}while結構：
// var j=1;// while(j<10){// j++;// }//死循環// while(true){// }for結構：用戶輸入次數進行循環輸出
var count=prompt("請輸入次數")for(var i=0;i<count;i++){//在頁面中進行html輸出document.write("<font color='red'>哈哈哈"<font><br>)}今日思維導圖：
?
今日所有代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h1>標題</h1><script>/*編寫代碼必須在script標簽中*//*打印 console控制臺 log日志*/console.log('hello word');console.log('你好 世界');//定義整數變量 int i=1;//js中所有變量全部使用var來定義//整數，小數叫做numbervar i=10;var f=1.234;//定義字符變量 stringvar s="哈哈哈";var s2='數字的值'+f+"hello world";var s3=`的點點滴滴${f}多多多多多`;//``在tab鍵位的上方var s4='a';//查看類型console.log(typeof i);console.log(typeof f);console.log(typeof s);console.log(s2);console.log(s3);console.log(s4*i);//NaN(非數字）not a number 不是一個數字console.log(1/0);//Infinity 無窮大//轉換// Integer.parseIntconsole.log(parseInt("1.23"))console.log(parseFloat("1.23"))//在所有的編程運算中 基本小數的運算都不靠譜console.log(0.6-0.2);//小數的取幾位console.log((1.23545).toFixed(2))// booleanvar f1=true;var f2=false;console.log(f1||f2)//trueconsole.log(f1&&f2)//falseconsole.log(!f1)//falseconsole.log(!!f2)//true !!將這個變量變成boolean//什么情況下會得到false// 字符串：""為false// 數字：0為false// null 也為false// undefined 未定義 也為false// NaN 也是false//短路 如果前面為真就停止，如果為假就往后繼續運行console.log(""||0)//0console.log(1||0)//1console.log("2"||"1"||0)//0//在&&中如果全為真就會運行到最后，如果有假就停止console.log("2"&&"1"&&1)//1console.log("2"&&0&&1)//0var m=prompt("請輸入一個數字")//判斷用戶到底輸入了沒有？// "" 為false ！->true// null 為false ！->trueif(!m){alert("輸入不準確")}console.log(m);//數組沒有類型限制//數組可以讀取任意下標的值//長度可以任意變化var as=[1,2,true,4,'a'];//數組console.log(as[100]);//得到未定義as[100]="a";//長度101console.log(as);as.length=2;console.log(as);//定義對象var stu={"stu_no":1,"stu_name":"小明","stu_age":38}//可以動態的增加屬性stu.stu_address="xx"//給對象新增了地址屬性console.log(stu);//js中的彈框//alert("你好嗎？");//提示框//var f4=confirm("確定要刪除嗎？")//詢問框var f5=prompt("請輸入");//輸入框console.log(f5);// =賦值// ==比較 無視類型比較// ===轉換類型比較 先比較類型再比較值console.log(1=="1")//NaN不能用等于判斷 只能使用isNaNvar f6=prompt("請輸入星期幾")if(!isNaN(parseInt(f6))){//如果不是非數字switch(parseInt(f6)){//轉成int類型case 1:console.log("周一")breakcase 2:console.log("周二")breakdefault:console.log("你是xx")}}// var j=1;// while(j<10){// j++;// }//死循環// while(true){// }//for循環var count=prompt("請輸入次數")for(var i=0;i<count;i++){//在頁面中進行html輸出document.write("<font color='red'>哈哈哈<font><br>")}</script></body> </html>總結
- 上一篇： ClickHouse源码阅读(0000
- 下一篇： 移动端开发：使用订阅号进行开发