js 學習總結,可利用其與原生程式碼互動
js 基礎, js HTML DOM 物件的操作
js 高階教程 , js 瀏覽器 BOM
js 庫 jQuery ,Prototype
js 例項
js 物件例項, 瀏覽器物件例項, HTML DOM 例項
js 函式 包裹在花括號中的程式碼塊
function functionname()
{
執行程式碼,js 對大小寫敏感 , function 必須小寫
}
js 作用域 可訪問變數的集合
js 中,物件和函式同樣是變數
函式作為變數 實現函數語言程式設計;
js 區域性變數 和全域性變數 , 全域性變數有全域性作用域,網頁中所有指令碼和函式均可使用
var carName = “volvo”
// 此處可呼叫 carName 變數
function myFunction() {
// 函式內可呼叫 carName 變數
}
js 變數宣告週期, 在宣告時,初始化, 區域性變數在函式執行完畢後銷燬,全域性變數在頁面關閉後銷燬
在 HTML 中,全域性變數 window 物件,所有資料變數都屬於 window 物件
window.carName
全域性變數, 或者函式 可以覆蓋 window 物件的變數或者函式;
區域性變數,包括 window 物件可以覆蓋全域性變數和函式
HTML 事件 是發生在 HTML 元素的事情,
例如: html 頁面完成載入, html input 欄位改變時, html 按鈕被點選
<button onclick = 'getElementById("demo”).innerHTML =Date()’>The time is?</button>
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
this 關鍵字 指向自身的這個嚴肅
用js 寫 html 元素 document.write(“<p>” + txt.length + “</p>”);
=== 絕對等於 ,(值,型別均相等)
!== 絕對不等於(值或型別不相等)
js 中像 c 語言
while 迴圈 作死迴圈時使用 先判斷, 後執行
do/while 先執行一次程式碼塊,後判斷
for 迴圈
js 中的 typeof
null 表示 “什麼都沒有”
null 是一個只有一個值的特殊型別,表示一個空物件引用
可以設定 null 來清空物件
var person = null;
可以設定 undefined 來清空物件;
var person = undefined // 值為 undefined ,type is undefined
在 JavaScript 中, undefined 是一個沒有設定值的變數。
typeof 一個沒有值的變數會返回 undefined。
型別不同, 值是相同的
typeof undefined // undefinedtypeof null // objectnull === undefined // falsenull == undefined // true
js 中 5 +3+2 中型別
5分別為string , number, boolean, object,function
3中物件型別, Object,Date,Array
2個不包含任何值的資料型別: null ,undefined
用 typeod 操作符 ,來檢視 js 變數的資料型別
typeof "John" // 返回 string typeof 3.14 // 返回 numbertypeof NaN // 返回 number not a number 縮寫typeof false // 返回 booleantypeof [1,2,3,4] // 返回 objecttypeof {name:'John', age:34} // 返回 objecttypeof new Date() // 返回 objecttypeof function () {} // 返回 functiontypeof myCar // 返回 undefined (if myCar is not declared)typeof null // 返回 object
js 存在內省的機制
js constructor 構造器
constructor 屬性返回所有 javaScript 變數的建構函式
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1;}
“John”.constructor //返回函式 String ()
(3.14).constructor //返回 Number()
false.constructor // 返回函式 Boolean()
[1,2,3,4].constructor //返回函式 Array()
(123).toString()
js 中的正則表示式
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
結果為 6
search() 方法使用字串
<p></p> 標籤之間稱為 innerHTML
alert 可以有瀏覽器的設定提供過來
<head>
<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>
debugger 關鍵字
debugger 關鍵字
debugger 關鍵字用於停止執行 JavaScript，並呼叫除錯函式。
這個關鍵字與在除錯工具中設定斷點的效果是一樣的。
如果沒有除錯可用，debugger 語句將無法工作。
開啟 debugger ，程式碼在第三行前停止執行。
js 表單驗證簡單實現
function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x=="") { alert("First name must be filled out"); return false; }}
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form>
js 的保留關鍵字 和 ES5 版本;
注意避免 js 的物件,屬性和方法, java 保留關鍵字, windows 保留關鍵字
html 事件控制代碼
onblur , onclick onkeydown
非標準的 js
const 關鍵字, 用於定義變數, 一些 ks 引擎 把 const 當作 var 的同義詞. 另一些引擎則把 const 只讀變數的定義
const 是 javaScript 的擴充套件, js 支援它用在 firefox 和 chrome 裡面 ,建議不要使用
使用 javaScript 內建函式 json.parse() 將字串轉換為 JavaScript 物件
var text = ‘“employees”'
json.parse ()
<a href="javascript:void(0)">單擊此處什麼也不會發生</a>
href = “#” 與 href = “javascript:void(0)” 的區別
# 包含一個位置資訊, 預設的錨# top 也就是網頁的上端;
在頁面很長的時候會使用#來定位頁面的具體位置, 格式:#+ id
如果要定義一個死連結請使用 javascript:void(0).
<a href = “#pos”>點我定位到指定位置</a>
<br><br><br><p id = “pos”>尾部定位點</p>
js 程式碼規範
1.變數和函式的命名規則
UIfocusEnvironment
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)
<script>
document.getElementById("p2").style.color="blue";
</script>
獲取 id = “p2”的元素,獲取其屬性,並修改 color 的顏色 style.color
獲取 id = “id1”的 html 元素樣式
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
js html 的事件例項
HTML 事件的例子：
- 當用戶點選滑鼠時
- 當網頁已載入時
- 當影象已載入時
- 當滑鼠移動到元素上時
- 當輸入欄位被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
this 關鍵字獲取標籤本身 “this.innerHTML = ‘Ooops!’”
<h1 onclick = “this.innerHTML =‘Ooops!'”>點我</h1>
新增監聽回撥
document.getElementById(“myBtn’").addEventListener(“clicked”, displaydate);
addEventListener() 方法用於向指定元素新增事件控制代碼。
addEventListener() 方法新增的事件控制代碼不會覆蓋已存在的事件控制代碼。
你可以向一個元素新增多個事件控制代碼。
你可以向同個元素新增多個同類型的事件控制代碼，如：兩個 "click" 事件。
你可以向任何 DOM 物件新增事件監聽，不僅僅是 HTML 元素。如： window 物件。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以新增事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。
addEventListener() 方法允許你在 HTML DOM 物件新增事件監聽， HTML DOM 物件如： HTML 元素, HTML 文件, window 物件。或者其他支出的事件物件如: xmlHttpRequest 物件。
js 控制事件傳遞的方向 都是從 html 文件裡面去讀取 正向連結串列 為捕獲capture true 反向連結串列為冒泡 false
預設值為 false, 即冒泡傳遞 ,即 和 iOS 一樣
瀏覽器適配:
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
向 已存在的元素中新增元素
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>