正文

JavaScript入门经典（第四版）读书笔记

IP云
IP云V管理员/5 阅读
10/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

第一部分 Web脚本编写与JavaScript语言的概念

1.document.lastModified（）    ->    返回文档修改日期

2.<head>标签中的<script>不能创建输出   所以适合定义以后要使用的函数

3.DOM包含用于处理当前文档各个方面的对象，以便控制整个页面

4.ECMAScript是JavaScript的标准版本

5.<script>上可以指定JavaScript版本  如<script  LANGUAGE = "javascript 1.2"  或  type = "text/javascript1.2">

6.世界时间（UTC）是以过去的格林威治时间标准计算的   date.toGMTString()  输出成世界时间   js1.2以前的用法  1.2之后用toUTCString()

7.JavaScript大小写敏感

8.prompt(text，defaultText)  ->  是html dom window的对象     用于显示可提示用户的输入框

参数可选  text为提示用户的纯文本   defaultText为用户出入框的默认值

返回值

如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

9.对象分为内置对象 ，文档对象模型，自定义对象

内置对象如Date Array Math  String

文档对象模型（DOM）

对于dom及document与window的关系参见  https://www.cnblogs.com/liuyandeng/p/5330716.html

10.运行脚本的顺序

（1）先执行<head>中的js段

（2）再按顺序执行<body>中的js段

（3）最后，当事件发生时，事件处理程序被执行

11.js语法规则

（1）js关键词必须小写

（2）内置对象以大写字母开头

（3）dom对象的属性常小写，方法大小写混合

12.js注释

行注释  //    和    块注释/**/

13.什么叫面向对象

把数据及对数据的操作方法放在一起，作为一个相互依存的整体——对象。对同类对象抽象出其共性，形成类。类中的大多数数据，只能用本类的方法进行处理。类通过一个简单的外部接口与外界发生关        系，对象与对象之间通过消息进行通信。程序流程由用户在使用中决定。

14.DOM不是js的一部分，而是内置在浏览器的一个应用程序接口（API）,其他语言，如java等也可以使用

15. DOM对象的层次

16.window对象表示一个浏览器窗口

document对象表示一个web文档或一个页面    web文档在浏览器窗口显示，所以很明显document是window的子对象   当有多个窗口和文档时 要指明窗口和文档 如window.document

17.document对象

因document对象的几个属性通常包含当前文档的信息，所以可以用来获取文档的信息，也可以写入文档

document.URL               指明文档的URL地址  但不可改变 只是简单的字段。如果要更改地址，应该使用window.location

document.title                列出当前页面的标题  对应html的<tltle>

document.referrer          用户所浏览的上一个页面的URL

document.lastModified  文档最新修改时间，这个日期有服务器发到页面

document.bgColor/fgColor       文档的背景和前景颜色  对应<body>标签的BGCOLOR 和 TEXT属性

document.linkColor document.alinkColor  document.vlinkColor    文档中链接的颜色  对应<body>标签的 link alink vlink属性

document.cookie           允许读取和设置一个文档的cookie

document.write/document.writeIn   前者正常写入 后者写入后再添加一个\n

18.link对象

document的子对象，在文档中可以有多个link对象，每个对象都包括链接到其他网址的信息  可以用link数组访问link对象

document.link.length  文档中link的数量

19.anchor对象

document的子对象，每个anchor对象代表了当前文档的anchor（anchor是可以直接跳转的特殊位置）   可以用anchor数组访问anchor对象

document.anchor.length  anchor数组的成员数

20.history对象

window的子对象，该对象保存着浏览器当前地址之前和之后访问过的网址信息，也包含到达前一地址和后一地址的方法

history.length   保存了历史列表的长度

history.go（）         打开历史列表的一个网址  参数要填  如history（-2）向后退两个网址

history.back()          载入历史列表的前一个网址

history.forword()     载入历史列表的后一个地址

history有current，previous，和next三个属性用来存储历史列表的URL  当当前浏览器不允许正常访问

21.location对象

