前端个人学习笔记（3）——javascript进阶

2018.6.7

今天是个重要的日子，首批00后迎来高考，看来我是真的老了 。

学习内容：慕课网JavaScript进阶篇。、

1、数组

创建数组:

var myarray=new Array();

注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。

2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度，仍然可以将元素存储在规定长度以外。

数组属性lengthmyarray.length; //获得数组myarray的长度[p]注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr document.write(arr.length); //显示数组长度8 document.write(arr[7]); //显示第8个元素的值54同时，JavaScript数组的length属性是可变的，这一点需要特别注意。arr.length=10; //增大数组的长度 document.write(arr.length); //数组长度已经变为10数组随元素的增加，长度也会改变，如下:var arr=[98,76,54,56,76]; // 包含5个数值的数组 document.write(arr.length); //显示数组的长度5 arr[15]=34; //增加元素，使用索引为15,赋值为34 alert(arr.length); //显示数组的长度16

2、事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表:

3、JavaScript内置对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。[/p]

对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象： var objectName =new Array();//使用new关键字定义对象 或者 var objectName =[];访问对象属性的语法:objectName.propertyName如使用 Array 对象的 length 属性来获得数组的长度：var myarray=new Array(6);//定义数组对象 var myl=myarray.length;//访问数组长度length属性以上代码执行后，myl的值将是：6访问对象的方法：objectName.methodName()如使用string 对象的 toUpperCase() 方法来将文本转换为大写：var mystr="Hello world!";//创建一个字符串 var request=mystr.toUpperCase(); //使用字符串对象方法以上代码执行后，request的值是：HELLO WORLD!

3.1 Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。定义一个时间对象 :

var Udate=new Date();

注意:使用关键字new，Date()的首字母必须大写。 使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

我们最好使用下面介绍的“方法”来严格定义时间。访问方法语法：“<日期对象>.<方法>”Date对象中处理时间和日期的常用方法：
3.2 String 字符串对象

在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：var mystr = "I love JavaScript!"定义mystr字符串后，我们就可以访问它的属性和方法。访问字符串对象的属性length:stringObject.length; 返回该字符串的长度。

var mystr="Hello World!";
var myl=mystr.length;

以上代码执行后，myl 的值将是：12访问字符串对象的方法：使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代码执行后，mynum 的值是：HELLO WORLD!
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。语法:stringObject.charAt(index)注意：1.一个空格也算一个字符。          2.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。          3.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。语法stringObject.indexOf(substring, startpos)
split() 方法将字符串分割为字符串数组，并返回此数组。语法：stringObject.split(separator,limit)
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

substring() 方法用于提取字符串中介于两个指定下标之间的字符。语法:stringObject.substring(startPos,stopPos) 
注意：
1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。语法:stringObject.substr(startPos,length)
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。如果startPos为负数且绝对值大于字符串长度，startPos为0。

3.3Math对象提供对数据的数学计算。Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。Math 对象属性:

Math 对象方法:


3.4 Array 数组对象数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的。数组定义的方法：
1. 定义了一个空数组:var  数组名= new Array();2. 定义时指定有n个空元素的数组：var 数组名 =new Array(n);3.定义数组的时候，直接初始化数据：var  数组名 = [<元素1>, <元素2>, <元素3>...];

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。语法:arrayObject.sort(方法函数参数说明： 1.如果不指定<方法函数>，则按unicode码顺序排列。2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。myArray.sort(sortMethod);注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。 若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。示例：1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1");
document.write(myarr1.sort()+"<br>");
document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

编程练习

某班的成绩出来了，现在老师要把班级的成绩打印出来。效果图:XXXX年XX月X日 星期X--班级总分为:81格式要求：1、显示打印的日期。 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间。2、计算出该班级的平均分（保留整数）。同学成绩数据如下："小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

<script>
//通过javascript的日期对象来得到当前的日期，并输出
//输出年月日
var currentDate = new Date();
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
document.write(
currentDate.getFullYear() + "年" +
(currentDate.getMonth() + 1) + "月" + //默认月份从0开始，所以需要+1.
currentDate.getDate() + "日" + " " +
weekday[currentDate.getDay()]
);
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var sorceStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var sourceArr = sorceStr.split(";");
//document.write(sourceArr);
//从数组中将成绩撮出来，然后求和取整，并输出。
var score = new Array();
var sum = 0;
for (var i = 0; i < sourceArr.length; i ++) {
sum += parseInt(sourceArr[i].substr(sourceArr[i].indexOf(":")+1));//索引到:的位置+1（从:后面开始提取字符串）
//document.write("<br>" + sum);//test
}
document.write("--班级总分为:" + sum);
document.write(",班级平均分为(保留整数):" + Math.round(sum/sourceArr.length));
</script>

4、浏览器对象
4.1JavaScript 计时器在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。语法:setInterval(代码,交互时间);参数说明：1. 代码：要调用的函数或要执行的代码串。2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。调用函数格式(假设有一个clock()函数):setInterval("clock()",1000) 或 setInterval(clock,1000)取消计时器clearInterval()

语法：clearInterval(id_of_setInterval）

参数说明: id_of_setInterval：由 setInterval() 返回的 ID 值。
setTimeout()计时器在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法: setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
取消计时器clearTimeout()语法:clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

4.2 History 对象history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。语法：window.history.[属性|方法] 注意：window可以省略。



4.3Location对象location用于获取或设置窗体的URL，并且可以用于解析URL。语法：location.[属性|方法]location对象属性图示:

location 对象属性：

location 对象方法：


4.4Navigator对象Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

4.5 userAgent返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)语法navigator.userAgent4.6screen对象用于获取用户的屏幕信息。语法：window.screen.属性
4.7window.screen 对象包含有关用户屏幕的信息。1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。4.8屏幕可用高和宽度1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

---------------------------------2018.6.8更新-----------------------------------------------------

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

节点属性:

遍历节点树:

DOM操作:

getElementsByName()方法:

返回带有指定名称的节点对象的集合。
语法：document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法:

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:document.getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

案例：

1. 当点击"全选"按钮时，将选中所有的复选项。

2.当点击"全不选"按钮时，将取消所有选中的复选项。

3.在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。

参考慕课网一个朋友的代码：点击打开链接。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1">  音乐
<input type="checkbox" name="hobby" id="hobby2">  登山
<input type="checkbox" name="hobby" id="hobby3">  游泳
<input type="checkbox" name="hobby" id="hobby4">  阅读
<input type="checkbox" name="hobby" id="hobby5">  打球
<input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i = 0; i < hobby.length; i++){
hobby[i].checked = true;
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i = 0; i < hobby.length; i++){
hobby[i].checked = false;
}
}
function checkone(){
var j = parseInt(document.getElementById("wb").value);
var hobby = document.getElementsByName("hobby");
j--;
if(j < hobby.length && j >= 0){
for(var i = 0; i < hobby.length; i++){
hobby[i].checked = false;
}
hobby[j].checked = true;
document.getElementById("wb").value = "";
}
else{
alert("输入值不合法!");
document.getElementById("wb").value = "";
}
}
</script>
</body>
</html>

getAttribute()方法：
通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字。
setAttribute() 方法:增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

访问子节点childNodes:

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

访问子节点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。 
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 

访问父节点parentNode

语法：elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:elementNode.parentNode.parentNode

-----------------------------------------------2018.6.9更新--------------------------------------------------------------

访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling  
说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
参数:

newnode：指定追加的节点。

插入节点insertBefore()

在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。

node: 指定此节点前插入节点。

删除节点removeChild()

从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:

node ：必需，指定需要删除的节点。

替换元素节点replaceChild()

实现子节点(对象)的替换。返回被替换对象的引用。 
语法：
node.replaceChild (newnode,oldnew ) 
参数：
newnode : 必需，用于替换 oldnew 的对象。 

oldnew : 必需，被 newnode 替换的对象。

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document.createTextNode(data)
参数：

data : 字符串值，可规定此节点的文本。

--------------------------------------2018-6-14-更新------------------------------------------------------------------

今天学习的内容是《JavaScript DOM 编程艺术》。

1、分离JavaScript

把JavaScript代码调用行为与HTML文档的结构和内容分离开。
参考：分离JavaScript。2、return false； js中return false作用一般是用来取消默认动作 / 阻止提交表单 / 阻止继续执行下面的代码。
例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页。
但是return false 不能乱用，参考：javascript中的return、return true、return false、continue区别 。3、向后兼容把方法打包在if语句中，根据if语句的结果，决定采取怎样的行动。参考：html与JacaScript中的重要思想：预留后路、向后兼容、js分离。4、addLoadEvent在页面加载后同时执行多个函数，比window.onload灵活。

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.oldonload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}

绑定方法：

addLoadEvent(firestFunction);
addLoadEvent(secondFunction);

参考：addLoadEvent函数在页面加载后同时执行多个函数。

         onload事件-----addLoadEvent函数
--------------------------------------2018.6.16-更新--------------------------------------------------------1、parseInt() 函数可解析一个字符串，并返回一个整数。语法：parseInt(string, radix)

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

提示和注释
注释：只有字符串中的第一个数字会被返回。
注释：开头和结尾的空格是允许的。
提示：如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。

阅读更多