javaScript基础（8个案例+代码+效果图）

news2024/10/6 13:54:23

目录

1.js常用的输出语句

案例:js初体验

1.代码

2.效果

2.js命名规则

3.js赋值

var 关键字声明变量

案例:交换两个变量的内容

完整代码

效果

4.js数据类型

布尔类型 

整数

浮点数

字符串

空型

未定义型

5. 数据检测

6.算术运算符

7.比较运算符

案例:计算圆周长和面积

1.代码

2.效果

8.选择结构if(if - else)

if

if-else

案例:判断成绩等级

1.代码

2.效果

9.switch语句

案例:改写判断成绩等级

1.代码

2.效果

10.for循环

案例:从1输出到100

1.代码

2.效果

11.while循环

案例：从1输出到100改

1.代码

2.效果

12.嵌套循环

案例:输出一个三角形

1.代码

2.效果

1.js常用的输出语句

  • document.write() HTML文档输出

  • console.log(); 控制台输出

  • prompt() 输入框

  • alert 弹出框

案例:js初体验

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js常用输出语句</title>

</head>
<body>
    
    <script>
        // HTML输出
        document.write("hello world");

        //控制台输出
        console.log("hello world");
        //带提示的输入框
        prompt("请输入你的名字");

        //弹出框
        alert("/**/是js的多行注释+\n //是js的行注释");
       
    </script>
</body>
</html>

2.效果

输入框

.

alert框

HTML输出

控制台输出

2.js命名规则

  • 不能以数字开头，不能以运算符号开头
  • 严格区分大小写
  • 不能使用javaScript关键字命名
  • 下划线命名:单词以下划线分割
    • 例子: var my_score = 100;
  • 驼峰命名法:首字母大写
    • 例子: var myScore = 100;

3.js赋值

var 关键字声明变量

var myFirstName = "惜.己";

案例:交换两个变量的内容

var leftHand = "水果刀"; //右手

var rightHand = "饭叉";  //左手

var table = "" //桌子

/**

        例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成

*/

//模拟

table = leftHand;  //左手的东西放在桌子上

leftHand = rightHand; //右手的东西给左手

rightHand = table;  //右手从左手拿取物品

console.log(leftHand);

console.log(rightHand);

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        var leftHand = "水果刀"; //右手

        var rightHand = "饭叉";  //左手

        var table = "" //桌子

        /**
        
                例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成
        
        */



        //模拟

        table = leftHand;  //左手的东西放在桌子上

        leftHand = rightHand; //右手的东西给左手

        rightHand = table;  //右手从左手拿取物品



        console.log(leftHand);

        console.log(rightHand);
    </script>
</body>

</html>

效果

4.js数据类型

布尔类型 

false , true;

//定义一个布尔类型

var flag = false;

cosnole.log(flag)

var flag_two = true; 

console.log(flag_two);

整数

定义一个整数

//八进制

var oct = 032 ;  //八进制 的二十六     八进制以0开头

var dec =  100 ; // 十进制的100

var hex  =  0x1a;  //十六进制的 26   十六进制以0x开头

浮点数

//定义一个浮点数

var myFloat = 3.1415926;

字符串

//单引号字符串

var mySingleString = '我的第一个字符串';

//多引号字符串

var myDoubleString = "我的第二个字符串"

空型

//空型只有一个null 

//定义一个空型

var  myNull = null;

console.log(myNull);

未定义型

var a ; 

console.log(a);

//输出结果为undefined

5. 数据检测

typeof  用于检测数据类型

console.log(typeof 2);  //number

console.log(typeof '2');  //string

console.log(typeof true);  //布尔值

console.log(typeof null);  //object 

console.log(typeof undefined);  //undefined

6.算术运算符

  • +  两个数相加
  • -  两个数相减
  • *  两个数相乘
  • /   两个数相除
  • %  两个数相除取模（取余数）
  • ++myNumber   前自增  （计算之前本身先加1）
  • --myNumber    前自减  （计算之前本身先减一）
  • myNumber--  后自减  （计算之后本身自己减一）
  • myNumber++ 后自增   （计算之后本身加1）

7.比较运算符

  • > 大于号
  • < 小于号
  • >= 大于或等于
  • <= 小于或等于
  • == 等于
  • != 不等于
  • === 全等
  • !== 不全等

案例:计算圆周长和面积

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算圆周长和面积</title>

</head>
<body>
    <script>
        //计算圆
        var ricle  = prompt("输入圆的半径")
        var pi = 3.14;

        //计算圆的周长
        document.write("圆的周长为：" + 2*pi*ricle + "<br>");
        //计算圆的面积
        document.write("圆的面积为：" + pi*ricle*ricle);

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

2.效果

8.选择结构if(if - else)

