当前位置：首页 > news >正文

JavaScript-HelloWorld、浏览器控制台使用、数据类型

news 来源：原创 2024/5/6 14:08:17

1.基本使用及HelloWorld

在网页上显示HelloWorld

<script>
//在这个标签内写javascript代码
<script>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("hello world");
    </script>
</head>
<body>
</body>
</html>

规范书写方式，样式分离：

新建js文件夹，存放js样式

js代码：

alert("hello world");

外部引入：

注意：script标签必须成对出现
别写成<script/>的形式，容易出BUG

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script>-->
<!--        alert("hello world");-->
<!--    </script>-->
    <script src="js/first.js"></script>

    <!--不用显示定义type，也默认就是javaScript-->
    <script type="text/javascript"></script>
</head>
<body>
</body>
</html>

2.浏览器控制台使用

严格检查格式：

测试代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    javascript严格区分大小写-->
    <script>
        // 1.定义变量  (可以按照Java的代码规范)
        var num = 1;
        //alert(num);
        // 2. 条件控制
        var score = 80;
        if (score >= 60 && score < 70) {
            alert("成绩合格");
        } else if (score >= 70 && score < 80) {
            alert("成绩良好");
        } else if (score >= 80 && score < 90) {
            alert("成绩优秀");
        } else if (score >= 80 && score < 90) {
            alert("成绩非常优秀");
        } else {
            alert("成绩不合格");
        }
        //console.log(score) 在浏览器的控制台打印变量
    </script>
</head>
<body>

</body>
</html>

浏览器的console处可直接敲js代码

常用的几个调试：

3.数据类型快速浏览

3.1 基础知识快速浏览

数值，文本，图形，音频，视频等

1）number
js不区分小数和整数，统一用 Number 表示

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大

2）字符串
‘abc’ 、“abc”

3）布尔值
true，false

4）逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 真即假，假即真

5）比较运算符

= 赋值
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，返回 false。这个 NaN 与所有的数值都不相等，包括自己
只能通过 isNaN(NaN) 来判断这个数是否是 NaN

6）浮点数问题

尽量避免使用浮点数进行运算，存在精度问题！
一般用 |a-b| < 某个精确度，来表示 a=b

7）null 和 undefined

null 空
undefined 未定义

8）数组
Java的数组必须是相同类型的对象~，JS中不需要这样

3.2 字符串

1、正常字符串我们使用单引号，或者双引号包裹
2、注意转义字符 \

\'
\n 回车
\t table
\u ----> Unicode字符
\x ----> Ascall字符

3.3 多行字符串编写

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //`是 tab键 上面 esc 键下面那个按键
        var msg=`hello
                 world
                 biubiu
                 hihi~`
    </script>
</head>
<body>

</body>
</html>

3.4 模板字符串

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //`是 tab键 上面 esc 键下面那个按键
        let name="biubiu";
        let age = 3;
        let msg = `你好呀，${name}`
    </script>
</head>
<body>

</body>
</html>