学习目标:
- 了解JavaScript的相关概念,明确JavaScript的历史
- 熟练掌握ECMAScript的基本语法
- 熟练使用ECMAScript的基本对象
学习内容:
一、JavaScript入门
1、概念:一门客户端脚本语言
- 运行在客户端浏览器中。每一个浏览器都有JavaScript解析引擎
- 脚本语言:不需要编译,直接可以被浏览器解析执行
2、功能
- 增强用户和HTML页面交互
- 控制HTML元素,让页面有一些动态效果,增强用户体验
3、JavaScript发展史
- 1992年,Nombase公司开发出第一门客户端脚本语言,专用于表单校验,命名为:C–
后来更名为:ScriptEase - 1995年,Netscape(网景)公司,开发了一门客户端脚本语言,命名为:LiveScript,
后来请来SUN公司专家修改,命名为:JavaScript - 1996年,微软抄袭JavaScript开发出JScript语言
- 1997年,ECMA(欧洲计算机制造商协会),ECMAScript,所有客户端脚本语言标准
- 注意:JavaScript = ECMAScript + JavaScript(BOM+DOM)
二、ECMAScript:客户端脚本语言标准
1、基本语法
- 与HTML结合方式
- 内部JS:定义
<script>
标签,标签体内容就是js代码 - 外部JS:定义
<script>
标签,通过src引入外部js文件 - 注意
<script>
可以定义在HTML页面的任何地方,但是定义的位置会影响执行顺序<script>
可以定义多个
- 内部JS:定义
- 注释
- 单行注释:
//注释内容
- 多行注释:
/*注释内容*/
- 单行注释:
- 数据类型
- 原始数据类型(基本数据类型)
- number:数字。整数/小数/NaN(not a number:一个不是数字的数字类型)
- string:字符串。字符/字符串 “abc” ‘a’
- boolean:true或false
- null:一个对象为空的占位符
- undefined:未定义。一个变量没有初始化,默认为undefined
- 引用数据类型(对象)
- 原始数据类型(基本数据类型)
- 变量
- 一小块存储数据的内存空间
- Java是强类型语言,JavaScript是弱类型语言
- 强类型:在开辟变量存储空间时,定义空间将来存储数据的类型,
只能存储固定类型的数据 - 弱类型:在开辟变量存储空间时,不定义空间将来存储数据的类型,
能够存储任意类型的数据
- 强类型:在开辟变量存储空间时,定义空间将来存储数据的类型,
- 语法:var 变量 = 初始化值;
- typeof运算符:获取变量的类型
- 语法:typeof 变量名;
- null运算后得到的是object类型
- 运算符
- 一元运算符:只有一个运算数的运算符
- ++,–:自增,自减
- ±(正号,负号)
- 注意
- 在JS中,如果运算数不是运算符所要求的类型,那么js引擎会
自动将运算数进行类型转换 - 其他类型转number
- string转number
- 按照字面值转换
- 如果字面值不是数字,则转为NaN
- NaN与任何数运算都是NaN
- boolean转number
- true–>1
- false–>0
- string转number
- 在JS中,如果运算数不是运算符所要求的类型,那么js引擎会
- 算数运算符
- +,-,*,/,%
- 赋值运算符
- =,+=,-=
- 比较运算符
>,<,>=,<=,==,===
(全等于)- 类型相同,直接比较
- 字符串按照字典顺序比较,按位逐一比较,直到得出大小为止
- 类型不同,先进行类型转换,再比较
- ===:在比较之前,先判断类型,如果类型不一致,则直接返回false
- ==:进行类型转换比较
- 逻辑运算符
- &&,||,!
- 其他类型转换boolean
- number:0或NaN为false,其他为true
- string:除了空字符串,其它都为true
- null或undefined:都是false
- object:都是true
- 三元运算符
- 表达式? 值1 : 值2;
- 表达式为true,取值1,否则取值2
- 一元运算符:只有一个运算数的运算符
- 流程控制语句
- if…else…
- switch
- 在java中,可以接收的数据类型:byte int short char 枚举(1.5) 字符串(1.7)
- 在js中,可以接收任意类型数据
- while
- do…while
- for
- js特殊语法
- 语句以分号;结尾,如果一行只有一条语句,则可以省略分号(不建议)
- 变量的定义,var可以省略
- 用var:定义的变量是局部变量
- 不用var:定义的变量是全局变量(不建议)
2、基本对象
- function:函数对象
- 创建
- 方式1:var 方法名称 = new function(形参列表,方法体);
- 方式2:function 方法名称(形参列表){方法体}
- 方式3:var 方法名称 = function(形参列表){方法体}
- 属性
- length:形参个数
- 特点
- 方法定义时,形参的类型不用写,返回值类型也不写
- 方法是一个对象,如果定义名称相同,会覆盖前面的定义结果
- 在js中,方法的调用只与方法名称有关,与参数列表无关
- 在方法声明中,有一个隐藏的内置对象(数组),arguments:封装
所有的实际参数
- 调用
- 方法名称(实参列表);
- 创建
- Array:数组对象
- 创建
- var 数组名称 = new Array(元素列表);
- var 数组名称 = new Array(默认长度);
- var 数组名称 = [元素列表];
- 方法
- join:将数组中元素按照指定的分隔符拼接为字符串
- push:向数组的尾部添加一个或多个元素,返回新的数组长度
- 属性
- length:数组长度
- 特点
- js中,数组元素类型是可变的
- js中,数组的长度是可变的
- 创建
- Date:日期对象
- 创建
- var 日期名称 = new Date();
- 方法
- toLocalString():返回当前Date对象对应的时间本地字符串格式
- getTime():获取毫秒值。当前时间到1970年1月1日0点的毫秒值之差
- 创建
- Math:数学对象
- 创建
- Math对象不需要创建,直接使用 Math.方法名();
- 方法
- random():产生0到1之间的随机数 含0不含1
- ceil:对数进行向上舍入
- floor:对数进行向下舍入
- round:把数四舍五入最接近的整数
- 属性
- PI
- 创建
- RegExp:正则表达式对象
- 正则表达式:定义字符串的组成规则
- 单个字符[]
- 如 [a] [ab] [a-zA-Z] [0-9_]
- 特殊符号
- \d:单个数字字符 [0-9]
- \w:单个单词字符 [a-zA-Z0-9_]
- 量词符号
- ?表示出现0或1次
*
表示出现0或多次+
表示出现1或多次- {m,n}:表示 m<x<n x(数量)
- m如果缺省:最多n次
- n如果缺省:最少m次
- 开始结束符号
- ^:开始
- $:结尾
- 单个字符[]
- 正则对象
- 创建
- var 对象名 = new RegExp(“正则表达式”);
- var 对象名 = /正则表达式/;
- 方法
- test(参数); 验证指定的字符串是否符合正则定义的规范
- 注意:第一种创建方法反斜杠要用2个进行转义
- 创建
- 正则表达式:定义字符串的组成规则
- Global
- 特点:全局对象,封装的方法不需要对象就可以直接调用。方法名();
- 方法
-
encodeURI(); url编码
-
decodeURI(); url解码
-
encodeURIComponent(); url编码,编码的字符更多
-
decodeURIComponent(); url解码
-
parseInt(); 将字符串转换成数字
- 注意判断每一个字符是否是数字,直到不是数字为止
- 将前面数字转化为number
-
isNaN(); 判断一个值是否是NaN
- NaN六亲不认,连自己都不认,用符号判断都是false
-
eval(); 将JavaScript字符串作为脚本代码来执行
-
- url编码
汉字:%A4%77%BA%9D
学习产出:
1、 JS与HTML结合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS与HTML结合方式</title>
<!--外部js-->
<script src="test.js"></script>
</head>
<body>
<!--内部js-->
<script>
// Hello World! 单行注释
/**
* 多行注释
* hello!!!
* world!!!
*/
alert("Hello World!");
</script>
</body>
</html>
2、JS变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量</title>
</head>
<body>
<script>
// 定义变量
var a = 3;
alert(a);
a = "Hello World!";
alert(a);
// 定义number类型,输出到页面上
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;
document.write(num1+"<br>");
document.write(num2+"<br>");
document.write(num3+"<br>");
// 定义string类型
var str1 = "abc";
var str2 = 'abc';
document.write(str1+"<br>");
document.write(str2+"<br>");
// 定义布尔类型
var flag = true;
document.write(flag+"<br>");
// 定义空,未定义变量
var obj1 = null;
var obj2 = undefined;
var obj3;
document.write(obj1+"<br>");
document.write(obj2+"<br>");
document.write(obj3+"<br>");
</script>
</body>
</html>
3、 JS变量类型显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量类型显示</title>
</head>
<body>
<script>
// 定义number类型,输出到页面上
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;
document.write(num1+"---"+typeof num1+"<br>");
document.write(num2+"---"+typeof num2+"<br>");
document.write(num3+"---"+typeof num3+"<br>");
// 定义string类型
var str1 = "abc";
var str2 = 'abc';
document.write(str1+"---"+typeof str1+"<br>");
document.write(str2+"---"+typeof str2+"<br>");
// 定义布尔类型
var flag = true;
document.write(flag+"---"+typeof flag+"<br>");
// 定义空,未定义变量
var obj1 = null;
var obj2 = undefined;
var obj3;
document.write(obj1+"---"+typeof obj1+"<br>");
document.write(obj2+"---"+typeof obj2+"<br>");
document.write(obj3+"---"+typeof obj3+"<br>");
</script>
</body>
</html>
4、 JS正负号强制类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS正负号强制类型转换</title>
</head>
<body>
<script>
var num = -1;
document.write(num+"<br>");
var str = "123";
document.write(+str+"<br>");
var realstr = "123abc";
document.write(+realstr+"<br>");
var flag1 = true;
document.write(+flag1+"<br>");
var flag2 = false;
document.write(+flag2+"<br>");
</script>
</body>
</html>
5、 比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>比较运算符</title>
</head>
<body>
<script>
document.write((1>2)+"<br>");
document.write(("abc"<"abf")+"<br>");
document.write(("123"==123)+"<br>");
document.write(("123"===123)+"<br>");
</script>
</body>
</html>
6、 Switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Switch语句</title>
</head>
<body>
<script>
var num;
switch (num){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
</body>
</html>
7、99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td {
border:1px solid;
}
</style>
</head>
<body>
<script>
var i;
var j;
document.write("<table align='center'>");
for (i=1;i<10;i++){
document.write("<tr>");
for (j=1;j<i;j++){
document.write("<td>");
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>");
}
document.write("</tr>")
}
document.write("</table>");
</script>
</body>
</html>
8、 function对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function对象</title>
</head>
<body>
<script>
var func1 = function (a,b) {
alert(a+b);
};
func1(1,3);
function func2(a, b) {
alert(a+b);
}
func2(2,4);
function func3() {
var i;
var sum = 0;
for (i=0;i<arguments.length;i++){
sum += arguments[i];
}
alert("所有数之和为:"+sum)
}
func3(1,2,3,4,5,6,7,8,9);
</script>
</body>
</html>
9、 Array数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array数组对象</title>
</head>
<body>
<script>
// 创建数组
var arr1 = new Array(1,2,3,4);
var arr2 = new Array(5);
var arr3 = [2,3,4,5];
var arr4 = new Array();
document.write(arr1 + "<br>");
document.write(arr2 + "<br>");
document.write(arr3 + "<br>");
document.write(arr4 + "<br>");
// 数组特点
arr1[10] = "abc";
document.write(arr1[10]+"<br>");
// 数组方法
var len = arr1.push("ayd172");
var join = arr1.join("-");
document.write(arr1+"<br>");
document.write(len+"<br>");
document.write(arr1+"<br>");
document.write(join+"<br>");
</script>
</body>
</html>
10、 Date日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date日期对象</title>
</head>
<body>
<script>
// 创建日期
var date = new Date();
document.write(date + "<br>");
// 日期方法
var time = date.getTime();
var localeString = date.toLocaleString();
document.write(time+"<br>");
document.write(localeString+"<br>");
</script>
</body>
</html>
11、 Math数学对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math数学对象</title>
</head>
<body>
<script>
// 数学方法
document.write(Math.PI+"<br>");
document.write(Math.ceil(3.14)+"<br>");
document.write(Math.floor(3.14)+"<br>");
document.write(Math.round(3.14)+"<br>");
// 取1-100之间的随机整数
document.write(Math.floor(100*Math.random())+1)
</script>
</body>
</html>
12、 RegExp正则化表达式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp正则化表达式对象</title>
</head>
<body>
<script>
// 创建正则化对象
var reg1 = new RegExp("^\\w{4,9}$");
var reg2 = /^\w{4,9}$/;
// 测试方法
var test1 = reg1.test("hello");
var test2 = reg2.test("helloworld123456");
document.write(test1+"<br>");
document.write(test2+"<br>");
</script>
</body>
</html>
13、 Global对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象</title>
</head>
<body>
<script>
// 编码解码方法
var str = "http://www.baidu.com?wd=汉字";
var encode = encodeURI(str);
var decode = decodeURI(encode);
document.write(encode+"<br>");
document.write(decode+"<br>");
var encodecomponent = encodeURIComponent(str);
var decodecomponent = decodeURIComponent(encodecomponent);
document.write(encodecomponent+"<br>");
document.write(decodecomponent+"<br>");
// 转换成数字方法
var number = parseInt("123abc");
document.write(number+1+"<br>");
var number0 = parseInt("bs123abc");
document.write(number0+1+"<br>");
// eval方法
var str = "alert('Hello World!')";
eval(str);
</script>
</body>
</html>