前端学习第七周

已于 2022-12-16 14:31:27 修改
阅读量66 收藏
点赞数
文章标签： 前端 学习 javascript
于 2022-12-08 21:07:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72343101/article/details/128173289
版权

目录

一. 运算符的优先级

与c语言类似

  • ，运算符
    在这里插入图片描述
    在这里插入图片描述

例如：
这种方式在这里插入图片描述与这种方式在这里插入图片描述是等价的。

  • 运算符的优先级
    在这里插入图片描述
    运算符的优先级表：
    在这里插入图片描述
    案例：
    在这里插入图片描述

二，代码块

在这里插入图片描述

注：在这里插入图片描述

例如：

<!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>
        {
            a=10;
        }
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
10
即代码块里的内容对代码块外的内容是完全可见的。

三.流程控制语句

在这里插入图片描述

3.1条件判断语句

在这里插入图片描述
if语句

  • 语法一：
    if(条件表达式)
    语句
    请添加图片描述
    在这里插入图片描述
    与c语言类似，如果可以使用代码块（{}），就尽量使用代码块，这样可以让程序更加清晰。
    例如：
<!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=10;
        if(a>1)
        {
            alert("a大于1吗?");
            document.write("是的，a大于1");s
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述

  • 语法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>
    <script>
       var a=10;
        if(a>=10)
        {
            document.write("这个数大于等于10")
        }
        else
        {
            document.write("这个数小于10")
        }
    </script>
</head>
<body>
</body>
</html>

显示为；
这个数大于等于10

  • 语法3
    在这里插入图片描述在这里插入图片描述

注：注意不要出现死代码的情况在这里插入图片描述

3.2if练习

prompt（）函数
请添加图片描述
例如：

<!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("请输入数字：")
       if(a<100&&a>80)
       {
        alert("good good")
       }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述

3.3条件分支语句（switch）

在这里插入图片描述
与c语言类似

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=prompt("请输入数字：");
        switch(a)
        {
            case 1:
                document.write("一");
                break;
            case 2:
                document.write("二");
                break;
            default:
                document.write("这不是数字")
                break;
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
这不是数字。

3.4switch练习

<!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("请输入成绩")
       if(a<=100&&a>=0)
    {
        switch(parseInt(a/10))
       {
        case 6:
        case 7:
        case 8:
        case 9:
        case 10:
            document.write("合格！")
            break;
            default:
                document.write("不合格！")
       }
    }
    else
    {  
        document.write("请输入正确的考试成绩！") 
    }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述
这是上述代码的简易情况。

3.5while循环

<br>网页里的换行标签
例如；

<!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>
        document.write("11111<br/>")
        document.write("222222<br/>")
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
while语句，也是与c语言类似。
在这里插入图片描述
死循环
在这里插入图片描述
也可以用break；来停止循环。

创建循环的三个步骤
在这里插入图片描述
do…while循环
在这里插入图片描述
这两个循环的特点
在这里插入图片描述

注：死循环尽量不要写，如果写在内部可能会出现bug，导致无法操作。

3.6while练习

例如：

<!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("请输入你的成绩");
        while(a<0||a>100)
        {
            alert("请输入有效的考试成绩！")
            a=prompt("请输入你的成绩");
        }
         alert("你的成绩为："+a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
在这里插入图片描述

3.7for循环

与c语言类似
在这里插入图片描述
在这里插入图片描述
这个要注意
图：
在这里插入图片描述
与

<!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=0;a<10;a++)
        {
            alert(a);
        }
    </script>
</head>
<body>
</body>
</html>

是一样的效果。

3.8质数练习

在这里插入图片描述
练习：

<!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 b=true;
        var a=prompt("请输入一个大于一的整数")
        if(a<=1)
        {
            alert("该值不合法");
        }
        else
        {
            for(var i=2;i<a;i++)
            {
                if(a==2)
                {
                    alert("这个数是质数");
                }
                else
                if(a%i==0)
                {
                    alert("这个数不是质数");
                    b=false;
                    break;
                }
            }
            if(b)
            {
                alert("这个数是质数")
            }
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述

3.9嵌套的for循环

与c类似，这里的理念可以理解一下。
在这里插入图片描述
在这里插入图片描述
例如；

<!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 i=0;i<5;i++)
        {
            for(var j=0;j<i+1;j++)
            {
                document.write("*")
            }
            document.write("<br/>")
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

3.10break与continue

在这里插入图片描述
break与continue不能用于if语句。
在这里插入图片描述
与c语言类似
在这里插入图片描述
这个与c语言不同。
语法为：
label：循环语句

注：这里的label（标签）就相当于html里的id名一样，是可以任意取名的。

例如：

<!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>
        outer: //即外层循环的label值为：outer
        for(var i=0;i<5;i++)
        {
            document.write(1)
            for(var j=0;j<i+1;j++)
            {
                break outer;//标记了外层循环的label值
                document.write("*")
            }
            document.write("<br/>")
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
1
即外层循环被终止，内层循环自然就消失了。
注意：outer:和break outer;

在这里插入图片描述

三池丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端学习总结第一周
woshileiyaohua的博客
07-31 1067
大家好！我叫雷耀华，四川达州人。以前从未接触过前端开发这个领域，后经朋友介绍，突然发现对web前端产生了兴趣，我决定学习它。 到今天为止已学习了一周时间，对前端这个领域有了初步了了解，兴趣也渐渐高涨了起来。听说CSDN是中国软件开发者的聚集地，我打算将我的学习过程写在这里，与各位前辈分享交流，如有错误，请您指正。 下面我们开始吧！ **一、HTML和CSS概述** 1.W3C万维网联盟 全称World Wide Web Consortium 它是发布Web技术标准及...
c#学习方法
03-08
学习安排：4周4个项目实战 学习形式：录播视频+在线作业考核+助教一对一辅导答疑 1. C#基本语法：基本编程（If：…else）语句、数组等。2. C#面向对象编程：封装、继承、多态性、面向接口编程、动态多态性、字符串...
前端学习第二周
qq_72343101的博客
10-27 1687
笔记
Web前端学习第一周
weixin_74289912的博客
10-19 1096
它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。一个网站是由多个网页组成的，每一个网页都是一个 .html 文件。
web前端学习第一周
m0_74101828的博客
10-20 1934
web初学笔记
小白学习Web前端（第一周）
m0_73269789的博客
10-21 1551
HTML：CSS：一个网站是由n多个网页组成的，每个网页都是一个.html文件。首先它来自微软，说明它是一个来自大厂的产品，品质有保障。它是一个开源的，意思就是它是免费的。轻量：质量很小，开启速度非常快总之就一句话：谁用谁知道！下载VS Code后多进行操作，了解编辑器的操作方法，对它大致有个了解。VS Code下载链接:link三大核心技术结构样式行为< dl >:定义列表（相当于容器）< dt >定义专业术语或名词（标题）
前端学习笔记第七周
qq_56784131的博客
12-12 293
背景： 可定义多个背景图片 <html> <head> <title>练习</title> <style type="text/css"> body{ background:url(IMG_20201102_205532.png) 120px 110px no-repeat, url(1604321074680.jpg)40px 10px no-repeat, url(I.
前端学习（第一周）
lishunyu1226的博客
10-21 1654
前端学习笔记
前端学习规划实施第一周
zlyy1314的博客
05-08 53
学习目标： 第一周计划学习html5+css3+javascript 学习内容： 第一天学习html5 学习时间： 学习html第一天 学习产出： 计划初步了解并学习html相关知识 掌握一些html基本元素标签和属性的使用方法
前端学习第四周
qq_56784131的博客
11-21 258
一、表单 图片表单： <html> <head> <title>第四周</title> </head> <body> <script language="javascript"> function check(){ obj=document.getElementById("my_img"); alert("图像的路径为:"+obj.src);
第十七周教案--Web服务器的配置.doc编程资料
04-08
第十七周教案--Web服务器的配置.doc
to_do_avenger:第 7 周周末单人挑战，使用 JavaScript 完成列表
06-08
填写您本周的学习计划自我审查： : Fork 这个 repo，并克隆到你的本地机器 完成以下挑战： 挑战 构建一个 Todo 列表作为一个迷你前端应用程序。 您不必使用数据库，前端更重要 - 您可以使用存储在 JavaScript 中...
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
├─(7) 07 python s3 day41 JS的字符串对象.avi ├─(8) 08 python s3 day41 JS的数组对象.avi ├─(9) 09 python s3 day41 JS的函数对象.avi ├─(10) day41.rar (6)\\python全栈day41-50\\python全栈s3 day42；...
最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料
06-13
第7周 心灵分享 上节回顾 静态方法、类方法、属性方法 课堂扯淡 深入讲解类的特殊成员方法__init__等 深入讲解类的特殊成员方法__new__等 反射详解 异常处理TryExcept 网络编程Socket介绍 Socket通信案例消息发送与...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 164
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 673
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1115
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 621
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
前端学习路线 csdn
11-02
前端学习路线可以分为以下几个方面： 1. HTML/CSS基础：学习HTML标签和CSS样式的基本语法和用法，掌握页面布局和样式设计。 2. JavaScript基础：学习JavaScript的基本语法和常用API，掌握DOM操作和事件处理等技术。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值