JavaScript tutorial for beginners-YouTube-EJ Media

時間 2019-12-13

標籤 javascript tutorial beginners media 欄目 JavaScript 简体版

原文原文鏈接

Video3~Video4. Variable
JavaScript是一種弱類型語言，也就是說，咱們不須要明肯定義某個變量的類型。
如何定義一個變量？變量的聲明須要以var開頭，以下：
var years = 35;
在JavaScript中，有三種類型的變量：String、Boolean、Numeric。
var years = 35; # 這個變量是Numeric類型
var someText = 「Hello there」; # 這個變量是String類型
var gameOver = true; # 這個類型是Boolean類型。
因爲JavaScript是弱類型語言，變量在聲明以後，它還能夠被賦予其它類型的值，就變成其餘類型的變量。html

Video5. 如何將JavaScript文件(.js)鏈接到HTML文件中？
須要將.js文件和HTML文件放在同一個目錄中，在HTML的<head>或<body>中添加：
<script src="jscode.js"> </script> node

Video6. Fuction的定義：
function saySomething() {
// all statement go inside curly braces
}程序員

Video9~Video10. if statement
if (conditions) {
// code here
} else if(condition) {
// code here
} else {
// code here
}
|REMEMBER|else if和else都不是必須的。condition只能返回兩種值：false或true後端

Video11. While loop
var i = 1;
while(i < 5) {
document.write(「A statement has run」);
} # while loop和C語言的也是相似的。服務器

Video12. For loop
for (var i=1; i<5; i++) {
// code here
} # for loop的格式和C語言的格式是相似的。app

Video14. 函數裏面的return語句。
function add(x, y) {
result = x * y;
return result;
}
var theResult = add(3, 4); # add(3, 4)返回一個值，咱們將這個值12賦給theResult.curl

Video15. Global variable 和 local variable
Global variable: 在函數外面定義, 在文件內到處均可以使用.
local variable: 在函數內部定義. 只能在函數內部被使用.ide

Video16. Pass by value
function batting(player, distance) {
var more = player + 「 hit the ball 「 + distance + 「 feet」;
document.write(more);
}
batting(「steve」, 251); # 由此咱們按順序將steve傳給player，251傳給distance。函數

Video17. Array
var roads = [「stone」, 「dirt」, 「cement」, 「tar」]; # 定義一個Array。
var roadTravelled = roads[1]; # 得到第二個元素的值並將其賦給roadTravelled。
var bridge = []; # 定義一個空的Array；
roads[1] = 「cobblestone」; # 給某個元素更新值oop

Video18. Objects
var orc={color:」green」, height:5, weight:180}; # Object是name-value pair的集合，這些在object裏面的name被稱爲該object的properties。
orc.height; # 使用 . 來得到object的property。
|REMEMBER|若是想要獲取的property不存在，或者改property存在但沒有值，JavaScript將返回undefined。

Video19. Object Method
在Object裏面的function被稱爲method。表示這個object能夠幹嗎，會幹嗎。
var orc={color:」green」,
height:5,
weight:180,
yell:function(){
document.write(「Orcs are the best!」)}
};
調用Object裏面的方法：orc.yell();

Video21: 如何改變Object裏面property的值？
var orc={
hair: 」green」,
age: 26,
stomachFull: true,
};
在定義的外面修改property的值：
orc.hair = 「purple」; # 將頭髮的顏色改成purple。
orc.hair = 1; # 原本hair是String類型，還能夠被改成其餘類型。
如何往Object裏面增長property？能夠在定義外面直接加：
orc.hair2 = 「black」; # 這樣orc將增多一個hair2的property
如何在定義外面刪除object的某個property？
delete orc.hair2; # 使用delete關鍵詞，能夠刪除這個property。

Video22. Global Object、Custom Object、String Object
Custom Object爲程序員本身定義的Object；
Global Object 是JavaScript內置的，咱們能夠直接拿來用(包括String Object、Number Object、Math Object等等)
String Object處理String，有許多內置的方法，但咱們不用使用String.method()來調用它們，能夠像下面直接使用：
var hello = 「Hello how are you doing」;
hello = hello.toUpperCase();
經常使用的String Object的methods或property有toUpperCase()、length 、charAt()、replace()、bold()、italic()等等。

