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

    人生是旷野，不是轨道。  

    思维导图

    一、运算符

    1.1 赋值运算符

    1.2 一元运算符

    1.3 比较运算符

    1.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 num = +prompt('请输入一个数字:')
    15.     // 2. 弹出结果
    16.     alert(num % 4 === 0 && num % 100 !== 0)
    17.   script>
    18. body>
    19.  
    20. html>

    1.5 运算符优先级

    二、语句

    2.1 表达式和语句

    2.2 分支语句

    （1）if语句

    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.     // if (false) {
    15.     //   console.log('执行语句')
    16.     // }
    17.     // if (3 > 5) {
    18.     //   console.log('执行语句')
    19.     // }
    20.     // if (2 === '2') {
    21.     //   console.log('执行语句')
    22.     // }
    23.     //  1. 除了0 所有的数字都为真
    24.     //   if (0) {
    25.     //     console.log('执行语句')
    26.     //   }
    27.     // 2.除了 '' 所有的字符串都为真 true
    28.     // if ('pink老师') {
    29.     //   console.log('执行语句')
    30.     // }
    31.     // if ('') {
    32.     //   console.log('执行语句')
    33.     // }
    34.     // // if ('') console.log('执行语句')
    35.  
    36.     // 1. 用户输入
    37.     let score = +prompt('请输入成绩')
    38.     // 2. 进行判断输出
    39.     if (score >= 700) {
    40.       alert('恭喜考入黑马程序员')
    41.     }
    42.     console.log('-----------------')
    43.  
    44.   script>
    45. body>
    46.  
    47. html>

    （2）双分支if

    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 pwd = prompt('请输入密码:')
    16.     // 2. 判断输出
    17.     if (uname === 'pink' && pwd === '123456') {
    18.       alert('恭喜登录成功')
    19.     } else {
    20.       alert('用户名或者密码错误')
    21.     }
    22.   script>
    23. body>
    24.  
    25. 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.     // 1. 用户输入
    14.     let year = +prompt('请输入年份')
    15.     // 2. 判断输出
    16.     if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
    17.       alert(`${year}年是闰年`)
    18.     } else {
    19.       alert(`${year}年是平年`)
    20.     }
    21.   script>
    22. body>
    23.  
    24. html>

    （3）多分支if

    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 score = +prompt('请输入成绩：')
    15.     // 2. 判断输出
    16.     if (score >= 90) {
    17.       alert('成绩优秀，宝贝，你是我的骄傲')
    18.     } else if (score >= 70) {
    19.       alert('成绩良好，宝贝，你要加油哦~~')
    20.     } else if (score >= 60) {
    21.       alert('成绩及格，宝贝，你很危险~')
    22.     } else {
    23.       alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
    24.     }
    25.   script>
    26. body>
    27.  
    28. 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 : 代码2
    15.     // console.log(3 > 5 ? 3 : 5)
    16.     // if (3 < 5) {
    17.     //   alert('真的')
    18.     // } else {
    19.     //   alert('假的')
    20.     // }
    21.     // 3 < 5 ? alert('真的')  : alert('假的')
    22.  
    23.     let sum = 3 < 5 ? 3 : 5
    24.     console.log(sum)
    25.   script>
    26. body>
    27.  
    28. html>

    （5）switch语句

    case穿透

    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.用户输入  2个数字 +  操作符号  + - *  / 
    14.     let num1 = +prompt('请您输入第一个数字:')
    15.     let num2 = +prompt('请您输入第二个数字:')
    16.     let sp = prompt('请您输入 + - * / 其中一个:')
    17.     // 2. 判断输出
    18.     switch (sp) {
    19.       case '+':
    20.         alert(`两个数的加法操作是${num1 + num2}`)
    21.         break
    22.       case '-':
    23.         alert(`两个数的减法操作是${num1 - num2}`)
    24.         break
    25.       case '*':
    26.         alert(`两个数的乘法操作是${num1 * num2}`)
    27.         break
    28.       case '/':
    29.         alert(`两个数的除法操作是${num1 / num2}`)
    30.         break
    31.       default:
    32.         alert(`你干啥咧，请输入+-*/`)
    33.  
    34.     } 
    35.   script>
    36. body>
    37.  
    38. html>

    2.3 循环结构

    2.3.1 断点调试

    2.3.2 while循环

    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 = 18
    14.     // age = age + 1
    15.     // age += 1
    16.     // 1. 页面输出1~100
    17.     // let i = 1
    18.     // while (i <= 100) {
    19.     //   document.write(`这是第${i}个数
      `)
    20.     //   i++
    21.     // }
    22.     // 2. 页面输出1~100 累加和
    23.     // let i = 1  // 变量的起始值
    24.     // let sum = 0  // 累加和变量
    25.     // while (i <= 100) {
    26.     //   // 把i 累加到 sum 里面
    27.     //   // sum = sum + i
    28.     //   sum += i
    29.     //   i++
    30.     // }
    31.     // console.log(sum) // 5050
    32.     // 3. 页面输出1~100 偶数和
    33.     let i = 1
    34.     let sum = 0
    35.     while (i <= 100) {
    36.       // 筛选偶数 只有偶数才累加
    37.       if (i % 2 === 0) {
    38.         sum = sum + i
    39.       }
    40.       // 每次循环都要自加
    41.       i++
    42.     }
    43.     console.log(sum)
    44.   script>
    45. body>
    46.  
    47. html>

    2.3.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.     // let i = 1
    14.     // while (i <= 5) {
    15.     //   console.log(i)
    16.     //   if (i === 3) {
    17.     //     break  // 退出循环
    18.     //   }
    19.     //   i++
    20.  
    21.     // }
    22.  
    23.  
    24.     let i = 1
    25.     while (i <= 5) {
    26.       if (i === 3) {
    27.         i++
    28.         continue
    29.       }
    30.       console.log(i)
    31.       i++
    32.  
    33.     }
    34.   script>
    35. body>
    36.  
    37. 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.     while (true) {
    14.       let str = prompt('你爱我吗')
    15.       // 退出条件 爱
    16.       if (str === '爱') {
    17.         break
    18.       }
    19.     }
    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.     // 1. 开始循环 输入框写到 循环里面
    14.     // 3. 准备一个总的金额
    15.     let money = 100
    16.     while (true) {
    17.       let re = +prompt(`
    18.         请您选择操作：
    19.         1.存钱
    20.         2.取钱
    21.         3.查看余额
    22.         4.退出
    23.         `)
    24.       // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
    25.       if (re === 4) {
    26.         break
    27.       }
    28.       // 4. 根据输入做操作
    29.       switch (re) {
    30.         case 1:
    31.           // 存钱
    32.           let cun = +prompt('请输入存款金额')
    33.           money = money + cun
    34.           break
    35.         case 2:
    36.           // 存钱
    37.           let qu = +prompt('请输入取款金额')
    38.           money = money - qu
    39.           break
    40.         case 3:
    41.           // 存钱
    42.           alert(`您的银行卡余额是${money}`)
    43.           break
    44.       }
    45.     }
    46.   script>
    47. body>
    48.  
    49. html>

    四、去看笔记

    浓缩知识呈上：

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

  • 相关阅读:
    Flowable工作流基础篇
    C++程序的内存分区
    Microsoft SQL Server 2022 新特性之 T-SQL 语言增强
    长城软件面经
    企业上半年净利润下降近8成，企业如何应对？
    C++：类的封装
    推荐系统(LLM去偏?) | (WSDM24)预训练推荐系统:因果去偏视角
    Python 任务系统6 按演进的思路来看：从零散的任务到集中管理
    supervisor的使用
    运行十几年都没出现BUG的软件都是怎么做的？
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/132906626