JS是什么，JS有什么用？带你看看前端的成长史：如何从3岁小孩子成长到成熟大叔

胡gh
141 阅读8分钟

前端的幼年时期

首先，什么是前端。

在早期的时代，前端的前面(即构成网页的基本组成元素)是由最基础的div+css+JS组成，此时的JS并不成熟，

  • div 是HTML中的一个块级元素，用于布局。
  • css 用于控制网页的样式和布局。
  • JS 则为网页添加交互功能。

这三者相辅相成，共同构成了完整的前端开发体系。

这个时候的前端开发师，每天就是不厌其烦的用这些东西，一板砖一板砖地堆砌出一个界面。

例如下面这个HTML布局:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document1</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: blue ;
        }
    </style>
</head>
<body>
    <p>
        第一段
    </p>
    <p>
        这<i>是</i><strong>一个</strong>
        <span style="color:blueviolet;width:80px;height:50px">紫色</span>的京东页面
    </p>
    <div class="box"></div>
    <p>last prograph</p>
</body>
</html>

输出结果就为:

image.png

HTTP协议与Browser/Server架构

HTTP（HyperText Transfer Protocol）即超文本传输协议，是互联网上应用最为广泛的一种网络协议。它定义了客户端（通常是浏览器）如何向服务器请求资源以及服务器如何响应这些请求的标准。Browser/Server架构就是基于这种协议实现的，其中浏览器作为客户端向服务器发起请求，服务器处理请求后返回相应的数据或网页给浏览器。

HTML5文档声明与重要标签

<!Doctype html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>
  • <a> 标签用于创建超链接。
  • img, audio 等标签用于嵌入图像、音频等多媒体内容。
  • 行内元素如 a, span 不可以设置宽高，其尺寸由内容决定；块级元素如 div, ul, p 默认占据一整行。 例如上面那个页面，创建一个超链接：
.......
    <p>
        这<i>是</i><strong>一个</strong>
        <span style="color:blueviolet;width:80px;height:50px">紫色</span>的<a href="https://www.jd.com">京东页面

        </a>
    </p>
.......

效果如下:

image.png

tips：关于HTML的一些知识

html5是html的最新版本

盒子模型，按照布局(Layout)的需要来确定要多少行和多少列

  • 行内元素，确定盒子里放什么东西，(a，span等)，行内元素不能设置宽高，是由内容决定的。如刚刚html里面的
<span style="color:blueviolet;width:80px;height:50px">紫色</span>

结果中"紫色"并不会根据"span"语句中对宽高的赋值响应，而是根据内容决定其宽高。

  • 块级元素，块级元素做盒子，大体宏观，(div，ul，p等)，默认占据一整行。

  • 功能分类

    • header，footer，main，section，aside，artcile，html5 这类新的语义化标签(语义化:见文知义,比传统的div标签更好理解html的结构和意义,更好维护,更好维护,对爬虫(SEO)更好,即更利于搜索引擎优化)
    • table tr td 表格
    • form input 收集用户数据
    • html,head body html结构
    • a 超链接
    • p div等 段落
    • span等 文本类的

