javascript
菜鸟教程-Javascript学习笔记-JS函数之前
教程連接是:
https://www.runoob.com/js/js-tutorial.html
?
-
DOM（一些操作頁面元素的方法）
-
BOM（一些操作瀏覽器的方法）
#####################################################
簡介
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><script> function changeImage() {element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";} } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> <p>點擊燈泡就可以打開或關閉這盞燈</p></body> </html>效果如下:
代碼大意是：
鼠標被點擊(onclick)的時候，執行changeImage函數
這個changeImage函數的意思是，當鼠標點擊的時候，查找帶有關鍵詞“bulbon”的文件。
如果匹配到了，就顯示該文件(點亮的燈泡)
所以"點亮的動作"其實是在更換圖片。
######################################################################################
JavaScript?用法
這一個小結的大意是:
1.無論在body還是head中，都需要嵌入<script></script>才能使用js代碼。
2.也可以把需要引入的js代碼另外保存為一個文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script> function myFunction(){document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數"; } </script> </head> <body><h1>我的 Web 頁面</h1> <p id="demo">一個段落。</p> <button type="button" onclick="myFunction()">點擊這里</button></body> </html>代碼原理是:
鼠標點擊時(onclick)觸發函數myFunction,然后頁面上的"一個段落"變為"我的第一個 JavaScript 函數"
注意 實踐中，我們更多采用上面的第二種用法，也就是js代碼另外保存在一個文件中
#############################################################################################
JavaScript?輸出
這一節有兩個作用:
1.log信息輸出到頁面
2.log信息輸出到瀏覽器控制臺console
在頁面輸出：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>我的第一個 Web 頁面</h1> <p id="demo">我的第一個段落。</p> <script> document.getElementById("demo").innerHTML="段落已修改。"; </script></body> </html>在控制臺輸出:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>我的第一個 Web 頁面</h1> <p> 瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script></body> </html>#########################################################################
JavaScript?語法
就記住了一點:區分大小寫。
其他的到時候用到了再說吧
#########################################################################
JavaScript?語句
例子-JavaScript 代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>我的 Web 頁面</h1> <p id="myPar">我是一個段落。</p> <div id="myDiv">我是一個div。</div> <p> <button type="button" onclick="myFunction()">點擊這里</button> </p> <script> function myFunction(){document.getElementById("myPar").innerHTML="你好世界！";document.getElementById("myDiv").innerHTML="你最近怎么樣?"; } </script> <p>當您點擊上面的按鈕時，兩個元素會改變。</p></body> </html>?
效果如下：
點擊后的效果如下:
#########################################################################
JavaScript?注釋(略過)
#########################################################################
JavaScript?變量
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊這里來創建變量，并顯示結果。</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var carname="Volvo";document.getElementById("demo").innerHTML=carname; } </script></body> </html>這個代碼最大的效果就是：
把字符串輸出到頁面。
#########################################################################
JavaScript?數據類型-JavaScript 對象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><script> var person= {firstname : "John",lastname : "Doe",id : 5566 }; document.write(person.lastname + "<br>"); document.write(person["lastname"] + "<br>"); </script></body> </html>效果如下;
代碼大意是展示前端中對象的用法(其實和C語言里面的struct差不多)
####################################################################################################
JavaScript?對象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>創建 JavaScript 對象。</p> <p id="demo"></p> <script> var person = {firstName : "John",lastName : "Doe",age : 50,eyeColor : "blue" }; document.getElementById("demo").innerHTML =person.firstName + " 現在 " + person.age + " 歲。"; </script></body> </html>####################################################################################################
JavaScript?函數
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試實例</title> <script> function myFunction() {alert("Hello World!"); } </script> </head><body> <button onclick="myFunction()">點我</button> </body> </html>###################################################################################################
JavaScript?作用域
JavaScript 全局變量
變量在函數外定義，即為全局變量。
全局變量有?全局作用域: 網頁中所有腳本和函數均可使用。?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>全局變量在任何腳本和函數內均可訪問。</p> <p id="demo"></p> <script> var carName = "Volvo"; myFunction(); function myFunction() {document.getElementById("demo").innerHTML ="我可以顯示 " + carName; } </script></body> </html>效果如下 :
###################################################################################################
JavaScript?事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實例：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點擊
通常，當事件發生時，你可以做些事情。
在事件觸發時 JavaScript 可以執行一些代碼。
HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。
單引號:
<some-HTML-element?some-event='JavaScript 代碼'>
雙引號:
<some-HTML-element?some-event="JavaScript 代碼">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊按鈕執行 <em>displayDate()</em> 函數.</p> <button onclick="displayDate()">點這里</button> <script> function displayDate(){document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p></body> </html>代碼大意是點擊按鈕后執行一個函數
###################################################################################################
JavaScript?字符串（略過）
JavaScript?運算符（略過）
JavaScript?比較?和?邏輯運算符（略過）
###################################################################################################
JavaScript?條件?語句
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊這個按鈕，獲得基于時間的問候。</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var x="";var time=new Date().getHours();if (time<20){x="Good day";}else{x="Good evening";}document.getElementById("demo").innerHTML=x; } </script></body> </html>?
代碼大意是:
晚上八點前顯示:
Good Day
否則顯示：
Good evening
###################################################################################################
JavaScript?switch?語句
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊下面的按鈕來顯示今天是周幾：</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var x;var d=new Date().getDay();switch (d){case 0:x="今天是星期日";break;case 1:x="今天是星期一";break;case 2:x="今天是星期二";break;case 3:x="今天是星期三";break;case 4:x="今天是星期四";break;case 5:x="今天是星期五";break;case 6:x="今天是星期六";break;}document.getElementById("demo").innerHTML=x; } </script></body> </html>效果如下:
##############################################################################################
JavaScript?for 循環
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<cars.length;i++){document.write(cars[i] + "<br>"); } </script></body> </html>運行結果是:
BMW
Volvo
Saab
Ford
##############################################################################################
JavaScript?while 循環
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊下面的按鈕，只要 i 小于 5 就一直循環代碼塊。</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var x="",i=0;while (i<5){x=x + "該數字為 " + i + "<br>";i++;}document.getElementById("demo").innerHTML=x; } </script></body> </html>##############################################################################################
JavaScript?Break 和 Continue 語句
break例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊按鈕，測試帶有 break 語句的循環。</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var x="",i=0;for (i=0;i<10;i++){if (i==3){break;}x=x + "該數字為 " + i + "<br>";}document.getElementById("demo").innerHTML=x; } </script></body> </html>continue案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊下面的按鈕來執行循環，該循環會跳過 i=3 的數字。</p> <button onclick="myFunction()">點擊這里</button> <p id="demo"></p> <script> function myFunction(){var x="",i=0;for (i=0;i<10;i++){if (i==3){continue;}x=x + "該數字為 " + i + "<br>";}document.getElementById("demo").innerHTML=x; } </script></body> </html>?
###################################################################################
JavaScript?typeof, null, 和 undefined
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p> typeof 操作符返回變量或表達式的類型。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" +typeof false + "<br>" +typeof [1,2,3,4] + "<br>" +typeof {name:'john', age:34}; </script></body> </html>typeof 操作符返回變量或表達式的類型。
string
number
boolean
object
object
可以看到 typeof的作用就是返回某個變量的變量類型的
###################################################################################
JavaScript?類型轉換
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p> String() 方法可以將數字轉換為字符串。</p> <p id="demo"></p> <script> var x = 125; document.getElementById("demo").innerHTML =String(x) + "<br>" +String(123) + "<br>" +String(100 + 23); </script> </body> </html>###################################################################################
JavaScript?正則表達式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>搜索字符串 "runoob", 并顯示匹配的起始位置：</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> <script> function myFunction() {var str = "Visit xxxRunoob!"; var n = str.search(/Runoob/i);document.getElementById("demo").innerHTML = n; } </script></body> </html>###################################################################################
JavaScript?錯誤 - throw、try 和 catch
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script> var txt=""; function message(){try {adddlert("Welcome guest!");}catch(err) {txt="本頁有一個錯誤。\n\n";txt+="錯誤描述：" + err.message + "\n\n";txt+="點擊確定繼續。\n\n";alert(txt);} } </script> </head> <body><input type="button" value="查看消息" onclick="message()" /></body> </html>效果如下：
###################################################################################
JavaScript?調試
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>我的第一個 Web 頁面</h1> <p> 瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script></body> </html>?
###################################################################################
JavaScript 變量提升
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p id="demo"></p> <script> x = 5; // 變量 x 設置為 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中顯示 x var x; // 聲明 x </script></body> </html>這一節的作用就是為了說明:
變量先使用再聲明。
###################################################################################
JavaScript 嚴格模式(use strict)
使用 "use strict" 指令（沒啥用）
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一條語句，但是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。
"use strict" 的目的是指定代碼在嚴格條件下執行。
嚴格模式下你不能使用未聲明的變量。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>使用 "use strict":</h1> <h3>不允許使用未定義的變量。</h3> <p>瀏覽器按下 F12 開啟調試模式，查看報錯信息。</p> <script> "use strict"; x = 3.14; // 報錯 (x 未定義) </script></body> </html>###################################################################################
JavaScript?使用誤區
其實就是==別寫成=
###################################################################################
JavaScript 表單
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function validateForm() {var x = document.forms["myForms"]["fname"].value;if (x == null || x == "") {alert("需要輸入名字。");return false;} } </script> </head> <body><form name="myForms" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form></body> </html>運行效果是:
注意：
代碼中的myForms是可以修改的。
fname不可以修改。
###################################################################################
JavaScript?表單驗證
這個意思是比如驗證用戶是否是胡亂輸入的，可能并不是有效的郵箱
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <head> <script> function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){alert("不是一個有效的 e-mail 地址");return false;} } </script> </head> <body><form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="提交"> </form></body> </html>效果：
上面的代碼大意就是在在檢查輸入的Email是不是符合這個格式
如果Email輸入合法，就會跳轉:
###################################################################################
JavaScript 驗證 API
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body><p>輸入數字并點擊驗證按鈕:</p><input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">驗證</button><!-- 調用了下面定義的myFunction --><p>如果輸入的數字小于 100 或大于300，會提示錯誤信息。</p><p id="demo"></p><script> function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;// 這一句是在頁面輸出報錯信息} else {document.getElementById("demo").innerHTML = "輸入正確";} } </script></body> </html>效果如下:
###################################################################################
JavaScript 驗證 API(略過)
###################################################################################
JavaScript this 關鍵字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h2>JavaScript this 關鍵字</h2> <p>實例中 <strong>this</strong> 指向了 person2，即便它是 person1 的方法:</p><p id="demo"></p><script> var person1 = {fullName: function() {return this.firstName + " " + this.lastName;} } var person2 = {firstName:"John",lastName: "Doe", } var x = person1.fullName.call(person2); document.getElementById("demo").innerHTML = x; </script></body> </html>他這里的this指針是因為傳入了function2，所以this指代function2
###################################################################################
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h2>為 JSON 字符串創建對象</h2> <p id="demo"></p> <script> var text = '{ "sites" : [' +'{ "name":"Runoob" , "url":"www.runoob.com" },' +'{ "name":"Google" , "url":"www.google.com" },' +'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[0].name + " " + obj.sites[1].url; </script></body> </html>?
##############################################################################################
javascript:void(0)?含義（跳過）
##############################################################################################
JavaScript 代碼規范
就是講縮進的
總結
以上是生活随笔為你收集整理的菜鸟教程-Javascript学习笔记-JS函数之前的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 菜鸟教程-css3学习笔记
- 下一篇： TypeError: the JSON