一、概念
脚本语言，不需要编译 其源代码在用户端浏览器上直接运行 有浏览器解析 是基于对象和时间驱动的语言，应用于客户端
1. 特点
（1） 交互性 信息的动态交互
（2） 安全性 不能访问本地磁盘文件
（3） 跨平台性 只要支持js的浏览器，都可以运行
2. JavaScript和java区别
（1） java 是oracle公司的 ，js网景公司
（2） js基于对象的，java是面向对象的
（3） java是强类型语言，js是弱类性语言
（4） js只需要解析就可以执行，java需要先编译成字节码文件，在执行
3. 组成
（1） ECMAScript：js的核心技术，描述了语言的语法和基本对象 脚本语言开发标准 ECMA:欧洲计算机协会
（2） BOM 浏览器对象模型 用来整合js和浏览器
（3） DOM 文档对象模型 用来整合js html css的技术
二、 基本语法
1.使用JavaScript代码，可以对浏览器中操作的部分
Window(整个窗口)location(地址栏)
History(历史)document(文档区域)
2. 书写规范
（1） 可以在网页的任何一个地方，但是位置越靠前，越早执行
（2） JavaScript的标签
a.内嵌：<script>JavaScript代码</script>
b.外链：<script src=”js文件名”> </script>
注意：不能再标签中间加入JavaScript代码
（3）语法
- 行尾结束:
用分号结束，也可以不写 ，用回车结束
- 变量：
任何变量的声明都是var，变量名区分大小写
字符串可以用双引号也可以用单引号，变量类型可以随时改变
- 注释：
单行// 多行/**/ 没有文档注释
- 弹框：
带输入框的弹框： prompt(“弹框上显示的文字”，”默认初始化值”)
弹出信息提示框 ： alert(“信息”) 文本框输入的都是string类型
- 类型转换：
parseInt() 解析字符串，并返回浮点数 pareseFloat() 解析字符串，并返回一个整数
（4）数据类型
- 基本类型
number(数字)
string字符串 双引号 单引号都行
Boolean 布尔
Undefined 只有一个值undefined 未初始化变量
Null 只有一个值null,表示尚未存在的对象
- 引用数据类型：
类、数组
（5）运算符
和java一样 特殊的 ”===”
”===” 和”==”区别： ”==” 比较的是值，不考虑数据类型
”===” 相当于比较的是引用（值和类型）
（6）条件语句和循环语句和java一样
（7）方法的定义
用function关键字声明 后面跟着方法名 参数列表（不写var） 不写返回值类型 返回值：如果写了return 就有，没有写就没有
获取文本框的名 表单名.标签name属性.value
（8）与计算有关的方法
IsNaN() 返回true或者false 如果不是一个数，返回数 如果是数，返回false
Eval()方法 计算表达式的值
（9）JavaScript 引用类型 创建对象（不需要创建类）
创建对象并且赋值：
（10）JavaScript Array对象
创建数组类型的方式：
获取数组的长度 length()
常用方法：
join() 将数组中的元素组成字符串 默认用逗号分隔
reverse() 反转
sort() 排序 （数组里的数据类型要统一）
（11） JavaScript 循环
金字塔：
根据输入的值输出相应的结果
三、常用对象
三类对象：
浏览器对象：window location history document
脚本对象： String RegExp Math
Date HTML对象：各种HTML标签
脚本对象：
- String 字符串
（1）使用位置索引可以访问字符串中任何字符 从0开始
（2）长度属性length 计算字符串的长度
（3）使用indexOf()来定位某个字符串中指定字符第一次出现得位置
（4）match() 用来查找字符串中特定字符，如果找到，返回字符本身，没找到返回null 严格区别大小写
（5）replace() 替换
（6）字符串大小写转换 返回新字符串 原来的没变 toUpperCase()
toLowerCase()
（7）Split 按照某个字符切割，返回数组
- RegExp 正则对象
RegExp对象 标识正则表达式 是对字符串进行模式匹配的强大工具
语法：
第一种:var patt=new RegExp(pattern,modieries);
第二种：var patt=/pattern/modieriesPattern:规则，就是正则
Modidieries：用于执行匹配 不区分大小写、全文匹配
i:用来执行 不区分大小写匹配
g:用来执行全文搜索
- Math 数学
Math.rondom() 随机数 包含0不包含1
Math.round() 四舍五入
Math.ceil() 向上取整
Math.floor() 向下取整
两秒自动刷新
- Date 日期
获取时间： 起始1970-1-1
Seconds 和 minutes 0-59
Hours 0-23
Day 0-6
Date 1-31 月份中的天数
Months 0-11
- BOM 和 DOM的区别：
BOM —> window里的内容
DOM —> document里的内容
因为document对象是在window中的 所以可以使用 window.document来调用 从BOM对象再访问到DOM对象 从而js 可以操作浏览器 以及 浏览器读到的文档
document 对象是 DOM模型的根节点
window 对象是 BOM模型的根节点
浏览器对象BOM:
- 事件 发生并得到处理的操作
| 属性 | 解析 |
|---|---|
| onClick | 鼠标单击 |
| onSubmit | 表单提交事件 |
| onChange | 文本内容 或者 下拉列表中的选项发生改变 |
| onFocus | 获得焦点 表示文本框等 获得鼠标的光标 |
| onBlur | 失去焦点 表示文本框等失去光标 |
| onMouseOver | 鼠标悬停 即鼠标停留在 xx等上方 |
| onMouseOut | 鼠标移出 即鼠标离开xx等区域 |
| onMouseMove | 鼠标移动 表示在xx等上方移动 |
| onMouseDown | 鼠标按下 |
| onMouseUp | 鼠标弹起 |
| onLoad | 网页文件加载事件 |
常用浏览器对象
window
| 属性 | 解析 |
|---|---|
| document | 文档区域 |
| history | 客户访问过的url信息 |
| location | 当前url的信息 地址栏 |
| status | 底部状态栏 |
| screen | 有关客户端的屏幕 和 显示性能 |
方法
alert("提示信息")显示包含消息的提示框
prompt("提示信息",0)弹出一个带有输入框的提示框
confirm("提示信息")弹出一个带有 确认和 取消 按钮的提示框open("url","name")打开具有指定名字的新窗口 并且加载给定的url页面
open("url","name","属性列表")属性列表键值对 用等号连接 用逗号分隔多个属性
close()关闭open打开的窗口
setTimeout("函数",毫秒值)设置定时器 经过制定的毫秒值 调用某个函数
clearTimeout(定时器对象)清除定时器
window.方法名 调用的时候 window可省略
document
| 属性 | 解析 |
|---|---|
| alinkColor | 设置或检索文档中所有活动链接的颜色 |
| bgColor | 设置document对象的背景颜色 |
| linkColor | 设置或检索文档链接的颜色 |
| location | 关于当前url的信息 |
| vlinkColor | 设置或检索用户访问过的连接颜色 |
| fgColor | 设置文档中文本的颜色 |
history
方法
back()相当于后退按钮
forward()相当于前进按钮
go(url or number)加载history列表中的一个url 或者 要求跳转到的页面数
location
包含有关当前url的信息 Location对象是window的一个组成部分 可以通过 window.location来访问到
| 属性 | 解析 |
|---|---|
| host | 获取url主机名及端口号 |
| hostname | 获取主机名部分 |
| href | 完整的url字符串 |
方法
reload()重新加载当前页 刷新
assign("url")加载url指定的新的html文档 不会将源页面覆盖 可以点击后退 返回上一个页面 没有修改history
replace("url")加载url指定的新的html文档 替换当前页面 覆盖掉原来的历史记录
文档对象 DOM —> 表单处理部分
功能 使用DOM技术 可以控制页面中html标签和css标签
web标准下可通过以下方法获取元素
getElementById("id")根据元素id获取元素对象
getElementsByName("name")根据元素name属性 来获取元素对象
getElementsByTagName("tagName")根据html元素标签名 获取
innerHTML属性 用来设置 / 获取 位于对象起始标签 和 结束标签之间的HTML内容 返回值是一个字符串
- 下拉列表
省市二级联动
1 var x = new Option(“>显示的内容<”,value);
创建一个列表项 第一个参数<option>文本</option>
第二个参数<option value=?></option>
2.add(x) 将option列表项对象添加到 下拉列表select标签中 动态加入下拉列表的内容
- 文本框
focus() 获得焦点 火狐有问题
select() 选中文本内容 突出显示输入区域
- 按钮
onclick() 点击
onsubmit() 表单提交事件 点击 “提交” 按钮 触发 此事件属于form表单 不属于提交按钮 此事件 有返回值 true —> action属性提交 false —> action属性不提交
- 复选框 和 单选框
单选框 和 复选框 都是 数组
checked 被选中 如果被选中 返回 true 否则 返回false
