<script>标签(本质html)只不过是表示接下来是脚本语言,type="text/javascript"才说明是js。
js是解释语言,因为不需要编译器的转换、
onblur指示用户移往下一个输入域。
onload事件,在浏览器完成iRock网页的载入时触发
js代码也能放在html内事件处理器中。
var userName=prompt("what is your name?", "enter your name here."); //返回的是用户输入
prompt是弹出一个可供输入的窗口,前一个字符串是询问,第二个是文本框中的输入提示
再回顾一下:js使用三种基本数据类型:text, number, boolean
var——>variable还有常量constant
变量刚开始没有值
const Constant name=Constant value; //常量名习惯全是大写字母
假设有个数字存储为文本类型,但你突然想把这个数字用于数学运算,这时就需要把文本转换为数字类型。
数据类型在设置变量值与常量值的同时建立。
小写驼峰型用于变量和函数
大写驼峰型只会用于对象
NaN是数字数据类型有误时的指标,通常只在计算过程中需要数字,却收到非数值的数据时,才会看到NaN
parseInt()和parseFloat() 我们应只提供“只包含数字”的字符串
对象方法和函数
isNaN()判断是否是数字,对待数字更可靠
表单提交 form.submit
parseInt(浮点数)只会返回整数部分
donutString.indexOf("dozen")是判断在donutString里是否有出现dozen
第三章
浏览器中运行js代码的部分称为JavaScript解释器
一旦网页传送到浏览器后,服务器大致就已退场了。事实上,网页传送完毕后,js的每项行为均限制在浏览器中。这一点使得网页负有更多责任,因为网页不用等待服务器处理和返回数据。这种处理就是js被称为客户端语言的原因
js多半不会直接与网络服务器有关系,因为它在客户机上独立运行。js通常用于拦截从服务器传递到浏览器的网络数据;但也可以编写向网站请求信息的脚本,然后于网页上呈现信息。
设定时间()
单次定时:
setTimeout("alert('wake up');", 600000); //等待10分钟而后弹出alert框的定时器
间隔定时:
setInterval("alert('wake up!');", 600000); //
clearInterval(timerID)这个函数用于清除setInterval()设置的间隔定时器,需要我们传入间隔定时器的ID
document对象代表网页本身
document.body文档主题是网页里能被看见的部分,包括客户端窗口的高度和宽度。
document对象的
body.clientWidth与body.clientHeight特性里存储了客户端窗口的宽度和高度。哭护短是浏览器窗口里呈现网页的特定区域。
网页上所有对象都有一个style对象。
设定高宽时,只需指定一个值,另一个会自动缩放。
浏览器改变大小时触发事件:
οnresize="func();"
脚本的生命周期(life cycle)
js于浏览器关闭或网页重新载入时摧毁所有变量
cookie延长脚本的生命周期。
想让变量值存活超过一次网页浏览,你需要另外把数据存储在浏览器里的cookie里。
cookie也可以设定有效日期(expiration date)
js+cookie=适合客户端、便利的持久性数据存储方案
cookie以长文本字符串的形式存储于用户的计算机里。分号;区分各个cookie
当js代码另外存储成另一个文件时,你必须把文件导入任何需要js代码的网页。
<script type="text/javascript" src=""cookie.js"></script>
shitty shit,似乎chrome是不接受未使用var声明的变量的,虽然这样在语法里也没错但是可能是内置严格模式????
啊 感觉每次出现的小错花费的代价都挺大的
function writeCookie(name,value,days)
{
var expires = "";
if(days)
{
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = ";expires=" + date.toGMTString();
}
var cookie = name + "=" + value + expires + "; path=/";
alert(cookie);
document.cookie = cookie;
}
function readCookie(name)
{
var searchName = name + "=";
var cookies = document.cookie.split(';');
for(var i=0;i<cookies.length; i++)
{
var c = cookies[i];
while(c.charAt[0] == ' ')
c = c.substring(1,c.length);
if(c.indexOf(searchName) == 0)
return c.substring(searchName.length,c.length);
}
return null;
}
function eraseCookie(name)
{
writeCookie(name,"",-1);
}
function greetUser(){
userName=readCookie("userName");//没找到return null userName是全局变量???
if(userName){
alert("hello "+userName+", I missed you.");
}
else {
alert("hello, I am your pet rock.");
}
alert("fuck you");
}
只有在指定的网页里,cookie名称才需要独特,因为cookie存储时会依创建它们的网页加上区隔,其中包含网页所在的网站信息
cookie只适合存储相对较少的文本数据(少于4kb)。大量数据要使用数据库。cookie也不适合存储敏感数据。
每个cookie都有有效日期。
cookieEnable特性是navigator对象的一部分,该对象为JS提供浏览器本身的信息
JavaScript活在浏览器里。
第四章
复合语句里出现的单一语句,还是需要加上分号,但是复合语句本身则不需要
函数就是符合语句
书中对switch讲得很好了。使用交互文字游戏。每次做抉择,都是在两个函数之间做选择,不管是在什么场景下,函数都是一样的,但是可以根据场景的不同来决定函数内的操作。 我觉得就是要模拟人类思维方式的本质。
还有src=""+whatever+"";
学会使用决策树。
作用域代表着数据的上下文
第五章 循环
var accept=confirm("seat"+(i+1)+" is available. Accept?"); //弹出框确认或取消的值
二维数组的每一行的长度确实可以都不一样,但是别冒这个险比较安全点。
我要把这个自己写一下
第六章 函数 简化
函数命名习惯也是用camelCase
回调函数
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。
回调函数被浏览器调用,以响应发生在脚本外的事情。
函数引用能像变量般指派函数。
函数引用让我们联结JS代码设计的事件处理函数,而不需改动HTML代码。
函数字面量:
window.οnlοad=function(evt){
initSeats();
};
第七章 表单与验证
为了访问表单的数据,首先需要区分表单中的每个域。这点可以利用HTML代码的ID或name属性(或二者并用)处理
每个表单域都有一个form对象,可被传给任何验证表单数据的函数。
form也是个数组,负责存储表单中所有域,但它的数组元素并非利用数值索引存储,而是使用域独有、于name属性设定的标识符。假设form对象作为自变量theForm传给某个函数
表单域能用于调用需要访问其它表单域的验证函数。
选择输入域:onfocus
在域里输入数据
离开该域,移至下个目标onblur/onchange
选择下个输入域
onchange事件与onblur有点相似,但它只在某个域不再被选择而且输入内容被改变时被触发。“onchange不可用于验证空域”
有许多响应键盘行为的事件,像onkeypress, onkeyup, onkeydown等等。
验证是否为空白域比验证其是否为满的容易
正则表达式:用于匹配文本模式
所有正则表达式均已斜线围起
字符串必须以定义的模式起始,不可使用数字
例如:/^\d{5}$/表示五个数字
一般形式:/ expression /
有一组称为元字符的特殊符号:
. 匹配任何字符,换行符除外
\s 匹配空格
\d 匹配任何数字字符
^ 字符串需以模式起始
\w 匹配任何字母数字
$ 字符串需以模式结束
/\w/ 任何一个字母数字字符
/^\d/ 字符串起始处需有一个数字
/\d/ 一个数字
/./ 任何一个字符
/cat$/ cat需为字符串的结尾
/\d\d\d/ 一行中有3个数字
/^cat/需为字符的起始
/\d\d$/ 字串结尾处需有两个数字
xxxxx-xxxx
/^\d\d\d\d\d-\d\d\d\d$/
限定符:
不是元字符的任何文字将于正则表达式里“照样匹配”。也就是说/howard/可找出任何包含“Howard”的字符串。限定符更厉害。
限定符前为子模式,限定符即应用在子模式,并控制子模式出现在模式里的次数。
(主要是我觉得这个学了用处很大的)
*限定符前的子模式必须出现0或多次。
+限定符前的子模式必须出现1或多次
?限定符前的子模式必须出现0或1次
{n}限定符前的子模式必须出现恰好n次
()集合字符或/和元字符,称为子模式
/\d{5}-\d{4}$/
使用元字符与限定符,可以创建相当强大、几乎可以匹配任何字符串内容的正则表达式。
/\w*/ 匹配任何字母数字字符,包括空字符串。
/.+/ 任何字符均需出现一次以上......用于匹配非空字符串。
/(hot)? ?Donuts/ 可匹配出“donuts”或“hot donuts”
正则表达式不是字符串,但是可以当成对部分字符串的描述。正则表达式与字符串紧密相关,且用于匹配出现在字符串中的文本模式,但正则表达式本身不是字符串
RegExp对象的test()方法用于检查字符串是否包含正则表达式模式。
var regex=/^\d{5}$/; 这个对象字面量自动创建RegExp对象。
if(!regex.test(inputField.value)
//the zip code is invalid
var regex=/^\d{2}-\d{2}-\d{4}$/
转义字符\
/^\w{5,8}$/ 有些密码可选择5~8个字符
选替(它跟js中的or逻辑运算符非常像,但它只用到一个|,而且它的公用是让模式指定一连串可供选择的子模式。)
this|that 如果匹配子模式this或that就行
/small|medium|large/ 使用多个选替元字符,即可指定多种匹配可能性
/(red|blue) pill/ 黑衣人??? red pill or blue pill
验证邮箱:
/^\w+@\w+\.\w{2,3}$/
点号需要转义,邮件地址必须以一或多个字母数字字符起始
@符号后至少出现一或多个字符
邮件地址结尾必须为2~3个字符的字母数字
字符类,让我们能再模式里创建受到紧密控制的子模式。也就是说,字符类擅长把非常着重于可选字符的规则建立到子模式中。
字符类总是以方括号围起。字符类是一组匹配单一字符的正则表达式规则。
第8章 利用DOM分隔HTML
DOM(Document Object Model)
getElementByTag()能抓住网页上所有特定类型的元素,例如div或img。结果是一个数组,并按照出现在HTML中的顺序排序
透过innerHTML特性,访问能够保存文本内容的元素。innerHTML取得元素的所有内容,包括HTML的标签。加上格式的HTML内容也存储在innerHTML特性里。
也经常用于设置HTML内容。
想设定元素的“innerHTML”该元素必须能够包含HTML的内容,所以innerHTML特性实际上用于设置内容类元素。
元素内容前后均有空格,视为空文本元素。
利用特性攀爬DOM数:
大部分与DOM的交互均以document对象开始,它是文档节点数的最上层节点。文档对象提供各种好用方法,例如getElement...以及许多特性。document对象的许多特性可由树上的每个节点取得,有些特性甚至能帮我们导向其它节点。也就是说,节点特性能用于导览节点数。
nodeValue,存储于节点的值,
只限文本域属性节点使用(不含元素)
nodeType 节点类型,例如它是DOCUMENT或TEXT等等,但以代号表示
childNodes 包含节点下所有子结点的数组,以出现在HTML代码中的顺序而排列
firstChild 节点下的第一个子结点
lastChild 节点下的最后一个子节点
这些特性就是巧妙操纵文档树以访问特定节点数据的关键。例如使用节点特性并加上getElementById()(访问节点的)方法,即可快速分离出某个节点。
DOM的文档树
DOM特性让我们能改变网页内容并维持与网络标准兼容
如果文本内容是个独立的文本节点,没有其他HTML元素,则这个文本节点将被放在第一个子节点的位置。
改变节点文本的(安全)三步骤
-
移出所有子结点 removeChild()移除目标节点下的一个子节点,传入将被移除的子节点
-
根据新内容创建新的文本节点 createTextNode()从文本字符串创建文本节点
-
把新创建的文本子节点附加在节点下。appendChild() 以最后一个子节点的形式加入新节点,传入将被新增的子节点
while(node.firstChild)
DOM重要的真正原因,其实是它能够把网页分解成细小的片段与部分。
所有节点都可按照类型区分:元素节点的类型是element,文本节点的类型则是TEXT
如果数据不止由纯文本构成,则分解成许多个子节点。某个父节点下的所有子节点将以数组存储。出现在父节点的childNodes特性里。
万用的节点文本替换函数:replaceNodeText(id, newText)
function replaceNodeText(id, newText){
varr node=document.getElementById(id);
while(node.firstChild){
node.removeChild(node.firstChild);
}
node.appendChild(document.createTextNode(newText));//文本节点真的纯文本
}
createTextNode函数只能在document对象里使用,因此不会直接与特定节点产生关联。
http://www.headfirstlabs.com/books/hfjs
DOM透过节点对象的className属性,提供对元素样式类的访问。
alert(document.getElementById("decision").className);
CSS样式组是一组样式,可应用到网页中的元素;而js的类是个创建js对象的模板。
可以使用className来选择不同样式。它们是完全不同的东西。
两个与鼠标相关的事件onmouseover和onmouseout
决策历程
var decisionElem=document.createElement("p");
decisionElem.appendChild(document.ceateTextNode("Decision 1-> Scene 1:Fork in the road"));
document.getElementById("history").appendChild(decisionElem);
第九章
在构造函数里创建特性时,你需要使用JS的关键字this。
动态生成格式丰富的HTML代码,DOM较为笨重。
Date()对象,设定日期数据的方法setMonth(), setYear()
取得日期数据的方法:getDate(), getDay(), getFullYear()
var now= new Date();