JavaScript基础学习2

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量99 收藏
点赞数
分类专栏： Web前端 文章标签： js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu_yongheng/article/details/114852671
版权

今天继续学习js基本语法，主要包括两方面的内容：定义对象类型和常用事件。

目录

1、自定义对象（Object）

说到对象应该都不陌生，学过Java和C++的都知道，它们是一种面向对象编程的语言，那么js中是怎么来定义对象的呢？可以有两种方式。

（1）Object形式定义

<!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>

    <script type="text/javascript">
        /*
            对象的定义：
                var 变量名 = new Object();   // 对象实例（空对象）
                变量名.属性名 = 值;           // 定义一个属性
                变量名.函数名 = function(){}  // 定义一个函数
        */
        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function(){
            alert("姓名：" + this.name + "年龄：" + this.age);
        }

        alert(obj.name);  // 调用属性
        alert(obj.age);
        obj.fun();  // 调用函数
    </script>
    
</head>
<body>
    
</body>
</html>

（2）大括号形式定义

<!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>

    <script type="text/javascript">
        /*
            对象的定义：
            var 变量名 = {
                属性名：值；
                属性名：值；
                函数名：function(){}
            }
        */
        var obj = {
            name: "华仔",
            age: 18,
            fun: function(){
                alert("姓名：" + this.name + "年龄：" + this.age);
            }
        };

        obj.fun();

    </script>
</head>
<body>
    
</body>
</html>

2、js中的常用事件

什么是事件？事件是电脑输入与页面进行交互的响应。

        常用的事件：
            （1）onload 加载完成事件：页面加载完整之后，常用于做页面的初始化操作
            （2）onclick 单击事件：常用于按钮的点击响应操作；
            （3）onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法；
            （4）onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后的操作
            （5）onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法

        什么是事件注册（绑定）：
            就是告诉浏览器，当事件响应之后需要执行哪些操作代码，叫时间注册或者事件绑定。

            分为 “静态注册” 和 “动态注册”
            （1）静态注册事件：通过html标签的事件属性值直接赋予事件响应后的代码
            （2）通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码

            动态注册基本步骤：
                1、获取标签对象
                2、标签对象.事件名 = function(){}

下面就来讲一讲对于这5种常用的事件如何进行静态注册和动态注册。

（1）onload 加载完成事件

onload事件是浏览器解析完页面之后就会自动触发的事件。

<!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>
    
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun(){
            alert('静态注册onload事件');
        }

        // onload事件动态注册，有固定写法
        window.onload = function(){
            alert('动态注册onload事件');
        }
    </script>
    
</head>
<!-- 
    静态注册onload事件：
        onload事件是浏览器解析完页面之后就会自动触发的事件
        <body οnlοad="onloadFun()">
 -->
<body>
    
</body>
</html>

（2）onclick 单击事件

常用于按钮的点击响应操作。

<!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>

    <script type="text/javascript">

        function onclickFun(){
            alert("静态注册onclick事件");
        }

        // 动态注册onclick事件
        window.onload = function(){
            // 1、获取标签对象（通过getElementById函数获取标签）
            var btnObj = document.getElementById("btn01");
            
            // 2、通过标签对象.事件名 = function(){}
            btnObj.onclick = function(){
                alert("动态注册的onclick事件");
            }

        }
    </script>

</head>
<body>
    <!-- 
        静态注册onclick事件：
            <button οnclick="onclickFun()">按钮1</button>
     -->
    <button onclick="onclickFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

（3）onblur 失去焦点事件

常用于输入框失去焦点后验证其输入内容是否合法。

