luciferCc++ 发表于 2017-7-12 23:46:55

JS学习笔记

参考书籍:《JavaScript》入门经典。
学习进度:已经了解玩JS本身的简单语法 。
本次学信内容:浏览器程序设计(相关对象方法)
小结:
浏览器为JS提供的对象集合成为浏览器对象模型( Browser Object Model ) 本次学习了 window history location navigator 以及新添加的 geolocation ,screen 和document 对象 还有 imageslinks 对象 。
还学习了 使用特性检测方法 判断浏览器是否支持相关特性 如下:if (navigator.geolocation ){
//use geolocation    为避免歧义可使用typeof ,若使用 应加载 navigator前。 这样本例中会返回一个 “undefined” 详情可百度 。
}

luciferCc++ 发表于 2017-7-12 23:50:05

浏览器为我们提供了一套对象体系其中对象以层的方式组织起来 称为浏览器对象模型(BOM)其顶层是 windows对象 。 它包含一些重要的子对象 如 location navigator history screen document .

luciferCc++ 发表于 2017-7-12 23:52:54

location兑现共包含了 当前页面的位置信息 。 如文件名 包含页面的服务器 和所使用的协议 ,有些是只读的 而有些 如href是可读可写的 修改href可以改变导航到一个新的页面位置。

luciferCc++ 发表于 2017-7-12 23:58:55

history对象用来记录访问的页面,但有时不会记录下来(replace方法导航时不会)可以向前,向后查看访问的页面。
navigator对象表示浏览器自身(我猜测这是一个死的的浏览器公司?) 包含浏览器的类型 版本号 和 用户操作系统电脑信息 ,用于处理兼容问题 。
document 这个就不说了 之前就用了很多啦 。注意下这个实际上是集合属性 即links images forms集合。他们分别包含页面上由<a/> <img/> <form/>元素创建的所有对象 。
注意好玩的document.images[?].href = // 随便写数字可更换图片的例子也许以后写图片轮播能用上 。

luciferCc++ 发表于 2017-7-12 23:59:48

{:10_269:}天啊.....   我下回要排下版这样写.....好丑啊...

luciferCc++ 发表于 2017-7-14 00:44:16

时间:2017-7-13
学习内容:编写DOM代码。
简单了解了下浏览器大佬的斗争历史.....    我是真的好遗憾.... 市场还是没能完全统一。
JS的标准是由ECMA提出的 一般见到的ECMAScript就是这个而起这个名字竟然是为了不偏向任何一个厂商 保持中立....
下面正题:
        1.了解了 DOM 与BOM的区别 : Bom是浏览器模型 DOM仅仅包含Web页面的文档。
        2.了解了HTML文档的树形结构 html 是根节点 一般下来是 head 和 body结点。
        3.了解了DOM的三个核心对象Node (文档每个节点都有自己的Node) NodeList(这是Node对象的列表) NamedNodeMap(这是允许按名称而不是按索引访问所有Node对象)。
        4.了解了一些Dcument对象的方法 比如 getElementById()getElementsByTagName() querySelector() querySelectorAll()以及如何创建元素和文本 。

luciferCc++ 发表于 2017-7-24 01:01:11

2017-7-24
学习内容:在了解了BOM DOM之后了解了事件
时间分为几个类型 :
1.        鼠标事件
2.        键盘事件
3.        进度事件:这些事件比较一般,在对象的不同阶段发生,例如文档加载时 。
4.        表单事件:表单上的某个内容改变时发生
5.        触摸事件:用户轻触感应器时发生
6.        错误事件: 出错时发生


如何将代码连接到事件呢?
有三种方法:
1.        指定HTML属性
2.        指定对象的特定属性
3.        调用对象的特定方法
例1. 用HTML属性事件处理程序显示随机图片
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hahahahaha</title>
</head>
<body>
<img src="图片名" onclick = "changImg(this)" />
<script>
var myImages=[
"图片名" * 4
]
function changeImg(that){
var newImgNumber = Math.round(Math.random() * 3);
while (that.src.indexOf(myImages)!= -1){
newImgNumber = Math.round(Mat.random() * 3)
}
that.src = myImages;
}
</script>
</body>
</html>
页: [1]
查看完整版本: JS学习笔记