深入浅出js-读书记录 4/27

<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元素,则这个文本节点将被放在第一个子节点的位置。

改变节点文本的(安全)三步骤
  1. 移出所有子结点 removeChild()移除目标节点下的一个子节点,传入将被移除的子节点
  2. 根据新内容创建新的文本节点 createTextNode()从文本字符串创建文本节点
  3. 把新创建的文本子节点附加在节点下。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();



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值