计算机基础
计算机组成
数据存储
数据存储单位
程序运行
解释型语言和编译型语言
标识符、关键字、保留字
初识JavaScript
JavaScript是什么
浏览器中的 JavaScript 能做什么?
现代的 JavaScript 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。
JavaScript 的能力很大程度上取决于它运行的环境。例如,Node.js 支持允许 JavaScript 读取/写入任意文件,执行网络请求等的函数。
浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。
例如,浏览器中的 JavaScript 可以做下面这些事:
- 在网页中添加新的 HTML,修改网页已有内容和网页的样式。
- 响应用户的行为,响应鼠标的点击,指针的移动,按键的按动。
- 向远程服务器发送网络请求,下载和上传文件(所谓的 AJAX 和 COMET 技术)。
- 获取或设置 cookie,向访问者提出问题或发送消息。
- 记住客户端的数据(“本地存储”)。
浏览器中的 JavaScript 不能做什么?
为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是受限的。目的是防止恶意网页获取用户私人信息或损害用户数据。
此类限制的例子包括:
-
网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件。它没有直接访问操作系统的功能。
现代浏览器允许 JavaScript 做一些文件相关的操作,但是这个操作是受到限制的。仅当用户做出特定的行为,JavaScript才能操作这个文件。例如,用户把文件“拖放”到浏览器中,或者通过 标签选择了文件。
有很多与相机/麦克风和其它设备进行交互的方式,但是这些都需要获得用户的明确许可。因此,启用了 JavaScript的网页应该不会偷偷地启动网络摄像头观察你,并把你的信息发送到 美国国家安全局。
-
不同的标签页/窗口之间通常互不了解。有时候,也会有一些联系,例如一个标签页通过 JavaScript打开的另外一个标签页。但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),它们都不能相互通信。
这就是所谓的“同源策略”。为了解决“同源策略”问题,两个标签页必须都包含一些处理这个问题的特定的 JavaScript代码,并均允许数据交换。
这个限制也是为了用户的信息安全。例如,用户打开的 http://anysite.com 网页必须不能访问http://gmail.com(另外一个标签页打开的网页)也不能从那里窃取信息。
-
JavaScript可以轻松地通过互联网与当前页面所在的服务器进行通信。但是从其他网站/域的服务器中接收数据的能力被削弱了。尽管可以,但是需要来自远程服务器的明确协议(在HTTP header 中)。这也是为了用户的信息安全。
如果在浏览器环境外(例如在服务器上)使用 JavaScript,则不存在此类限制。现代浏览器还允许安装可能会要求扩展权限的插件/扩展。
浏览器执行js
js的组成
js输入输出语句
变量声明特殊情况
代码风格
变量命名规范
变量的数据类型
简单数据类型(基本数据类型)
数字型Number
是数字返回false,不是返回true
字符串型String
获取数据变量类型
数据类型转换
转换为字符串类型
转换为数字型
布尔型
运算符
前置递增和后置递增
运算符优先级
作用域
断点调试
关键字break和continue
预解析
注意:
对象
三大对象
在JavaScript中提供三种自带的对象,分别是"本地对象" “内置对象” “宿主对象”
- 宿主:就是指JavaScript运行环境,js可以在浏览器中运行,也可以在服务器上运行(nodejs)
- 本地对象:与宿主无关,无论在浏览器还是服务器中都有的对象,就是ECMAScript标准中定义的类(构造函数),在使用过程中需要我们手动new创建.例如:Boolean、Number、String、Array、Function、Object、Date、RegExp等。
- 内置对象:与宿主无关,无论在浏览器还是服务器中都有的对象,ECMAScript已经帮我们创建好的对象.
在使用过程中无需我们手动new创建.例如:Global、Math、JSON - 宿主对象:对于嵌入到网页中的JS来说,宿主对象就是浏览器,所以宿主对象就是浏览器提供的对象,包含:Window和Document等.所有的DOM和BOM对象都属于宿主对象
自定义对象:我们自己编写的类创建的对象
创建对象的三种方式
利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象
构造函数与对象:
new关键字
for…in…遍历对象
内置对象
JS中常用的内置对象:Array对象、Date对象、正则表达式对象、string对象、Global对象等。
查文档
MDN
如何学习对象中的方法
数组对象
创建数组的两种方式
Array 对象方法
检测是否为数组的两种方式
字符串对象
基本包装类型
字符串的不可变
简单类型和复杂类型
数据类型内存分配
简单数据类型传参
复杂数据类型传参
Web APIs和js基础关联性
API和Web API
DOM
Dom继承关系图:
DOM树
如何获取页面元素
根据ID获取:
注意:
因为文档页面从上往下加载,所以先有标签,然后才能getElementById
参数是字符串,所以需要加引号
返回的是一个 element 对象
console.dir 可以打印返回的元素对象,更好的查看里面的属性和方法
根据标签名获取
通过HTML5新增的方法获取
支持HTML5的各主流浏览器的最低版本:
- IE9
- Firefox 3.5 Chrome 3.0
- Safari 3.0
- Opera 10.5