JavaScript
博客地址：http://blog.csdn.net/heyiaiqing/article/details/73975094
1. 什么是JavaScript
JavaScript介绍
2. JavaScript的作用
使用JavaScript添加页面动画效果，提升用户体验，主要应用有：嵌入动态文本于HTML页面、对浏览器事件作出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
3. JavaScript的引入方式
在HTML中添加JavaScript脚本
<script type="text/javascript">
// 这里面是一些JavaScript代码
</script>
在script标签的src属性中引入.js文件
<!-- JavaScript代码在1.js中 -->
<script src="1.js" type="text/javascript" charset="utf-8"></script>
4. 基本语法
1. 变量
命名规范
和其他语言一样：
- 字母、数字、下划线组成
- 不能以数字开头
- 区分大小写
- 不能用关键字命名
变量的声明
var 变量名; // 可以不赋值直接使用,默认值undefined
变量的赋值
var 变量名 = 值; // JavaScript变量是弱类型,一个变量可以存放不同类型数据
2. 数据类型
基本数据类型
- Undefined,Undefined类型只有一个值,即undefined,变量未初始化的默认值为即undefined
- Null,只有一个专用值null,表示空,一个占位符.值undefined是从null派生来的，定义null和undefined相等
- alert(null==undefined) // 输出true
- Boolean,有两个值true和false
- Number,表示任意数字
- String,字符串由双引号"或者单引号'声明。JavaScript没有字符类型
引用数据类型
- 引用数据类型通常叫做类(class),也就是说,遇到引用值，所处理的就是对象
- JavaScript是基于对象而不是面向对象.对象类型的默认值是null.
- JavaScript提供众多预定义引用类型(内置对象)
3. 运算符
JavaScript运算符与Java的基本一致
算术运算符
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x = y + 2 | x = 7 |
| - | 减 | x = y - 2 | x = 3 |
| * | 乘 | x = y * 2 | x = 10 |
| / | 除 | x = y / 2 | x = 2.5 |
| % | 求余数 | x = y % 2 | x = 1 |
| ++ | 累加 | x = ++y | x = 6 |
| -- | 递减 | x = --y | x = 4 |
赋值运算符
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x = 5 | |
| += | x+=y | x = x + y | x = 15 |
| -= | x-=y | x = x - y | x = 5 |
| *= | x*=y | x = x * y | x = 50 |
| /= | x/=y | x = x / y | x = 2 |
| %= | x%=y | x = x % y | x = 0 |
比较运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x==8为false |
| === | 全等 | x === 5 为true x==="5"为false |
| != | 不等于 | x != 8 为true |
| > | 大于 | x > 8 为false |
| < | 小于 | x < 8 为true |
| >= | 大于或等于 | x >= 8 false |
| <= | 小于或等于 | x <= 8 为true |
逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) true |
| === | or | (x == 5||y == 5) false |
| != | not | !(x==y) true |
4. 基本操作
- alert()：向页面中弹出一个提示框
- innerHTML：向页面的某个元素中写一段内容，将原有的东西覆盖
- document.write()：向页面中写内容
5. 案例一些操作
代码操作
if(loginName=="") {
// 判空的操作
}
函数返回false表示该操作不执行,比如onsubmit="return check();",当该操作为false时,提交操作不执行
正则表达式
正则表达式.test(email)
String中有一个match方法
函数
正常声明函数
// 声明函数
function fun1() {
alert("案例1");
}
fun1(); // 调用函数
匿名函数
// 声明匿名函数
var fun2 = function() {
alert("案例2");
}
fun2(); // 调用函数
定时器 setInterval
window.setInterval(code, millisec)
参数1：code 必须。执行函数名或者代码字符串
参数2：millisec 必须。时间间隔,单位：毫秒。
返回值：一个可以传递给window.clearInterval() 取消定时的代码执行,window可以省略
页面加载事件
window.onload = function() {
// 这里就是页面加载的事件
}
定时器 setTimeout
window.setTimeout(code, millisec)
参数1：code 必须。执行函数名或者代码字符串
参数2：millisec 必须。等待的毫秒数。
取消定时器
window.clearInterval()
window.clearTimeout()
dearInterval()
dearTimeout()
修改style的属性
objDiv.style.height = 123 + "px"
...
6. BOM
1. Window对象
// 定时器
window.setInterval(code, millisec)
window.clearInterval()
window.setTimeout(code, millisec)
window.clearTimeout()
// 消息框
alert()
confirm()
prompt()
获取Window尺寸
获取Window尺寸
获取Window尺寸
2. Location对象
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从#号开始的 URL(锚) |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前 URL的主机名 |
| href | 设置或返回完整的 URL |
| pathname | 设置或返回完整的 URL路径部分 |
| port | 设置或返回当前 URL 的端口号 |
| protocol | 设置或返回当前 URL 的协议 |
| search | 设置或返回从问号(?)开始的URL(查询部分) |
3. History对象
forward()
back()
go()
go(1) == forward()
go(-1) == back()
| 方法 | 描述 |
|---|---|
| back() | 加载history列表中前一个 URL |
| forward() | 加载history列表中下一个URL |
| go() | 加载history列表中某个具体的URL |
7. 标签体内容：innerHTML
获得：document.getElementById("divid").innerHTML
设置：document.getElementById("divid").innerHTML="..."
常见事件
| 事件名 | 描述 |
|---|---|
| onsubmit | 提交按钮被点击 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
获得指定id的值
将getElementById(objId).value进行封装
function val(objId) {
return document.getElementById(objId).value;
}
常见事件
常见事件
Event事件与方法
Event事件与方法
总结
和别的事情一起做，花了一个上午才将笔记搞定。