前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（一）

news2025/12/5 14:58:54

ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡‎‎ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡‎‎ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡‎‎ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡‎‎ﻌﻌﻌﻌ♡‎ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ

                每个人的内心都有一则好消息

                好消息是你不知道自己能有多厉害！

                你能有多爱这个世界！

                你能到达什么成就！

                你的潜力有多少！

——安妮弗兰克                         

思维导图

一、JavaScript介绍

1.1 JavaScript 是什么

体验JS代码：

<!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>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>

效果：点击按钮，按钮唯一高亮

1.2 JavaScript 书写位置

（1）内部 JavaScript

代码：

<!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 -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>

</html>

效果：

（2）外部 JavaScript

js文件位置：

代码：

<!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>
  <script src="./js/my.js">
    // 中间不要写内容
  </script>
</body>

</html>

（3）内联 JavaScript

总结

练习

1.3 JavaScript 的注释

1.4 JavaScript的结束符

1.5 输入和输出语法

输出语法

输入语法

 练习

JavaScript 代码执行顺序

实操代码

<!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>

  <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')
    // 3. 输入语句
    prompt('请输入您的年龄：')
  </script>
</body>

</html>

效果：

进入页面先弹出提示框

点击确定后页面再渲染、控制台打印

1.6 字面量

二、变量

2.1 变量是什么？

2.2 变量基本使用☆

（1）声明变量

（2）变量赋值

赋值运算符

变量初始化

总结

实践代码：

<!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>
  <script>
    // 1. 声明一个年龄变量
    // let age
    // // 2. 赋值   =  赋值
    // age = 18
    // console.log(age)
    // 3. 声明的同时直接赋值  变量的初始化
    // let age = 18
    // 小案例
    let num = 20
    let uname = 'pink老师'
    console.log(num)
    console.log(uname)
  </script>
</body>

</html>

效果：

练习

（3）更新变量

实操代码：

<!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>
  <script>

    // 1 声明的同时直接赋值  变量的初始化
    // let age = 18
    // age = 19
    // // let age = 19
    // console.log(age)
    // 2. 声明多个变量    
    // let age = 18, uname = '迪丽热巴'
    // console.log(age, uname)
    // 提倡声明的方式
    let age = 19
    let uname = '迪丽热巴'
    console.log(age, uname)
  </script>
</body>

</html>

效果：

（4）声明多个变量

 练习

代码：

<!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>
  <script>
    // 输出用户名案例
    // 1. 用户输入
    // prompt('请输入姓名')
    // 2. 内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3. 打印输出
    document.write(uname)
  </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>
</head>

<body>
  <script>
    // let if = 10
    let num1 = 'pink老师'
    let num2 = '戚薇'
    let temp
    // 都是把右边给左边
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1, num2)
  </script>
</body>

</html>

2.3 变量的本质

2.4 变量命名规则与规范

不能以关键字命名变量

严格区分大小写

练习代码：

<!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>
  <script>
    // 1. 姓名
    let uname = prompt('请输入姓名')
    let age = prompt('请输入年龄')
    let gender = prompt('请输入性别')
    document.write(uname, age, gender)
  </script>
</body>

</html>

二. 变量拓展-let和var的区别

先使用，再声明

声明过的变量可以重复声明

let不允许声明前使用

也不允许重复声明

二. 变量拓展-数组

1.1 数组的基本使用

练习：

 术语：

数组实操代码：

<!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>
  <script>
    // let arr = [10, 20, 30]
    // 1. 声明数组 有序 
    let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
    // 2. 使用数组  数组名[索引号] 从0
    // console.log(arr)
    console.log(arr[0]) // 刘德华
    console.log(arr[4])
    // 3. 数组长度 =  索引号 + 1 
    console.log(arr.length)  // 6

    // let 刘德华 = 10
    // console.log(刘德华)
  </script>
</body>

</html>

效果：

三、常量

常量不允许再次赋值（不会改变）

常量声明的时候必须赋值

四、数据类型☆

4.1 数据类型 – 数字类型（Number）

<!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>
  <script>
    // 1. 页面弹出输入框
    let r = prompt('请输入圆的半径：')
    // 2. 计算圆的面积（内部处理）
    let re = 3.14 * r * r
    // 3. 页面输出
    document.write(re)

    // NaN   not a number 
  </script>
</body>

</html>

效果：

4.1 数据类型 – 字符串类型（string）

<!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>
  <script>
    // let age = 20
    // // 模板字符串 外面用`` 里面 ${变量名}
    // document.write(`我今年${age}岁了`)
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')
    // 输出
    document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)
  </script>
</body>

</html>

4.1 数据类型 – 布尔类型（boolean）

4.2 检测数据类型

五、类型转换

5.1 为什么需要类型转换

5.2 隐式转换

5.3 显式转换

转换为数字型

代码（隐式转换）：

