前端之JS篇(一)——计算机基础&JS简介

今晚务必早点睡

已于 2022-10-01 11:28:54 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： javascript 前端 vscode

于 2022-08-07 09:27:05 首次发布

本文链接：https://blog.csdn.net/m0_57021623/article/details/126206320

版权

前端专栏收录该内容

34 篇文章 10 订阅

订阅专栏

1.计算机基础

1.1 编程语言

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。

计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

1.2 计算机语言

计算机语言指用人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。

计算机语言的种类非常多，总的来说可以分成机器语言，汇编语言和高级语言三大类

实际上计算机最终所执行的都是机器语言，它是由"0"和"1"组成的二进制数，二进制是计算机语言的基础。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFccWSnQ-1659835073257)(Typora_image/001.png)]

1.3 编程语言

可以通过类似于人类语言的"语言"来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言(Programming Language)。

编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇(不同的编程语言的格式和词汇不一样)，必须遵守。

如今通用的编程语言有两种形式：汇编语言和高级语言。

汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

高级语言是主要是相对低级语言而言，它并不是特指某一种具体的语言，而是包含了很多编程语言，常用的有C语言、C++、Java、C# Python、PHP JavaScript、Go语言、Objective-C、Swift等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G5nPGoX1-1659835073260)(Typora_image/002.png)]

打开VScode软件，新建文件夹，新建文件01.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('我是汇编语言,来控制电脑网页弹出你好')
    </script>
</head>
<body>
    
</body>
</html>

在VScode的快捷键，在英文状态下输入"!",然后回车，就会自动生成html骨架。

运行效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cz6nycA0-1659835073264)(Typora_image/003.png)]

1.4 翻译器

高级语言所编制的程序不能直接被计算机识破，必须经过转换才能被执行，为此，我们需要一个翻译器。

翻译器可以将我们所编写的源代码转换成机器语言，这也被称为二进制化。记住0和1。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BsyEH0b-1659835073269)(Typora_image/004.png)]

1.5 编程语言和标记语言的区别

编程语言(JavaScript)有很强的逻辑和行为能力。在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。

标记语言(html)不用向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的。

1.6 小节

1.计算机可以帮助人类解决某些问题。

2.程序员利用编程语言编写程序发出指令控制计算机来实现这些任务。

3.编程语言有机器语言、汇编语言、高级语言。

4.高级语言需要一个翻译器转换为计算机识别的机器语言。

5.编程语言是主动的有很强的逻辑性。

1.7 计算机的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TguXOk3O-1659835073273)(Typora_image/005.png)]

1.8 数据存储

1.计算机内部使用二进制0和1来表示数据。

2.所有数据，包括文件、图片等最终都是以二进制数据(0和1)的形式存放在硬盘中的。

3.所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是吧程序文件复制到硬盘中。

4.硬盘、内存都是保存的二进制数据。

1.9 数据存储单位

bit<byte<kb<GB<TB<…
位(bit): 1bit可以保存一个0或者1(最小的存储单位)
字节(Byte):1B = 8b
千字节(KB):1KB = 1024B
兆字节(MB):1MB = 1024KB
吉字节(GB):1GB = 1024MB
太字节(TB):1TB = 1024GB
…

2.0 程序运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQMNgcie-1659835073277)(Typora_image/006.png)]

【注意】:之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所有，才使用存取速度更快的内存来保证运行时的数据。(内存用的是电，速度快;硬盘是机械旋转，速度相比较慢)

2.初识JavaScript

2.1 JavaScript历史

布兰登·艾奇（Brendan Eich，1961年～），JavaScript的发明人，2005年至2014年期间，在Mozilla公司担任首席技术长（Chief Technology Officer）。出任Mozilla的CEO十天就被迫辞职。在1995年利用10天时间完成JavaScript设计。网景公司最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript。

2.2 JavaScript

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Scirpt是脚本的意思)

脚本语言: 不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行，也可基于Node.js技术进行服务器端编程。(通俗的讲，读一行翻译一行)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkFuvLL6-1659835073280)(Typora_image/007.png)]

2.3 JavaScript的作用

表单动态校验(密码强度检测、密码长度检测) (JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
APP(Cordova)
控制硬件 - 物联网(Ruff)
游戏开发(cocos2d-js)

2.4 HTML/CSS/JS的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akQRykYa-1659835073283)(Typora_image/008.png)]

2.5 浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink,老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐步解释每一句源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjiIYT9c-1659835073290)(Typora_image/009.png)]

2.6 JS的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WXL29vO-1659835073295)(Typora_image/010.png)]

2.6.1 ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n8osou2K-1659835073300)(Typora_image/011.png)]

更多参看MON:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q2mbbsoG-1659835073307)(Typora_image/012.png)]

2.6.2 DOM ——文档对象模型

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等。)

2.6.3 BOM ——浏览器对象模型

BOM(Browser ObjectModel,简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2.7 JS的demo

JS有三种书写位置，分别是行内，内嵌和外部。

在VScode新建01.html文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内式的js -->
    <!-- 点击‘唐伯虎’按钮，弹出‘秋香姐’ -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tliYPkAO-1659835073308)(Typora_image/013.png)]

在01.html中执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式js -->
    <script>
        alert('沙漠骆驼');
    </script>
</head>
<body>
    <!-- 行内式的js -->
    <!-- 点击‘唐伯虎’按钮，弹出‘秋香姐’ -->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>

效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NbPCk3d-1659835073309)(Typora_image/014.png)]

