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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。