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);