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事件与方法
总结
和别的事情一起做，花了一个上午才将笔记搞定。
网友评论