新建my.js文件，写代码如下：

alert('加油，加油，加油！');

如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HN4VYszT-1659835073313)(Typora_image/015.png)]

在01.html中执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--第二种 内嵌式js -->
    <script>
        // alert('沙漠骆驼');
    </script>
    <!-- 第三种 外部式的js -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 第一种 行内式的js -->
    <!-- 点击‘唐伯虎’按钮，弹出‘秋香姐’ -->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCirtVHy-1659835073318)(Typora_image/016.png)]

2.7.1 行内式JS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tu0O2gHT-1659835073323)(Typora_image/017.png)]

2.7.2 内嵌式JS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jglSauxW-1659835073325)(Typora_image/018.png)]

2.7.3 外部JS文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m700ID7h-1659835073327)(Typora_image/019.png)]

2.8 JS的注释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ON6IS3Xj-1659835073332)(Typora_image/020.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QMLsbTkc-1659835073336)(Typora_image/021.png)]

2.9 JS输入输出语句

常用语句：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoSFUlYw-1659835073338)(Typora_image/022.png)]

新建html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 这是一个输入框
        prompt('请输入你的年龄');
        // alert 弹出警示框  输出的  展示给用户的
        alert('计算的结果是')
        // console 控制台输出  给程序员测试用的
        console.log('程序员可以看到的')

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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03XoxG6i-1659835073342)(Typora_image/023.png)]

在浏览器任意位置按F12，或者chrome中鼠标右键> 检查

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P57EWANo-1659835073344)(Typora_image/024.png)]

3.变量

3.1 什么是变量

白话：变量就是一个装东西的盒子。

通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请一块用来存放数据的空间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-auWhB22S-1659835073346)(Typora_image/025.png)]

3.2 变量的使用

变量在使用分为两步:1.声明变量 2.赋值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CteAnDs9-1659835073351)(Typora_image/026.png)]

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 声明变量
        var age;
        // 赋值变量
        age = 18;
        // 输出结果
        console.log(age);
        // 变量的初始化   声明一个变量并赋值
        var myname = '张三';
        console.log(myname);

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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3oJoYtx-1659835073355)(Typora_image/027.png)]

3.3 案例：变量的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yt9Rz556-1659835073357)(Typora_image/028.png)]

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = '旗木卡卡西';
        var addresss = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(addresss);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ma7aWkxm-1659835073360)(Typora_image/029.png)]

3.4 案例：变量的使用

1.弹出一个输出框，提示用户输入姓名

2.弹出一个对话框，输出用户刚才输入的姓名

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.用户输入姓名   存储到一个myname的变量里面
        var myname = prompt('请输入您的名字');
        // 2.输出这个用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4OcmsMXt-1659835073363)(Typora_image/030.png)]

3.5 变量语法扩展

3.5.1 更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

3.5.2 同时声明多个变量

同时声明多个变量时，只需要写一个var,多个变量名之间使用英文逗号隔开，最后一个加分号。

3.5.3 声明变量特殊情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqKMKUzv-1659835073364)(Typora_image/031.png)]

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.更新变量  经过测试，更新一次可以显示，第二次更新不会显示，后续解释这个问题
        var myname = '李二';
        console.log(myname);
        myname = '张三';
        console.log(myname);
        myname = '赵四';
        console.log(name);
        // 2.声明多个变量
       /*  var age = 18;
        var address = '上海';
        var  salary = 200; */
        var age = 18;
            address = '上海',
            salary = 200;
        console.log(age,address,salary);
        // 3.声明变量的特殊情况
        // 3.1 只声明不赋值，结果是undefined 未定义的
        var sex;
        console.log(sex);  // undefined
        // 3.2 不声明不赋值，直接使用
        // console.log(phone);   // Uncaught ReferenceError: phone is not defined
        // 上行代码报错，所以下行不在执行，若想执行下行代码，故注释了上行代码
        //3.3 不声明直接赋值使用
        today = '今天是星期天';
        console.log(today);    // 今天是星期天
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgEHIEC9-1659835073371)(Typora_image/032.png)]

3.6 变量命名规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UrFTT9S0-1659835073373)(Typora_image/033.png)]

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var user = 10,
            uSer = 20,
            user01 = 30;
            _user = 40;
        console.log(user,uSer,user01,_user)
        // var var;不能用,因为var有特殊意义了，这个叫做关键字，不能作为变量名的  如：for while if 也不可以
        // name 在一些浏览器有特定的含义，直接使用会报错，所以尽量不要直接使用name 作为变量名
        console.log(name);  //没声明 直接使用 没报错
        console.log(tel); // 没声明，直接使用 报错
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOK0TmzK-1659835073374)(Typora_image/034.png)]

小检验：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R81gMoB6-1659835073381)(Typora_image/035.png)]

3.7 案例

要求：交换两个变量的值(实现思路：使用一个临时变量用来做中间存储)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwUTGemJ-1659835073385)(Typora_image/036.png)]

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
          js 是编程语言，具有很强的逻辑性在里面，实现这个要求的思路，先怎么做后怎么做 
          具体思路：需要需要一个临时变量c
                  1. 把 a值 给临时变量 c
                  2. 把 b值 给 a值
                  3. 把 c值 给 b值
        */
       var c;  // 声明临时变量，值为空
       var a = '值a';
       var b = '值b';
       console.log(a,b);
       c = a;
       a = b;
       b = c;
       console.log(a,b);
    </script>
</head>
<body>
    
</body>
</html>