深入讲解JavaScript编程，涵盖事件响应、决策与循环控制、函数应用、DOM操作、表单验证、Ajax技术及对象定制等内容，适合初学者和进阶者。
HeadFirst JavaScript 学习笔记：
在菜鸟教程上学习了HTML、CSS和JavaScript基础知识后，被推荐来读HeadFirst JavaScript，简单做一下笔记。
一、交互式网络
第一章通过iRock的例子讲述JavaScript给网页带来了生命，提供了页面与用户的交互性，并提到了一些属性和函数的用法。
- 事件以JavaScript代码响应网页的动静
- 设定的onload属性，即可对onload事件有所响应
- JavaScript通常放在head中
给IRock添加交互性代码如下：
<html>
<head>
<title>iRock-The Virtural Pet Rock</title>
<script type="text/javascript">
function touchRock(){
var userName=prompt("What is your name?","Enter your name here.");
if(userName){
alert("It's good to meet you,"+userName+".");
document.getElementById("rockImg").src="rock-happy.jpg";
}
}
</script>
</head>
<body onload="alert('Hello,I am your pet rock.');">
<div style="margin-top: 100px;text-align: center">
<img id="rockImg" src="rock.jpg" alt="iRock" style="cursor: pointer"
onclick="touchRock();"/>
</div>
</body>
</html>
第三章
请求网页的过程：浏览器向服务器请求网页→服务器提供网页→浏览器呈现网页→用户在网页输入数据时，JS验证表单域
JS完全在客户端运行，不向服务端要求任何东西
定时器：单次定时器/间隔定时器。在一段时间过后，再运行某段代码，包括两部分：1）建立时间延迟；2）到达时限时该运行的程序代码 （以毫秒为单位）
设定时间函数：setTimeout（），单次定时器
使用形式：setTimeout（终止时运行的代码+，+延迟时间）；
setInterval()，间隔定时器；clearInterval()，用于清除间隔定时器，需要间隔定时器的ID。
使用形式：setInterval（终止时运行的代码+，+延迟时间）；
网页载入触发事件：；点击：onclick
type="text/javascipt"有什么问题？
prompt:弹出输入框，让输入东西
客户端窗口只是浏览器窗口里呈现网页的部分,不包含标题栏和工具栏。推荐按照客户端窗口调整尺寸。可检查浏览器窗口尺寸：document.body.clientHeight;document.body.clientWidth
用style对象可以取得网页元素的样式，但要先取得元素。
如果JS代码要取用网页元素，就不能在onload事件前运行任何代码。
浏览器改变大小时触发onresize事件
浏览器关闭或重新载入时会摧毁所有变量，cookie是浏览器存储在计算机里的数据。
cookie以独一无二的名称存储一段数据，可以设定有效日期，不同浏览器不能共享cookie，只能存储较少的文本数据。navigator.cookieEnabled可检查浏览器是否支持cookie。
格式：名称=信息内容 Expires 有效日期 cookie操作：readCookie();writeCookie();eraseCookie();
导入js文件：
此句必须单独出来！
第四章 决策
多个选项时：
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
创建函数时，参数变量可直接创建，不需要再声明，例如function changeScene(option)
注意全局变量位置，不能放在函数里，每次调用都清零
相等：== 不等：！=
单行注释：// 多行注释：/* */
注意变量的作用域，参数也是局部变量，尽量使用局部变量
If/else适合二选一，switch/case适合多选一
switch（Test data）{ //测试数据必须为一块数据，不能是表达式
case match1:
行动代码；
break;
…
default: //在没有匹配案例时运行
行动代码；
break;
}
switch/case不能达成If/else的所有功能，控制switch/case语句的不能是运算式，只能是数据。
第五章 循环
循环：for(初始化；比较；更新)
动作；
数组元素由值和键构成，需要用键访问值，var showTime= new Array();数组是个对象
var showTime=[…,…,…,…];注意是方括号
循环的计数器作为数组的索引，可处理数组中的大量数据
for循环用于已知循环次数；while循环可用于不知循环次数或不需要初始化，使用测试条件进行判断
while（test）
Action ; 注意！while循环中要有影响测试条件的程序代码
待理解：
二维数组中，每个元素的位置表达为i*seats[i].length+j
怎么从两个嵌套的for循环中跳出来？可以在内循环break的时候加一个变量，外循环进行判断然后再次Break.
第六章 函数
函数语法：function + name（小写驼峰式）+ () + { body }
存疑：循环中要更新的数据是否可以放到外面
传递信息给函数：function + name（小写驼峰式）+ ( + Arguments + ) + { body }，其中自变量是已经完成初始化的局部变量，在函数内改变自变量不会影响函数外的任何事物。
eg: var temp=80;
coolIt(temp);→function coolIt(temperature){temperature --;} →其中temp为79
alert(temp);→temp依然为80
函数的返回数据：return value; return不仅可以返回数据，还可以结束函数
函数的返回值取代了函数的调用
return的正确使用可以返回数据和控制函数执行的流程
注意内容（HTML）、外观（CSS）和功能（JS）的分离
函数可作为变量创建和使用，例如
var showSeatStatus = function (seatNum){alert()};变量名即为函数名，函数主体即为变量值，又称为函数字面量
函数引用：函数名称后没有括号，eg: var myShowSeat=showSeatStatus;函数变量的值不是代码本身，而是指向存储代码的存储器位置的引用。
函数调用：函数名称后必定随括号，很多时候还附有自变量
回调函数：事件处理函数，浏览器使用回调函数与JS代码连接，例如onload(),onclick()。。。
为了HTML与JS的分离，使用函数引用设定回调函数，eg：window.οnlοad=initSeats;
使用函数引用指派事件处理函数就不需要再把JS代码指派给HTML的事件属性
使用函数字面量作为自变量的传入，eg：document.getElementById(“seat26”).οnclick=function(evt){showSeatStatus(26);};
onload事件处理器回调函数是联结网页上所有事件的好地方。
函数字面量没有名称，适合快速偶发的回调函数，比较方便。
第七章 表单与验证
要区分表单中的每个域，可用HTML代码的id或者name属性，可用getElementById{}进行访问
每个表单有一个form对象，是个数组，存储表单中所有域，eg：this.form[“name”].value
选择输入域时，触发onfocus事件；当域不再被选择输入时，触发onblur；onchange与onblur有点相似，它只在某个域不再被选择且输入内容被改变时触发，在空白域时不触发。
onblur适合触发数据验证
提醒用户时除了alert还可以使用span作为辅助元素。
关于表单域和表单：在HTML元素的上下文中，关键字this指向代表该元素的对象。若在表单域对象的上下文中，有个form特性可把整份表单当成对象访问。所以，当看到this.form出现在表单域的onblur代码中时，其实它用于引用表单本身。
辅助信息的id属性由相关输入域的id/name来定，后面加上-help。数据验证无误时，要清除掉辅助信息。
检验是否是数字使用isNaN。
正则表达式：用于定义匹配的模式 /表达式 /
元字符：.匹配任何字符；\d 匹配任何数字字符；\w 匹配任何字母或数字字符；\s 匹配空格； ^匹配模式的字符串前不能有其他文字；KaTeX parse error: Undefined control sequence: \d at position 199: …g: var regex=/^\̲d̲{5}/;
if(!regex.test(inputField.value))
{}中的数字可以是{min,max} 选替：|，表示或者
字符类：匹配可选字符的规则，[字符类]
第八章 利用DOM分割HTML
第九章 对象
对象是数据和行为的结合，对象里的函数可以直接访问对象里的变量，对象是一个链接变量和函数的存储容器。
变量为对象的特性，函数为对象的方法，访问对象的方法与特性使用点号运算符，eg，Object.Property/Method
创建对象需要使用new调用构造函数，构造函数与对象的名称相同，this是创建对象特性的重点
日期专用JS对象：Date()对象，可表达时间中特定的一刻，初始化为目前的时间，输入自变量可指定时间，默认toString（）方法输出。
getMonth()从0（一月）开始，getDate（）从1到31
数组是一个对象，数组可使用sort()，默认从小到大排序。
sort()函数调用比较函数，比较函数：function compare(x,y){return x-y;} <0，x排在y前；=0，维持x与y的位置；>0，y排在x前。返回y-x即为反向排序。
string对象包含：length，长度；indexOf()，寻找字符串是否包含特定子字符串；charAt()，寻找特定字符在字符串里的位置；toLowerCase(),toUpperCase()，转换字符串为大小写。
indexOf()返回子字符串位置的索引值，从0开始。要寻找所有子字符串的位置，可以把每一次搜索到的索引值传入indexOf()，强制从下一位再次寻找。
Math对象，是组合数学方法和常量的组织对象，包含PI常量，方法有round()：四舍五入为整数；floor()：无条件舍去为整数；ceil()：无条件进位为整数；random()：产生0到1间的随机数。
对象的方法不应该超出对象的作用域范围，可方便调用，方法创建首先要声明方法（指派函数字面量给方法引用），然后编写程序，使用this.引用所需特性。
toString可自定义，将会被自动调用。
第十章 自定义对象
在构造函数中利用关键字this创建方法，将会使得每个对象的实体都有一份方法副本，造成浪费。
对象分为对象类和对象实例；每个实例的内容大多不同，因此要有特定的特性副本，但方法不需要。
关键字this用于设置实例拥有的特性和方法。类拥有的方法，可在所有实例中共享，此时实例在实力特性中存储自己的数据，方法需要访问Blog类得到。使用prototype可创建类拥有的方法，
eg:Blog.prototype.toHTML=function(){…}
创建类对象方法时，在对象声明的外面写类对象的代码，最后加分号。
对象的命名应为首字母大写，实例的命名是小写驼峰式。
类特性也可以共享，只存储一次，可被所有实例访问。
标准对象可扩展，使用prototype。类可有实例方法和类方法，实例方法可以访问实例特性，类方法只能访问类特性。
第11章 BUG调试
可使用alert进行bug调试，将alert放到需要确认的地方，根据弹出数据确认程序是否正确。
字符串必须以成对的引号或单引号围起，注意引号和单引号的混用。
注意代码运行时间，不要在数据出现前就访问它
常见的三种错误：语法错误，逻辑错误，运行时错误
第12章 Ajax：动态地快速下载并存储数据，实时响应用户
以动态数据建造的网页成为数据驱动网页，数据另存为一份文件，HTML只提供网页架构。
Ajax让网页能动态接收网络服务器地数据。
XML是种为任何类型地数据设计格式地标记语言，可自定义标签和属性。
XHTML是遵守XML的较严格语法规则的新版HTML，每个起始标签必须有相应的结尾标签，空标签必须加上一个空格和反斜线表示没有结尾标签，所有属性值以双引号围起。
XML存储数据，HTML呈现数据。
可使用标签让数据格式更有结构。
XML与Ajax和DOM结合可使数据成为动态的，通过DOM把XML视为节点树访问，
Ajax以请求和响应为中心概念，浏览器送出请求到服务器，服务器进行响应，把数据发送给浏览器，浏览器将XML数据整合至网页中。
JS内置XMLHttpRequest对象，用于发起请求并处理响应。XMLHttpRequest使用时，不同的浏览器对象的创建方式不同。
Ajax使用的两类请求：GET和POST，GET主要用于从服务器取得数据，不会改变服务器数据；POST传送到服务器数据。
异步：网页先处理网页事务，服务器处理请求。
请求处理器每个程序都不同，需要根据要求自定义，handleRequest();
同步：客户端发起请求，服务器响应过程中，客户端在等待
Ajax：异步更新，可以实时更新。采用对象XMLHttpRequest，用于后台和服务器交换数据。
过程：使用HTML和CSS实现页面；运用XMLHttpRequest（表示为XHR）和web服务器进行数据的异步交换；使用JS操作DOM，实现动态局部刷新。
http：计算机通过网络进行通信的规则，浏览器向服务器请求信息和服务，是一种无状态协议，不建立持久的连接。
HTTP请求：1、建立TCP连接；2、浏览器向服务器发送请求命令；3、浏览器发送请求头信息；4、服务器应答；5、服务器发送应答头信息；6、服务器向浏览器发送数据；7、服务器关闭TCP连接。
一个请求由4部分组成：请求类型；URL，请求地址；请求头（客户端环境信息等）；请求体（请求正文）；请求头和请求体分隔一个空行。
GET请求：一般用于信息获取，使用URL传递参数，所有人可见，一般在2000个字符；
POST请求：修改服务器上的资源，一般不可见。
一个响应由3部分组成：1、一个数字和文字组成的状态码，用来显示请求是成功还是失败；2、响应头；3、响应体。
状态码：1XX：信息类，正在处理中；2XX：成功；3XX：请求没有成功，客户需采取进一步的动作；4XX：客户端提交的请求有错误；5XX：服务器错误。
XHR对象：open(method,url,async);async:请求同步或异步，异步为true；调用HTTP请求
send(string)；发送请求，GET时可不填写或填写NULL，POST时填写参数。
POST时可使用setRequestHeader设置头信息，写在open和send中间。
获取XHR响应：responseText：获取字符串形式的响应数据；
responseXML：获取XML形式的响应数据；status和status Text：以数字和文本形式返回HTTP状态码；readyState属性变化表示服务器变化：0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成。onreadystatechange方法监听属性的变化。
PHP是一种创建动态交互性站点的服务器端脚本语言。
PHP脚本以<?php开头，?>结尾；
label标签：input 元素定义标注，for属性可以把label绑定到表单元素，应与相关元素的id属性相同。
JSON：JS对象表示法；是存储和交换文本信息的语法，类似XML，采用键值对的方式来组织；独立于语言；可以使用JS内建的方法直接进行解析，转换成JS对象。
JSON数据格式：“名称”：“值对”
数组在方括号中，对象在花括号中。
在JS中解析JSON：eval和JSON.parse，eval很危险，因为它不会判断JSON字符串是否合法，且会执行字符串中的JS语法，尽量不使用eval。
在线JSON校验工具：JSONLint.com
做好JSON编写约定。
JS库：jQuery
用jQuery实现Ajax:jQuery.ajax([settings])
type:类型；url：地址；data：对象，联通请求发送到服务器的数据；dataType：数据类型；success：请求成功的回调函数；error：请求失败的调用函数。
一个域名地址的组成：
–
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
