JavaScript入门经典(第四版)读书笔记
第一部分 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更好
鼠标事件的兼容性写法