if

if(条件){

        满足条件执行的代码

}

if-else

if(条件){

        满足条件执行的代码

}else{

        不满足条件执行的代码

}

案例:判断成绩等级

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩等级</title>
</head>

<body>
    <script>
        // 判断成绩等级


        //首先输入成绩
        var score = prompt("请输入你的成绩");

        //使用if  else 判断成绩
        if (score >= 90) {
            alert("你的成绩为优秀");

        } else if (score >= 80) {
            alert("你的成绩为良好");
        } else if (score >= 70) {
            alert("你的成绩为中等");
        } else if (score >= 60) {
            alert("你的成绩为及格");
        } else {
            alert("你的成绩为不及格");
        }

        //页面输出成绩
        document.write("你的成绩为：" + score);

    </script>
</body>

</html>

2.效果

9.switch语句

switch(变量){

        case (值1): 执行代码1 ; break ; 

        case (值2): 执行代码2 ; break ; 

        case (值3): 执行代码3 ; break ; 

        case (值4): 执行代码4 ; break ; 

        case (值5): 执行代码5 ; break ; 

        default: 默认执行

}

案例:改写判断成绩等级

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩改</title>
</head>
<body>
    <!-- 使用switch -->
    
    <script>
        var score = parseInt(prompt("请输入成绩"));

        switch(true){
            case score >= 90 && score <= 100:
                alert("优秀");
                break;
            case score >= 80 && score < 90:
                alert("良好");
                break;
            case score >= 70 && score < 80:
                alert("中等");
                break;
            case score >= 60 && score < 70:
                alert("及格");
                break;

            default:
                alert("不及格");
                break;
        }
        document.write("成绩:"+score)
    </script>
</body>
</html>

2.效果

10.for循环

for(var 变量名;变量条件判断;变量值进行操作){

        满足条件执行的代码;

}

//注: continue 跳出当次循环不执行后面的代码

案例:从1输出到100

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从1输出到100</title>
</head>
<body>
    <script>
        //从1输出到100
        for(var i=1;i<=100;i++){
            document.write(i+"<br>");
        }
    </script>
    
</body>
</html>

2.效果

11.while循环

while(条件){

        执行代码

}

// 注：如果条件不满足直接跳出循环 ，或者使用break跳出当前层循环

案例：从1输出到100改

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从1输出到100改</title>
</head>
<body>
    <script>
        //从1输出到100
        //while 实现

        var  i = 1 ; 

        while (i<=100){
            document.write(i+"<br>");
            i++;
        }
        
    </script>
    
</body>
</html>

2.效果

12.嵌套循环

for

for(var 变量;判断是否满足条件；变量变化操作){

        满足条件执行代码

        

        for(var 变量2;判断是否满足条件；变量变化操作){

                满足条件执行代码

        

        }

        

}

while

while(条件){

        执行代码

        while(条件){

                执行代码

        }

}

案例:输出一个三角形

这段HTML中的JavaScript代码实现了用两种不同的循环结构（while和for）来生成一个简单的文本金字塔，并在两个金字塔之间插入一条水平线以作区分。

  1. 使用while循环生成金字塔

    • 初始化变量i为1。
    • 当i小于等于5时，执行循环体。
      • 初始化变量j为1。
      • 当j小于等于i时，在页面上输出一个"^"符号，并递增j。
      • 每完成一轮内层循环后，在页面上输出换行符<br>以开始新的一行。
      • 递增i以便进入下一轮外层循环。
    • 结果是在网页上输出一个由"^"组成的金字塔形状。

  2. 使用for循环生成金字塔

    • 外层循环从i=1到i=5。
      • 内层循环从j=1到j=i，每次循环在页面上输出一个"*"符号。
      • 每完成一轮内层循环后，在页面上输出换行符<br>以开始新的一行。
    • 这个循环同样生成一个金字塔形状，但这次是由"*"组成。

  3. 添加水平线

    • 在两个金字塔之间，使用document.write("<hr>")插入一条水平线，以便于区分两个不同方法生成的结果。

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出一个三角型</title>
</head>
<body>
    <script>
        //输出一个金字塔

        var i = 1;

        while(i <= 5){

            var j = 1;

            while(j <= i){
                //输出^号

                

                document.write("^");

                j++;

            }

            document.write("<br>");

            i++;

        }
        document.write("<hr>");

        /**
         * for输出一个金字塔
         */
        for(var i = 1; i <= 5; i++){

            for(var j = 1; j <= i; j++){

                document.write("*");

            }

            document.write("<br>");

        }

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

2.效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2192050.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SM2无证书及隐式证书公钥机制签名和加密过程详解(五)

SM2无证书及隐式证书公钥机制签名和加密过程详解(五)

