當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
1-javascript基础学习
生活随笔
收集整理的這篇文章主要介紹了
1-javascript基础学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、JavaScript-簡介、實現、輸出
js--是一種輕量級編程語言，HTML中的腳本；
腳本代碼必須位于 <script> 標簽之間，<script> 可在 <head> 或者 <body> 引入；
通用的 js庫 在 <head> 中引入；某些需要文檔加載才開始執行 js?寫在 <body> 相應位置
js 腳本引入方式：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- head 內引入 js --> 12 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 14 </head> 15 <body> 16 <p id="p1">段落段落段落</p> 17 18 <!-- body內引入 js文件 defer屬性 定義 腳本 會在整個頁面加載到某一布時 再執行，這樣就不會造成 網頁打開延遲--> 19 <script type="text/javascript" defer="defer"> 20 document.write("<h1>這是一個標題</h1>>"); 22 </script> 24 </body> 25 </html>?
2、JavaScript-語法和注釋
javascript語句：向瀏覽器發出命令，告訴瀏覽器該做什么
javascript代碼執行順序：按照編寫順序依次執行
javascript標識符：必須以字母、下劃線或者$符號開始
javascript關鍵字不能作為變量等名稱使用
javascript對字母大小寫敏感，會忽略多余空格
javascript注釋：單行注釋 //
多行注釋? /* */
?
3、JavaScript-變量和數據類型\
（1）變量
變量作為存儲信息的容器，其值可通過變量名訪問。js是弱數據類型語言，定義變量統一使用關鍵字var，也可以不使用var；
函數中，若使用var聲明變量，程序會強制定義一個新變量，有同名的全局變量會覆蓋該變量；
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script type="text/javascript"> 6 // 定義全局變量 word 7 var word = "全局變量"; 8 function demo() { 9 // 局部變量 覆蓋 全局變量 10 document.writeln(word + "<br/>"); 11 // 定義局部變量 作用范圍在 函數內 12 var word = "局部變量" 13 document.writeln(word); 14 } 15 </script> 16 </head> 17 <body> 18 <p id="result">幸福</p> 19 <button onclick="demo()">點擊</button> 20 </body> 21 </html>執行結果?
函數中若不使用var聲明變量，系統會優先在當前上下文中搜索是否存在該變量，不存在時系統才會重新定義一個新變量；若存在，系統會將全局變量賦值函數內變量（也是全局變量）。js沒有塊級作用域的概念，if和for語句中聲明的變量會添加到當前的執行環境中。
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script type="text/javascript"> 6 // 定義全局變量 7 var word = "全局變量"; 8 function demo() { 9 // 局部變量 覆蓋 全局變量 10 document.writeln(word + "<br/>"); 11 // 定義局部變量 作用范圍在 函數內 12 word = "局部變量" 13 document.writeln(word); 14 } 15 </script> 16 </head> 17 <body> 18 <p id="result">幸福</p> 19 <button onclick="demo()">點擊</button> 20 </body> 21 </html>?
?（2）數據類型
?1）字符串（string）
字符串相關應用如下：
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <p id="ph">One Flew Over the Cuckoos Nest</p> 8 <button id="btn">獲取字符長度</button> 9 <br/> 10 <script> 11 var film = "The Shawshank Redemption"; //定義 字符串 12 var character = film[6]; //定義 film 的 第六個字符 13 var n = film.indexOf("w"); //定義 film 字符串中 w 字符串的位置 14 document.write(film); 15 document.getElementById("btn").onclick = function(){aboutString()}; 16 17 function aboutString(){ 18 //獲取字符長度 19 document.getElementById("p1").innerHTML = film.length; 20 //訪問第六個字符 21 document.getElementById("p2").innerHTML = character; 22 //獲取 w 字符出現的位置 23 document.getElementById("p3").innerHTML = n+1; 24 //匹配字符串中某些字符內容 有即返回字符 25 document.getElementById("p4").innerHTML = film.match("HaHa"); 26 //替換字符串 內容 27 var str = document.getElementById("ph").innerHTML; 28 var str_new = str.replace("The Godfather Part II"); 29 document.getElementById("p5").innerHTML = str_new; 30 //字符串轉 大寫 31 document.getElementById("p6").innerHTML = film.toUpperCase(); 32 //字符串轉 小寫 33 document.getElementById("p7").innerHTML = film.toLowerCase(); 34 //字符串轉 數組 35 var str = "a,b,c,d,e"; 36 var n = str.split(","); 37 document.getElementById("p8").innerHTML = n[1]; 38 } 39 </script> 40 <p id="p1"></p> 41 <p id="p2"></p> 42 <p id="p3"></p> 43 <p id="p4"></p> 44 <p id="p5"></p> 45 <p id="p6"></p> 46 <p id="p7"></p> 47 <p id="p8"></p> 48 </body> 49 </html>2）數字
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <button id="btn">數字運算</button> 8 <script> 9 document.getElementById("btn").onclick = function(){aboutMath()}; 10 var a = 123.456, 11 b = 456.789 12 function aboutMath() { 13 //取整 最接近的 14 document.getElementById("p1").innerHTML = Math.round(a); 15 //取隨機數 0-1 16 document.getElementById("p2").innerHTML = Math.random(); 17 // 取較大數 18 document.getElementById("p3").innerHTML = Math.max(a,b); 19 // 取較小數 20 document.getElementById("p3").innerHTML = Math.min(a,b); 21 } 22 </script> 23 <p id="p1"></p> 24 <p id="p2"></p> 25 <p id="p3"></p> 26 <p id="p4"></p> 27 </body> 28 </html>?
3）布爾
1 <script type="text/javascript"> 2 var flag = true; 3 var tree = false; 4 </script>?
4）數組
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <!-- 數組：使用單獨的變量名來存儲一系列的值 --> 8 <button id="btn">點擊</button> 9 <script> 10 document.getElementById("btn").onclick = function(){aboutArray()}; 11 12 function aboutArray() { 13 // 創建數組 14 var grandparents = ["Amy","John"]; 15 var parents = ["Sophia","Brown","Jim","Mona"]; 16 var children = new Array(); 17 children[0] = "Kat"; 18 children[1] = "Fang"; 19 children[2] = "Ana"; 20 //數組元素輸出 21 document.getElementById("p1").innerHTML = children.join(); 22 //合并二個數組 23 var older = parents.concat(grandparents); 24 document.getElementById("p2").innerHTML = older; 25 //合并三個數組 26 var family = parents.concat(brothers,children); 27 document.getElementById("p3").innerHTML = family; 28 //刪除數組最后元素 29 document.getElementById("p4").innerHTML = parents.pop(); 30 //數組末尾添加元素 31 document.getElementById("p5").innerHTML = grandparents.push("Smith"); 32 //數組元素倒序 33 document.getElementById("p6").innerHTML = parents.reverse(); 34 //刪除數組第一個元素 35 document.getElementById("p7").innerHTML = parents.shift(); 36 //顯示第二至第三元素 37 document.getElementById("p8").innerHTML = parents.slice(1,2); 38 //升序 39 // 排序會有字母升序、數組升序、數字倒序等情況 40 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 41 document.getElementById("p9").innerHTML = fruits.sort(); 42 // 43 document.getElementById("p10").innerHTML = grandparents.splice(2,0,"Kiwi","Cheer"); 44 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 45 document.getElementById("p11").innerHTML = fruits.toString(); 46 document.getElementById("p12").innerHTML = fruits.unshift("Cheer"); 47 } 48 </script> 49 <p id="p1"></p> 50 <p id="p2"></p> 51 <p id="p3"></p> 52 <p id="p4"></p> 53 <p id="p5"></p> 54 <p id="p6"></p> 55 <p id="p7"></p> 56 <p id="p8"></p> 57 <p id="p9"></p> 58 <p id="p10"></p> 59 <p id="p11"></p> 60 <p id="p12"></p> 61 </body> 62 </html>5）對象
?
6）空
可以通過賦值為空的方式清除變量值
7）未定義
?
轉載于:https://www.cnblogs.com/mxyweb/p/9294811.html
總結
以上是生活随笔為你收集整理的1-javascript基础学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何使用 Laravel Collect
- 下一篇： Spring中自动装配的方式有哪些？