JavaScript入门篇 Day01

Targetu

已于 2024-05-05 16:22:53 修改

阅读量202

点赞数 2

分类专栏： JavaScript 文章标签： javascript

于 2020-03-26 22:52:28 首次发布

本文链接：https://blog.csdn.net/qq_44958172/article/details/105130565

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript入门

1 什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言。

1.2 历史

ECMAScript可以理解为JavaScript的一个标准，目前最新版本已达到ES6！但大部分浏览器还只停留在支持ES5代码上。

2 快速入门

2.1 引入JavaScript (Hello world)

内部标签

<script>
		alert('hello world');
</script>

外部引入

demut.js文件：

alert('hello world');

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
    <script src="js/demut.js"></script>
  
</head>

<body>
</body>
</html>

运行结果：

在这里插入图片描述

2.2 基本语法入门

浏览器调试必备：

我们会经常用到Console调试js程序！

在这里插入图片描述

案例展示:(展示定义变量与条件控制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JavaScript严格区分大小写！-->
    <script>
        // 1.定义变量    变量类型    变量名 = 变量值；
        var score = 10;
        alert(score);

        // 2.条件控制
        if (score > 60 && score < 70){
            alert("60~70");
        }else if (score >70 && score < 90){
            alert("70~90");
        }else{
            alert("Other");
        }

        //console.log(score) //在浏览器的控制台打印变量！ ～～ sout
        
    </script>
</head>

<body>

</body>
</html>

运行结果：

在这里插入图片描述

2.3 数据类型

数值、文本、图像、音频、视频…

变量

var 变量名 = ...

number

js不区分小数和整数

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

字符串

‘abc’ “abc”

布尔值

true, false

逻辑运算

&& // 两个都为真，结果为真
|| // 一个为真，结果为真
！ // 真值取反

比较运算符

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

须知：

NaN===NaN，NaN与所有数值均不相等，包括自己。只能通过isNaN(NaN)来判断其是否为NaN。

浮点数问题：

console.log((1/3)===(1-2/3)); //false

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

Math.abs(1/3-(1-2/3)) < 0.000000001 //true

null和undefined

null 空
undefined 未定义

数组

Java的数组必须是一系列类型相同的对象，而JS中不需要这样！

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

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

案例展示：

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

    <script>
        var arr = [1,2,3,4,5,'hello',null,true];
        //Person person = new Person(1,2,3,4,5);
        var person = {
            name:"demut",
            age:3,
            tags:['js','java','web','...']
        }
    </script>

</head>
<body>
</body>
</html>

取对象的值，(控制台中)

person.name
> "demut"
person.age
> 3

2.4 严格检查格式

一个html文件会引用多个js文件，若其中有全局变量，则互相之间会产生影响，引发很多麻烦，所以要使用严格检查格式，避免上述情况的发生。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提： IDEA 需要设置支持ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题。
    必须写在第一行！

    局部变量建议都使用let定义

    -->
    <script>
        'use strict';
        // i = 1； //报错
        let i = 1;
        //ES6 let
    </script>
</head>
<body>

</body>
</html>