在能够解析隐式证书实例的基础上&#xff08;SM2无证书及隐式证书公钥机制签名和加密过程详解(四)-CSDN博客&#xff09;&#xff0c;这里介绍如何通过隐式证书机制实现签名验签及加密解密。 &#xff08;5&#xff09;隐式证书机制签名验签过程 5.1签名过程 输入&#xff1…
阅读更多...
Redis SpringBoot项目学习

Redis SpringBoot项目学习

Redis 是一个高性能的key-value内存数据库。它支持常用的5种数据结构&#xff1a;String字符串、Hash哈希表、List列表、Set集合、Zset有序集合 等数据类型。 Redis它解决了2个问题&#xff1a; 第一个是&#xff1a;性能 通常数据库的读操作&#xff0c;一般都要几十毫秒&…
阅读更多...
【AUTOSAR 基础软件】COM模块详解（通信）

【AUTOSAR 基础软件】COM模块详解（通信）

文章包含了AUTOSAR基础软件&#xff08;BSW&#xff09;中COM模块相关的内容详解。本文从AUTOSAR规范解析&#xff0c;ISOLAR-AB配置以及模块相关代码分析三个维度来帮读者清晰的认识和了解COM这一基础软件模块。文中涉及的ISOLAR-AB配置以及模块相关代码都是依托于ETAS提供的工…
阅读更多...
一条广告变现3W+，半个月涨粉30W！简直太香了！

一条广告变现3W+，半个月涨粉30W！简直太香了！

今天给大家分享个变现很猛的赛道&#xff0c; 这个赛道&#xff0c;我一开始关注到的时候&#xff0c;是一两个月前吧&#xff0c; 当时看到的时候&#xff0c;相关的笔记流量很猛&#xff0c; 而且相关的账号&#xff0c;起的号也很多&#xff0c; 我当时是看到那么多人都…
阅读更多...
我有一张图，我怎么让midjourney按照这张图继续生成呢？

我有一张图，我怎么让midjourney按照这张图继续生成呢？

使用文字生成图片是一种基本的功能&#xff0c;但是还有一种场景&#xff0c;不是从文字生成图片&#xff0c;而是基于已有的一张图片生成另一张图片&#xff0c;这个时候&#xff0c;就需要以图生图的功能了。 以图生图:image to image generator 以图生图技术让我们见识到…
阅读更多...
CSP-J/S 复赛算法 并查集-Hash表

CSP-J/S 复赛算法 并查集-Hash表

文章目录 前言并查集并查集是什么&#xff1f;并查集的应用举几个并查集的例子更加详细的介绍合并两个集合判断元素的关系 并查集在树中的表示方法并查集在树中的表示概念 字符串图示例初始状态合并操作示例最终结构 查找操作和路径压缩示例 并查集的工作原理判断元素是否在同一…
阅读更多...
Linux下静态库与动态库制作及分文件编程

Linux下静态库与动态库制作及分文件编程

Linux下静态库与动态库制作及分文件编程 文章目录 Linux下静态库与动态库制作及分文件编程1.分文件编程1.1优点1.2操作逻辑1.3示例 2.Linux库的概念3.静态库的制作与使用3.1优缺点3.2命名规则3.3制作步骤3.4开始享用 4.动态库的制作与使用4.1优缺点4.2动态库命名规则4.3制作步骤…
阅读更多...
Redis：list类型

Redis：list类型

Redis&#xff1a;list类型 list命令非阻塞LPUSHLRANGELPUSHXRPUSHRPUSHXLPOPRPOPLINDEXLINSERTLLENLREMLTRIMLSET 阻塞BLPOPBRPOP 内部编码ziplistlinkedlistquicklist 几乎每种语言都有顺序表、数组、链表这样的顺序结构&#xff0c;Redis也做出了相应的支持。 如图&#xff…
阅读更多...
RAG：检索增强生成技术概览

RAG：检索增强生成技术概览

Why 将大模型应用于实际业务场景时会发现&#xff0c;通用的基础大模型基本无法满足我们的实际业务需求&#xff0c;主要有以下几方面原因&#xff1a; 知识的局限性&#xff1a;大模型对于一些实时性的、非公开的或离线的数据是无法获取到的。幻觉问题&#xff1a;所有的AI模…
阅读更多...
【Python游戏开发】贪吃蛇游戏demo拓展

【Python游戏开发】贪吃蛇游戏demo拓展

拓展上一项目【Python游戏开发】贪吃蛇 实现穿墙效果 # 检测游戏是否结束 def check_gameover():global finished# 移除蛇头位置超过窗口判断for n in range(len(body) - 1):if(body[n].x snake_head.x and body[n].y snake_head.y):finished True # 状态检测 def ch…
阅读更多...
嘴尚绝卤味：健康美味的双重奏

