java第二十三天（JS筆記）
中間有些懈怠了，主要是找不到比較好的學習方法了，從html開始到JS感覺前端的東西太多太雜不像java邏輯性強比較好理解，也有可能是因為先入為主的原因，我卡在js一直沒有往前走了，然後想了想js看過一遍之後就開始跳了趕緊學下一節，以後再來補吧，一晃一個月又過去了，找到好一點的學習視訊是真的比較重要
JavaScript 運算子
如果把數字與字串相加，結果將成為字串。
條件語句
通常在寫程式碼時，您總是需要為不同的決定來執行不同的動作。您可以在程式碼中使用條件語句來完成該任務。
在 JavaScript 中，我們可使用以下條件語句：
- if 語句- 只有當指定條件為 true 時，使用該語句來執行程式碼
- if...else 語句 - 當條件為 true 時執行程式碼，當條件為 false 時執行其他程式碼
- if...else if....else 語句 - 使用該語句來選擇多個程式碼塊之一來執行
- switch 語句 - 使用該語句來選擇多個程式碼塊之一來執行
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}var day=new Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同型別的迴圈
JavaScript 支援不同型別的迴圈：
- for - 迴圈程式碼塊一定的次數
- for/in - 迴圈遍歷物件的屬性
- while - 當指定的條件為 true 時迴圈指定的程式碼塊
- do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊
通過 HTML DOM，可訪問 JavaScript HTML 文件的所有元素。
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。
首先找到該元素。有三種方法來做這件事：
- 通過 id 找到 HTML 元素
- 通過標籤名找到 HTML 元素
- 通過類名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
不要使用在文件載入之後使用 document.write()。這會覆蓋該文件。
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
document.getElementById(id).innerHTML=new HTML
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=new style
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點選這裡
</button>
HTML 事件的例子：
- 當用戶點選滑鼠時
- 當網頁已載入時
- 當影象已載入時
- 當滑鼠移動到元素上時
- 當輸入欄位被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
<h1 onclick="this.innerHTML='謝謝!'">請點選該文字</h1>
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="謝謝!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請點選該文字</h1>
</body>
</html>
向 HTML 元素分配 事件，您可以使用事件屬性。
例項
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點選這裡</button>
通過使用 JavaScript 來向 HTML 元素分配事件：
例項
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
onload 和 onunload 事件
onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
例項
<body onload="checkCookies()">
onchange 事件
onchange 事件常結合對輸入欄位的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入欄位的內容時，會呼叫 upperCase() 函式。
例項
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。
新增和刪除節點（HTML 元素）。
<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>
例子解釋：
這段程式碼建立新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素新增文字，您必須首先建立文字節點。這段程式碼建立了一個文字節點：
var node=document.createTextNode("這是新段落。");
然後您必須向 <p> 元素追加這個文字節點：
para.appendChild(node);
最後您必須向一個已有的元素追加這個新元素。
這段程式碼找到一個已有的元素：
var element=document.getElementById("div1");
這段程式碼向這個已有的元素追加新元素：
element.appendChild(para);
刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須首先獲得該元素的父元素：
例項
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
例子解釋：
這個 HTML 文件含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
從父元素中刪除子元素：
parent.removeChild(child);
提示：如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(chi