3C School 學習 js ,html 的最佳網站 http://www.runoob.com/js/js-tutorial.htmljavascript
js 基礎, js HTML DOM 對象的操做html
js 高級教程 , js 瀏覽器 BOMjava
js 庫 jQuery ,Prototype node
js 實例正則表達式
js 對象實例, 瀏覽器對象實例, HTML DOM 實例chrome
js 函數 包裹在花括號中的代碼塊編程
function functionname() json
{windows
執行代碼,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 事件的例子：
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>