<!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>

    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun(){
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
            console.log("静态注册失去焦点事件");
        }

        // 动态注册 onblur事件
        window.onload = function(){
            var passwordObj = document.getElementById("password");

            passwordObj.onblur = function(){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br/>
    密码：<input type="text" id="password"><br/>
</body>
</html>

（4）onchange 内容发生改变事件

常用于下拉列表和输入框内容发生改变后的操作。

<!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>
    <script type="text/javascript">
        function onchangeFun(){
            alert("女神已经改变了！")
        }

        // 动态注册 onchange事件
        window.onload = function(){
            // 获取标签对象
            var changeObj = document.getElementById("change1");

            changeObj.onchange = function(){
                alert("男神已经改变了");
            }
        }
    </script>
</head>
<body>
    请选择你心目中的女神：
    <select onchange="onchangeFun()">
        <option value="">--女神--</option>
        <option value="">红红</option>
        <option value="">兰兰</option>
        <option value="">芳芳</option>
    </select>

    <br/>

    请选择你心目中的男神：
    <select onchange="onchangeFun()" id="change1">
        <option value="">--男神--</option>
        <option value="">张三</option>
        <option value="">李四</option>
        <option value="">王五</option>
    </select>
</body>
</html>

（5）onsubmit 表单提交事件

常用于表单提交前，验证所有表单项是否合法。

<!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>

    <script type="text/javascript">
    
        function onsubmitFun(){
            // 要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
            alert("静态注册表提交事件----发现不合法");
			// 拒绝提交
            return false;
        }    

         // 动态注册 onsubmit事件
         window.onload = function(){
            // 获取标签对象
            var submitObj = document.getElementById("form01");

            submitObj.onsubmit = function(){
                alert("动态注册表提交事件----发现不合法");
				// 不拒绝提交
                return true;
            }
        }
    </script>
</head>
<body>

    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>

    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
    
</body>
</html>
MYH永恒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript基础学习
07-10
JavaScript基础学习
JavaScript学习基础学习心得
10-24
JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解 JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解
Javascript 基础知识学习
岳来的博客
11-23 6981
javascript 基础学习
JavaScript学习（基础）
m0_49034593的博客
08-19 1278
js基础
05 JavaScript学习：语法
百锦再的博客
04-19 6万+
在 JavaScript 中，变量定义是指声明一个变量并为其分配一个值。varlet和const。varvar是 JavaScript 最早引入的声明变量的关键字。使用var声明的变量具有函数作用域，而不是块级作用域。var x = 10;// 使用 var 定义变量 xletlet是 ES6（ECMAScript 2015）引入的声明变量的关键字。使用let声明的变量具有块级作用域，只在声明的块内部有效。let y = 20;// 使用 let 定义变量 yconstconst。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
17 JavaScript 学习：正则表达式
百锦再的博客
04-26 7万+
正则表达式模式指的是正则表达式中用于匹配文本的部分，也就是描述要匹配的规则和模式的部分。正则表达式模式由普通字符（例如字母、数字、符号等）和元字符（具有特殊含义的字符）组成，通过这些字符的组合，可以定义出各种复杂的匹配规则。使用这些元字符的组合，可以构建出各种复杂的匹配规则，从简单的匹配数字、字母，到复杂的匹配邮箱地址、URL等。在 JavaScript 的正则表达式中，修饰符通常直接跟在正则表达式的后面，例如。正则表达式中的修饰符是指在正则表达式之后添加的字符，用于指定匹配规则的一些特性。
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
08 JavaScript学习：数据类型
百锦再的博客
04-20 7万+
由于 JavaScript 是动态类型的语言，变量的数据类型可以随时改变，这使得 JavaScript 在某些情况下更加灵活，但也可能导致一些类型错误。动态类型的特性使得 JavaScript 在编写代码时更加灵活，但也需要开发人员注意变量的数据类型，以避免潜在的类型错误。JavaScript 中的对象是非常灵活和强大的数据结构，可以用来表示复杂的数据关系和结构。通过对象的属性和方法，可以实现丰富的功能和逻辑。在 JavaScript 中，变量的数据类型是在运行时确定的，而不是在编译时确定的。
JavaScript基础学习点滴第一章
weixin_54957314的博客
05-10 1186
JavaScript基础学习点滴第一章
前端学习-JavaScript基础（ES6）
weixin_51346866的博客
03-26 5232
简单了解ES6新增语法。
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 6399
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
Javascript 入门基础学习
10-29
这只是JavaScript入门的基础知识，随着学习的深入，你还将接触到函数、对象、数组、事件处理、DOM操作、异步编程（如Ajax）以及更多的高级特性。理解并掌握这些概念，你就能创建出丰富交互性的网页应用。继续学习和...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1286
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1071
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MYH永恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值