window对象的子对象，该对象存储当前窗口的当前URL网址信息   如  window.location.href = "www.baidu.com"  该语句为载入一个新网址到当前窗口

location属性

location.protocol               网址的协议部分

location.hostname            网址的主机名

location.port                      网址的端口号

location.pathname            网址的文件名

location.search                 网址的查询部分

location.hash                    网址中使用的anchor部分

虽然window.location.url和document.url的属性相同，但document.url不可更改，所以用location.url加载新页面

location对象的方法

location.reload()               刷新当前文档 若参数为true  则会忽略缓存，强制刷新页面

location.replace()             替换一个新的位置  即和设置location.href相同，但是不会影响浏览器的历史，即不能用后退按钮返回

第二部分 学习JavaScript基础

1.任何在函数内用var声明的变量都是局部变量，此外在函数参数列表内的变量也是局部变量

2.数据类型之间的转换

string.parseInt()  /   string.parseFloat()      从字符串的第一个字符开始读取一个数字并返回值 忽略非数字部分  若为匹配到数字 则返回NaN非数  但是数字所在位置必须是首位开始，并且若数字之间有字符 那    么将不继续读取

3.string.length属性是只读属性  故不能更改

4.string.toUpperCase() / string.toLowerCase()   将字符转换为大写或者小写  但不改变string本身

5.字符串的方法

string.substring(start,stop)    返回从start到stop-1的字符串  索引从0开始   参数不接受负值  若start == stop 返回空串  若start > stop 则函数会先将两数调换再执行

string.charAt(index)              从字符串中拿出一个字符，参数决定位置，索引从0开始

string.indexOf(str,start)         从string字符串中查找str字符串   返回str所在位置的索引   第二个参数可以省略   不省略是第二个参数为查找开始的位置索引   第二个参数可用来寻找重复的字符串

string.lastIndexOf(str,start)   从string字符串中查找str字符串  与上述不同的是 该函数从后向前检索

6.数组

创建数组

var a = new Array(3)   或者  new Array(1,22,4)   //创建一个拥有三个元素的数组

var a = [1,22,4]

分离字符串

string.split(" ")   引号中为分离字符串的凭借  如该例为以空格分离string字符串

合并字符串

string.join(" ")    引号中为合并后隔开string数组各部分的字符   该例为空格  不写默认逗号分隔

排序字符串

string.sort()       以英文字符顺序排序string数组的元素

数值数组排序

arr.sort(compare);      var compare = function(a,b) {return a-b}        从小到大排列        return b-a   从大到小排列        原理  返回负值时  前者应在后者后面   其他情况同理

7.函数

（1）prototype关键字

允许在对象构造函数外修改对象的定义

（2）with关键字

指定一个对象，后面跟着括在大括号里的一大块语句，对于块语句的每一条语句，没有指定对象的属性都将假定为该对象的属性

如  with（lastname）{

window.alert(toUpperCase())}         等同于lastname.toUpperCase();

（3）for  ...  in...循环    如   for（i  in  arr）   i表示每一个arr的属性

（4）Math内置对象

Math.ceil(num)      向上一个数取整

Math.floor(num)     向下一个数取整

Math.round(num)   四舍五入       模拟保留小数  如两位      Math.round(num*100)/100

Math.random()          返回0-1的随机数        随机生成1-指定数M的随机数          Math.floor(Math.random()*M+1)

（5）Date内置对象

js的时间存储从1970年午夜开始  这种日期被称为历元      1970年之前可用负值表示

创建时间对象的四种方式

birthday = new  Date（）；

birthday = new  Date（3，11,1997,9，0,0）

birthday = new  Date（3，11,1997）

birthday = new  Date（“may 11，1997 09:00:00” ）

设置和读取Date的值

setDate（）                               getDate（）                     设置/读取某月某日

setMouth（）                            getMouth（）                    设置/读取月     js0-11表示月份

setFullYear()                             getFullYear()                      设置/读取年

setTime（）                              getTime（）                      设置/读取时间       以1970年1月1日起算的毫秒数值表示

setHours/minutes/seconds（）  等                                     setUTCYear()    在上述添加UTC字样则是世界时间

