java第二十三天(JS筆記)
中間有些懈怠了,主要是找不到比較好的學習方法了,從html開始到JS感覺前端的東西太多太雜不像java邏輯性強比較好理解,也有可能是因為先入為主的原因,我卡在js一直沒有往前走了,然後想了想js看過一遍之後就開始跳了趕緊學下一節,以後再來補吧,一晃一個月又過去了,找到好一點的學習視訊是真的比較重要
JavaScript 運算子
如果把數字與字串相加,結果將成為字串。
條件語句
通常在寫程式碼時,您總是需要為不同的決定來執行不同的動作。您可以在程式碼中使用條件語句來完成該任務。
在 JavaScript 中,我們可使用以下條件語句:
- if 語句
- 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