Video23. Math Object
數字屬於Math object, 它有幾個經常使用的方法：Math.sqrt(), Math.round(), Math.celi(), Math.floor()

Video24. 什麼是Date Object？
var todayDate = new Date(); # Date()表示Date Object，new將建立一個副本，將這個副本給todayDate
document.write(todayDate); # 顯示這個副本的內容：Tue Mar 07 2017 14:22:42 GMT+0800 (中國標準時間)
上面這個日期太複雜，能夠用Date Object的toDateString ()方法來簡化。
todayDate.toDateString(); # Tue Mar 07 2017
todayDate.setYear(2017); # Date Object還有一個setYear()方法。能夠設置todayDate的年份爲2017.

Video25. 什麼是DOM ?
DOM(Document Object Model). Every one of the tag of HTML has an object in the DOM.
3 nodes that need to know: element node, attribute note, text node

![圖片上傳中...]

|REMEMBER|style object位於DOM中。

Video26~Video29. 在JavaScript中，如何定位HTML中的elements從而對其進行操做？
var text = document.getElementsById(「para1」); # 經過elements的ID標籤, 從而，text將表示HTML裏面的para1 element
var paragraph = document.getElementsByTagName(「p」); # 經過element的tag name。須要注意的是，由此咱們得到了全部具備p標籤的elements，而若是要對單獨的某一個p element進行操做，咱們能夠用paragraph[index]的方法，其中paragraph[0]表示第一個p element， paragraph[1]表示第二個，以此類推。而若是要對這些具備相同tag name的標籤一塊兒操做，咱們只能經過for 循環，而不能直接對paragraph操做。
var paragraph = document.getElementsByClassName(「para」); # 經過class標籤。一樣的，要用paragraph[index]來具體指明是哪個element。

Video31. 如何在JavaScript中讀取HTML裏面某個element的文本？
var paragraph = document.getElementsByClassName(「para」); # 先要肯定要從哪一個element得到文本
var firstParaText = paragraph[0].innerHTML; # 使用innerHTML來得到這個element的文本。
一樣，咱們不但能夠得到文本內容，還能夠用innerHTML來修改這個element的文本內容：
paragraph[0].innerHTML = 「This is new text.」;
|REMEMBER|若是想要HTML中的某個段落不顯示，在JavaScript中最簡單的方法就是給它的innerHTML值賦爲空。

Video33. events是什麼？
events能夠用來觸發一個JavaScript的function，從而達到用戶與網頁可以取得互動的目的。咱們經常使用的events有onclick(當鼠標單擊時觸發)、onmouseover（當鼠標指針懸停時觸發）、onmouseout（當鼠標指針移開時觸發）等等。首先應該肯定由什麼element來放置這些events，其次應該肯定由用哪一種方式來觸發JavaScript的function，即咱們應該在events中選擇。

Video35. 如何更換圖片？(這個例子經過鼠標懸停和離開兩個動做更改圖片。)
在HTML中:
<img src=」stalin.jpg」 id=」image」 onmouseover=」newPicture()」 onmouseout=」oldPicture()」>
在JavaScript中：
function newPicture (){
document.getElementById(「image」).src=」lenin.jpg」;
}
function oldPicture(){
document.getElementById(「image」).src=」stalin.jpg」;
}
能夠看出關鍵在與更換src的值。
|REMEMBER|onmouseover處理當鼠標指針懸停到某個element之上時的event，而onmouseout處理當鼠標指針從某個element上面移開時的這個event。

Video37. 如何建立一個新的HTML element?
var elementH = document.createElement(「h2」); # 使用createElement建立一個element
var main = document.getElementById(「main」); # main將被作爲element的父節點
main.appendChild(elementH); # 肯定main和element的父子關係
var textH = document.createTextNode(「The battle of Salamis」); # 使用createTextNode建立這個一個文本節點
elementH.appendChild(textH); # 將剛剛建立的textH文本節點做爲子節點與elementH創建父子關係
|REMEMBER|咱們使用createElement建立一個element，使用createAttribute建立一個Attribute，使用createTextNode建立一個文本。
|REMEMBER|咱們使用appendChild來建立父與子的關係。

