鱼C论坛

 找回密码
 立即注册
查看: 2914|回复: 6

[学习笔记] JS学习笔记

[复制链接]
发表于 2017-7-12 23:46:55 | 显示全部楼层 |阅读模式

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

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

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

评分

参与人数 1鱼币 +4 收起 理由
小甲鱼 + 4

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-7-12 23:50:05 | 显示全部楼层
浏览器为我们提供了一套对象体系  其中对象以层的方式组织起来 称为浏览器对象模型(BOM)  其顶层是 windows对象 。 它包含一些重要的子对象 如 location navigator history screen document .
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-7-12 23:52:54 | 显示全部楼层
location兑现共包含了 当前页面的位置信息 。 如文件名 包含页面的服务器 和所使用的协议 ,有些是只读的 而有些 如href是可读可写的 修改href可以改变导航到一个新的页面位置。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-7-12 23:58:55 | 显示全部楼层
history对象用来记录访问的页面,但有时不会记录下来(replace方法导航时不会)可以向前,向后查看访问的页面。
navigator对象表示浏览器自身(我猜测这是一个死的的浏览器公司?) 包含浏览器的类型 版本号 和 用户操作系统电脑信息 ,用于处理兼容问题 。
document 这个就不说了 之前就用了很多啦 。注意下这个实际上是集合属性 即links images forms集合。他们分别包含页面上由<a/> <img/> <form/>元素创建的所有对象 。
注意好玩的document.images[?].href = // 随便写数字  可更换图片的例子  也许以后写图片轮播能用上 。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-7-12 23:59:48 | 显示全部楼层
  天啊.....   我下回要排下版  这样写.....好丑啊...
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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()以及如何创建元素和文本 。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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


如何将代码连接到事件呢?
有三种方法:
1.        指定HTML属性
2.        指定对象的特定属性
3.        调用对象的特定方法
例1. 用HTML属性事件处理程序显示随机图片
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Hahahahaha</title>
  5. </head>
  6. <body>
  7. <img src="图片名" onclick = "changImg(this)" />
  8. <script>
  9. var myImages=[
  10. "图片名" * 4
  11. ]
  12. function changeImg(that){
  13. var newImgNumber = Math.round(Math.random() * 3);
  14. while (that.src.indexOf(myImages[newImgNumber])!= -1){
  15. newImgNumber = Math.round(Mat.random() * 3)
  16. }
  17. that.src = myImages[newImgNumber];
  18. }
  19. </script>
  20. </body>
  21. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 18:42

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表