<!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>
  <script>
    // 1. 用户输入   prompt 得到是字符串类型 要转换为 数字型
    let num1 = +prompt('请输入第一个数字：')
    let num2 = +prompt('请输入第二个数字：')
    // 2. 输出
    alert(`两个数相加的和是:${num1 + num2}`)
  </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>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

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

<body>
  <h2>订单确认</h2>


  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`
      <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
          </tr>
          <tr>
            <td>小米青春版PLUS</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
          </tr>
        </table>
    `)
  </script>
</body>

</html>

六、常见错误

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1012080.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OPC HDA扫盲

OPC HDA扫盲

目录 1 基本概念 1.1 历史数据服务器类型 1.2 数据源 1.3 对象和接口概述 1.4 所需接口定义 1.5 可选接口定义 1.6 定义 1.7 边界值和时域 2 HDA聚合 2.1 生成间隔 2.2 数据类型 2.3 数据质量 3 聚合示例 3.1 示例数据 3.2 内插&#xff08;INTERPOLATIVE&#x…
阅读更多...
构造与析构

构造与析构

在类的声明中&#xff0c;构造函数和析构函数是一类特殊的函数&#xff1a;由系统自动执行&#xff0c;在程序中不可显示地调用它们。 构造函数 作用&#xff1a;建立对象时对对象的数据成员进行初始化 特点&#xff1a; 构造函数是与类同名的特殊成员函数&#xff0c;没有…
阅读更多...
Xamarin.Android实现App内版本更新

Xamarin.Android实现App内版本更新

目录 1、具体的效果2、代码实现2.1 基本原理2.2 开发环境2.3 具体代码2.3.1 基本设置2.3.2 系统的权限授予2.3.3 进度条的layout文件2.3.4 核心的升级文件 3、代码下载4、知识点5、参考文献 1、具体的效果 有事需要在程序内集成自动更新的功能&#xff0c;网上找了下&#xff…
阅读更多...
【ARM AMBA AXI 入门 11 - AXI 总线 AWCACHE 和 ARCACHE 介绍】

【ARM AMBA AXI 入门 11 - AXI 总线 AWCACHE 和 ARCACHE 介绍】

文章目录 1.1 AXI 传输事务属性1.1.1 slave type1.1.2 系统级缓存 1.2 Memory Attributes1.2.1 Bufferable&#xff0c;AxCACHE[0]1.2.2 Modifiable, AxCACHE[1]1.2.3 cache-allocate 1.3 Memory types 转自&#xff1a;https://zhuanlan.zhihu.com/p/148813963 如有侵权请联系…
阅读更多...
学习记忆——英语篇

学习记忆——英语篇

文章目录 英语字母形象起源右脑记忆单词的原则四大步骤第一步&#xff1a;摄取信息第二步&#xff1a;处理信息第三步&#xff1a;储存信息第四步&#xff1a;提取信息 训练例子字母形象训练 右脑记忆单词5大方法字源法编码法字母编码法字母组合编码法 拼音法全拼法拼音组合 熟…
阅读更多...
前K个高频单词-c++实现

前K个高频单词-c++实现

692. 前K个高频单词 - 力扣&#xff08;LeetCode&#xff09; 给定一个单词列表 words 和一个整数 k &#xff0c;返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c; 按字典顺序 排序。 示例 1&#xff…
阅读更多...
关于Linux服务器.sh文件启动问题

关于Linux服务器.sh文件启动问题

问题描述 在linux服务器上使用文本编辑&#xff08;并非vim操作&#xff09;对.sh脚本文件进行修改后无法启动&#xff0c;显示’\r’识别错误等。 错误如下&#xff1a; 错误原因 因为.sh文件在经过这种编辑后格式产生了错误&#xff0c;由unix转为了doc格式&#xff0c;需…
阅读更多...
Ae 效果：CC Particle Systems II

Ae 效果：CC Particle Systems II

模拟/CC Particle Systems II Simulation/CC Particle Systems II CC Particle Systems II&#xff08;CC 粒子系统 II&#xff09;可用于生成和模拟各种类型的粒子系统&#xff0c;包括火焰、雨、雪、爆炸、烟雾等等。 与 CC Particle World 效果相比有许多类似的属性。最大的…
阅读更多...
华为云云耀云服务器L实例评测｜部署功能强大的监控和可视化工具Grafana

华为云云耀云服务器L实例评测｜部署功能强大的监控和可视化工具Grafana

应用场景 Grafana介绍 Grafana是一个功能强大的监控和可视化工具&#xff0c;适用于各种行业和应用场景&#xff0c;如IT运维监控、网络监控、能源管理、金融市场分析等。它提供了灵活的数据源支持、强大的可视化功能和告警机制&#xff0c;以及注释和过滤功能&#xff0c;使…
阅读更多...
阿里云服务器全方位介绍_优势_使用场景_限制说明

阿里云服务器全方位介绍_优势_使用场景_限制说明

