@TOC
JavaScript概述
之前我们学习了HTML可以在网页展示数据,又学习了CSS样式能够一定程度上美化我们的页面,但是大家要注意一个问题就是我们学习页面的目的是为了让他更好的帮助我们
进行数据的处理,所以你光靠展示数据肯定是不够的,你还得让你的页面有数据上的交互才能完成我们在页面上进行数据的添加删除修改和查询操作;
所以现在问题又来了,固定写死的页面怎么能让他"动"起来呢?
这时你就需要用到JavaScript技术了;
什么是JavaScript?
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言;
有面向对象的特性
什么是事件驱动 ：本身拥有这个功能 但是 必须由外界事件触发 才能执行这个功能;
比如说页面有一个按钮,它的单击事件我们已经编写好了,但是必须等这个按钮单击的时候才能够执行这个那个功能,这个就是事件驱动;
JavaScript特点
1. 向HTML页面中添加交互行为
2. 脚本语言，语法和Java类似
3. 解释性语言，边执行边解释
JavaScript的基础结构
<script type="text/javascript">
……
</script>
它和CSS一样都要写到head标签中,不同的时候CSS是style(样式)标签,而JavaScript是script(脚本)标签
JavaScript入门
js的引用方法
js和css一样有三种引用方法
行内引用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
</head>
<body>
<button type="button" onclick="javascript:alert('Hello,JS!');">点击弹窗</button>
</body>
</html>
大家注意一个问题:此处使用了标签的 onclick 属性,这个属性表示当单击这个标签的时候会发生什么事情;
那会发生什么事情呢?就是后面的javascript:alert()这个事件了,其中 javascript: 固定前缀代表要开始写js代码了
后面的alert() 就是js代码;
这种js的写法是行内JS优缺点和行内CSS一样;
而且大部分的标签都有 单击事件 不是按钮独有的
内部引用
和内部CSS一样是用script标签统一写到页面中的
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
alert("Hello,JavaScript!");
</script>
</head>
<body>
</body>
</html>
外部引用
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
这种是最常用的引入JS的方式,将写好的js代码放入一个后缀名为.js的文件中,然后通过引用的方式引入html里,这样又美观而且还不
互相影响;
引用JS文件的时候必须是双标签引用 ，如果不是双标签页面肯定会报错
JavaScript编程基础
核心语法详解
定义变量
语法 :
var 变量名称 = 变量的值;
比如:
var str = "hello,JavaScript!";
alert(str);
此处大家要记住,js定义的变量类型只有一个var(弱类型),它的解析规则是等号后面的值是什么类型var就变成什么类型(这个应用起来还是很方便的)
但是如果var是这么一个var的话,那这里就存在一个bug,如果我不给str赋值那么str这个变量将会是什么类型呢?
var str; // 此处不进行赋值
alert(str);
str变成了undefined类型,这是个啥类型呢?那么这里我们就要说说JS的数据类型了
根据上图我们可以知道,虽然js声明变量的时候只有一个var 但是其实它也是可以区分出很多数据类型的;
但是又有问题 : 定义一个变量是这么定义,如果定义一个数组怎么定义呢?
定义数组的语法:
var 变量名称 = new Array();
或者
var 变量名称 = [值1,值2,值3,值4....]
这个比较类似以Java中ArrayList集合的使用
比如:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
alert(arrays);
</script>
</head>
<body>
</body>
</html>
JS语法和java差不了多少,因为JavaScript就是把java代码转移到页面去写而已
for循环的用法:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
for (var i = 0; i < arrays.length; i++) {
alert(arrays[i]);
}
</script>
</head>
<body>
</body>
</html>
数组除了有length属性外,还有一些方法需要记住:
添加元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
// 向数组中添加元素
var fruit = "椰子";
arrays.push(fruit);
alert(arrays);
</script>
</head>
<body>
</body>
</html>
排序
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
// 向数组中添加元素
var fruit = "椰子";
arrays.push(fruit);
// 排序
arrays.sort();
alert(arrays);
</script>
</head>
<body>
</body>
</html>
注意:
sort()方法默认按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
椰子的 UTF-8编码是 椰子
苹果的UTF-8编码是 苹果
香蕉的UTF-8编码是 香蕉
鸭梨的UTF-8编码是 鸭梨
我们验证一下 : 比如添加一个荔枝 UTF-8编码 荔枝
添加之后排序应该是在苹果的下面 香蕉的上面
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
// 向数组中添加元素
var fruit1 = "椰子";
arrays.push(fruit1);
var fruit2 = "荔枝";
arrays.push(fruit2);
// 排序
arrays.sort();
alert(arrays);
</script>
</head>
<body>
</body>
</html>
数组转字符串:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 定义数组
var arrays = new Array();
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
// 向数组中添加元素
var fruit1 = "椰子";
arrays.push(fruit1);
var fruit2 = "荔枝";
arrays.push(fruit2);
// 排序
arrays.sort();
alert(arrays.join());
</script>
</head>
<body>
</body>
</html>
JSON
刚才我们定义了变量,知道了数据类型,也定义了数组并且也遍历了数组,那么这时候就会产生一个疑问,定义一个变量可以了,那怎么定义一个对象呢?
问题 : 假设有两个人
1 孙建国 男 24岁 北京市人
2 赵文明 男 24岁 河北省人
需要你用js将这两个人的信息定义出来;
要解决这个问题不简单,如果说在java时期你看到这样的数据一定会先想到定义一个person类然后创建id(编号)name(姓名) sex(性别)age(年龄)from(籍贯)这些属性
那么 Java可以定义类保存对象,JS定义啥保存对象呢?
回答 : JS定义JSON来保存对象!
什么是JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
要求: 符合以下特性的数据 才叫做json
{key:val,key:val}
JSON为什么那么重要?因为它是页面中OOP思想的体现
如果要保存这个人员类下的一个对象的话
1 孙建国 男 24岁 北京市人
var obj = {"id":1,"name":"赵文明","sex":"男","age":24,"from":"北京市"}
通过以上的定义我们可以发现,JS中定义对象是定义与赋值一起进行的,就是因为它又方便又面向对象,所以JSON这种数据格式才被前端人员广泛使用
JSON入门使用
在 JS 语言中，一切都是对象。
因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。
但是对象和数组是比较特殊且常用的两种类型：
- 对象表示为键值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
其实说白了JSON就是JavaScript中用于定义对象的一种数据格式
JSON存储的对象,而不是单个变量的值!
打个比方,比如存储一个Person类的对象
Person p = new Person();
设置属性
p.setId(1);
......
设置属性的时候其实大家可以看到 是 属性名称 然后对应一个值, 如果我们把属性名称看成是键然后值就看成是值的话就得到了JSON对象的定义
JSON定义一个对象
var p = { "id":1,"name":"赵文明","sex":"男","age":18,"from":"河北省" };
JSON定义时候需要注意
JSON中如果key的值是简单类型,比如数字(整数和浮点),boolean类型,这时可以不用加 " ", 如果是字符串是必要要加 " " 的!
JSON定义一个数组
var p1 = { "id":1,"name":"孙建国","sex":"男","age":24,"from":"北京市" }; // JSON对象
var p2 = { "id":2,"name":"赵文明","sex":"男","age":35,"from":"河北省" }; // JSON对象
var persons = [ p1,p2];
调用数组里元素的属性值：
persons[1].name
JSON入门练习
用JSON保存这两个人并输出他们的信息
1 孙建国 男 24岁 北京市人
2 赵文明 男 24岁 河北省人
代码实现 :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 创建JSON数组保存两个JSON对象
var persons = [];
// 创建JSON对象
var p1 = {"id":1,"name":"孙建国","sex":"男","age":18,"from":"北京市"};
var p2 = {"id":2,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
// 数据保存对象
persons.push(p1);
persons.push(p2);
// 遍历数据
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
alert(p.id + "||" + p.name + "||" + p.sex + "||" + p.age + "||"+ p.from);
}
</script>
</head>
<body>
</body>
</html>
Q.E.D.
