JavaScript是一种脚本语言,它的作用是提供控制其他大型程序的能力,在前端其作用包括:
操控浏览器的能力
广泛的应用领域,包括app、小程序等都可以基于JavaScript
易学
ECMAScript是一种现行的规范,而JavaScript是它的实现,可以理解二者是一致的,目前规范最新是ES6,最常用的是ES5
JavaScript的基础语法
语句
与Java一致,以分号结尾,在前端中可以把JavaScript语法写在<body>
标签的<script>
标签中
<body>
<script>
var num = 10;
</script>
</body>
变量和标识符
JavaScript中的变量命名与JAVA不太一样,一般可以包括字母、美元符号$、下划线、数字,其中数字不能开头
与java不一样的还有一点,JavaScript使用var关键字声明变量,数据类型是隐式的
<body>
<script>
var num = 10;
var username = "iwen";
var people_zhangsan = "张三";
var $zhangsan = "张三";
var zhangsan1 = "张三";
</script>
</body>
和JAVA一样,一些保留关键字不能做标识符,例如break、default、var等
在JavaScript中承担输出的语句是:console.log
<body>
<script>
var num = 10;
console.log(num);
</script>
</body>
而如果把两个语句顺序更换,在JavaScript中不会报错,但是打印的结果不符合预期,这里与Java是有些差异的,例如:
<body>
<script>
console.log(num);
var num = 10;
</script>
</body>
实际上等同于:
<body>
<script>
var num;
console.log(num);
var = 10;
</script>
</body>
JavaScript引入
三种方案:
直接使用
<script>
标签写代码嵌入引入本地独立js文件,比较推荐
引入网络来源文件
引入本地独立文件
<body>
<script src="./js/firstjs.js"></script>
</body>
只需要在<body>
中直接引就好了
引入网络来源文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://cdn.bootcn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
要在head中引入
注释
JavaScript中的注释不会被引擎解释
JavaScript使用//做单行注释,或使用/* */做多行注释,和JAVA是一致的
输出
JavaScript中输出方式包括弹窗输出、控制台输出、页面输出
<body>
<script>
console.log("我是控制台输出");
alert("我是弹出框");
document.write("我输出到页面");
</script>
</body>
数据类型
JavaScript中六种数据类型为数值、布尔、字符串、undefined、null、对象
ES6中引入了Symbol和bigInt类型
其中数值、字符串、bool为基本数据类型
合成类型类似JAVA中的引用类型,可以由基本数据类型合成,使用大括号定义:
<body>
<script>
var user = {
age:19,
name:"Iwandy",
married:true,
jobs: {
first:"coder",
},
}
</script>
</body>
null和undefined都没有什么意义,可以不赋值,null强调对象不存在,undefined强调空值
<body>
<script>
var noValue = null;
var unde = undefined;
</script>
</body>
js中对null和undefined的比较是与java中不同的
对于undefined的判断要用type函数而不能用==,且结果要以字符串形式比较:
// 错误写法1:因为当exp = null的时候,这里也会成立
var exp = undefined
if (exp == undefined) {
alert("undefined")
}
// 错误写法2:因为exp = undefined,或exp = null时,这里都是false
var exp = undefined
if (typeof(exp) == undefined) {
alert("undefined")
}
// 正确写法:只有exp = undefined时这里才成立,而null则不会成立
var exp = undefined
if (typeof(exp) == "undefined") {
alert("undefined")
}
判断null则更麻烦一些,想要判断准确,还得排除0的影响,最简单是使用===判断:
// 错误写法1:使用==判断时,exp值为undefined或null,都会得到true结果,为0则得到false结果
var exp = null
if (exp == null) {
alert("null")
}
// 错误写法2:使用!判断,exp值为null、undefined、0都会得到true结果
var exp = null
if (!exp) {
alert("null")
}
// 错误写法3:使用typeof直接与null比较或与"null"比较,exp值为null、undefined、0都会得到false
var exp = null
if (typeof(exp) == null) {
alert("null")
}
// 正确写法1:要排除undefined和0的作用,必须要用以下写法
var exp = null
if (!exp && typeof(exp)!="undefined" && exp!=0) {
alert(“is null”)
}
// 正确写法2:使用js中特有的===判断符
var exp = null
if (exp === null) {
alert("null")
}
运算符
typeof
常用于判断基本数据类型
<body>
<script>
var num = 10;
console.log(typeof num);
</script>
</body>
需要注意的是,判断数组类型返回Object
console.log(typeof []);
对于null和undefined,分别返回的是Object和undefined
算术运算符
+、-、*、/四个比较普通
自增、自减和java也一样
var n1 = 1;
var n2 = 2;
console.log(++n1);
console.log(--n1);
在javascript里面也可以用组合运算:
var n1 = 1;
var n2 = 2;
console.log(n1++ + --n2); // 2; n1 = 2; n2 = 1
赋值运算符
+=、-=、*=、/=、%=等,和java也基本一样
比较运算符
>、<、>=、<=和java一样
==、!= 和java不一样,java里面是重写equals,javascript里面是比较值
===严格等于、!==严格不相等,javascript里面是比较值+类型
var n1 = 1;
var n2 = "1";
console.log(n1 == n2); // true
console.log(n1 === n2); // false
评论区