JavaScript（页面动态效果）

最新推荐文章于 2024-09-11 18:11:01 发布

明别

最新推荐文章于 2024-09-11 18:11:01 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/DZiXin/article/details/108130781

版权

这篇博客深入介绍了JavaScript作为脚本语言的核心组成部分——ECMAScript、BOM和DOM，并探讨了JavaScript入门、事件处理、定时器设置以及数组操作等关键概念。文中通过多个实例，如表单验证、轮播图、弹广告、表格隔行换色和全选功能，展示了JavaScript在创建页面动态效果中的应用。

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

JavaScript是一种脚本语言

JavaScript三个核心：ECMAScript、BOM、DOM

JavaScript入门

三种添加方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS入门</title>
    <!-- 2.内部方式添加js代码, script标签位置没有要求 -->
    <script>
        // int a = 1; 跟Java类似
        var a = 1;
        // 加载 history 列表中的前一个 URL
        function goBack() {
    
            // history.back();
            history.go(-1);
        }
    </script>
    <!-- 引入js文件的script标签中, 不能再写js代码 -->
    <script src="js/my.js" type="text/javascript">
        // 再加js代码 会出错
    </script>
</head>
<body>
    <!-- 1.内嵌式添加JS代码: 写在标签中添加属性 -->
    <button onclick="javascript:console.log('普通按钮被点击')">普通按钮</button>
    <button onclick="goBack()">返回</button>
</body>
</html>

ECMAScript基础

    <script>
        // 1.JS数据类型是弱类型
        var a = 1;
        a = 3.14;
        a = true;
        a = "haha";
        a = new Date();

        // 2.JS原始类型    typeof: 可以查看变量类型
        var b; // undefined: 未定义
        console.log(b); // 控制台打印
        b = 3.14;
        console.log(typeof b); // number
        b = true;
        console.log(typeof b); // boolean
        b = 'hello';
        console.log(typeof b); // string: '' ""都是字符串
        b = null;
        console.log(typeof b); // object

        // 3.JS可以简化的地方 - 不推荐
        c = 1; // var省略掉以后, c就变成了全局变量
        c = true // ;省略, 一行中只有一句js代码

        // 4.运算符区别
        // == 比较内容, 不比较类型
        // === 比较类型, 比较内容
        d = "1"; // string
        console.log(d == 1); // true
        console.log(d === 1); // false
    </script>

事件 - 与标签有关

onclick - 单击, 可以用于所有元素

    <script>
        // 定义函数 function
        var a = 1;
        function m1() {
    
            // console.log(a++ + "按钮2被点击了!");
            // 弹窗
            alert(a++ + "按钮2被点击了!");
        }
    </script>

<body>
    <button onclick="m1()">普通按钮2</button>
</body>

onload - 某个页面或图像被完成加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载函数</title>
    <script>
/*        function m1() {
            // 1.获得图片标签
            var img = document.getElementById("img");
            // 2.修改图片路径
            img.src = "img/2.jpg";
        }*/
        // 2.页面加载函数的方式2
        window.onload = function() {
     // 匿名函数
            // 1.获得图片标签
            var img = document.getElementById("img");
            // 2.修改图片路径
            img.src = "img/2.jpg";
        }
    </script>
</head>
<!-- 1.添加页面加载函数的方式 -->
<!--<body οnlοad="m1()">-->
<body>
<img id="img" src="img/1.jpg" width="100%"/>
</body>
</html>

onsubmit - 提交按钮被点击, 用于form标签
return false - 表单数据不能提交到服务器
return true - 可以提交到服务器
onsubmit = “return checkUserName()”

定时器设置

    <script>
        var timer;
        onload = function() {
    
            // 开启定时器
            timer =

最低0.47元/天解锁文章

明别

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