豚鼠学习js第三周

最新推荐文章于 2024-09-09 23:43:17 发布
最新推荐文章于 2024-09-09 23:43:17 发布
阅读量80 收藏
点赞数
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongyifeifei/article/details/128225508
版权

豚鼠学习JS第三周

一、
1.运算符的优先级

请添加图片描述

  • 逗号运算符声明多个变量
    如：var a=1, b=2;
  • 优先级高先算
    一样高从走往右算，与大于或
  • 遇到优先级的不清楚的可以用括号括起来
2.代码块
  • 程序是一条一条语句构成的，语句是至上而下完成的，js中用{}进行分组，要么都执行要不都不执行。
  • 代码块后面不用加；，只有分组的作用，代码快的内容是制作外部是完全可见的
3.if语句
  • 通过流程控制语句可以选择条件执行
  • 语句分类
    1.条件判断语句
    2.条件分支语句
    3.循环语句
    符合条件判断才会执行
    求值为true则执行，false则不执行
  • 实操效果
<!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>
       <script>
        var a =1 ,n=10;
       if(a>1)
         {alert ("啊👆");
       
         }alert("啊↑？")


      if(n>1)
       { 
        if(n>10)
        {
            alert("4");
        }
        else if(n>8);
       { alert("10")}
       }
       </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

请添加图片描述
请添加图片描述

3.if练习
  • 实操效果
<!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>
      <script>
        var a=prompt("吃皮带炖猪肉（1~100）");
             if(a>100||a<80){
                alert("看不懂中文？")
             }
            else if(a==100){
                alert("大嘴巴子");
            }
            else if(a>=80){
                alert("吃千年杀");
            }
      </script>
</head>
<body>
    
</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>
      <script>
        var a=prompt("吃皮带炖猪肉（1~100）");
             if(a>100||a<80){
                alert("看不懂中文？")
             }
            else if(a==100){
                alert("大嘴巴子");
            }
            else if(a>=80){
                alert("吃千年杀");
            }
      </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述

4.if练习二
  • 实操效果
<!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>
    <script>

var a,b,c;
        a=prompt("身高");
        b=prompt("资产");
        c=prompt("颜值");
        if(a>100,b>1000,c>500){
        alert("嫁");
        }
        else if(a>100||b>1000||c>500)
        {
            alert("嫁");
        }
        else{alert("真窝囊")}
    </script>
</head>
<body>
    
</body>
</html>

输入100 1000 500
请添加图片描述

5.条件分支语句

  • switch（条件表达式）
    case 表达式
    后接break；结束判断

  • 执行时会一次将case后的表达式的值和switch后的条件表达式的值进行全等比较，比较结果为true则执行此处代码，如果结果为假则继续比较

  • break用来退出语句

  • 实操效果

<!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>
    <script>
        var a ;
        a=prompt("shuru");
        switch(a){
            case 1:
                alert(1);
                break;
                case 3:
                alert(1);
                break;
                case 4:
                alert(1);
                break;
                default:
                    alert("null")

        }
    </script>
</head>
<body>
    
</body>
</html>

6.switch练习
  • 实操效果
<!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>
    <script>
        var a;
        a=prompt("shjuru");
        switch(a)
        {case a>60:
            alert("及格")
            default: 
            alert("不及格")
        }
        

    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

请添加图片描述

7.while 语句
  • while（条件表达式）{}
    先对表达式进行求值判断
    执行完毕表达式值为true再做判断
    直到值为faluse
    创建一个循环往往需要三个步骤
    1.初始化一个变量
    2.在循环中设置一个表达式的值
    3.定义一个表达式，没吃更新初始化变量
    do while循环
    先执行do的语句再进行判断
    两语句类似，不同的是循环体的先后执行
    do可以保证至少执行一次
    利用while可重置循环，在用户输入错误的情况下可以重新输入
  • 实操效果
<!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>
    <script>
        var a=1000,b=0;
        while(a<=5000)
               {
                a*=1.05;
                b++;
               }
        console.log(b);
    </script>
</head>
<body>
    
</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>
 <script>
    while(1){
        var a=prompt("输入");
        if(a>0&&a<100){
            break;
        }
        else{alert("请输入正确的值")}
    }
 </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述

34.for循环
  • for语句，也是一个循环语句，也称为for循环

在for循环中，为我们提供了专门的位置来放三个表达式
for（初始化表达式；条件表达式；更新表达式）

<!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>
    <script>
        for(var b=0,a=1;a<101;a=a+2)
          {
          b+=a;
          }
          alert(b);
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

8.for练习
  • 实操效果
<!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>
    <script>
        for(var a=7,b=0,c=0;a<105;a=a+7)
        {
            b+=a;
            c++;
        }
        alert(c)
        alert(b)
            </script>
</head>
<body>
    
