当前位置： 首页 > article >正文

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

article 2024/10/6 16:18:45

目录

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.kler.cn/news/334783.html

相关文章：

  • js 定义事件中心EventEmitter
  • 【数据分享】2000—2023年我国省市县三级逐月植被覆盖度（FVC）数值（Shp/Excel格式）
  • “衣依”服装销售平台：Spring Boot技术应用与优化
  • RabbitMQ入门2—详解virtual host
  • ＜＜迷雾＞＞ 第8章 学生时代的走马灯(2)--边缘触发 D 触发器 示例电路
  • 如何在微信小程序中实现分包加载和预下载
  • C++ STL常用查询手册
  • 【网络安全】绕过 Etplorer 管理面板实现RCE
  • ElasticSearch高级功能详解与读写性能调优
  • HTB：Preignition[WriteUP]
  • 查找与排序-插入排序
  • 新闻推荐系统：Spring Boot与大数据
  • 计算机网络——http和web
  • 2024年最新大模型LLM学习路径全解析！看完你就是LLM大师
  • 解决跨域问题
  • C++ | Leetcode C++题解之第455题分发饼干
  • 【算法】哈希映射（C/C++）
  • Kubernetes-使用不同主机终端访问k8s 集群。
  • windows上安装python环境
  • CSS元素堆叠