2655人阅读
┈┈【开发思想】（31）
? 前端开发 ?（93）
┈┈【我做布道者？】（45）
在2016年如何学习JavaScript？
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：746239次
积分：7293
积分：7293
排名：第3090名
原创：141篇
转载：25篇
译文：12篇
评论：718条
文章：56篇
阅读：435227
文章：18篇
阅读：130611
文章：58篇
阅读：487452
(1)(2)(6)(4)(2)(4)(2)(4)(4)(5)(9)(4)(6)(11)(17)(4)(4)(9)(9)(1)(9)(4)(54)(3)如何循序渐进、有效地学习JavaScript？ - 知乎3930被浏览260679分享邀请回答jump.im/i628628 条评论分享收藏感谢收起/subject/2994925/2. 阅读源码3. 实践、实践、再实践4. 关注行业动态，参与开源社区这几个blog至少要订阅： 55718 条评论分享收藏感谢收起查看更多回答11 个回答被折叠（）JavaScript 教程
JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
JavaScript 很容易使用！你一定会喜欢它的！
JavaScript 实例
学习 100 个实例！使用我们的编辑器，你可以编辑源代码，然后单击 TIY 按钮来查看结果。
JavaScript 测试
在 W3School 测试你的 JavaScript 技能！
JavaScript 参考手册
在 W3School，我们为您提供完整的 JavaScript 对象参考手册。
JavaScript 课外书
如果您已经把我们的 JavaScript 教程学习完毕，并且需要更深入地学习这门语言，那么 w3school 提供的 《》绝对是您最好的选择。
本教程从 JavaScript 的历史开始讲起，直到当前它对 XML 和 Web 服务的支持。
您将学习到如何扩展该语言，以使它适应特殊的需求。
您还将学到如何使用 JavaScript 创建无缝的客户机 - 服务器通信。
本教程深入浅出，在您认真学习之后，一定会获益良多。
赞助商链接从零开始学_JavaScript_系列（八）——js系列(2)（事件触发顺序、文本读取、js编写ajax、输入验证、下来菜单）
（20）事件触发的顺序
假如文档中有多个脚本（例如自动执行的脚本），那么他们执行是有一定的顺序的（在ＨＴＭＬ文档之中）：
①先执行内的&script&标签。因此，这里的js脚本通常是嵌入代码、指向JS文件，可以在这里定义其后要使用的函数；
②其次是执行内的script标签；
③然后是执行触发的脚本内容，例如在button按钮上添加的onclick=””命令，就是在点击后触发的。
（21）文档对象模型（DOM）
文档对象模型（Document Ojbect Model），效果是允许脚本控制Web页面、窗口、文档。对于JS来说，他是制作动态页面的强有力工具。
DOM不是Script语言的一个部分，而是内置于的一个API（接口），
为了操纵浏览器和文档，使用分层的父对象和子对象（树形结构），这就称为DOM，表示一个Web文档的所有内容和。
DOM对象，有属性和方法。
①最顶层的是window对象，表示一整个浏览器接口，框架可以由window对象来表示。如alert就是window对象的方法
②document对象代表的是一个web文档或一个页面，web文档在浏览器窗口中显示，所以很明显document对象是window对象的子对象；
因此window.document和document都是指当前窗口；
如果使用多个窗口（或框架），就要使用多个window对象，每个window对象都有自己的document对象，因此使用其中某一个，要指出窗口名和对象名；
（22）获得文档的信息
①document.https://blog.csdn.net/qq/article/details/URL指明了文档的https://blog.csdn.net/qq/article/details/URL地址，这是一个简单的文本字段，不能改变它的属性（不懂，是指这个是一个string对象么？）；
如果要给用户一个不同的地址，要使用window.location对象；
②document.title列出了当前页面的标题，由HTML中的title标签定义。
ti=document.
alert(ti);
效果是输出标题，注意，没有括号；
③document.referrer是用户所浏览的上一个页面的https://blog.csdn.net/qq/article/details/URL地址；
④document.lastModified是文档最后修改日期，这个日期从服务器传到页面（注：在360浏览器里，这个时间是变化的，在Firefox里，这个时间是固定的）但可能服务器上运行正常，需要验证；
⑤document.bgColor和document.fgColor是文档的背景和前景（文字）颜色，对应body下的BGCOLOR属性和TEXT属性；
ti=document.bgC
alert(ti);
输出是green，背景色变绿
⑥document.linkColor、document.alinkColor和document.vlinkColor是文档中链接的颜色。分别对应body标签中的LINK、ALINK和VLINK属性（但不知道这3个是什么意思）。
⑦document.cookie允许读取和设置一个文档的cookie。更多略。
（23）history对象
一个可访问的属性：
history.length，用户访问过的不同地址的数目。
如代码，表示当前访问过的地址的数目
alert(history.length);
初始是1，假如访问了一个其他网页，这里则弹出是2，如果访问更多，则相应增加。
history.go(参数)
打开历史列表的一个网址，参数为正数或者负数。
history(-1)相当于后退一步。
history.back()载入历史列表中的前一个网址，相当于按一下后退。
history.forward()载入历史列表中的后一个网址，相当于按一下前进按钮。
（24）AJAX
传统情况下，JavaScript与服务器之间的通信方法只有一种——表单。
1、前端/网页：创建一个XMLHttpRequest对象，然后将其发送给Web服务器，并且无需一直等待请求，而是可以继续发送请求。
2、服务器：通过发送包含内容的文件（或服务器端应用程序的输出）作为相应。
3、前端：当接到服务器端的响应后，相应的JavaScript函数将被触发，以处理相关数据。
4、DOM：由于这项技术的目的在于实现更好的交互（否则接受到服务器信息就得刷新页面），因此脚本使用DOM来显示来自服务器的数据，从而无需再次刷新页面。
其他：可以同时处理多个请求（发送多个请求，服务器的速度不影响前端的）。
AJAX的应用：
主要用于创建Web程序——面向用户且基于Web的服务。
使用XMLHttpRequest：（表示纯看概念很茫然啊）
1、创建请求
创建一个XMLHttpRequest对象：
var ajaxreq = new XMLHttpRequest();
注：IE5/6除外（早版本的需要启用ActiveX控件），语法不同；
2、打开https://blog.csdn.net/qq/article/details/URL
ajaxreq.open("get", "filename");
可以使用GET或者POST命令（这里是get）；
由于GET需要使用将参数作为地址发送给服务器，因此如例子：
ajaxreq.open("get", "search.php?query=abc");
访问search.php网页，将abc作为查询参数发送给服务器。
问题：为什么是query？
3、发送请求
ajaxreq.send(null);
注：get方法用null，post方法用发送的数据。
4、等待响应：
XMLHttpRequest提供了专门的事件处理程序，用于处理服务器的返回信息。
ajaxreq.onreadystatechange = MyF
请求（request）对象拥有一个名为readyState的属性，代表一个请求的当前状态。
当readyState属性发生变化时，该事件被触发。
ReadyState属性值的变化范围如下：
0 新的请求；
4 已结束的请求
所以事件处理程序会检测该属性，查看其值是否已变化为4。
由于可能发生错误，因此当请求成功时，status将被设置为200。但若发生错误，其值将被设置为对应的错误代码。
与错误相关的解释信息（成功时为OK），将被保存在statusText属性中。
5、解释响应数据
当readyState属性的值为4，而且请求已被响应时，可以通过另外两个属性进一步访问那些来自服务器的返回数据。
responseTeXt 用于访问以原始文本存在的响应信息；
responseXML 用于访问以XML对象形式存在的响应信息。
当数据格式不是XML时，只有文本属性可被访问。
这里的XML指的是.xml文件么？
var ajaxreq = false, ajaxC
function ajaxRequest(filename)
//Firefox / IE7 /Others
ajaxreq = newXMLHttpRequest();
catch(error)
ajaxreq = newActiveXObject("Microsoft.XMLHTTP");
catch(error)
ajaxreq.open("GET",filename);
ajaxreq.onreadystatechange= ajaxR
ajaxreq.send(null); //发送请求
//事件处理程序
function ajaxResponse()
if(ajaxreq.readyState != 4)
if(ajaxreq.status = 200)
//事件正常，请求成功
if(ajaxCallback)ajaxCallback();
alert("Requestfailed" + ajaxreq.statusText);
//为什么return true？只要readyState等于4就一定成功？
ajaxRequest()函数：
实现了处理、创建、发送XMLHttpRequest对象所需的全部操作。
该函数首先会创建XMLHttpRequest对象。此时，对于不同的浏览器需要使用不同的命令。如果使用了错误的命令就一定会出现错误。
所以需要使用try和catch语句。
先试着使用标准方式，出错了使用另一种方式（这里是针对IE5和IE6的），如果还不行，那么返回一个false值给ajaxreq，然后通过条件判断，告诉用户浏览器不支持AJAX功能。
ajaxResponse()函数：
ajaxResponse()函数是onreadystatechange事件的处理程序。
该函数首先检查readyState属性，查看其值是否为4。如果不是，什么都不做（return）
如果是4，那么检查属性值是否为200（是200说明成功），是的话，执行保存于变量ajaxCallback中的处理函数。
如果不是200，说明出错了，alert弹框提示出错信息。
使用AJAX库：
①将库文件保存为ajax.js，并使其与HTML和脚本位于同一目录中。
②利用&scriptsrc="ajax.js"&导入HTML中。
③为请求结束事件创建一个处理函数，并将变量ajaxCallback的值设定为该函数。
④调用ajaxRequest()函数，其参数为服务器端应用程序（或文件）的文件名。（本库只支持GET，因此不考虑POST，也无需指定使用方式）。
⑤如果请求操作正常结束，那么将调用刚才在ajaxCallback中指定的函数。同时全局变量ajaxreq将会把服务器的响应数据分别保存在responseXML和responseText属性中。
使用AJAX库编写AJAX测验程序：
在创建了一个可重用的AJAX库后，就可以用他来创建JS程序。
JS代码例子如下；
var qn = 0; //qn是问题编号
function getQuestions()
qn = 0; //点击开始按钮后，重置问题
obj =document.getElementById("question"); //obj是question的（HTML）
//之所以设置下面这行，是因为在异步加载成功前显示这里
obj.firstChild.nodeValue="(pleasewait)"; //obj的所有子节点中的第一个子节点的值是please wait。作用是将其写到...中
ajaxCallback =nextQ //将函数赋给回调函数（ajaxCallback），在ajax里调用
ajaxRequest("questions.xml"); //调用ajax库加载questions.xml文件
//作用是读取、并输出问题
function nextQuestion()
questions =ajaxreq.responseXML.getElementsByTagName("q"); //questions被赋值为AJAX返回的XML文件中标签为q的（在XML中）
obj =document.getElementById("question"); //obj为标签是question（在AJAX.html中）
if( qn <questions.length) //如果qn小于questions的长度（即未到结尾）
q =questions[qn].firstChild.nodeV //q是读取的&#20540;
obj.firstChild.nodeValue= //将其输入到HTML中显示
obj.firstChild.nodeValue= "(no more questions)"; //如果没有更多问题了，那么提示用户
function checkAnswer()
answers =ajaxreq.responseXML.getElementsByTagName("a"); //answers是一个数组（因为有多个标签）
a =answers[qn].firstChild.nodeV //firstChild.nodeValue指所有子节点（childNodes）中的第一个子节点的文本&#20540;
answerfield =document.getElementById("answer"); //HTML输入位置的内容（id是answer）的&#20540;
if(a == answerfield.value) //如果读取的&#20540;（XML中的），和输入的&#20540;（HTML用户输入的）一样
alert("Correct!"); //弹框提示正确
alert("Incorrect.The correct answer is: " &#43; a); //弹框提示错误，并告知正确的答案
qn &#43;= 1; //问题编号&#43;1
answerfield.value=""; //重置答案
nextQuestion(); //调用函数
obj = document.getElementById("startq"); //ojb是startq按钮
obj.onclick = getQ //点击后调用函数，不用()表示不执行，只有当点击后才执行
ans = document.getElementById("submit"); //ans是提交按钮
ans.onclick = checkA //点击后调用函数
另有一XML文件：
最后是html文件：
&scriptsrc="ajax.js"&&/script&
AJAX的测试例子
&scriptsrc="quiz.js"&&/script&
①点击Start the Quiz按钮后，读取XML文件，将读取到的问题输出在html上。
②答案框可以用于输入答案，按submit按钮提交答案。
③提交后进行验证，如果和预留答案相符，提示，不符，提示正确答案。
④然后变更到下一个问题。
（25）name
name的作用和id类&#20284;。
但还有一些其他用处：
l 用途1:作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的&#20540;。
l 用途2: HTML元素Input type='radio'分组，我们知道radio
button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
l 用途3:建立页面中的锚点，我们知道是获得一个页面超级链接，如果不用href属性，而改用Name，如：，我们就获得了一个页面锚点。
l 用途4:作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
l 用途5:在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
l 用途6:某些特定元素的属性，如attribute，meta和param。例如为Object定义参数或Meta中。
（26）验证输入内容是不是空，是不是数字
field为检查所内容（input）的id
function checkIsNumber(field) //检查输入的文字是不是数字，这的field是id的&#20540;
with(field)
if(value==null||value=="")
document.getElementById(field).innerText="请输入内容";
if(value>0)
document.getElementById(field).innerText="请输入数字";
（27）下拉列表
如果带默认选择（即默认不是第一个），加上下面红色部分（即默认选择这个）
（28）p、span、ul的区别
①p是一个块，占用的位置是一行，不同p之间自带换行。
例如：fffwwwppp
其显示是：
②span是行内小块，是不带换行的。
例如：fffwwwppp
其显示是：fffwwwppp
③ul目前已知是自带缩进的。