JAVA前端快速入门基础_javascript入门(01)

news/2024/5/20 12:05:19

写在前面:本文用于快速学会简易的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语句不成立导致不执行代码块二。