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

news/2024/7/11 1:55:02 标签: 前端, javascript, es6, 笔记, ecmascript

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

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

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

                你能有多爱这个世界！

                你能到达什么成就！

                你的潜力有多少！

——安妮弗兰克                         

思维导图

一、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.niftyadmin.cn/n/5033556.html

相关文章

CRM与chatGPT结合的效果

CRM与chatGPT结合的效果

2023年ChatGPT是当之无愧的行业热词&#xff0c;从诞生到爆红短短5天&#xff0c;注册用户数就超过100万&#xff0c;截止到2023年1月底已经有超过1亿用户。在这样的背景下&#xff0c;Zoho CRM系统在业内较早推出集成ChatGPT的相关功能&#xff0c;接下来我们就来分享CRM接入C…
阅读更多...
uni-app跳转到另一个app

uni-app跳转到另一个app

第一步&#xff1a; 首先要知道 app的包名 获取方式如下 第二步&#xff1a; 在第一个 demo1 app 一个页面中需要一个按钮去跳转 方法如下 <template><view class"content"><button click"tz">跳转</button></view> </…
阅读更多...
深度学习中安装了包但是依然导入(import)失败这一问题，例如pytorch环境下已经安装了scikit-learn但是import不了

深度学习中安装了包但是依然导入(import)失败这一问题，例如pytorch环境下已经安装了scikit-learn但是import不了

在跑深度学习模型的时候我们要先搭建pytorch环境&#xff0c;这个环境跟windows环境是不同的&#xff0c;我们默认在windows中安装的包在当前的虚拟环境中读取不到&#xff0c;所以导致我们明明安装了包但是依然在实际的导入中(import)报错。解决办法就是我们去虚拟环境中安装包…
阅读更多...
Postman应用——接口请求（Get和Post请求）

Postman应用——接口请求（Get和Post请求）

文章目录 新增请求Get请求Post请求 这里只讲用的比较多的Get和Post请求方式&#xff0c;也可以遵循restful api接口规范&#xff0c;使用其他请求方式。 GET&#xff08;SELECT&#xff09;&#xff1a;从服务器取出资源&#xff08;一项或多项&#xff09;POST&#xff08;CR…
阅读更多...
Databend 开源周报第 111 期

Databend 开源周报第 111 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 理解 SHARE END…
阅读更多...
pytorch张量维度变换详解：view、squeeze、transpose

pytorch张量维度变换详解：view、squeeze、transpose

目录 1 view函数 1.1 指定变换后的维度 1.2 自动推理变换后的维度 1.3 将tensor展平成一维 2 reshape函数 2.1 指定变换后的维度 2.2 自动推理转换后的维度 2.3 将tensor展平成一维 2.4 使用tensor.reshape变换 3 squeeze函数 3.1 torch.squeeze去除所有为1的维度 …
阅读更多...
MySQL 某个字段存储不了内容

MySQL 某个字段存储不了内容

1. 原因 某个字段存储的内容过大 2. 解决 修改max_allowed_packet参数 max_allowed_packet参数是指mysql服务器端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度&#xff0c;则会数据库保持数据失败。 2.1 查询参数 show variables like %max…
阅读更多...
Python函数进阶：探索高级函数特性与技巧

Python函数进阶：探索高级函数特性与技巧

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 Python中的函数不仅仅是…
阅读更多...
最新文章

Copyright @ 2022~2023