getTimeZoneOffset()                  获得当前时区时间与UTC之间的差值

日期格式的转换

Date.parse()                      转换日期字符串         如将日期转换成Date对象

Date.UTC()                         将Date对象转换成UTC时间

章节8.7程序库有时间研究下

第三部分  深入学习DOM

1.W3C的DOM标准定义了一个函数addEventListener() 为特定事件和对象定义一个监听程序，允许添加任意数量

2.DOM提供一个event对象，保存了事件发生时的详细信息

3.基于Mozilla的浏览器（如Firefox  Netscape）event会自动传递给事件处理程序函数

但是在IE中  最近发生的事存储在window.event上   所以传递后无法使用     故  应该做一个适应  即  var e = event || window.event

4.ie4.0及以上版本的event属性

event.button    按下的鼠标键   左键为1 右键为2

event.clientX   事件发生位置的X坐标（以像素为单位）

event.clientY   事件发生未知的Y坐标

event.altkey/ctrlkey/shiftkey     事件发生时有没有按下alt ctrl 或shift键

event.keyCode   所按键的键码（用Unicode表示）

event.srcElement    元素出现的对象

5.Netscape和Firefox的event属性

event.modifiers   事件发生时按下了哪个修饰符（Alt shift Ctrl）该属性值为整数 是不同键的二进制数值的组合

event.pageX       事件在网页的x坐标   是以事件发生处元素的左上角为基点  并不总是鼠标指针的实际位置

event.pageY       事件在网页的y坐标

event.which        键盘事件的键码（Unicode表示） 或者鼠标事件按下的键

event.button       按下的鼠标按键   左键为0   右键为2

event.target        元素出现的对象

6.使用鼠标事件

onMouseIn                鼠标移入dom元素发生的事件

onMouseOut             鼠标移出dom元素发生的事件

onMouseOver           鼠标经过dom元素发生的事件

onMouseDown          鼠标按下

onMouseUp               鼠标抬起

onClick                      鼠标点击

window.confirm()       用于显示一个带有提示语的有确定取消的对话框  有返回值     可以用来提示  如  onclick = “window.comfirm('您是否确认删除')”    点击确认返回1   点击取消返回0

浏览器通常不会检测鼠标右键的onclick和onDblClick（）    所以检测右键用onMouseDown更好

鼠标事件的兼容性写法

           function mouseEvent(e){
                 var event = e || window.event,
                       which;
                       which = (event.button < 2) ? "left" : "right";
                       console.log("你按下的是" + which);
           }
7.键盘事件
    onKeyPress                键盘一次点击或按住不放
    onKeyDown                键盘按下
    onKeyUp                    键盘抬起
    ASCII码用0~128的数值表示各种字符  其中65-90表示A-Z
    String.fromCharCode()   可以将括号中的数值转化为他对应的字符
    键盘事件的兼容性写法
           function keyEvent(e) {
                var event = e || window.event,
                      which;
                which = (event.keyCode) ? event.keyCode : event.which;
                console.log(String.fromCharCode(which));
           }
8.onLoad与onUnload事件
   由于onLoad事件发生在页面加载完之后 所以事件函数中不能使用document.write 否则会覆盖原始页面
   window.onLoad或在body标签设置onLoad事件
   onUnload事件是在浏览器卸载当前文档时发生    （一般是浏览器跳转到其他页面前发生）
9.发生事件元素的兼容
   target = event.target || event.srcElement;
10.<img>标签的onMouseOver事件可能会不生效  这是用a标签包裹就可以解决
11.DOM对象控制窗口
    window对象始终指向当前的窗口（包括 脚本的窗口），self关键字也是当前窗口的代名词
    window对象的属性   
      window.closed       表示窗口是否已被关闭  适用于多窗口情况   因为当前窗口含有脚本 脚本未结束前不能关闭
      window.frames[]    针对框架的对象数组
      window.name        为框架指定的名称
      window.opener      在脚本打开的窗口中是否包含打开窗口的脚本  ？？？
      window.parents     对于框架来说  是包含该框架的父窗口
      window.screen       存储窗口所在屏幕信息的子对象 -- 分辨率 色度等    属性包括 height width  avaiHeight (可用高度)  colorDepth  显示器支持的颜色
      window.self            当前window对象的代名词
      window.top            使用框架时对顶层窗口的使用
