javascript基礎篇詳情 2019-04-19 簡介 定義 javascript是一門動態弱類型的解釋型編程語言，增強頁面動態效果，實現頁面與用戶之間的實時動態的交互。 javascript是由三部分組成：ECMAScript、DOM、BOM ECMAScript由ECMA-262定義，提供核 ...
javascript基礎篇詳情
2019-04-19
簡介
定義
javascript是一門動態弱類型的解釋型編程語言，增強頁面動態效果，實現頁面與用戶之間的實時動態的交互。
javascript是由三部分組成：ECMAScript、DOM、BOM
- ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲電腦製造商協會）
- DOM(Document Object Model)文檔對象模型，提供訪問和操作網頁內容的方法和介面
- BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和介面
註釋
JavaScript中代碼註釋：
- 單行 //
- 多行 /* */
變數
- 可以把變數當成是存儲信息的“容器”
- 與代數一樣，JavaScript 變數可用於存放值（比如 x=5）和表達式（比如 z=x+y）
- 變數必須以字母開頭
- 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
- 變數名稱對大小寫敏感（y 和 Y 是不同的變數）
- 在 JavaScript 中創建變數通常稱為"聲明"變數。var carname;
- 變數聲明之後，該變數是空的（它沒有值）。如需向變數賦值，請使用等號：var carname="came"
對象
- JavaScript 對象是屬性和方法的容器。
function函數事件例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點擊這個按鈕，來調用帶參數的函數。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點擊這裡</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function change(){
var x=document.getElementById("class");
x.innerHTML="謝謝";
}
</script>
<div onclick="change(this)" id="class">您好</div>
</body>
</html>
View Code
onload和onload事件
- 打開頁面時：onload
- 刷新頁面時：onbeforeunload-->onunload
- 關閉網頁時：onbeforeunload-->onunload-->onload
Dom
- document.write() 可用於直接向 HTML 輸出流寫內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<h1 class="h-class" id="h-id">學如逆水行舟，不進則退</h1>
<h1 class="h-class">心思平原走馬，易放難收</h1>
</div>
<script type="text/javascript">
// 通過標簽名獲取 dom節點
var h = document.getElementsByTagName("h1");
console.log(h[0].innerText);
// 通過類名獲取Dom節點
h = document.getElementsByClassName("h-class");
console.log(h[1].innerText);
// 通過id名獲取元素
h = document.getElementById("h-id");
console.log(h.innerText);
// 通過選擇器獲取元素 返回：1個
var h = document.querySelector(".box .h-class");
console.log(h.innerText);
// 通過選擇器獲取元素 返回：所有
var h = document.querySelectorAll(".box .h-class");
console.log(h[1].innerText);
</script>
</body>
</html>
獲取元素
節點添加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol id="books">
<li>《探清水河》</li>
<li>《毓貞》</li>
<li>《乾坤帶》</li>
<li>《探海水河》</li>
<li>《白蛇傳》</li>
</ol>
<input type="text" name="bookName" id="bookName" value="" /><button onclick="addBook()">添加</button>
修改<input type="number" name="bookNo2" id="bookNo2" value="1" />
<input type="text" name="bookName2" id="bookName2" value="" /><button onclick="editBook()">修改</button>
<!--
1. 輸入書名 點擊按鈕添加圖書
2. 輸入序號，點擊按鈕刪除指定圖書
3. 輸如序號，輸入新的書名，點擊按鈕修改書名
-->
<script type="text/javascript">
var books = document.querySelector("#books");
var children = books.children;
var bookNameInput = document.querySelector("#bookName");
var bookNo2Input = document.querySelector("#bookNo2");
var bookName2Input = document.querySelector("#bookName2");
// 添加一本書
function addBook(){
var bookName = bookNameInput.value;
if(bookName==""){
alert("書名不能為空！");
}else{
var newLi = document.createElement("li");
newLi.innerText = "《"+bookName+"》";
books.appendChild(newLi);
bookNameInput.value = "";
}
}
// 刪除一本書
// 修改一本書
function editBook(){
var bookName = bookName2Input.value;
var bookNo = bookNo2Input.value;
if(bookNo<1||bookNo>children.length){
alert("序號越界");
}else if(bookName==""){
alert("書名不能為空！");
}else{
children[bookNo-1].innerText = "《"+bookName+"》";
bookName2Input.value = "";
}
}
</script>
</body>
</html>
圖書館刪除添加
