写在前面:本文用于快速学会简易的JS,仅做扫盲和参考作用
1.JS是什么
JavaScript是一门跨平台,面向对象的脚本语言(即不需要编译,可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言,但是基础的语法是类似的
2.JS的引入方式
JS如何在前端代码里面体现作用。有两种方式,一种是内部脚本,一种是外部脚本
注意,JS代码必须放在 script标签里面,一个页面可以放置任意数量的script,一般建议把js放在body的后面,这样可以改善页面显示的速度。js可以放在html页面的任意位置,不影响他的使用(即使放在html标签的后面也可以正常运行)
2.1内部脚本:将JS代码写在HTML里面
内部脚本调用如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert("JS is")
</script>
</head>
<body>
</body>
</html>
效果如下所示:
证明了JS代码运行成功
2.外部脚本:将JS代码定义在一个新的文件里
类似于其他语言库的定义,即将需要执行的JS代码放在一个新的js文件里,然后通过调用的方式来执行js的的代码。
首先,我们创建一个新的叫jswai.js的文件,并输入以下内容。
alert("in js")
然后再html页面做这样引用,通过script里面的src的效果可以达到与内部调用一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jswai.js"></script>
</head>
<body>
</body>
</html>
<script>
alert("JS is")
</script>
需要额外注意的是,script标签无法实现自闭和,即使用了script必须要使用对应的/script,不然会导致js脚本执行不成功
3.JS基础语法
3.1书写语法
3.1.1 区别大小写(即变量A和a不是一个变量)
3.1.2 每行结尾的分号可有可无,即支持c++每行必须有;也支持python的不需要;
3.1.3 单行注释//,多行注释为/**/
3.1.4 大括号表示代码块,和众多强语言一样
常用的输出语句(类似于c++的printf):
- window.alert():显示到弹出框上,上面在内部脚本调用的时候已经看到了效果图
- document.write():显示到html页面上,即直接运行出来的结果变成html,显示到浏览器里面
- console.log():写在了浏览器控制台上,使用f12打开console即可看到输出效果
3.2变量
可以直接使用var来声明变量,这个变量可以存放不同类型的值,变量的名称可以用数字、字母、_(下划线)、和$来表示,但是在定义的时候不可以使用数字作为开头(和别的语言一样),var定义的变量可以支持下面操作:
var a=1
a ="123"
var的作用域属于全局变量,类似于c++里面的#define,不仅仅代码块可以调用,代码块外面的代码也可以进行调用。如果只想被代码块里面调用,而不想被外面的代码调用,可以用let替换var,如果要设置一个不可变换的常量值,可以使用const(这一点和c++保持一个特性),并且let不可以重复定义一个变量。即执行下面这段代码会发生报错
let a=1
let a=2
虽然运行起来反应到浏览器上没有显示效果,但其实f12打开开发者工具后,可以看到js代码已经执行错误了。(如果这段script里面后续还有代码,则后续代码不会执行[因为已经报错了],但是如果在script外面[即script标签的外面]还有html代码,则html代码会正常的显示在页面上)
let可以支持改变值,例如可以这样而不会造成代码的报错
let a=1
a=2
3.3数据类型
JS的基础数据类型主要有以下五种:
number:数字类型
string:字符串类型
boolean:布尔类型
null:空类型
undefined:未初始化类型
使用typeof()可以获取变量的类型,如下代码即可获得
typeof(a)//即可获得a的数据类型
3.4运算符
运算符和java几乎一样,但是增添多了一个===。
=== 和 ==的区别在于 == 会做类型转换, ===不会做类型转换。如下代码即可弄懂两者区别。
var a= 10
var b="10"
if (a==b){
代码块一
}
if (a===b){
代码块二
}
这个代码的运行结果是会执行代码块一,而不执行代码块二,第一个直接类型转换使得a和b都是10,所以等式成立。第二个因为类型不符合所以直接if语句不成立导致不执行代码块二。