JS学习笔记

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

参考书籍：《JavaScript》入门经典。
学习进度：已经了解玩JS本身的简单语法。
本次学信内容：浏览器程序设计（相关对象方法）
小结：
浏览器为JS提供的对象集合成为浏览器对象模型（ Browser Object Model ) 本次学习了 window history location navigator 以及新添加的 geolocation ， screen 和 document 对象还有 images links 对象。
还学习了使用特性检测方法判断浏览器是否支持相关特性如下：

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

天啊..... 我下回要排下版这样写.....好丑啊...

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[newImgNumber])!= -1){
newImgNumber = Math.round(Mat.random() * 3)
}
that.src = myImages[newImgNumber];
}
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[学习笔记] JS学习笔记

马上注册，结交更多好友，享用更多功能^_^

评分