JavaScript

最新推荐文章于 2024-08-14 10:08:54 发布

爱吃银鱼蒸蛋的麻里

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量216

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/So_cute_SJM/article/details/116084184

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

持续更新ing……

文章目录

JavaScript基础

JavaScript基础

输出

用.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>javascript基础</title>
</head>
<body>
    <!-- html标签，css样式 JavaScript语法
    jQuery
    后端服务器 nodeJS
    Vue rerect angular -->
</body>
<!-- 加载JavaScript的标签 -->
<script>
    /* 变量
    按照语言特性可以分为两类：1.面向对象； 2.面向过程
    js是一门弱语义的编程语言 */
    var age = 21;
    var name = "张三";
    var sex = true; //布尔值，true代表男生，false代表女生
    var height = 1.83, weight = 65; //身高，体重
    /* console:控制台 log：输出打印 */
    //console.log(name);//运行后在浏览器按F12，可以在Console中看到输出的内容

    /* 提示框 */
    //alert(age);

    /* 在页面中输出 */
    //document.write(sex);

    /* 分支语句 > < >= <= == */
    var sexStr = "";
    if(sex == true){
        sexStr = "男";
    }
    else{
        sexStr = "女";
    }

    var BMI = weight / Math.pow(height, 2);//BMI
    //toFixed 保留n位小数
    console.log(BMI.toFixed(2));
    
    document.write("一个叫做:"+name+"的"+sexStr+"老师,今年"+age+"岁了");


</script>
</html>

输入

用.js文件写：

//js文件不能单独运行，需要借助HTML文件来加载


//可以让用户输入内容，当用户点击“确定”的时候会把内容返回出来
var age1 = prompt("请输入你的年龄：");

if(age1 < 18){
    console.log("未成年人");
}
else if(age1 >= 18 && age1 < 30){
    console.log("青年");
}
else if(age1 >= 30 && age1 < 50){
    console.log("中年");
}
else{
    console.log("老年");
}

<!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>js逻辑运算</title>
</head>
<body>
    
</body>

<!-- script src:引入外部的index.js -->
<script src="./index.js"></script> //index.js是上面文件的文件名
</html>

四则运算

用.js文件写，后续用.html文件来加载：

//四则运算
//多个变量可以同时定义，用“，”分隔开
var a = 10, b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
// ++代表自增 ++a表示先自增再使用，a++表示先使用再自增
console.log(++a);

DOM节点操作，函数

<!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>
</head>
<body>
    <p id="p1">今天阴天了</p>
    <!-- button按钮
    onclick属性表示按钮按下时调用的方法是哪个 -->
    <button onclick="btnClick()">点击修改p标签的内容</button>
</body>
<script>
    /* 1.先要查找到p标签
    document 文档  get拿 Element元素 */
    var p1=document.getElementById("p1");
    //p1.innerHTML ="今天天晴了";

    //  函数 
    // function 声明一个函数 work代表的是函数名
    function work(){
      console.log("学习是学生的本职工作");
    }
    // 需要调用函数才会执行
    work();

    function btnClick(){
        p1.innerHTML = "今天天晴了";
    }

    var name = "张三";
    function Setname(){
        console.log("他的名字叫"+name);
    }
    Setname();

    
    function add(a, b){
        return a + b;
    }
    var c = add(1, 2);
    console.log(c);
</script>
</html>

input输入框（BMI计算）

<!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>
</head>
<body>
    <!-- label标签，显示内容 -->
    <label for="weight">体重</label>
    <!-- 输入框 type代表的是输入框的类型 text文本输入框 password密码输入框 value -->
    <input type="text" placeholder="请输入体重" id="weight">
    <br>
    <br>
    <label for="height">身高</label>
    <input type="text" placeholder="请输入身高" id="height">
    <br>
    <br>
    <button onclick="btnClick()">提交</button>
    <!-- 结果展示 -->
    <p id="result"></p>
</body>
<script>

    var input1 = document.getElementById("weight");
    var input2 = document.getElementById("height");
    var p = document.getElementById("result");
    
    function btnClick(){
        
        
         /* value表示input当前输入的内容 */
        var heigh = input2.value * 1;
        var weigh = input1.value * 1;

        var bmi = weigh / (heigh * heigh);
        bmi = bmi.toFixed(2);
        var result ="";
        if (bmi <= 18.4) {
            result="您的bmi值为:"+bmi+"增肥";
        }
        else if (bmi >= 18.5 && bmi <= 23.9) {
            result="您的bmi值为:"+bmi+"正常";
        }
        else if (bmi >= 24.0 && bmi <= 27.9) {
            result="您的bmi值为:"+bmi+"过重";
        }
        else {
            result="您的bmi值为:"+bmi+"肥胖";
        }
       p.innerHTML = result;
    }
</script>
</html>

爱吃银鱼蒸蛋的麻里

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

持续更新ing……文章目录JavaScript基础输出输入四则运算JavaScript基础输出用.html文件写：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫

专栏目录