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

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

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

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

                    你能有多爱这个世界！

                    你能到达什么成就！

                    你的潜力有多少！

    ——安妮弗兰克                         

    思维导图

    一、JavaScript介绍

    1.1 JavaScript 是什么

    体验JS代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     .pink {
    11.       background-color: pink;
    12.     }
    13.   style>
    14. head>
    15.  
    16. <body>
    17.   <button class="pink">按钮1button>
    18.   <button>按钮2button>
    19.   <button>按钮3button>
    20.   <button>按钮4button>
    21.   <script>
    22.     let bts = document.querySelectorAll('button')
    23.     for (let i = 0; i < bts.length; i++) {
    24.       bts[i].addEventListener('click', function () {
    25.         document.querySelector('.pink').className = ''
    26.         this.className = 'pink'
    27.       })
    28.     }
    29.   script>
    30. body>
    31.  
    32. html>

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

    1.2 JavaScript 书写位置

    （1）内部 JavaScript

    代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   
    13.   <script>
    14.     // 页面弹出警示框
    15.     alert('你好，js~')
    16.   script>
    17. body>
    18.  
    19. html>

    效果：

    （2）外部 JavaScript

    js文件位置：

    代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script src="./js/my.js">
    13.     // 中间不要写内容
    14.   script>
    15. body>
    16.  
    17. html>

    （3）内联 JavaScript

    总结

    练习

    1.3 JavaScript 的注释

    1.4 JavaScript的结束符

    1.5 输入和输出语法

    输出语法

    输入语法

     练习

    JavaScript 代码执行顺序

    实操代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.   <script>
    14.     // 1. 文档输出内容
    15.     document.write('我是div标签')
    16.     document.write('
      我是标题
      '      )
    17.     // 2. 控制台打印输出 给 程序员
    18.     console.log('看看对不对')
    19.     console.log('日志')
    20.     // 3. 输入语句
    21.     prompt('请输入您的年龄：')
    22.   script>
    23. body>
    24.  
    25. html>

    效果：

    进入页面先弹出提示框

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

    1.6 字面量

    二、变量

    2.1 变量是什么？

    2.2 变量基本使用☆

    （1）声明变量

    （2）变量赋值

    赋值运算符

    变量初始化

    总结

    实践代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 声明一个年龄变量
    14.     // let age
    15.     // // 2. 赋值   =  赋值
    16.     // age = 18
    17.     // console.log(age)
    18.     // 3. 声明的同时直接赋值  变量的初始化
    19.     // let age = 18
    20.     // 小案例
    21.     let num = 20
    22.     let uname = 'pink老师'
    23.     console.log(num)
    24.     console.log(uname)
    25.   script>
    26. body>
    27.  
    28. html>

    效果：

    练习

    （3）更新变量

    实操代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.  
    14.     // 1 声明的同时直接赋值  变量的初始化
    15.     // let age = 18
    16.     // age = 19
    17.     // // let age = 19
    18.     // console.log(age)
    19.     // 2. 声明多个变量    
    20.     // let age = 18, uname = '迪丽热巴'
    21.     // console.log(age, uname)
    22.     // 提倡声明的方式
    23.     let age = 19
    24.     let uname = '迪丽热巴'
    25.     console.log(age, uname)
    26.   script>
    27. body>
    28.  
    29. html>

    效果：

    （4）声明多个变量

     练习

    代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 输出用户名案例
    14.     // 1. 用户输入
    15.     // prompt('请输入姓名')
    16.     // 2. 内部处理保存数据
    17.     let uname = prompt('请输入姓名')
    18.     // 3. 打印输出
    19.     document.write(uname)
    20.   script>
    21. body>
    22.  
    23. html>

    效果：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // let if = 10
    14.     let num1 = 'pink老师'
    15.     let num2 = '戚薇'
    16.     let temp
    17.     // 都是把右边给左边
    18.     temp = num1
    19.     num1 = num2
    20.     num2 = temp
    21.     console.log(num1, num2)
    22.   script>
    23. body>
    24.  
    25. html>

    2.3 变量的本质

    2.4 变量命名规则与规范

    不能以关键字命名变量

    严格区分大小写

    练习代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 姓名
    14.     let uname = prompt('请输入姓名')
    15.     let age = prompt('请输入年龄')
    16.     let gender = prompt('请输入性别')
    17.     document.write(uname, age, gender)
    18.   script>
    19. body>
    20.  
    21. html>

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

    先使用，再声明

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

    let不允许声明前使用

    也不允许重复声明

    二. 变量拓展-数组

    1.1 数组的基本使用

    练习：

     术语：

    数组实操代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // let arr = [10, 20, 30]
    14.     // 1. 声明数组 有序 
    15.     let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
    16.     // 2. 使用数组  数组名[索引号] 从0
    17.     // console.log(arr)
    18.     console.log(arr[0]) // 刘德华
    19.     console.log(arr[4])
    20.     // 3. 数组长度 =  索引号 + 1 
    21.     console.log(arr.length)  // 6
    22.  
    23.     // let 刘德华 = 10
    24.     // console.log(刘德华)
    25.   script>
    26. body>
    27.  
    28. html>

    效果：

    三、常量

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

    常量声明的时候必须赋值

    四、数据类型☆

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 页面弹出输入框
    14.     let r = prompt('请输入圆的半径：')
    15.     // 2. 计算圆的面积（内部处理）
    16.     let re = 3.14 * r * r
    17.     // 3. 页面输出
    18.     document.write(re)
    19.  
    20.     // NaN   not a number 
    21.   script>
    22. body>
    23.  
    24. html>

    效果：

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // let age = 20
    14.     // // 模板字符串 外面用`` 里面 ${变量名}
    15.     // document.write(`我今年${age}岁了`)
    16.     let uname = prompt('请输入您的姓名:')
    17.     let age = prompt('请输入您的年龄:')
    18.     // 输出
    19.     document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)
    20.   script>
    21. body>
    22.  
    23. html>

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

    4.2 检测数据类型

    五、类型转换

    5.1 为什么需要类型转换

    5.2 隐式转换

    5.3 显式转换

    转换为数字型

    代码（隐式转换）：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 用户输入   prompt 得到是字符串类型 要转换为 数字型
    14.     let num1 = +prompt('请输入第一个数字：')
    15.     let num2 = +prompt('请输入第二个数字：')
    16.     // 2. 输出
    17.     alert(`两个数相加的和是:${num1 + num2}`)
    18.   script>
    19. body>
    20.  
    21. html>

    综合案例

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     h2 {
    11.       text-align: center;
    12.     }
    13.  
    14.     table {
    15.       /* 合并相邻边框 */
    16.       border-collapse: collapse;
    17.       height: 80px;
    18.       margin: 0 auto;
    19.       text-align: center;
    20.     }
    21.  
    22.     th {
    23.       padding: 5px 30px;
    24.     }
    25.  
    26.     table,
    27.     th,
    28.     td {
    29.       border: 1px solid #000;
    30.     }
    31.   style>
    32. head>
    33.  
    34. <body>
    35.   <h2>订单确认h2>
    36.  
    37.  
    38.   <script>
    39.     // 1 用户输入
    40.     let price = +prompt('请输入商品价格：')
    41.     let num = +prompt('请输入商品数量：')
    42.     let address = prompt('请输入收获地址：')
    43.     // 2.计算总额
    44.     let total = price * num
    45.     // 3.页面打印渲染
    46.     document.write(`
    47.       <table>
    48.           <tr>
    49.             <th>商品名称th>
    50.             <th>商品价格th>
    51.             <th>商品数量th>
    52.             <th>总价th>
    53.             <th>收货地址th>
    54.           tr>
    55.           <tr>
    56.             <td>小米青春版PLUStd>
    57.             <td>${price}元td>
    58.             <td>${num}td>
    59.             <td>${total}元td>
    60.             <td>${address}td>
    61.           tr>
    62.         table>
    63.     `)
    64.   script>
    65. body>
    66.  
    67. html>

    六、常见错误

    七、去看笔记

    浓缩精华呈上。

    JavaScript 基础第一天笔记_卡皮巴拉的博客-CSDN博客

  • 相关阅读:
    nRF5340（入门篇）之1.0 window下开发环境搭建
    Etcd教程 — 第五章 Etcd之etcdctl的使用
    Linux/macOS如何更改主机名hostname？
    《Vue.js实战》8.2实战
    【轻量化网络】MobileNet系列
    Prometheus监控K8S
    【建议背诵】软考高项考试案例简答题汇总~
    MySQL数据库期末考试试题及参考答案(07)
    【Android安全】Android 应用组件 | Android 四大组件
    软考 系统架构设计师系列知识点之数字孪生体（2）
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/132410464