一、 简介
JavaScript通常简称为js或者js脚本
-
概念:
1、 解释性脚本语言(代码不进行预编译)
2、 轻量级的编程语言
3、 可插入 HTML 页面的编程代码
(插入HTML页面后由所有的现代浏览器执行) -
作用
为网页添加动态功能
为用户提供更流畅美观的浏览效果
通常JavaScript脚本通过嵌入在HTML中来实现自身功能
二、 注释
与java的单行和多行注释相同
单行注释:以 // 开头
多行注释:以 /* 开始,以 */ 结尾
三、 用法
有三种
1、 HTML页面中的js
必须位于script围堵标签之间
对位置要求不严格(可以放head、body、最后,通常为head或者最后)
必须位于script围堵标签之间
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置1</title>
<!--
内部:js位置没有严格的要求
-->
<!--写在head-->
<script>
alert("hello script111!")
</script>
</head>
<body>
<!--写在body-->
<script>
alert("hello script222!")
</script>
</body>
</html>
<!--写在最后-->
<script>
alert("hello script333!")
</script>
2、 外部的js
可以把脚本保存到外部文件中,外部 JavaScript 文件的文件扩展名是 .js
1. 外部编写.js文件
function fun1(){
alert("这是js外部文件");
}
2. 引入js文件(head或者body都可以)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置2</title>
<!--
外部:写在js文件中,外部文件不需要script标签
引入外部script文件
调用script文件
-->
<script type="text/javascript" src="../../js/myScript.js" ></script>
<script>
fun1();
</script>
</head>
<body>
</body>
</html>
3、 标签属性中的js
直接编写在HTML标签的一些属性中,用于简单的JavaScript代码的编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js位置3</title>
</head>
<body>
<!--
行内的js写法
-->
<a href="javascript:alert('行内的js写法')">行内的js写法</a>
</body>
</html>
四、 显示数据
① window.alert()弹出框
- window可以省略,等价于alert(“显示的内容”);
② document.write()将内容写入
- document.write(“显示的内容”)
③ innerHTML写入
- document.getElementById(“id值”).innerHTML=“显示的内容”
由于加载从上往下,因此需要先加载id值,故将script放在文档最下面
④ console.log写入到浏览器控制台
- console.log(“显示的内容”)
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示数据</title>
<script>
/*
1、使用windows弹出框,弹出数据,两种写法都可以
*/
alert("hello")
window.alert("hello again")
/*
2、使用document,显示数据
*/
document.write("hello document")
/*
3、使用innerHTML写入
加载从上往下,因此先获取div1,此时div1还未加载,因此将script放在文档最下面
*/
//document.getElementById("div1").innerHTML="hello innerHTML"
/*
4、使用console.log写入到浏览器控制台
*/
console.log("hello log")
</script>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
<!--
3、使用innerHTML写入
加载从上往下,因此先获取div1,此时div1还未加载,因此将script放在文档最下面
-->
<script>
document.getElementById("div1").innerHTML="hello innerHTML!"
</script>
五、 基本语法
JavaScript 是一个脚本语言,浏览器在读取代码时逐行地执行脚本代码(js语句向浏览器发出的命令,告诉浏览器该做什么)
- tips:
一般一行只写一条语句,每句结尾编写分号结束
5.1 变量
5.1.1 基本语法
关键字:var
统一用var进行变量声明,变量根据赋值来确定数据类型
-
声明变量:
var 变量名称; -
命名规则:
1、变量必须以字母开头
2、变量也能以 $ 和 _ 符号开头
3、变量名称对大小写敏感(y 和 Y 是不同的变量)
4、不能使用关键字保留字 -
命名规范:
1 、见名知意,根据变量的意义去命名
2、 驼峰命名,第一个单词的首字母小写,之后每个单词的首字母大写
代码示例:
var myCompany; //声明变量
myCompany='alibaba'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
5.1.2 作用域
- 局部变量
函数内部声明的变量,只能在函数内部使用 - 全局变量
函数外声明的变量,所有脚本和函数都能访问
5.1.3 生命周期
变量的生命期从被声明的时间开始
局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除
5.2 数据类型
5.2.1 基本数据类型
字符串String
存储字符的变量
字符串必须使用单引号或双引号
- tips:
嵌套中,单引号嵌套双引号or双引号嵌套单引号
代码示例:
var myCompany="alibaba";
//引号嵌套,单引号嵌套双引号or双引号嵌套单引号
var demo1='字符串中嵌套"字符串"。';
var demo2="字符串中嵌套'字符串'。";
数字Number
只有一种数字类型,既可以表示浮点数也可以表示整数
代码示例:
var intValue=11;
var floatValue=11.1;
//极大或极小的数字可以通过科学计数法来书写:
var demo1=666e5; //66600000
var demo2=-666e-5; //-0.00666
布尔Boolean
true or false
代码示例:
var f1=true;
var f2=false;
空Null
表示值为空
将变量的值设置为 null 来清空变量
var isNULL=null;
未定义Undefined
表示变量不含有值
共有4中情况会出现undefined
① 变量声明且没有赋值
var obj;
alert(obj);//obj值为undefined
② 获取对象中不存在的属性
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of
undefined"
③ 函数需要实参,但是调用时没有传值
此时形参为undefined
④ 函数调用没有返回值或者return后没有数据
此时接收函数返回的变量是undefined
代码示例:
function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined
alert(result);//result的值也是undefined,因为printNum()没有返回值
Symbol
表示独一无二的值
5.2.2 引用数据类型
对象Object
数组Array
函数Function
5.2.3 动态类型(不推荐使用)
动态类型,即相同的变量可用作不同的类型
代码示例:
var param; // param类型为 undefined
param = 5; // param 为数字
param = "alibaba"; // param 为字符串
5.3 运算符
- 算数运算符
+ 、 - 、 * 、 / 、 % 、 ++ 、 - - - 赋值运算符
= 、 += 、 -= 、*= 、 /= 、 %= - 字符串的连接符
+ - 逻辑运算符
&& 、 || 、 ! - 条件运算符
?: - 比较运算符
== 、!= 、 > 、 < 、 >= 、 <=
===:绝对等于(值和类型均相等)
!==:不绝对等于(值和类型有一个不相等,或两个都不相等)
代码示例:
var x=5;
var f=(x===5); // true
f=(x==='5');// false
f=(x!==5); // false
f=(x!=='5');// true
5.4 对象
5.4.1 常用对象
String
.length能够获取字符串的长度( length为属性,非方法,因此调用时不需要加() )
转移符号的长度算一个,即\'长度为1
方法:
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码 |
concat() | 连接两个或更多字符串,并返回新的字符串 |
fromCharCode() | 将 Unicode 编码转为字符 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置 |
includes() | 查找字符串中是否包含指定的子字符串 |
lastIndexOf() | 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置 |
match() | 查找找到一个或多个正则表达式的匹配 |
repeat() | 复制字符串指定次数,并将它们连接在一起返回 |
replace() | 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串 |
search() | 查找与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为字符串数组 |
startsWith() | 查看字符串是否以指定的子字符串开头 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLowerCase() | 把字符串转换为小写 |
toUpperCase() | 把字符串转换为大写 |
trim() | 去除字符串两边的空白 |
toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写 |
toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写 |
valueOf() | 返回某个字符串对象的原始值 |
toString() | 返回一个字符串 |
Array
数组,用于在变量中存储多个值
.length 能够获取数组的长度
三种方式:
//方法一
var letters = new Array();
for(var i = 0; i < 4; i++) {
letters[i] = "letter" + i;
}
for(var i = 0; i < letters.length; i++) {
document.write(letters[i] + "<br/>");
}
//方法二
var numbers = [1,2,3,4,5];
for(var i = 0; i < numbers.length; i++) {
document.write(numbers[i] + "<br/>");
}
//方法三
var classes = new Array("class1","class2","class3");
for(var i = 0; i < classes.length; i++) {
document.write(classes[i] + "<br/>");
}
方法:
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果 |
copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中 |
entries() | 返回数组的可迭代对象 |
every() | 检测数值元素的每个元素是否都符合条件 |
fill() | 使用一个固定值来填充数组 |
filter() | 检测数值元素,并返回符合条件所有元素的数组 |
find() | 返回符合传入测试(函数)条件的数组元素 |
findIndex() | 返回符合传入测试(函数)条件的数组元素索引 |
forEach() | 数组每个元素都执行一次回调函数 |
from() | 通过给定的对象中创建一个数组 |
includes() | 判断一个数组是否包含一个指定的值 |
indexOf() | 搜索数组中的元素,并返回它所在的位置 |
isArray() | 判断对象是否为数组 |
join() | 把数组的所有元素放入一个字符串 |
keys() | 返回数组的可迭代对象,包含原始数组的键(key) |
lastIndexOf() | 搜索数组中的元素,并返回它最后出现的位置 |
map() | 通过指定函数处理数组的每个元素,并返回处理后的数组 |
pop() | 删除数组的最后一个元素并返回删除的元素 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度 |
reduce() | 将数组元素计算为一个值(从左到右) |
reduceRight() | 将数组元素计算为一个值(从右到左) |
reverse() | 反转数组的元素顺序 |
shift() | 删除并返回数组的第一个元素 |
slice() | 选取数组的一部分,并返回一个新数组 |
some() | 检测数组元素中是否有元素符合指定条件 |
sort() | 对数组的元素进行排序 |
splice() | 从数组中添加或删除元素 |
toString() | 把数组转换为字符串,并返回结果 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度 |
valueOf() | 返回数组对象的原始值 |
Date
创建日期对象:
//返回当前日期
var date1 = new Date();
//milliseconds:1970-1-1~现在的毫秒数
var date2 = new Date(milliseconds);
//符合日期类型的字符串(年月日-时分秒)
var date3 = new Date(dateString);
//月份取值为0~11,周日~周六取值为0~6
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
常用方法:
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
其他方法:
方法 | 描述 |
---|---|
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setTime() | setTime() 方法以毫秒设置 Date 对象。 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字)。 |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。实例: var today = new Date(); var UTCstring = today.toUTCString(); |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
Math
属性:
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718) |
LN2 | 返回 2 的自然对数(约等于0.693) |
LN10 | 返回 10 的自然对数(约等于2.302) |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634) |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434) |
PI | 返回圆周率(约等于3.14159) |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707) |
SQRT2 | 返回 2 的平方根(约等于 1.414) |
常用方法:
方法 | 描述 |
---|---|
ceil(x) | 对数进行上舍入 |
floor(x) | 对 x 进行下舍入 |
round(x) | 四舍五入 |
pow(x,y) | 返回 x 的 y 次幂 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值 |
random() | 返回 0 ~ 1 之间的随机数 |
其他方法:
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值 |
acos(x) | 返回 x 的反余弦值 |
asin(x) | 返回 x 的反正弦值 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) |
cos(x) | 返回数的余弦 |
exp(x) | 返回 Ex 的指数 |
log(x) | 返回数的自然对数(底为e) |
sin(x) | 返回数的正弦 |
sqrt(x) | 返回数的平方根 |
tan(x) | 返回角的正切 |
5.4.2 自定义对象
对象是变量的容器,里面可以定义多个变量
定义
-
定义属性:
变量以键值对形式进行存储(name : value)
不同属性以逗号分隔,可换行可不换行 -
定义方法:
方法名称后面直接跟function
代码示例:
var people = {
name:"SelcouthAI",age:20,codeYear:"1年"};
var student = {
name:"SelcouthAI",
age:20,
//方法后面直接跟function
job:function(){
alert("正在被包工头支配的新生代农民工");
}
}
调用
-
调用属性
第一种方式:类名.属性名
第二种方式:类名[“属性名”] -
调用方法
类名.方法
代码示例:
var name = people.name;
document.write("name:"+name);
var age = people["age"];
document.write("age:"+age);
student.job();
5.5 函数
5.5.1 常用全局函数
isNaN(param)
- tips:
全局属性NaN:非数值(Not a Number)
用于检查其参数是否是非数字值,不是数值返回true
代码示例:
console.log(isNaN(666));//false
console.log(isNaN(6+66));//false
console.log(isNaN("hello"));//true
parseFloat(String)
解析字符串,并返回一个浮点数
- tips:
只返回字符串中第一个数字,开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字,则返回 NaN
代码示例:
console.log(parseFloat("66"));//66
console.log(parseFloat("666.66"));//666.66
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 666 "));//666
console.log(parseFloat("1年"));//1
console.log(parseFloat("码龄1年"));//NaN
parseInt(string,radix)
解析一个字符串,返回整数
string :必要参数,被解析的字符串
radix :表示要解析的数字的基数( 2 ~ 36 )
-
当参数 radix 的值为 0或没有设置参数时,根据 string 来判断数字的基数:
“0x” 开头,其余部分解析为十六进制的整数
以 0 开头,其余部分解析为八进制或十六进制的数字
以 1 ~ 9 开头,解析为十进制的整数 -
tips:
只返回字符串中第一个数字,开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字,则返回 NaN
代码示例:
console.log(parseInt("66"));//66
console.log(parseInt("666.6"));//666.6
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt("1年"));//1
console.log(parseInt("码龄1年"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
5.5.2 自定义函数
关键字:function
- tips:
不需要声明类型,直接写参数名称
函数是否有返回值取决于函数体中是否有return关键字
返回值的类型取决于return中内容的类型
function 自定义函数名称(参数列表){
...
}
代码示例:
//无参无返回值的函数
function print(){
document.write("无参无返回值的函数");
}
print();
//有参无返回值的函数
function print1(num){
document.write("有参无返回值的函数,参数为" + num);
}
print1(666);
//有参有返回值的函数
function print2(a,b){
document.write("有参有返回值的函数,参数分别为"+a+"和"+b);
return a+b;
}
var sum = print2(1,6);
5.5.3 匿名函数
把函数赋给一个变量,再调用变量
代码示例:
//无参无返回值的函数
var fun = function(){
document.write("无参无返回值的函数");
}
fun();
//有参无返回值的函数
var fun1 = function(num){
document.write("有参无返回值的函数,参数为" + num);
}
fun1(6);
//有参有返回值的函数
var fun2 = function(a,b){
document.write("有参有返回值的函数,参数分别为"+a+"和"+b);
return a+b;
}
var sum = fun2(1,6);
alert(sum);