嘴尚绝卤味：健康美味的双重奏

在当今快节奏的生活中&#xff0c;人们对美食的追求不再仅仅停留于味蕾的满足&#xff0c;更加注重食物的健康与营养。在这一背景下&#xff0c;"嘴尚绝卤味"以其独特的健康理念与精湛的制作工艺&#xff0c;成为了市场上备受瞩目的卤味品牌。本文将从"嘴尚绝卤…
阅读更多...
Linux运维01：VMware创建虚拟机

Linux运维01：VMware创建虚拟机

视频链接&#xff1a;05.新建VM虚拟机_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1nW411L7xm/?p14&spm_id_from333.880.my_history.page.click&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.点击“创建虚拟机” 2.选择“自定义&#xff08;高级&#xff0…
阅读更多...
15分钟学 Python 第41天：Python 爬虫入门（六）第二篇

15分钟学 Python 第41天：Python 爬虫入门（六）第二篇

Day41&#xff1a;Python爬取猫眼电影网站的电影信息 1. 项目背景 在本项目中&#xff0c;我们将使用 Python 爬虫技术从猫眼电影网站抓取电影信息。猫眼电影是一个知名的电影信息平台&#xff0c;提供了丰富的电影相关数据。通过这个练习&#xff0c;您将深入学习如何抓取动…
阅读更多...
小白必看一文彻底搞懂 Transformer（图解+手撕）

小白必看一文彻底搞懂 Transformer（图解+手撕）

Transformers 亮相以来彻底改变了深度学习模型。 今天&#xff0c;我们将揭示 Transformers 背后的核心概念&#xff1a;注意力机制、编码器-解码器架构、多头注意力等等。 通过 Python 代码片段&#xff0c;让你深入了解其原理。 技术交流群 前沿技术资讯、算法交流、求职…
阅读更多...
用IMX6UL开发板编写按键输入实验

用IMX6UL开发板编写按键输入实验

在之前我们都是讲解如何使用IMX6UL的GPIO输出控制等功能&#xff0c;IMX6U的IO不仅能作为输出&#xff0c;而且也可以作为输入&#xff0c;而我们开发板上具有一个按键&#xff0c;按键肯定是连接了一个IO口的额&#xff0c;我们在这一节将会把IO配置成输入功能&#xff0c;读取…
阅读更多...
JAVA基础面试题汇总（持续更新）

JAVA基础面试题汇总（持续更新）

1、精确运算场景使用浮点型运算问题 精确运算场景&#xff08;如金融领域计算应计利息&#xff09;计算数字&#xff0c;使用浮点型&#xff0c;由于精度丢失问题&#xff0c;会导致计算后的结果和预期不一致&#xff0c;使用Bigdecimal类型解决此问题&#xff0c;示例代码如下…
阅读更多...
Java类的生命周期浅析

Java类的生命周期浅析

知识前提 在了解类的生命周期之前&#xff0c;有必要先了解一下jvm的内存结构。如下所示&#xff1a; 在了解完jvm的内存结构之后&#xff0c;就知道了例如堆区&#xff0c;栈区&#xff0c;常量池和方法区等概念。 也了解到了&#xff0c;编写的代码&#xff0c;是先需要通过…
阅读更多...
使用pytdx获取股票信息总结

使用pytdx获取股票信息总结

使用pytdx获取股票相关信息汇总 行情接口标准行情对接总结界面展示性能问题数据可靠性 附录代码 行情接口 pytdx中提供了hq&#xff08;标准行情&#xff09;及exhq&#xff08;扩展市场行情&#xff09;两种接口&#xff0c;扩展市场目前已经失效无法使用。 标准行情 这里只…
阅读更多...
4. Getter和Setter注解与lombok

4. Getter和Setter注解与lombok

文章目录 1. 什么是Getter和Setter注解2. 什么是lombokjava自带的jar包 3. 从maven仓库里找lombok相关jar包4. 把jar包导入项目另一个jar包导入途径 5. 正式使用注解① 问题② 解决方案提示 6. 如果还想对某个成员变量添加限制怎么办7. 内容出处 1. 什么是Getter和Setter注解 官…
阅读更多...
【包教包会】速通LLM《从头开始构建大型语言模型》免费pdf分享

【包教包会】速通LLM《从头开始构建大型语言模型》免费pdf分享

介绍 在当今人工智能技术飞速发展的时代&#xff0c;大型语言模型&#xff08;LLM&#xff09;作为聊天机器人、文本生成和理解等应用的核心&#xff0c;已经成为研究和商业领域的关注焦点。尽管这些模型的应用无处不在&#xff0c;但对于大多数开发者来说&#xff0c;它们的工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023