Vue实验1：JavaScript基础

Yuexin️

已于 2024-07-10 10:02:52 修改

阅读量141

点赞数 3

文章标签： javascript vue.js 前端

于 2024-06-03 20:30:55 首次发布

本文链接：https://blog.csdn.net/Violetto_Yan/article/details/139423959

版权

一、实验目的：
1、 JavaScript基本语法
2、 JavaScript对象的创建方法
3、 JSON的定义，使用方法
二、实验内容：

计算矩形的周长和面积，编程实现根据用户输入的矩形长和宽的值，求得矩形的周长和面积。
创建一个Student函数构造器，Student有三个字段：id，name，age，有一个方法learning，该方法返回一个字符串“我正在学习Web前端”。
创建一个对象zs，并在网页上输出该对象的姓名，年龄和learning方法的返回值。
尝试使用JSON创建zs对象。

<!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>
    <!-- 计算矩形面积和周长 -->
    矩形的长：<input type="text" id="length" name="length"><br/>
    矩形的宽：<input type="text" id="width" name="width"><br/>
    周长:<input type="text" id="zhou" name="zhou"><br/>
    面积：<input type="text" id="mian" name="mian"><br/>
    <input type="submit">
    <script>
        var x=Number(document.getElementById("length").value);
        var y=Number(document.getElementById("width").value);
        var zhou=2*(x+y);
        var mian=x*y;
        document.getElementById("zhou").value=zhou;
        document.getElementById("mian").value=mian;
    </script>
</body>
</html>

2
<!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>
        function Student(id,name,age){
            this.id=id;
            this.name=name;
            this.age=age;
            this.learning=function(){
                return '我在学习web前端'
            }
        }
        var zs=new Student('1','张三',22);
        document.write("姓名:"+zs.name+"年龄:"+zs.age+zs.learning());
    </script>
</body>
</html>

3、
<!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 zs={
            id:01,
            name:"张三",
            age:23,
            learning:function(){
                return '我在学web前端'
            }
        }
        document.write(zs.name);
        document.write(zs.age);
        document.write(zs.learning());
    </script>
</body>
</html>