阿里云服务器是什么&#xff1f;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;云服务器可以降低IT成本提升运维效率&#xff0c;免去企业或个人前期采购IT硬件的成本&#xff0c;阿里云服务器让用户像使用水、电、天然气等公共资源一样便捷、高效地使用服务器…
阅读更多...
使用cpolar配合Plex打造个人媒体站，畅享私人影音娱乐空间

使用cpolar配合Plex打造个人媒体站，畅享私人影音娱乐空间

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特别是各…
阅读更多...
langchain+GPT+neo4j 图数据库

langchain+GPT+neo4j 图数据库

neo4j版本是5.11.0,langchain的版本 0.0.288下载apoc插件 https://neo4j.com/docs/apoc/current/installation/ neo4j.conf文件把apoc.*添加到dbms.security.procedures.unrestricted配置项 使用return apoc.version()来查看是否安装成功 pip install neo4j图 参考官网&…
阅读更多...
以太网的简单概念、MAC地址与IP地址的关系

以太网的简单概念、MAC地址与IP地址的关系

以太网 DIX Ethernet V2标准的局域网------以太网。 IEEE 802.3标准和DIX Ethernet V2标准很相似&#xff0c;只有些许区别&#xff0c;不严格的来说&#xff0c;802.3局域网也叫做以太网。以太网是一个局域网&#xff0c;信息以广播的形式发送。 IEEE 802标准定义的局域网参…
阅读更多...
哈工大校园网显示IP地址错误连接不上

哈工大校园网显示IP地址错误连接不上

您当前获取到的IP地址有误&#xff0c;请重新开关无线获取IP地址(注:电脑端还可以通过cmd窗口&#xff0c;输入ipconfig /release、ipconfig /renew命令)。如未解决此问题请联系网络安全和信息化办公室处理。 当校园网登录时会出现如上情况&#xff0c;并且当你按照他的方法尝试…
阅读更多...
vue2使用vuedraggable实现拖拽删除添加重置功能

vue2使用vuedraggable实现拖拽删除添加重置功能

需求&#xff1a;要输入xx阶段&#xff0c;之后输入后显示但是要可以自己手动排序和删除&#xff0c;以免写错了&#xff0c;并且做了判断&#xff0c;如果重复输入的话会提示&#xff0c;不会让他添加&#xff0c;点击重置功能后一键清空所有输入 1.效果 2.下载插件 我直接下…
阅读更多...
【Linux】自动化构建工具：make/Makefile

【Linux】自动化构建工具：make/Makefile

​&#x1f47b;内容专栏&#xff1a; Linux操作系统基础 &#x1f428;本文概括&#xff1a; 工具使用的背景、理解make/makefile工具、探索工作原理(文件修改时间的对比)、.PHONY伪目标、特性等。 &#x1f43c;本文作者&#xff1a; 阿四啊 &#x1f438;发布时间&#xff1…
阅读更多...
18.3 【Linux】登录文件的轮替（logrotate)

18.3 【Linux】登录文件的轮替（logrotate)

18.3.1 logrotate 的配置文件 logrotate 主要是针对登录文件来进行轮替的动作&#xff0c;他必须要记载“ 在什么状态下才将登录文件进行轮替”的设置。logrotate 这个程序的参数配置文件在&#xff1a; /etc/logrotate.conf /etc/logrotate.d/ logrotate.conf 才是主要的参…
阅读更多...
无涯教程-JavaScript - ADDRESS函数

无涯教程-JavaScript - ADDRESS函数

描述 给定指定的行号和列号,您可以使用ADDRESS函数获取工作表中单元格的地址。 如,ADDRESS(2,3)返回$C $2。再举一个Example,ADDRESS(77,300)返回$KN $77。您可以使用其他函数(如ROW和COLUMN函数)为ADDRESS函数提供行号和列号参数。 语法 ADDRESS (row_num, column_num, [a…
阅读更多...
跨境电商和TikTok广告：突破地理界限的机会

跨境电商和TikTok广告：突破地理界限的机会

随着全球数字化的快速发展&#xff0c;跨境电商已经成为了现代商业的关键驱动力。同时&#xff0c;TikTok作为一款全球范围内广受欢迎的社交媒体平台&#xff0c;也在商业领域崭露头角。 本文将探讨跨境电商如何与TikTok广告相结合&#xff0c;为企业提供突破地理界限的机会。…
阅读更多...
苹果宣布9月26日发布全新macOS Sonoma系统 新增不少实用功能

苹果宣布9月26日发布全新macOS Sonoma系统 新增不少实用功能

苹果公司在召开的特别活动中&#xff0c;宣布将于 9 月 26 日正式发布 macOS Sonoma&#xff0c;用户可以打开“设置”->“通用”->“软件更新”路径进行更新&#xff0c;新版本主要增强空间函数、为 AirPods 测试自适应音频、个性化音量和对话感知等新功能。 macOS Sono…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023