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是弱范例言语，变量在声明以后，它还可以被给予别的范例的值，就变成其他范例的变量。
Video5. 怎样将JavaScript文件(.js)连接到HTML文件中？
须要将.js文件和HTML文件放在同一个目次中，在HTML的<head>或<body>中增添：
<script src=”jscode.js”> </script>
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言语的花样是相似的。
Video14. 函数内里的return语句。
function add(x, y) {
result = x * y;
return result;
}
var theResult = add(3, 4); # add(3, 4)返回一个值，我们将这个值12赋给theResult.
Video15. Global variable 和 local variable
Global variable: 在函数表面定义, 在文件内到处都可以应用.
local variable: 在函数内部定义. 只能在函数内部被应用.
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”; # 给某个元素更新值
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);
