javascript 入门2

最新推荐文章于 2024-08-30 16:13:36 发布

家兴2023

最新推荐文章于 2024-08-30 16:13:36 发布

阅读量130

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_80094706/article/details/136097791

版权

本文详细介绍了JavaScript中的对象概念，包括创建、属性操作（输出、增添、删减、改变）以及DOM的应用，如动态效果实现、表单验证和Ajax交互示例。

摘要由CSDN通过智能技术生成

对象

对象(Object)时JavaScript的一种特殊并且复杂的数据类型，内部有键值对构成，它可以用来储存不同数据类型的值(：之前)作为属性(：之后)---包括对象，也可以储存函数作为方法。

对象例子：
let aaa = {
    name : "zhangsan" ;
    age : 18 ;
    sex : "男" ;
    }

对象的创建：

let theName = {};
let theName2 = new Object();

对象属性的输出：

for (let k in aaa){
    console.log(aaa[k]);
    console.log(aaa.k);
}

对象属性的增添：

增加[属性]:
aaa.grade:10;

增加[方法]：
function Print(){
    alert("Hello World");
}
aaa.Print = Print;
aaa.Print();

对象属性的删减：

delete aaa.sex;

对象属性的改变：

aaa.name = "张三";

随机生成

随机生成一个 0 到 1 之间的随机数
let num=Math.random();
console.log(num);

由此可知：

随生成一个 0 到 10 的数
let min = 1;
let max = 10;
let Num2 = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(Num2);

DOM

1.实现动态效果：通过JavaScript等编程语言来控制文档中的元素，从而实现动态效果，如动态展示图片、滚动条、弹出框等。
2.实现表单验证：通过DOM来获取表单中的输入值，然后对这些值进行校验，从而保证用户输入的内容符合要求。
3.实现Ajax交互：通过DOM来获取用户的输入值，然后将这些值发送到服务器端进行处理，然后再将处理结果返回到页面中，从而实现动态更新页面内容的功能。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM....</title>
    </head>
<body>
    <h1 id="hh">点击之前</h1>
    <p id="pp">原来段落</p>
    <button onclick="change()">点击我</button>
    <script>
        function change() {
            // 通过ID获取元素
            var heading = document.getElementById('hh');
            var paragraph = document.getElementById('pp');
            // 修改元素的文本内容
            heading.textContent = '点击之后';
            paragraph.textContent = '后来段落';
        }
    </script>
</body>
</html>