JavaScript
简介
JavaScript
的组成
ECMAScript
:JavaScript
的语法标准。DOM
:JavaScript
操作网页上的元素的API
。BOM
:JavaScript
操作浏览器的部分功能的API
。
JavaScript
的特点
- 可以使用任何文本编辑工具编写,然后使用浏览器就可以执行程序。
- 是一种解释型脚本语言:代码不进行预编译,从上往下逐行执行,不需要进行严格的变量声明。
- 主要用来向
HTML
页面添加交互行为。
使用
JavaScript
代码是放在 <script> ……</script>
标签里,而包含 JavaScript
代码的 script
标签,我们可以放在 <body> ……</body>
标签里,也可以放在 <head> ……</head>
标签里。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
console.log("hello world");
</script>
</body>
</html>
此外,和 CSS
引入相类似,JavaScript
也可以通过外部引入。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="test.js">
</script>
</body>
</html>
注意:**test.js
文件要和你的 html
文件在同一目录下**才能用上面的方式引用,否则的话需要使用相对路径还是绝对路径来引入 js
文件。
变量
声明变量
js
var name = 'robot'
变量的命名规则如下:
- 变量名必须以字符或下划线“_”开头,不能以数字开头
- 变量可以包含数字、从 A 至 Z 的大小字母
- 不能使用
JavaScript
中的关键字做变量名 - 变量名不能有空格
- 严格区分大小写,比如:
name
和Name
就是两个完全不同的变量。
变量类型
js
// Number
var x = 100
var y = 89.12
// String(使用单引号或双引号)
var name = 'robot'
var name = "wendy"
// Boolean
var isNum = true
var isString = false
// Array
var myNumberArray = [10,15,20];
// Object(对象)
var student = { name : 'Tom', age : 18 };
注释
单行注释
js
// 这个一个单行注释
多行注释
js
/**
这里是多行注释
*/
运算符
算数运算符:加/减/乘/除/取余/自增/自减
js
+ - * / % ++ --
赋值运算符:加等/减等/乘等/除等
js
+= -= *= /=
比较运算符:严格等于/严格不等于/小于/小于等于/大于/大于等于
js
=== !== < <= > >=
逻辑运算符
js
&& 逻辑与
|| 逻辑或
?: 三元表达式c?x:y c为真,返回x,否则返回y
& 按位与
| 按位或
^ 按位异或
== 相等
!= 不等
运算符的优先级:
js
() > 一元运算符 > 算数运算符 > 关系运算符 > 相等运算符 > 逻辑运算符
数组
一位数组
js
var myarray = new Array(1,2,3,4,5); // 创建数组同时赋值
//or
var myarray = [1,2,3,4,5]; //直接输入一个数组(称 “字面量数组”)
多维数组
js
var student = [["张三","男","18"],["李四","女","20"]];
student[0][2]; // returns "18"
修改数组
js
var color = ["red","green","blue","yellow"];
color[0] = "black";
color; // returns ["black", "green", "blue", "yellow"]
获取数组长度
js
ar color = ["red","green","blue","yellow"];
color.length; // returns 4
数组和字符串之间的切换
js
# 字符串转数组,使用split()方法
"1:2:3:4".split(":") // returns ["1", "2", "3", "4"]
"|a|b|c".split("|") // returns ["", "a", "b", "c"]
# 数组转换为字符串,使用join()方法
["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"
添加和删除数组项
js
# 在数组尾部添加一个或多个元素,使用push()方法
var arr = ["1", "2", "3", "4"];
arr.push("5","6");
arr; // returns ["1", "2", "3", "4", "5", "6"]
# 从数组尾部删除一个元素并返回,使用pop()方法
arr.pop()
unshift()
和 shift()
从功能上与 push()
和 pop()
完全相同,只是它们分别作用于数组的开始,而不是结尾。
注意:
- == 是相等操作符,比较值是否相等,如果相等输出为 true,否则为 false。
- === 是全等操作符,比较值和类型是否都相等,如果都相等输出为 true,否则为 false。
因此,使用 ==
和 ===
我们可以知道:null
和 undefined
的值不等于 0
,它们的值相等,但是类型不相等。
字符串
字符串连接
js
// 使用 + 连接字符串
var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;
// 当字符串与数字使用 + 连接时,浏览器会自动将数字转换为字符串
result = one + 12
字符串转换
js
// 数字转换为字符串
var myNum = 123;
var myString = myNum.toString();
typeof myString; # typeof 用户打印变量类型
// 纯数字字符串转换为数字
var myString = '123';
var myNum = Number(myString);
typeof myNum;
// 获取字符串长度
var myString = "hello world ";
myString.length;
// 使用索引获取字符串内容
myString[0];
// 转换大小写
var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"
// 替换字符串的某部分
var string = "I like study";
string.replace("study","sleep"); // returns "I like sleep"
条件/循环
条件
if ... else
js
if(3>2) {
console.log("我真帅");
} else {
console.log("不可能");
}
if ... else if ... else
js
var d = new Date().getDay();
if( d==0) {
console.log("今天星期天");
} else if(d==1) {
console.log("今天星期一");
} else if(d==2) {
console.log("今天星期二");
} else {
console.log("好多啊,我不想写了");
}
switch ... case
js
ar d = new Date().getDay();
switch(d) {
case 0:
console.log("今天星期天");
break;
case 1:
console.log("今天星期一");
break;
case 2:
console.log("今天星期二");
break;
case 3:
console.log("今天星期三");
break;
case 4:
console.log("今天星期四");
break;
case 5:
console.log("今天星期五");
break;
default:
console.log("今天星期六");
break;
}
- 三元运算符
js
3>2?console.log("3比2大"):console.log("3比2小");
循环
for
循环
js
for(var i=1;i<=100;i++){
console.log(i);
}
while
循环
js
var i = 1;
while(i<=100){
console.log(i);
i++;
}
do ... while
循环
js
var i = 1;
do{
console.log(i);
i++;
}
while(i<=100)
break
语句和continue
语句break
语句用于跳出循环continue
语句用于跳过迭代
函数
函数声明创建函数
语法:
js
function functionName(parameters) {
//执行的代码
}
示例:
js
function f(a,b){
console.log(a+b);
} //创建一个名为f的函数,它有两个形参a,b
f(2,3); //调用函数f,传入实参2和3,最终运行结果为在控制台上打印出5
函数表达式创建函数
语法:
js
var functionName = function (parameters){
//执行的代码
}
示例:
js
var f = function(a,b){
console.log(a+b);
}
f(2,3);
两者的区别
js
//此处的代码执行没有问题,JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。
f(2,3);
function f(a,b) {
console.log(a+b);
}
//报错:f is not a function
//这是因为函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析
f(2,3);
var f = function(a,b){
console.log(a+b);
}
注:在 JavaScript 中,实参个数和形参个数可以不相等。
在 JavaScript
中没有重载
js
function f(a,b) {
return a + b;
}
function f(a,b,c) {
return a + b + c;
}
var result = f(5,6);
result;// returns NaN
上述代码中三个参数的 f
把两个参数的 f
覆盖,调用的是三个参数的 f
,最后执行结果为 NaN
。而不是其他语言中的 5。
返回值
- 如果函数中没有
return
语句,那么函数默认的返回值是:undefined
。 - 如果函数中有
return
语句,那么跟着return
后面的值就是函数的返回值。 - 如果函数中有
return
语句,但是return
后面没有任何值,那么函数的返回值也是:undefined
。 - 函数在执行
return
语句后会停止并立即退出,也就是说return
语句执行之后,剩下的代码都不会再执行了。 - 当函数外部需要使用函数内部的值的时候,我们不能直接给予,需要通过
return
返回。比如:
js
var f = function(a,b){
a+b;
}
console.log(f(2,3)); // 结果为undefined
var f = function(a,b){
return a+b;
}
console.log(f(2,3)); // 结果为5。
匿名函数
匿名函数就是没有命名的函数,一般用在绑定事件的时候。
js
function(){
}
4、自调用函数
匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行。比如:
js
(function () {
alert('hello');
})();