JavaScript

AHawkeye

于 2021-06-13 10:38:22 发布

阅读量202

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/AHawkeye/article/details/117711253

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript介绍

在这里插入图片描述

JS与html结合

第一种方式

在这里插入图片描述

第二种方式

在这里插入图片描述

变量和数据类型

在这里插入图片描述

Undefined
Null
Boolean
Number
String

关系运算

在这里插入图片描述

逻辑运算

在这里插入图片描述

数组

在这里插入图片描述

只要我们通过下标赋值，最大的下标值就会自动给数组扩容，注意是赋值才会扩容，比如我们alert(arr[9])会弹出undefined，但是再输出数组长度还是原来的长度，没有被赋值的就是undefined。

函数定义

第一种方式

在这里插入图片描述

有参函数定义，只需定义参数个数即可：

定义带有返回值的函数用return即可

第二种方式

函数不允许重载，重载会覆盖掉上一次的定义。

在这里插入图片描述

arguments对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

这样，您就可以简单地使用函数来查找（例如）数字列表中的最高值：
在这里插入图片描述

在这里插入图片描述

JS中自定义对象

大括号方式定义

var 变量名 = {属性:value,属性:value};
在这里插入图片描述

在这里插入图片描述
对象中定义方法：

在这里插入图片描述

Object方式

var 变量 = new Object();

在这里插入图片描述

事件

在这里插入图片描述

事件的注册

在这里插入图片描述

静态注册

通过html标签的事件属性直接赋于事件响应后的代码。

动态注册

通过js代码得到标签的的dom对象，然后再通过dom对象.事件名 = function(){}。这种形式赋于事件响应后得到代码，叫动态注册。
在这里插入图片描述

onload事件

静态

浏览器解析完页面之后自动触发的事件。
在这里插入图片描述
打开后就这样显示弹窗

在这里插入图片描述
或者这么写

动态

动态事件注册是固定写法。
在这里插入图片描述

onclick事件

静态

在这里插入图片描述

在这里插入图片描述
点击button1即可弹出这个窗口。

动态

在这里插入图片描述

onblur事件

##静态
在这里插入图片描述

在这里插入图片描述

动态

在这里插入图片描述

onchange事件

静态

在这里插入图片描述

动态

在这里插入图片描述

onsubmit事件

静态

在这里插入图片描述

动态

在这里插入图片描述

阻止表单提交

return false;可以阻止表单提交
在这里插入图片描述
这里我们点静态注册提交弹出不合法提示同时不会提交表单
这里的return不能少 既实现了表单不提交也实现了点击提交提示不合法的弹窗。
动态就方便很多不需要return 一个函数只需函数里return false即可
在这里插入图片描述

弹出不合法弹窗并且表单没有提交。

Document对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：
在这里插入图片描述
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

在这里插入图片描述

Document对象中的方法

在这里插入图片描述

验证用户名是否有效：
在这里插入图片描述

在这里插入图片描述

正则表达式

在这里插入图片描述

两种常见的验证提示效果

第一种：文字

在这里插入图片描述

第二种：图像

在这里插入图片描述

getElementsByName

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = "checked";
            }

        }
        function checkNone() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = "";
            }
        }
        function reverse() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }

    </script>
</head>
<body>
   兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
   <br>
   <button onclick="checkAll()">全选</button>
    <button onclick="checkNone()">全不选</button>
    <button onclick="reverse()">反选</button>
</body>
</html>

getElementsByTagName

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var inputs = document.getElementsByTagName("input");
            for (let i = 0; i < inputs.length;i++){
                inputs[i].checked = true;
            }
        }


    </script>
</head>
<body>
   兴趣爱好：
    <input type="checkbox" value="cpp">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
   <br>
   <button onclick="checkAll()">全选</button>

</body>
</html>