语义化标签的应用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document2</title>
    <style>
        .header, .nav, .main, .footer {
            border-radius: 10px;
            background-color: green;
            margin-bottom:10px;
            color: white;
            min-height: 50px;
            text-align: center;
        }
        .main {
            display: flex;
        }
        .article {
            flex: 1;
            margin-right: 10px;
            background-color: pink;
        }
        .aside {
            width: 30%;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 头部标签 -->
    <header class="header">
        header
<!-- 导航标签 -->
    </header>
    <nav class="nav">nav</nav>
    <!-- 主体标签 -->
    <main class="main">
        <!-- 文章标签 -->
        <article class="article">
            <h1 class="title">什么是html5语义化标签</h1>
            <ul>
                <li>标签语义化有助于构架良好的HTML结构,有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。</li>
                <li>有利于不同设备的解析(屏幕阅读器,盲人阅读器等)满是div的页面这些设备如何区分那些是主要内容优先阅读？</li>
                <li>有利于构建清晰的机构，有利于团队的开发、维护。</li>
            </ul>
            <!-- 新区块 -->
            <section class="section">
                comments
            </section>
        </article>
       <!-- 侧边栏 -->
        <aside class="aside">
            aside
        </aside>
    </main>
    <!-- 底部标签 -->
    <footer class="footer">
        footer
    </footer>
</body>
</html>

页面如下：

image.png

tips :很多时候，专业的前端大佬调试页面时，可以给背景赋予颜色，表示某命令执行。

什么时候需要JS

在我们专心用最简单的方法做"切图崽"的任务时，随着时代的发展，衍生了很多客户端的需求，此时，"切图崽"已经远远不能满足需求。

  • 当文档需要交互的时候：比如用户评论系统。在这个场景下，JavaScript可以用来验证用户输入的数据、提交表单而无需重新加载整个页面（通过AJAX）、实时显示新的评论等。

  • 当需要简单的页面交互的时候：这包括但不限于：

    • 页面元素的显示与隐藏：例如点击按钮显示更多的信息。
    • 动态内容更新：如轮播图、动态加载更多内容等。
    • 表单处理：除了上述提到的评论系统外，还包括登录注册流程中的表单验证、密码强度提示等。
    • 用户界面效果：像下拉菜单、模态框（弹出层）、工具提示等。
    • 浏览器事件监听：例如监听窗口大小的变化以调整布局，或者监听滚动位置来实现无限滚动加载内容。

简而言之，每当一个网页需要根据用户的操作或其他事件作出响应时，就需要使用JavaScript来增强用户体验，使网站更加动态和互动。此外，随着技术的发展，JavaScript的应用范围已经扩展到了服务器端开发（如Node.js）、移动应用开发等领域。但其核心用途仍然是为网页添加交互性。

下面就是一个基本的交互，点击按钮，就会产生交互效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="document.getElementById('msg').innerHTML='你点击了按钮!'">点击我</button> 
    <p id="msg">你还没有点击按钮</p>
  
</body>
</html>

页面如下：

image.png

image.png

由此见，JavaScript允许根据用户的操作或事件动态地改变网页内容。比如，基于用户的输入自动完成搜索建议，或者根据不同的选择显示不同的信息。弥补了早期静态页面的不足，让网页活了起来。

移动端时代的前端技术，JS最受用的时代来了

在移动端时代，随着智能手机的普及，社交平台如Twitter、新浪微博和微信等迅速崛起。这些平台极大地推动了移动互联网的发展，也对前端开发提出了新的要求。为了适应移动设备的特性，前端开发者开始采用响应式设计（Responsive Design）以确保网页能够在不同尺寸的屏幕上良好显示。同时，JavaScript及其相关框架（如React Native、Vue.js等）使得开发人员能够使用同一套代码库来构建跨平台的应用程序，这大大提高了开发效率。

Node.js后端

说明JS不再局限于前端，也可以运行于服务器后端。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者用JavaScript编写服务器端代码。这意味着JavaScript不仅限于浏览器内的操作，也可以用来处理服务器端的任务，比如数据库操作、文件系统访问等。通过Node.js，JavaScript实现了从前端到后端的全栈覆盖，即“一种语言搞定两件事”。

大模型与生成式AI

随着人工智能技术的进步，特别是大型语言模型（LLM）和生成式AI（AIGC, Artificial Intelligence Generated Content）的发展，前端开发领域也开始受益。例如：

  • Vibe Coding：这类工具利用AI能力自动生成代码片段或整个项目结构，帮助开发者快速解决问题或者加速开发流程。虽然目前这种技术还在发展中，但它展示了未来软件开发可能的方向之一。
  • JavaScript与AI应用：JavaScript不仅可以用于传统的Web开发，还可以参与到AI应用中。类似Python，JavaScript也能借助TensorFlow.js这样的库来进行机器学习任务，包括图像识别、自然语言处理等领域。这意味着JavaScript正在扩展其边界，进入更多样化的应用场景。

通用人工智能（AGC）

尽管当前我们仍处于专用人工智能阶段，但研究者们正朝着更高级别的智能——即所谓的“通用人工智能”（Artificial General Intelligence, AGC）迈进。AGC指的是具备像人类一样的广泛认知能力的人工智能系统，它们能够在多个领域展示出类人的智慧水平，并且可以自主学习新技能，解决未曾遇到的问题。对于前端开发而言，AGC可能会带来更加智能化的设计工具和服务，甚至自动完成复杂的编码任务，进一步简化开发流程，提高生产率。

总结来说，从移动优先的设计理念到利用AI进行辅助开发，再到展望未来的通用人工智能，前端开发领域持续进化。这些进步不仅改变了开发者的工作方式，也为用户带来了前所未有的体验提升。

avatar
文章
阅读
粉丝