</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>
    <script>
        for(var a=100;a<1000;)
        {
            if(a=(a%100)^3+(a%10-(a%100)*10)^2+(a-100*(a%100)-10*(a%10-(a%100)*10)))
            {
                console.log(a);
            }
            else{
                a++;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述

9.质数练习
  • 实操效果
<!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>
    <script>
        var a;
        a=prompt("请输入一个大于一的数");
        if(a<1){
            alert("请输入正确数子");
        }
        else{
            for(var b=2;b<a;b++)
            {
                if(a%b==0){
                    alert("不是质数")
                }
            }
              alert("是一个质数")
        }

    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

11.质数练习的改进
  • 实操效果
<!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>
    <script>
        var times;
          console.time(times);
        for(var a=2 ;a<=100;a++)
        {
            var c=true;
           for( var b=2 ;b<=Math.sqrt(a);b++)
           {
            if(a%b==0){
            c=false;
            }
        }
        if(c)
           {
            document.write(a+"<br/>");
           }
        }
        console.timeEnd(times);
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

12.练习
  • 实操效果
<!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>
    <script>
        for(var a=1;a<9;a++)
        {
            for(var b=1;b<=a;b++)
            {
          document.write(a+"*"+b+"="+a*b+"&nbsp");
              
            }

            document.write("<br/>");
         
        }
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

  • 可以使用css添加属性让其对齐
12.打印质数
  • 实操效果
<!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>
    <script>
     
        for(var a=2 ;a<=100;a++)
        {
            var c=true;
           for( var b=2 ;b<a;b++)
           {
            if(a%b==0){
            c=false;
            }
        }
        if(c)
           {
            document.write(a+"<br/>");
           }
        }
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

  • 注意变量位置
  • 如果变量协助外面不参与循环，变量的值会被修改
13.break和continue

if语句不能用break，但可以对for起作用
break会立即终止离他最近的那个循环语句
可以为循环语句创建一个label，来标识当前的循环

  • 如；lable：循环语句，其它名字也行
  • 使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的循环
    • 如：break：lable
      continue是关键字可以用来跳过当次循环
      同样对最近的循环执行
      直接写相当于break
      console.time（）可以开始一个计时器
      需要一个字符串作为计时器标识
      console.timeEnd（）
  • 对性能提升很大
<!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>
    <script>
        var times;
          console.time(times);
        for(var a=2 ;a<=100;a++)
        {
            var c=true;
           for( var b=2 ;b<=Math.sqrt(a);b++)
           {
            if(a%b==0){
            c=false;
            }
        }
        if(c)
           {
            document.write(a+"<br/>");
           }
        }
        console.timeEnd(times);
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述

14.对象的简介

不属于5种基本数据类型都是对象

基本数据类型都是单一值，值和值之间没有任何的联系
基本数据类型都是单一值，值和值之间没有任何的联系

对象属于一种复合的数据类型，在对象中可以保存多个不同的数据类型

  • 对象的分类

1.内建对象
由es标准中定义的对象，在任何的es的实现中都可以使用
2.宿主对象
由js运行环境提供的对象
目前来讲主要指由浏览器提供的对象
比如bom dom
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>

    <script>
        var duixiang= new Object();
        duixiang.shuxing="一串汉字";
       alert(duixiang.shuxing);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

15.对象的基本操作

var a= new object（）
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
typeof 检查对象时，会返回object
向对象中保存的值称为属性值
语法：对象.属性名=属性值
obj.name=“孙悟空”
读取对象中的属性
语法：对象.属性名
读取对象没有属性会返回underfined
修改对象的属性值
语法：对象.属性名=新值
删除对象属性

16.属性名和属性值

属性名不强制要求遵守标识符规范
什么乱七八糟的名字都可以使用
使用时尽量按照标识符规范去做
如果需要使用特殊的属性名，能采用.的方式来操作
需要使用另一种方式

  • 语法对象【“属性名”】=属性值
    使用[]这种方式操作属性更加灵活，在【】中可以直接传递一个变量，这样变量值是多少就会读取那个属性
  • js的属性值可以是任意类型
    甚至也可以是一个对象
  • in运算符，通过该运算符可以直接检查一个对象中是否有指定的属性，如果有则返回true没有返回false
    语法:"属性名"in对象
    console.log（”test2“in obj）
  • 实操效果
<!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>
    <script>
         var a={};
         a["!#@$%^^&"]="锄禾日当午";
       document.write(a["!#@$%^^&"]);
       b=a;
       document.write(b["!#@$%^^&"]);
    </script>
</head>
<body>
    
</body>
</html>
17.基本数据类型和引用数据类型
  • 请添加图片描述
    js中的变量保存到栈内存中
    基本数据类型的值直接在栈内存中存储
    变量间数值相互独立
    对象保存在堆内存中
    没创建一个新的对象，就会在堆内存中开辟出一个新的空间
    而变量保存的是地址
    var obj2=obj地址相同
    修改地址对应的东西则都改变
  • 比较两个基本数据类型时，比较值，两个引用比较，比较地址
18.对象字面量
  • {}=new object（）
    使用对象字面量，可以在创建对象时，直接指定对象中的属性
    语法：{属性名：属性值，属性名：属性值}
    var obj2={name：抓捕接，age：5000岁}
    对象字面量的属性名可以加引号可以加，也可以不加
    属性名和属性值是一组一组的名值对结构，如果一个属性之后没有其它属性，不要写
  • 实操效果
<!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>
    <script>
        var a={name:"小飞侠",
            age:1888,
            b:{class:"新的对象"}
        };
       alert(a.b.class)
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述

落兰殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSDN每日一练：小豚鼠搬家
文盲的专栏
02-15 526
容斥原理是个什么鬼。。。。。老顾没上过学啊
豚鼠学习HTML前端第一周
xiongyifeifei的博客
10-19 1054
什么是html和css主要内容是让我们对html与css,如何去写代码，写到哪里做一个简单了解。什么是HTML？：HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
豚鼠学JS第一周
xiongyifeifei的博客
11-27 200
（1）与c语言非常相似，接触js后更能清楚的感受到c语言的重要性以及其普遍性.从广义上来说ES可以等同于JS（2）目前JS的发展状况。
豚鼠努力学习前端第二周
xiongyifeifei的博客
10-25 430
css语法
豚鼠检测数据集-含1539张高质量真实豚鼠图片-已进行YOLO格式标注+整理训练测试集-可用于深度学习目标检测算法训练.zip
04-18
豚鼠检测数据集_含1539张高质量真实豚鼠图片_已进行YOLO格式标注+整理训练测试集_可用于深度学习目标检测算法训练
squeakrecognition:豚鼠的语音识别
06-06
常见的机器学习算法，如支持向量机（SVM）、神经网络，或者现代的深度学习框架，如TensorFlow.js，可以在JavaScript环境中构建和训练模型。 4. **实时识别**： 一旦模型训练完成，就可以实现实时的吱吱声检测。...
豚鼠手工标记图像数据集 JPG YOLOv8 格式（1551 张图像）
03-29
训练集是模型学习的基础，包含了大量带有标签的豚鼠图像，模型会通过这些图像学习如何识别豚鼠。验证集则用于在训练过程中评估模型的性能，防止过拟合，确保模型在未见过的数据上也能有效工作。测试集则在模型训练...
豚鼠特工队观后感.docx
10-14
动物间谍的概念，如会操作电脑的豚鼠、驾驶高科技车辆的仓鼠，反映了科技在现实世界中的应用和发展趋势，比如人工智能和机器学习在当今社会中的广泛应用。同时，这也引发了关于人与动物关系的思考，以及科技是否应该...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1287
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 574
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 519
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 987
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1326
hiprint
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1015
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
【ShuQiHere】初识 Node.js：服务器端 JavaScript 的强大之处
ShuQIHere的博客
09-09 911
对于初学者来说，Node.js 的最大吸引力在于它使用了大家熟悉的 JavaScript，且能够在服务器端高效运行。它简化了前后端开发的衔接，提供了一个统一的编程环境。无论是开发 Web 应用、实时应用，还是创建命令行工具，Node.js 都能为你提供一个强大且灵活的平台。如果你刚刚开始学习编程，不妨试着用 Node.js 创建一些简单的项目。通过实践，你会发现 Node.js 的世界是如此丰富多彩，充满了无限的可能。
【前端】读取csv文件，将数据转换为对象。spilce与slice的区别
weixin_43872912的博客
09-05 301
解决思路：将csv文件的第一行作为key，后续的每一行作为value存入对象数组。
React第三章(tsx语法入门 )
qq1195566313的博客
09-06 622
答: 基本没有没有区别只是在jsx语法上增加了类型。
常见文档工具对比和选择
最新发布
qq_41765777的博客
09-09 745
文档工具的本质，其实都是将我们的文档内容标准化，在互联网环境上的文档，一般目前比较主流的是生成文档的 html 网页内容，而文档内容的作者都比较倾向于使用纯文本的 Markdown 进行书写，所以文档工具的核心内容主要就是将 Markdown 转换为一个 html 的网站内容。
java CSDN里面练习题豚鼠排名榜如何实现
06-06
要实现CSDN中Java练习题的豚鼠排名榜，可以考虑以下步骤： 1. 创建一个Java类，用于存储豚鼠的信息，例如豚鼠的名字、分数等。 2. 创建一个Java类，用于实现豚鼠排名榜。可以使用数组或集合来存储豚鼠信息，并实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值