12.创建新窗口
winObj = window.open("url","windowName","Feature List")       winObj变量存储新的window对象    第一个参数为空 则不会加载任何网页  这时可用Js向窗口添加内容    第二个参数为窗口名称  被赋予为window.name的name属性 用于引用该窗口  第三个参数为可选特性列表  是否包含工具栏状态栏等      
例子
SmallWin = window.open("","small","width = 200,height = 100, toorbar = 0");
13.关闭窗口
window.close()      浏览器要求关闭时请求用户同意
14.移动和调整窗口大小
window.moveTo()       参数决定窗口移动的x,y
window.moveBy()       根据当前位置移动窗口   
window.resize()          改变窗口的大小   由参数决定大小
window.resizeBy()      根据当前大小改变窗口大小
15.定时器
time1 = setTimeout("alert()",10000)      第一个参数为执行函数        第二个参数为间隔时间     只执行一次
clearTimeout(time1)                              清理定时器
time2 = setInterval("alert()",10000)       循环定时器     每个10S 执行一次函数
clearInterval(tine2)                                清除定时器
16.window对象的显示对话框
     window.alert（message）         用于显示警告对话框  
     window.confirm(message)         显示带有确定和取消按钮的对话框  点击确定 返回true   点击取消  返回false
     window.prompt("","")                  第一个参数为提示信息  第二个参数为输入框默认信息   弹出一个带有提示信息的输入框    输入框为空返回null   否则返回输入框信息
17.使用框架、当一个窗口有多个框架时 ，每个框架在js中都由一个frame对象表示。该对象等效于window对象，但是专门处理框架。frame对象的名称与在<frame>中的name属性相同。
     用于引用当前窗口的window和self对象 在框架中引用当前框架  关键词parent引用主窗口   每个框架都是parent窗口对象的子对象
     在嵌套框架集中  window仍然代表当前框架  parent代表含有当前框架的框架集，而top代表含有所有其他框架的主框架集
     frame数组和名称都可以引用框架
18.表单元素
    从<form>开始，到</form>结束 
           该标签属性 name  表单的名称   
           method  -->  get/post   向服务器传输数据的两种方式   
           action  是CGI脚本  表单数据在提交时被发送  也可以是mailto:action 
           enctype 是表单数据加密时采用的MIME类型   
    JavaScript中都由一个form对象表示表单   名称与标签中name相同   也可以用forms数组表示   document.forms[0]
    form对象的属性
        action                是表单的action属性，或者接受表单数据的程序
        encoding           是表单的MEMI类型   用enctype属性定义
        length                是表单中的元素数量   只读
        method              对应表单中的method属性
        target                 指定用来显示表单结果的窗口
        elements数组     元素中的表单元素     如document.form1.element.length  form1中的表单元素    document.forms.length   文档中的表单元素
    提交 重置表单
           form对象的两个方法  submit（）和reset（）
           form对象有两个事件处理程序        onSubmit()   onReset()    可以通过事件处理程序返回false   进而取消事件
      DOM访问表单对象
            document.gerElementById()
      form标签内部元素
              文本字段   <input  type = "text"   name = "text1"  value = "hello"  size = "30">     defaultValue    是字段的默认值   只读属性   value  字段当前值  可更改
              文本区域   <textarea  name = "text2"   rows = "2"  cols = "20">   rows设置行   cols设置列
                     上述两种文本对象的方法
                             focus（）    聚焦在字段中
                             blur（）      焦点离开该字段
                             select（）   选择字段中的文本   所有文本都会被选中   无法值选择部分文本
                     上述两种文本对象的事件
                             onFocus事件
                             onblur事件
                             onChange事件         出现在用户修改字段中的文本后将光标移出该字段时
                             onSelect事件