時間：2023-05-24 23:03:01 | 來源：網(wǎng)站運營
時間：2023-05-24 23:03:01 來源：網(wǎng)站運營
web開發(fā)(五)：JS基礎：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JaveSript基礎</title> <style> a {display: block;} </style></head><body> <!--一、JS簡介： JS是一種面向對象、解釋性的程序設計語言。 它是一種運行在客戶端的腳本語言，因為它不需要在一個語言環(huán)境下運行，只需瀏覽器即可，主要目的是驗證發(fā)往服務器端的數(shù)據(jù)、web前后端交互、增加用戶體驗等。 所以一個網(wǎng)頁是由三部分組成：結構(HTML5,實現(xiàn)布局的)、表現(xiàn)(css3,調整格式的)、行為(JS,負責邏輯的) 所以前端開發(fā)的核心是JS。--> <!--二、JS組成： 1、ECMAScripy(標準：ECMA-262)：是JS中的基礎語言部分 2、DOM(標準：W3C規(guī)范)：屬于節(jié)點操作，文檔對象模型。 比如可以動態(tài)的添加HTML中的標簽、css中的結構樣式等。比如我們要做前后端交互，數(shù)據(jù)從后端拿到后，前端要去做渲染，這個渲染過程就是一個動態(tài)渲染，就是把 數(shù)據(jù)嵌入到標簽中并且漂亮的展現(xiàn)出來。我們之前都是提前把數(shù)據(jù)寫入HTML、css中，這叫靜態(tài)渲染。動態(tài)就是從數(shù)據(jù)庫中取數(shù)據(jù)，然后再臨時加載到html/css中。 3、BOM（無規(guī)范，因為有很多瀏覽器廠商，這些廠商各有各的標準，所以沒有統(tǒng)一的標準）：瀏覽器操作--> <!--三、使用JS 1、script標簽： <sript></script>這組標簽，是用在html頁面中插入JS的主要方法。屬性有： type:必需。表示代碼使用的腳本語言的內容類型。type="text/jacasript"就表示script標簽里面的語言是js語言。 charset:字符編碼,主要解決漢字亂碼問題。因為前面的meta都已經定義了，所以這里是不需要再設置這個屬性的。 defer:表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。 src：表示要執(zhí)行代碼的外部文件 async：規(guī)定異步執(zhí)行腳本，僅適用于外部腳本。 說明：就是JS代碼要嵌入到script標簽里面。 script標簽可以寫在html文檔的任意地方。但是由于JS和THML標簽一起同步執(zhí)行的，為了避免JS阻塞，JS最好寫在body后 2、在a標簽的href中寫JS代碼，但是開發(fā)中不建議這樣寫，因為會影響到性能。A 3、用script標簽引入外部JS文件。B src:表示引入的外部JS文件的路徑和文件名，只能用于引入JS文件，如果引入其他文件寫法是不一樣的。 async:表示異步加載JS代碼，就是在加載DOM元素的同時可以運行JS代碼。默認的是同步處理，加上這個參數(shù)就是異步處理。 說明：JS文件目前是不能獨立進行的。 --> <script type="text/javascript" defer="defer" charset="utf-8"> //defer="defer"表示DOM(DOM就是HTML文檔中的所有標簽)被加載完畢后，再執(zhí)行下面的alert語句。 alert("這是我的第一個JS程序"); //alert表示彈出一個警告框，alert()后面填寫的是警告的內容 alert("上一個警示錯了") //如果上一句代碼寫錯了，瀏覽器解析不出，就出現(xiàn)JS阻塞。 </script> <a href="javascript:alert('大家好')">鏈接</a> <!--A--> <a href="javascript:var a=10,b=20; alert('結果是：'+(a+b))">復雜一點的邏輯</a> <!--A--> <a href="javascript:close();">×</a> <!--A:給a標簽里面封裝一個close方法,頁面就出現(xiàn)一個X號，就可以關閉頁面--> <a href="javascript:void(1);">test</a> <!--A:當我們刷新頁面時，test也會跟著刷新，但是加了javascript:void(1)后就阻值了test的刷新，就是不會跳轉--> <script src="6-1-test.js" type="text/javascript" async="async"></script> <!--B--> <script> var x=10; //定義一個內存變量x，并且這個變量的初始值是10 var y=20; </script> <script> //編寫一個程序，鍵盤輸入用戶名，然后在瀏覽器中輸出來。 //開發(fā)步驟：1、引入prompt()方法。2、輸出到瀏覽器中 var yonghuming = prompt('請輸入你的大名：'); //開發(fā)步驟：1、引入prompt()方法。表示從鍵盤輸入的內容存入到內存變量yonghuming中 document.write('你的大名是：'+yonghuming); //開發(fā)步驟：2、輸出到瀏覽器中。表示在瀏覽器中顯示出來。document是文檔的意思，write是寫入。 </script> <hr> <!--四、常量、變量、定義變量、數(shù)據(jù)類型 常量，就是在程序中直接給出具體數(shù)值的對象。比如：100，true, 'abc', null, undefined等。 變量：就是在內存中開辟一段空間用于存放某個數(shù)據(jù)。變量必須有變量名，就是數(shù)據(jù)在內存中的名字。 定義變量：1、只定義變量： var x; var a, b, c; 2、定義變量且賦值：var x1=true; var y1=100, y2=null; 說明：定義變量時不需要給出數(shù)據(jù)的類型，是一個弱類型語言。 在定義變量時，如果沒有給變量賦值，系統(tǒng)將自動默認值為'undefined'. 一條語用分號結束。如果多條語句寫在同一行上必須用分號隔開。 數(shù)據(jù)類型：指數(shù)據(jù)在內存中存儲的方式。分：基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。 基本數(shù)據(jù)類型：JS中只提供number數(shù)值型、string字符型、boolean布爾型、null空、undefined未定義5個類型。 引用數(shù)據(jù)類型：只有object對象型1種。用來聲明或存儲一個對象(對象，函數(shù)，正則、字符、數(shù)值等) --> <script> var x=100; var x='abc'; console.log(x); //查看一下變量x的值，就用console.log(),表示在控制臺輸出，用于開發(fā)時的測試。 name='張三'; //這里不用var去定義name變量也是可以的。默認是為window對象添加了屬性。相當于：window.name='張三'。window是JS已經定義好的全局對象，所以不用再去定義直接用即可。 console.log(name) </script> <script> //NAN,非數(shù)值，not a number,是一個特殊的值，用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況，這樣就不會拋出錯誤了。 //null，空，表示一個空對象的地址指向為空。undefined表示定義了一個變量，但如果沒有給這個變量賦值，系統(tǒng)將自動賦值為undefined。 alert(isNaN(NaN)); //返回true alert(isNaN(25)); //返回false,25是一個數(shù)值 alert(isNaN('25')); //返回false,因為'25'是一個字符串數(shù)值，可以轉成數(shù)值 alert(isNaN('lee')); //返回true,因為'lee'不能轉換為數(shù)值 alert(isNaN(true)); //返回false,true可以轉換成1. </script> <script> var a1 = new Number(10); //這樣定義的話，a1就是一個object var a2 = 10; //這樣定義a2就是一個數(shù)值 console.log(a1, a2); console.log(a1==a2); //看看a1和a2是否相等，返回true. console.log(typeof a1, typeof a2); //typeoff用于獲取對象類型 console.log(a1===a2); //三個等號是精確比較，比較的不止是數(shù)值還比較數(shù)據(jù)類型，所以返回false var obj = { //定義一個對象類型的數(shù)據(jù) xuehao:'007', name:'張三', }; console.info(obj, typeof obj) //console.log是以日志的方式顯示，console.info()是以消息的方式顯示 </script> <!--五、運算符： 算術運算符：+-*/%(求余、求模) ++(加1，自增) --(減1，自減) 字符串運算符：+，用于將字符串連接。 關系運算符：< > <=> = == != === !==,返回只能是true or false。字符比較是比較ASCII碼值。漢字比較是比較Unicode編碼值的大小。 邏輯運算符：AND, OR ,NOT。非！與&&或||。非！表示取反。邏輯與&&：只要一個操作數(shù)是false,結果為false。邏輯或||：只要一個操作數(shù)是true,結果為true。 &&運算時，如果第一個操作數(shù)是false，不需要計算第二個操作數(shù)，直接結果返回false. ||運算時，如果第一個操作數(shù)是true,不需要計算第二個操作數(shù)，直接返回結果true. 三目運算符：又稱條件運算符。語法是：表達式1？表達式2：表達式3 意思是：如果表達式1成立，返回表達式2的結果。如果表達式1不成立，返回表達式3的結果。相當于if語句中的雙分支結構。 --> <script> var x = 10, y = 20; console.log(x+y); console.log(x-y) var z = ++x; //相當于x=x+1; z=x;所以x=11,z=11 console.log(x, z) var z = x++; //相當于先執(zhí)行z=x;再執(zhí)行x=x+1 ,所以返回12 11 console.log(x,z) console.log('aaa'+'bbb') console.log(123+'abc') //此時數(shù)值對象自動轉換為字符串類型然后再相加，返回123abc console.log(true+'nihao')//返回truenihao console.log((true+'hello').length);//求字符串長度，返回9 console.log('張三'.charCodeAt(0)) //求’張‘的unicode編碼 console.log('100'==100) //返回true console.log('100'===100) //返回false console.log(!0) //數(shù)值0自動轉換為false,所以返回true. console.log(![]) //對象或數(shù)組不管有沒有值都轉換為true.所以這個返回false. console.log({}) //返回true. console.log(true&&true) //返回true. console.log(false&&true) //返回false. console.log(false&&false) //返回false. console.log(true||false) //返回true. var a=3>2?'abc':'123' console.log(a) </script> <!--六、流程控制： JS是一門既面向過程，也是面向對象的解釋型語言。是用在瀏覽器端，不需要編譯的。面向過程是按照代碼書寫順序依次執(zhí)行。 JS的結構分為：順序結構、分支(條件/選擇)結構、循環(huán)結構3種。 順序結構：就是按照代碼的順序依次執(zhí)行，一般包括初始化、賦值、輸入輸出等語句 條件結構：用if或switch語句實現(xiàn)，就是代碼是有條件選擇執(zhí)行的。 循環(huán)結構：某部分代碼在指定的條件范圍內反復執(zhí)行，用for、for...in、forEach、while、do...while語句實現(xiàn) 語法：if(條件){語句} if(條件){語句}else if(條件){語句} else if(條件){語句}...else{語句} A switch(表達式){ B case 表達式1: 語句1; [break] case 表達式2: 語句2；[break] case 表達式3: 語句3; [break] default: 語句4； } 說明：先執(zhí)行switch后面的表達式，如果執(zhí)行完的結果復合case1，就執(zhí)行case1后面的語句1，如果case1后面還有break就跳出switch代碼塊。 如果case1后面沒有break，就直接執(zhí)行case2后面的語句2而不需要判斷case2后面的表達式2。同理類推直到執(zhí)行default語句完畢停止。 --> <script> //A var name = window.prompt('please input your name:') if(name) { document.write(name+'同學，你好！') } else{ document.write('你沒輸入名字呀！') } </script> <script type="text/javascript"> //B:情況語句示例 //要求：根據(jù)學生的成績情況，如果90-100分輸出非常棒，60-70及格，70-80良好，80-89優(yōu)秀，60以下不及格。 var score = parseInt(prompt('請輸入你的成績：')); //parseInt表示轉換成整型數(shù)值，parseFloat()表示轉換成浮點型。 var rs = ''; switch(Math.floor(score/10)){ //Math.floor()表示向下取整 case 0: case 1: case 2: case 3: case 4: //這里都是一個空語句，也就是沒有break,就會一直往下執(zhí)行，直到執(zhí)行到case5,遇到break就跳出switch代碼塊。 case 5: rs='不及格'; break; case 6: rs='及格'; break; case 7: rs='良好'; break; case 8: rs='優(yōu)秀'; break; case 9: rs='非常棒'; break; case 10: rs='滿分'; break; default: rs='您輸入的成績格式不對，請輸入數(shù)字！'; } document.write('您的成績是：'+rs) </script> <script> //用if結構寫上面的需求 var score = parseInt(prompt('輸入你的成績：')); var rs = ''; if(score>=90 && score<=100){ rs = '非常棒'; }else if(score<90 && score>=80){ rs = '優(yōu)秀' }else if(score<80 && score>=70){ rs = '良好' }else if(score<70 && score>=60){ rs = '及格' }else if(score<60){ rs = '不及格' }else{ rs = '您輸入的成績格式不對，請輸入數(shù)字！' } </script> <script> //需求：求1+2+3+。。+100=？ var sum = 0; for(var i=1; i<=100; i++){ //初值、終值、步長。for()中一定要寫條件，不然就默認條件一直是true,就會一直循環(huán)不會跳出、死循環(huán)。 sum = sum + i; } document.write(sum + '<br/>') </script> <script> var i=1; sum=0; for(; i<=100;){ sum = sum + i; i++ } document.write('1+2+3+...+100= '+sum + '<br/>') </script> <script> var i=1, sum=0; for(;;){ if(i<=100){ sum = sum+i; i++; }else{ break; } } document.write('計算:1+2+3+...+100= '+sum + '<br/>') </script> <script> //while循環(huán)示例： //語法：while(條件){循環(huán)體[continue;][break;]} //當條件成立時，執(zhí)行循環(huán)體，否則跳出。 var i=1, sum=0; while(i<=100){ sum += i; i++; } document.write('用while循環(huán)計算的結果是:' + sum + '<br/>') </script> <script> //do...while循環(huán)示例： //do{循環(huán)體[continue;][break;]} while(條件) //先執(zhí)行循環(huán)體，再判斷條件，如果條件成立繼續(xù)循環(huán)，反之跳出循環(huán)。 var i=1, sum=0; do{ sum += i; i++; }while(i<=100); document.write('用do while計算的結果是:' + sum + '<br/>') </script></body></html>寫得也不是很詳細，因為我發(fā)現(xiàn)各種語言的套路其實都一樣，所以就簡單提及一下即可。關鍵詞：基礎
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
