文章目录
- 一、js组成
- 二、js的引入
- 三、基本语法
- 1、变量
- 2、基本规范
- 3、关键字
- 4、数据类型
- (1)基本数据类型
- (2)引用数据类型
- (3)数据类型转换
- (4)typeof运算符
- 5、运算符
- 6、流程控制
- (1)选择结构
- (2)循环语句
- 7、异常处理
- 8、函数
一、js组成
核心(ECMAScript):规定了js的基本语法、关键字等
文档对象模型(DOM):整合js,css,html
浏览器对象模型(BOM):整合js和浏览器
js在开发中绝大多数情况是基于对象的,也是面向对象的。
二、js的引入
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert(123);
</script>
</body>
</html>
方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="tset.js"></script>
</head>
<body>
</body>
</html>
tset.js文件:
alert(666);
注:script标签放在哪都行,不过代码是从上到下顺序解释的的,所以最好放在body标签最下面,否则找标签可能找不到。
三、基本语法
1、变量
(1)变量是弱类型的。
(2)声明变量时不用声明变量类型,全部使用var关键字。
var x; //变量声明
x = 12;
alert(x); //浏览器弹出一个弹框,输出x值
console.log(x); //在控制台输出x值
var x=10; //变量声明,同时赋值
console.log(x); //在控制台输出x值
(3)声明变量时,不用关键字var,那么它是全局变量
(4)变量命名:首字母只能是字母、下划线、$ 三选一,且区分大小写。
2、基本规范
(1)语句结束以分号结尾,如果不加分号,浏览器会以换行符为语句结束标志,自动加上分号。规范上,建议分号不要省。
(2)注释:单行注释 // 多行注释 /* */
(3)使用{ }来封装代码块
3、关键字
4、数据类型
(1)基本数据类型
number: 整型和浮点型
string: 字符串,首尾用单引号或双引号括起。js没有字符类型,单个字符也是字符串。
常用转义字符: \n 换行 \’ 单引号 \" 双引号 \\ 右划线
boolean: 布尔型,仅有两个值,true和false,分别代表1和0
undefined: 只有一个值,即undefined。变量声明后没有赋值,或者函数没有返回值时,其值为undefined。
Null: 只有一个值null,表示尚未存在的对象。如果函数返回的是对象,那么找不到该对象时,返回的通常是null。注意:typeof null 返回值为object
(2)引用数据类型
数组等复合数据类型均为object
(3)数据类型转换
①隐式转换:
数字 + 字符串:数字转换为字符串
数字 + 布尔值:布尔值转换为数字
字符串 + 布尔值:布尔值转换为字符串true或false
var x=10,y="ab",z=true;
console.log(x+y) //10ab
console.log(x+z) //11
console.log(y+z) //abtrue
用一元加减法转化为数字
var n = "5"
n = +n
console.log(typeof n) // number
②强制转换:
// 转换为整数
console.log(parseInt("123ab")) // 123
console.log(parseInt("ab123")) // NaN
console.log(parseInt("hello")) // NaN
//NAN: not a number,属于Number的一种
console.log(typeof NaN) //number
console.log(parseInt("6.99ab")) // 6
// 转换为浮点数
console.log(parseFloat("6.99ab")) // 6.99
console.log(eval("1+1")) // 2
console.log(eval("1<2")) // true
(4)typeof运算符
typeof可以查看数据类型
function f() {
// 相当于写了个html语句
document.write("<h1>hello world!</h1>")
}
console.log(typeof f()) // undefined
console.log(typeof f) // function
5、运算符
①加 + 减 - 乘 * 除 / 取余 %
console.log(2+3) // 5
console.log(3*2) // 6
console.log(11/2) // 5.5
console.log(11%2) // 1
②自增1: i++ ++i 自减1: i-- --i
var i =10
console.log(i++) // 10
console.log(++i) // 12
③比较运算符
大于 > 小于 <
大于或等于 >= 小于或等于 <=
赋值 =
等于 == 不等于 !=
完全等 ===
var n = 5
console.log(n == 5) // true
console.log(n == "5") // true
console.log(n === "5") // false
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其他类型转换为数字类型。
比较运算符两侧如果都是字符串类型,则从前往后按位比较字符对应的ascii码。
console.log(5>"3") // true
console.log("5">"31") // true
④NaN只要参与比较,布尔值一定是false,除非 !=
var n = NaN
console.log(n>5) // false
console.log(n<5) // false
console.log(n==5) // false
console.log(n==NaN) // false
console.log(n!=NaN) // true
⑤逻辑运算符
且 && 或 || 非 !
且 &&:
如果第一个操作数为真,返回第二个操作数。
如果第一个操作数为假,返回第一个操作数。
null,NaN,undefined,均为假
var x = 5, y = 0, z = true;
console.log(x && y) // 0
console.log(y && z) // 0
console.log(z && x) // 5
或 ||:
如果第一个操作数为真,返回第一个操作数。
如果第一个操作数为假,返回第二个操作数。
console.log(0 || 10) // 10
console.log(11 || 0) // 11
非 !:
console.log(!10) // false
console.log(!0) // true
⑥位运算符
左移 <<:按位左移,后面补0
右移 >>:按位右移,前面补0
按位取反 ~
按位与运算 &
按位或运算 |
按位异或运算 ^
console.log(3<<1) // 6
console.log(3>>1) // 1
console.log(~6) // -7
console.log(2&1) // 0
console.log(2|1) // 3
console.log(2^3) // 1
6、流程控制
(1)选择结构
if语句:
if (2>1){
console.log(222)
}
if (2>10){
console.log(222)
}else {
alert(10)
}
此外,if语句还可以嵌套
switch语句:
var week=3;
switch (week){
case 1:alert("星期一");break;
case 2:alert("星期二");break;
case 3:alert("星期三");break;
case 4:alert("星期四");break;
case 5:alert("星期五");break;
case 6:alert("星期六");break;
case 7:alert("星期日");break;
default:alert("nothing");
}
(2)循环语句
for语句:
for (初始化; 条件;增量) {
循环体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
<script>
var elses_P = document.getElementsByTagName("p")
console.log(elses_P)
for (var i=0;i<elses_P.length;i++){
console.log(i);
console.log(elses_P[i]);
}
</script>
</body>
</html>
while语句:
while (条件) {
循环体
}
var x = 0,i = 1;
while (i<=100) {
x += i;
i++
}
console.log(x) // 5050
7、异常处理
try {
// 这段代码顺序执行,其中任何一个语句抛出异常,该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行
// e是一个局部变量,用来指向Error对象,或者其他抛出的对象
}
finally {
// 无论try中代码是否有异常抛出,甚至try代码块中有return语句,
// finally代码块中始终会被执行。
}
// 主动抛出异常 throw Error("xxx")
例:
try {
console.log(123)
throw Error("define error")
}
catch (e) {
console.log(e)
}
finally {
console.log("finally")
}
8、函数
//定义函数
function f(){
console.log(123)
}
//调用函数
f()