Javascript

最新推荐文章于 2024-09-07 13:38:28 发布

曹MX

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量57

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_50736421/article/details/120102743

版权

本文介绍了JavaScript在浏览器中实现用户交互的方式，包括内部和外部脚本的结合使用，以及变量声明、流程控制、事件处理如onclick、onload、onblur、onchange和onsubmit等事件的详细讲解。同时，文章还提供了多个示例来说明如何进行表单验证和数据计算，展示了JavaScript在网页动态效果和用户交互中的核心作用。

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

JS

为了完成用户与浏览器的人机交互
js运行在浏览器上

JS和HTML的结合方式

内部js

<head>
<!-- ... -->
    <script>
	     // js代码
		 alert("Hello Javascript");
	</script>
<!-- ... -->
</head>

外部js

demo1.js

alert("Hello Javascript aaaaaaaaaaaaa");

01_JS与html的结合方式.html

<head>
<!-- ... -->
    <script src="js文件位置"></scrpit>
<!-- ... -->
</head>

变量声明

全局变量

var 变量名=值;

局部变量

let 变量名=值;

常量

const 常量名=值;

流程控制

// 增强性for循环
for (let element of arr) {
	// ...
}

事件

事件绑定

静态绑定

<button onclick="singSong()">按钮点击</button>

<script>
function singSong() {
	alert("...");
}
</script>

动态绑定

<button id="btn">按钮点击</button>

<script>
document.getElementById("btn").onclick = function() {
	alert("...");
}
</script>

onclick事件

元素被点击的事件

    document.getElementById("btn").onclick = function() {
        console.log(this);
        alert("我说鸡蛋你说要，鸡蛋要鸡蛋要，鸡蛋鸡蛋要要要");
    }

onload事件

当窗口全部加载结束之后执行

        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                alert("哟哟切克闹，煎饼果子来一套。");
            }
        }

onblur事件

失去焦点事件

        /*
        * 【需求】校验用户名
        * 【要求】鼠标光标移开用户名输入框之后，检查用户名是否输入；
        * */
        window.onload = function() {
            document.getElementById("username").onblur = function() {
                // console.log(this.value);
                if (this.value) {
                    document.getElementById("username_msg").style = "display: none;";
                } else {
                    document.getElementById("username_msg").style = "";
                    document.getElementById("username_msg").innerText = "输入有误，请重新输入";
                }
            }
        }

onchange事件

内容发生修改事件

        window.onload = function() {
            document.getElementById("proPrice").onchange = function() {
                var proPrice = document.getElementById("proPrice");
                var num = document.getElementById("num");
                var elementById = document.getElementById("totalPrice");

                elementById.value = proPrice.value * num.value;
            }

            document.getElementById("num").onchange = function() {
                var proPrice = document.getElementById("proPrice");
                var num = document.getElementById("num");
                var elementById = document.getElementById("totalPrice");

                elementById.value = proPrice.value * num.value;
            }
        }

onsubmit事件

表单提交事件

        window.onload = function() {
            document.getElementById("registForm").onsubmit = function() {
                // onsubmit会循问返回值
                // 如果没有返回值，相当于此函数允许表单提交
                // 如果返回值为true，相当于此函数允许表单提交
                // 如果返回值为false，相当于此函数拒绝表单提交

                let username = document.getElementById("uName");
                let password = document.getElementById("pwd");
                let result = false;
                if (username.value && password.value) {
                    result = true;
                } else {
                    result = false;
                }
                console.log("...");
                return result;
            }
        }

曹MX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript

JS为了完成用户与浏览器的人机交互js运行在浏览器上JS和HTML的结合方式内部js<head> <script> // js代码 alert("Hello Javascript"); </script></head>外部jsdemo1.jsalert("Hello Javascript aaaaaaaaaaaaa");01
复制链接

扫一扫