003 JavaWeb之JavaScript入门

JavaScript

简书地址：http://www.jianshu.com/p/07e8515a047f

1. 什么是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. 变量

命名规范

和其他语言一样：
1. 字母、数字、下划线组成
2. 不能以数字开头
3. 区分大小写
4. 不能用关键字命名

变量的声明

var 变量名; // 可以不赋值直接使用,默认值undefined

变量的赋值

var 变量名 = 值; // JavaScript变量是弱类型,一个变量可以存放不同类型数据

2. 数据类型

基本数据类型

1. Undefined,Undefined类型只有一个值,即undefined,变量未初始化的默认值为即undefined
2. Null,只有一个专用值null,表示空,一个占位符.值undefined是从null派生来的，定义null和undefined相等
3. alert(null==undefined) // 输出true
4. Boolean,有两个值true和false
5. Number,表示任意数字
6. String,字符串由双引号”或者单引号’声明。JavaScript没有字符类型

引用数据类型

1. 引用数据类型通常叫做类(class),也就是说,遇到引用值，所处理的就是对象
2. JavaScript是基于对象而不是面向对象.对象类型的默认值是null.
3. 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. 基本操作

1. alert()：向页面中弹出一个提示框
2. innerHTML：向页面的某个元素中写一段内容，将原有的东西覆盖
3. 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尺寸

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事件与方法

总结

和别的事情一起做，花了一个上午才将笔记搞定。