JavaScript 基础快速入门:数据类型、变量、函数、循环、运算符、反单引号模板字符串

目录

JavaScript 脚本概述

JavaScript 数据类型

JavaScript typeof, null, 和 undefined

JavaScript 变量

JavaScript 运算符

JavaScript 循环

JavaScript switch 语句

JavaScript if...Else 语句

JavaScript 函数

反单引号 ` 模板字符串

JavaScript 脚本概述

1、JavaScript 有许多流行的第三方库。https://www.runoob.com/js/js-intro.html

2、Js、Css 文件文乱码问题

        如果把 <script></script> 代码或是 css 样式从 <html/> 代码中抽出来单独做 xx.js 文件或 xx.css文件，然后用 <script lang=”javascript” src=”xxx.js”/> 等方式包含回去，发现 xxx.js 或 xxx.css 中的中文在页面出现了乱码，这是因为保存 js、css 文件的时候用的编码已经和此<htnl/>的编码不同所致，这时可以把 xxx.js、xxx.css 文件用记事本打开，再做另存为来修改它的编码。

3、html 页面都是从上往下解析。

4、导入 css 文件时，可以不用写结束标签，但是导入 js 文件时，必须写结束标签。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

5、注意外部JS中，EL表达式是无效的，可以先用EL表达式取值，然后放在隐藏域中，再接着在外部JS中用JQuery间接取值。

6、被依赖的 js 放在前面；前面 js 定义的全局变量以及方法，后面的js中可以直接调用。

JavaScript 数据类型

https://www.runoob.com/js/js-datatypes.html。

1、Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

2、字符串可以是引号中的任意文本，可以使用单引号或双引号。

3、JavaScript 只有一种数字类型，可以带小数点，也可以不带。

4、布尔（逻辑）只能有两个值：true 或 false。

5、数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

6、对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，属性由逗号分隔。

JavaScript typeof, null, 和 undefined

JavaScript typeof, null, 和 undefined | 菜鸟教程

1、可以使用 typeof 操作符来检测变量的数据类型。

2、在 JavaScript 中 null 表示 "什么都没有"，是一个只有一个值的特殊类型，表示一个空对象引用。可以设置为 null 来清空对象。

3、当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

3、在 JavaScript 中, undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined。可以通过设置值为 undefined 来清空。 类型为 undefined。

4、undefined 是所有没有赋值变量的默认值，自动赋值。

4、null 和 undefined 的值相等，但类型不等。

7、Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

<script type="text/javascript">
    document.writeln(typeof (12) + "<br/>"); // number
    document.writeln(typeof (3.14159) + "<br/>"); // number
    document.writeln(typeof ("Hello 'Js'") + "<br/>"); // string
    document.writeln(typeof ('A') + "<br/>"); // string
    document.writeln(typeof (true) + "<br/>"); // boolean
    document.writeln(typeof (null) + "<br/>"); // object
    document.writeln(typeof ([1, 2, 3]) + "<br/>"); // object
    document.writeln(typeof (new Array("Saab", "Volvo", "BMW")) + "<br/>"); // object
    document.writeln(typeof ({name: "John", id: 5566}) + "<br/>"); // object
    document.writeln(typeof (new Date()) + "<br/>"); // object
    document.writeln(typeof (undef) + "<br/>"); // undefined
    document.writeln((null == undefined) + "<br/>"); // true
    document.writeln((null === undefined) + "<br/>"); // false
    if (typeof undef === "undefined") {
        // undef 变量类型为 undefined
        document.writeln("undef 变量类型为 undefined <br/>");
    }
</script>

JavaScript 变量

JavaScript 变量 | 菜鸟教程

1、JavaScript 变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

    变量必须以字母开头。
    变量也能以 $ 和 _ 符号开头（不过不推荐）。
    变量名称对大小写敏感（y 和 Y 是不同的变量）。

2、JavaScript 语句、变量都对大小写敏感。

3、一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

4、可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。

5、编程时经常会声明无值的变量，当后期使用变量时，其值实际上是 undefined。

6、在 2015 年以前，使用 var 关键字来声明 JavaScript 变量，在 2015 年后(ES6)允许使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。

7、在 JavaScript 函数内部声明的变量（使用 var）是局部变量，只能在函数内部访问它。在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

8、JavaScript 变量的生命期从它们被声明的时间开始，局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。

    // 创建了名为 name 的变量，并向其赋值，然后把它放入 id="bodyId" 的 HTML 段落中：
    let name = "蚩尤后裔";
    document.getElementById("bodyId").innerHTML = name;
    let id = 1001, age = 20, price = 9000.88;

JavaScript 运算符

1、如需把两个或多个字符串变量连接起来，请使用 + 运算符。

2、两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串。

3、三目运算符：let a1 = Math.random() < 0.5 ? 2 : 4;

JavaScript 循环

1、JavaScript 支持不同类型的循环：

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 当指定的条件为 true 时循环指定的代码块。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

<script type="text/javascript">
    let cars = ["BMW", "Volvo", "Saab", "Ford"];
    for (let i = 0; i < cars.length; i++) {
        // 0：BMW
        // 1：Volvo
        // 2：Saab
        // 3：Ford
        document.write(i + "：" + cars[i] + "<br>");
    }
    document.write("<br>");
    let person = {firstName: "Bill", lastName: "Gates", age: 56};
    for (let p in person) {
        // firstName：Bill
        // lastName：Gates
        // age：56
        document.write(p + "：" + person[p] + "<br>");
    }
    document.write("<br>");
    let i = 0;
    while (i < cars.length) {
        document.write(i + "：" + cars[i] + "<br>");
        i++;
    }
    document.write("<br>");
    i = 0;
    do {
        document.write(i + "：" + cars[i] + "<br>");
        i++;
    } while (i < cars.length);
</script>

JavaScript switch 语句

1、switch case 语句用于基于不同的条件来执行不同的动作。

2、default 关键词来规定匹配不存在时做的事情。

    let x;
    let d = new Date().getDay();
    switch (d) {
        case 0:x = "今天是星期日";break;
        case 1:x = "今天是星期一";break;
        case 2:x = "今天是星期二";break;
        case 3:x = "今天是星期三";break;
        case 4:x = "今天是星期四";break;
        case 5:x = "今天是星期五";break;
        case 6:x = "今天是星期六";break;
        default :x = "系统错误";
    }
    document.write(x);

JavaScript if...Else 语句

1、if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。

2、if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。

3、if...else if....else 语句- 使用该语句来选择多个代码块之一来执行。

4、使用小写的 if，大写字母（IF）会生成 JavaScript 错误！

<script type="text/javascript">
    let time = new Date().getHours();
    if (time < 12) {
        document.write("<p>早上好</p>");
    } else if (time >= 12 && time < 18) {
        document.write("<p>下午好</p>");
    } else {
        document.write("<p>晚上好!</p>");
    }

    if (!null) {
        document.write("<p>!null</p>");
    }
    if (!undefined) {
        document.write("<p>!undefined</p>");
    }
    if (1) {
        document.write("<p>1</p>");
    }
    if (!0) {
        document.write("<p>!0</p>");
    }
    if (!"") {
        document.write("<p>!\"\"</p>");
    }
</script>

JavaScript 函数

1、函数就是包裹在花括号中的代码块，前面使用了关键词 function，function 函数名(参数){函数体}。

2、函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

3、定义函数参数列表时，不必使用var关键字。

4、Javascript 中不存在重载形式，同名的函数后面的直接覆盖掉前面的。

5、如果调用方法时，忘记了写()，则会把函数对象的引用传给接收的变量，而打印出函数体的内容。

6、匿名函数就是没有名称的函数。

7、JavaScript 对大小写敏感，关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

8、带有返回值的函数，在使用 return 语句时，函数会停止执行，并返回指定的值。希望退出函数时 ，也可使用 return 语句，返回值是可选的。函数返回值直接return即可，不需要在方法前加数据类型。

    function add(a, b) {
        return a + b;
    }
    document.write("<p>" + add(10, 20) + "</p>");
    document.write("<p>" + add(10, 35) + "</p>");

反单引号 ` 模板字符串

1、在 JavaScript 中，反单引号（`）通常被称为模板字符串（Template Strings）或模板字面量（Template Literals）的界定符。模板字符串是 ECMAScript 6（ES6）引入的一项功能，允许内嵌表达式，并且支持多行字符串和字符串插值（即嵌入变量或表达式）。

    let a = 5;
    let b = 10;
    let result = `The sum of a and b is ${a + b}.`;
    console.log(result);// 输出：The sum of a and b is 15.

src/main/resources/static/html/反单引号.html · 汪少棠/web_app - Gitee.com。