Video38. 如何將某個element刪除？
var elementH = document.getElementsByTagName("h2")[0]; # 先得到這個element
var parent = elementH.parentNode; # 得到這個element的parentNode
parent.removeChild(elementH); # 用parentNode的removeChild來刪除這個element
|REMEMBER|每個HTML element都是一個Node。

Video39. 如何爲某個element增長Attribute？
var pAttribute = document.createAttribute("id"); # 建立一個新的Attribute
pAttribute.value = "test"; # 給該attribute賦值
element.setAttributeNode(pAttribute); # 將這個Attribute綁定到某個element上。

Video40. 經過parent來定位child。
var parent = document.getElementById("main"); # 定義一個變量 (parent)來表示main這個父節點
var child = parent.childNodes[3]; # 經過childNodes這個屬性，來得到由main的子節點組成的array, 再用index的方法取得第3個節點
child.style.color = "blue"; # 將所取得的節點的字體顏色改成藍色
|REMEMBER|在爲childNodes這個Array來計算index的時候，應該注意它與咱們之前的概念是不同的。在下圖中，childNodes的第一個節點，即index=0，將取得whitespace； childNodes的第二個節點，即index=1，將取得第一個<p>節點；childNodes的第三個節點，即index=2時，將又取得whitespace。也就是說，全部的節點之間都將要計算whitespace這個特殊的節點。

使用childNodes這個Array來定位某個子節點，因爲要考慮whitespace的因素，變得有點複雜。下面有兩個屬性則顯得比較簡單：
var child = parent.firstElementChild; # 顧名思義，這個firstElementChild屬性指向的就是第一個element的子節點
var child = parent.lastElementChild; # 這個指向最後一個element。

Video41. 經過child來定位parent。
var child = document.getElementById('p1');
var parent = child.parentNode;
parent.style.color = "green";
注意，因爲子子節點只有一個parent，因此咱們不用作index操做。

Video42. 經過sibling的關係在兄弟姐妹之間定位：
var para2 = document.getElementById(‘p2’); # 首先定位一個element
var sibling = para2.nextElementSibling; # 用nextElementSibling屬性定位下一個element，同理，用previousElementSibling來定位上一個element。
|REMEMBER|應該注意的是，除了可使用nextElementSibling及previousElementSibling，咱們還可使用nextSibling及previousSibling。但這就要考慮whitespace了。所以不建議用這兩個屬性。

Video43. Form validation
使用JavaScript能夠對HTML裏面用戶提交的表單數據進行簡單的驗證。在實際運用過程當中，不該該僅運用JavaScript,而是應該將JavaScript和PHP、ASP等後端一塊兒進行數據驗證。
|REMEMBER|觸發提交表格的event是onsubmit.
<form id=」theForm」 action=」message.html」 method=」post」 onsubmit=」validateTextBox()」>Code here</form>
若是在驗證不符合條件的條件下要阻止表格的提交，應該這樣定義onsubmit=」return validateTextBox()」, 而且在JavaScript中的validateTextBox()函數中返回return false以阻止表格提交到服務器。

Video46. 如何高亮表單提交時中出錯的文本框？
var box = document.getElementById(「name」); # name是<input>的標籤
box.focus(); #將光標聚焦在此
box.sytle.border = 「solid 3px red」; #這裏套用了CSS的方式，高亮文本框

Video49. 如何用JavaScript隱藏某個element？
document.getElementById(「test」).style.visibility = 「hidden」;

Video50. 什麼是confirmation box?
var confirmation = confirm(「These changes are final!」); # confirm() 將返回OK, CANCLE，OK至關於布爾值的true, CANCLE至關於布爾值的false。
if (confirmation == true) {
// 若是用戶單擊OK，執行這裏。
}

Video51. Class定義：function car(type, color, miles){this.type = type;this.color = color;this.miles = miles;}建立實例var car1 = new car(「Compact」, 「blue」, 6590);var car2 = new car(「Truck」, 「red」, 397);var car3 = new car(「SUV」, 「yellow」, 9948);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。