JavaScript快速入门

原创已于 2023-03-30 09:29:12 修改 · 240 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-30 09:26:27 首次发布

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这篇文章介绍了JavaScript的基本用法，包括通过内部和外部标签引入JS，基本语法如变量定义、条件控制，数据类型如数字、字符串、布尔值，以及比较运算符的使用。还提到了JavaScript的严格检查模式，用于防止编程中的常见错误。

JavaScript快速入门

2.1、引入JavaScript标签

内部标签
```
<script>
	//......
</script>
```

外部引入

abc.js

<script src="abc.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写Javascript代码
    <script>
        alert("hello,world")
    </script>-->


    <!--外部引入-->
    <!--注意，script标签必须成对出现-->
    <script src="js/alert.js"></script>
</head>
<body>

</body>
</html>

2.2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JavaScript严格区分大小写-->
    <script>
        //1.定义变量  变量类型  变量名=变量值
        var score = 88;
        //2.条件控制
        if(score>60 && score<70){
            alert("60~70")
        }else if(score>70 && score<80){
            alert("70~80")
        }else {
            alert("其他")
        }
        //console.log(score)  在浏览器的控制台打印变量！  
        /*
        * 多行注释
        *  */
    </script>

</head>
<body>

</body>
</html>

浏览器必备调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yzU8IiZ3-1680139559328)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20221009233943517.png)]

2.3、数据类型

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

number

js 不区分小数和整数,Number

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

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

&&   // 两个都为真，结果为真
||   //一个为真，结果为真
!    //真即假，假即真

比较运算符【重要】

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

这是一个js的缺陷，坚持不要使用 == 比较

须知：

NaN==NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题：尽量避免使用浮点数进行运算，存在精度问题！

null和undefined

null空
undefined 未定义

数组

//保证代码的可读性，尽量使用[]
var arr=[1,3,4,5,'hello',true]
new Array(1,23,4,"hello")

取数组下标，如果越界了，就会

undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(2,1,3);
var person = {
    name : "hua",
    age : 3,
    tags : ["js","java","web","..."]
}

取对象的值

person.name
>>'hua'
person
>>{name: 'hua', age: 3, tags: Array(4)}

2.4、严格检查模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMOtENtd-1680139607816)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20221010101708453.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提：IDEA 需要设置支持ES6语法
    "use strict";严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行
     局部变量建议都使用let去定义
    -->
    <script>
        "use strict";
        let d=1;
    </script>
</head>
<body>

</body>
</html>