先学了点js基础```

前端JS-Day1：基础语法

今天是前端青训营的第一天。

首先是学习了JavaScript的Day01剩下的的一点内容，然后又听了青训营的第一天内容——计算机网络概念（真的很难，一头雾水）

JS的引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。

通过 script 标签将 JavaScript 代码引入到 HTML 中，这个有两种方式：

1.内部方式

2.外部方式

内部形式

通过 script 标签包裹 JavaScript 代码，script标签一般放在下半个body上面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('前端学习第一天！')
  </script>
</body>
</html>

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

// demo.js
document.write('新建一个JS文件！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript  引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码就会被忽略掉！
  	alert(666);  
  </script>
</body>
</html>

输入与输出

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以 弹窗形式 提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</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>
    <style>
        table {
            border-collapse: collapse;
            height: 70px;
            margin: 0 auto;
            text-align: center;
        }

        th {
            padding: 5px 30px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- <h2 style="text-align: center;">订单确认</h2>
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>
        <tr>
            <td>小米青春版</td>
            <td>1999元</td>
            <td>100</td>
            <td>199900</td>
            <td>武汉阳逻</td>
        </tr> -->

    <script>
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        let total = price * num
        document.write(`
            <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>
        <tr>
            <td>小米青春版</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
</table>
            `)
    </script>
    </table>
</body>

</html>

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

计算机网络概念

学习大纲

计算机网络基础

网络组成部分

主机：客户端和服务端
路由器
网络协议

网络结构

网络的网络

信息交换方式

电路交换和分组交换

网络分层

分清职责，物理层、链路层、网络层、运输层和应用层

网络协议

标头和载荷

在计算机网络中，数据通常按照协议的格式进行封装和传输。一个数据包或帧通常分为两部分：标头（Header）和载荷（Payload）。标头和载荷分别承担不同的作用，共同实现数据在网络中的传输和处理。

标头（Header）：

标头是数据包或帧的开头部分，包含了用于处理和传输数据的控制信息。标头中的信息根据不同的协议和网络层次而有所不同。一般来说，标头包含了如下信息：

源地址和目的地址：标头中通常包含了发送方和接收方的地址信息，如 IP 地址、MAC 地址等。这些地址信息用于确保数据正确传输到目的地。

协议类型：标头中还包含了协议类型信息，以标识数据包属于哪个协议。这有助于网络设备正确处理和转发数据包。其他控制信息：标头中还可能包含其他控制信息，如数据包的生命周期、优先级、标志位等。

2.载荷（Payload）：

载荷是数据包或帧的主体部分，包含了实际要传输的数据。载荷的内容根据不同的应用和场景而有所不同。例如，在传输文件时，载荷中包含了文件的内容；在传输网页时，载荷中包含了 HTML、CSS 和 JavaScript 等网页元素。

在数据传输过程中，数据包或帧会经过多个网络层次。每个层次都可能为数据添加自己的标头，形成嵌套的结构。这种嵌套结构有时被称为“封装”（Encapsulation）。当数据到达目的地时，每个网络层次会依次去除相应的标头，还原出原始的数据。这个过程被称为“解封装”（Decapsulation）。

web中的网络

HTTP

HTTP（超文本传输协议）是应用层的一个协议，用于在客户端（如浏览器）和服务器之间传输超文本和其他资源。HTTP 协议的请求和响应消息都包含头部（Header）信息，用于描述和控制消息的传输和处理

CDN

CDN（Content Delivery Network，内容分发网络）是一种用于优化网络资源访问速度和提高用户体验的技术。CDN 的核心思想是将网站或应用程序的内容（如图片、视频、脚本等）缓存到位于不同地理位置的服务器上，使用户可以从最近的服务器获取所需的内容，从而降低延迟、提高访问速度和可用性。

CDN 的主要优点包括：

降低延迟：通过将内容缓存到离用户更近的边缘服务器上，CDN 可以显著降低访问延迟，提高用户体验。

提高可用性：CDN 能够在多个边缘服务器之间分发流量，从而提高系统的冗余性。当某个边缘服务器出现故障时，用户的请求可以被重新定向到其他可用的服务器，确保服务的正常运行。

减轻源站压力：由于大部分用户请求都被 CDN 的边缘服务器处理，源站服务器的压力得到了缓解，从而降低了源站的成本和维护复杂性。

节省带宽：CDN 可以通过缓存和压缩技术，有效地减少网络带宽的消耗，降低数据传输成本。

安全性：CDN 可以提供诸如 DDoS（分布式拒绝服务）攻击保护、Web 应用程序防火墙等安全措施，保护网站免受攻击和恶意访问。

支持动态内容：除了静态内容外，CDN 还可以缓存和分发动态内容，如动态生成的 HTML 页面、Web API 的响应等。

CDN 的主要组成部分包括：

边缘服务器（Edge Server）：位于各地的服务器，用于缓存和分发内容。当用户请求内容时，CDN 会将请求重定向到最近的边缘服务器，从而加快访问速度。边缘服务器之间会根据一定的策略进行内容同步，确保缓存的内容是最新的。

负载均衡器（Load Balancer）：用于在多个边缘服务器之间分发用户请求。负载均衡器根据各边缘服务器的负载情况和用户的地理位置，智能地将请求分配到合适的边缘服务器。

域名解析系统（DNS）：CDN 通常会有自己的 DNS 服务，用于将用户的请求重定向到最近的边缘服务器。当用户访问一个使用 CDN 的网站时，DNS 会根据用户的 IP 地址和边缘服务器的位置信息，返回最近的边缘服务器 IP 地址，从而实现请求的重定向。

内容管理系统（CMS）：用于管理和维护 CDN 中的内容。内容提供者可以通过 CMS 将内容发布到 CDN，并对内容进行更新、删除等操作。

WebSocket

网络安全

网络安全三要素：机密性、完整性和身份验证
在没有提前交换秘密信息的前提下，无法在不安全的信道交换秘密信息
PKI保证了普通用户不需要“面对面”和根证书机构交换根证书
HTTPS使用PKI完成了除客户端身份验证以外的特性，客户端身份验证靠
HTTP协议实现

前端-Day1与计算机网络概论|青训营笔记