学习总结JavaScript

最新推荐文章于 2024-05-02 23:04:12 发布
最新推荐文章于 2024-05-02 23:04:12 发布
阅读量767 收藏 1
点赞数
分类专栏： java基础 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46457946/article/details/121793464
版权

文章目录

1、JavaScript介绍

  • Javascript 语言诞生主要是完成页面的数据验证。
  • JS 是弱类型，Java 是强类型。

特点

  1. 交互性（信息的动态交互）

  2. 安全性（不允许直接访问本地硬盘）

  3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

2、JavaScript和html代码的结合

2.1、通过script 引入外部的 js 文件来执行

src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="first.js"></script>
</head>
<body>
</body>
</html>

在这里插入图片描述

2.2、script 标签直接定义 js 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("瓦大西哇")
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

3、JavaScript变量

JavaScript 的变量类型：

​ 数值类型： number

​ 字符串类型： string

​ 对象类型： object

​ 布尔类型： boolean

​ 函数类型： function

JavaScript的特殊值

​ undefined 未定义

​ null 空值

​ NaN 非数字，非数值

JavaScript定义变量名格式

​ var 变量名；

​ var 变量名 = 值；

4、关系运算符

	等于：==   比较字面值
	全等于：=== 比较字面值和两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a="1";
        var b=1;
        
        alert(a == b);
        alert(a===b);
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

5、数组

JavaScript中数组的定义。

​ var 数组名 = [] ; //空数组

​ var 数组名 = [1,‘ABC’,false] ; //定义数组并赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr1=[];
        // alert(arr1.length)  //0

        arr1[0]=10;
        // alert(arr1.length) //1


        //在js的数组中，只要通过下标赋值，那么最大的下标值，就会自动的给数组做扩容
        //在这里我们跳过了arr[1],那么arr[1]的值就是未定义，也就是undefined
        arr1[2]="德玛西亚";
        // alert(arr1.length)
        // alert(arr1[1]) //undefined

        //数组的遍历
        for (var i = 0; i <arr1.length ; i++) {
            alert(arr1[i]) //10 undefined 德玛西亚
        }
    </script>
</head>
<body>
</body>
</html>

6、函数

6.1、函数的两种定义方式

6.1.1、使用function关键字

格式：

function 函数名 （参数列表）{

函数体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       //定义一个无参函数
       function fun1(){
           alert("无参函数被调用了")
       }
       // fun1(); //函数要调用才会执行

       function fun2(a,b){
           alert("有参函数被调用 a->"+a+",b->"+b)
       }
       // fun2(12,"abc")

       //定义带有返回值的函数
       function fun3(sum1,sum2){
           var result=sum1+sum2;
           return result;
       }
       alert(fun3(1,2));

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

6.1.2、函数的第二种方式

格式

var 函数名 = function(形参列表){

函数体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       var fun1= function (){
           alert("无参函数")
       }
       // fun1();

       var fun2 = function (a,b){
           alert("有参函数a="+a+",b="+b);
       }
       // fun2(10,20) //有参函数a=10,b=20

       var fun3 = function (sum1,sum2){
           return sum1+sum2;
       }
       alert(fun3(20,10));

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

注意：在java中，函数是允许被重载的，但是在js中函数的重载会覆盖掉上一次的定义，也就是说，同名函数不管是有参还是无参，都只会呈现最后一次定义的函数内容。

6.2、函数的arguments隐形参数

在function函数中不需要定义，但是却可以直接获取全部参数的变量，就叫隐形参数

js的隐形参数就想java的可变长参数一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(a, b, c) {
            alert(arguments.length);
            //可查看参数个数
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
            alert("a = " + a);
            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }
        }
         fun(1,"ad",true);
    </script>
</head>
<body>
</body>
</html>

7、js中的事件

什么是事件？事件就是输入设备与页面进行交互的响应，称为事件

常见的事件有：

​ onload 加载完成事件 页面加载完成之后，常用于做页面 js 代码初始化

​ onclick 单击事件 用于按钮的点击响应

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

​ onchange 内容发生改变事件 用于下拉列表和输入框内

​ onsubmit 表单提交事件 用于表单提交

7.1、onload加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件
        function onload_func(){
            alert('静态注册onload事件')
        }
        window.onload = function (){
            alert("动态注册onload事件")
        }
        // onload_func()
    </script>
</head>
<!--onload 事件是浏览器解析完页面之后就会自动触发-->
<body>
</body>
</html>

静态注册：通过 html 标签的事件属性直接赋于事件响应

动态注册：先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象赋予事件响应

7.2、onclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //静态注册
        function onclick_func(){
           alert("静态注册onclick");
       }

       //动态注册
        window.onload = function (){
            var object = document.getElementById("btn");
            object.onclick=function (){
                alert("动态注册onclick")
            }
        }

    </script>
</head>
<body>
<button onclick="onclick_func();">静态注册按钮</button>
<button id="btn">动态注册按钮</button>
</body>
</html>

在这里插入图片描述

7.3、onblur失去焦点事件（每次点击都会加一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //静态注册失去焦点
        function onblur_func(){
            //console控制台对象
            //log
            console.log("静态注册失去焦点");
        }


        //动态注册失去焦点
        window.onload = function (){
            //获取标签对象
            var obj = document.getElementById("password");
            //标签对象.事件名称 = function(){};
            obj.onblur=function (){
                console.log("动态注册失去焦点")
            }
        }
    </script>
</head>
<body>
我爱你<input type="text" onblur="onblur_func();"><br/>
我恨你<input id="password" type="text"><br/>

<!--<button οnclick="onblur_func();">静态注册按钮</button>-->
<!--<button id="btn">动态注册按钮</button>-->
</body>
</html>

在这里插入图片描述

7.4、onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchange_func(){
            alert("选择的球类发生改变")
        }
        
        window.onload = function (){
            //1、获取标签对象
            var obj = document.getElementById("btn")
            obj.onchange = function (){
                alert("选择的乐器发生改变")
            }
        }
    </script>
</head>
<body>
<!--静态注册onchange事件-->
<select onchange="onchange_func()">
    <option>球类</option>
    <option>篮球</option>
    <option>排球</option>
    <option>足球</option>
</select>
<select id="btn">
    <option>乐器</option>
    <option>吉他</option>
    <option>口琴</option>
    <option>架子鼓</option>
</select>
</body>
</html>

7.5、onsubmit 表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmit_func(){
            alert("静态注册表单提交")
            return false;
        }
        
        <!--return false可以阻止表单提交-->
        window.onload = function (){
            //1、获取标签对象
            var obj = document.getElementById("btn")
            obj.onsubmit = function (){
                alert("动态注册表单提交");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false可以阻止表单提交-->
<form action="http://localhost:8088" method="get" onsubmit="return onsubmit_func()">
    <input type="submit" value="静态注册">
</form>
<form action="http://localhost:8088" id="btn">
    <input type="submit" value="动态注册">
</form>
</body>
</html>

8、document对象

在这里插入图片描述通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

Document 对象的理解：

一：Document 它管理了所有的 HTML 文档内容。

二：document 它是一种树结构的文档。有层级关系

三：它让我们把所有的标签 都 对象化

四：我们可以通过 document 访问所有的标签对象。

什么是对象化？

比如在java中，一个简单的person类

class Person{
    private int age;
    private String name;
    private String sex;
}

那在html中的对象化就是

<body> 
<div id="password">密码</div> 
</body>

8.1、Document 对象中的方法介绍

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

比如：

document ： 文档

get: 获得

element: 元素

by： 通过

id: id

理解为：通过id获取文档中的元素
在这里插入图片描述

8.1.2、getElementById方法

getElementById是指定id来查找对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclick_func(){
            //获取身份证元素
            var idcardobj=document.getElementById("idcard");
            //获取文本框的值
            var idcardText = idcardobj.value;
            //正则匹配
            var patt=/^\d{15}(\d{2}[A-Za-z0-9])?$/;

            if(patt.test(idcardText)){
                alert("身份证合法")
            }else{
                alert("身份证不合法")
            }
        }
    </script>
</head>
<body>
身份证：<input type="text" id="idcard" value="sfz"/>
</span>
<button onclick="onclick_func()">校验</button>
</body>
</html>

在这里插入图片描述

8.1.3、getElementsByName方法

getElementsByName是指定name属性来查找对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkall(){
         //让所有的复选框都选中
            var hobbyies = document.getElementsByName("hobby");
            for (var i = 0; i <hobbyies.length ; i++) {
                hobbyies[i].checked = true;
            }
        }
        //全不选
        function nocheck(){
            //让所有的复选框都不选中
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = false;
            }
        }

        //反选
        function  checkReverse(){   
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
爱好:
<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<br/>
<button onclick="checkall()">全选</button>
<button onclick="nocheck()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

在这里插入图片描述

8.1.4、getElementsByTagName

document.getElementsByTagName 是按照指定标签名来查找对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkall(){
         //让所有的复选框都选中
            //document.getElementsByTagName 是按照指定标签名来查找对象
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i <inputs.length ; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
爱好:
<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<br/>
<button onclick="checkall()">全选</button>
</body>
</html>

8.1.5、节点的常用属性和方法

  • getElementsByTagName() 获取当前节点的指定标签名的子节点

  • appendChild( ChildNode ) 添加一个子节点

childNodes 属性，获取当前节点的所有子节点

firstChild 属性，获取当前节点的第一个子节点

lastChild 属性，获取当前节点的最后一个子节点

parentNode 属性，获取当前节点的父节点

nextSibling 属性，获取当前节点的下一个节点

previousSibling 属性，获取当前节点的上一个节点

className 用于获取或设置标签的 class 属性值

innerHTML 属性，表示获取/设置起始标签和结束标签中的内容

innerText 属性，表示获取/设置起始标签和结束标签中的文本

林中有神君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript学习总结（思维导图篇）
孙叫兽的博客
02-18 3万+
javaScript大牛总结篇
javascript基础学习代码总结
01-18
还有写对于javascript对应的知识点案例。每个文件里都会有很多的注释信息，方面阅读和学习。 ...2.每个模块代码都有注释可用来...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
JavaScript学习总结
qq_53069622的博客
07-08 1412
JavaScript学习总结
javascript学习总结
weixin_59049031的博客
07-10 1548
这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
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。
07 JavaScript学习：变量
百锦再的博客
04-20 7万+
表示一个未赋值的变量或者属性。
Javascript 基础知识学习
岳来的博客
11-23 6962
javascript 基础学习
javascript学习小结
greenHand176438的博客
10-07 1623
已经学了一段时间javaScript,在针对性的学习这块儿的时候，认为js就是属性、事件、方法，的混合使用。下面对js做个简单的总结。javascript又称js是一种用来交互的弱类型脚本语言，js大致分为以下几部分。 第一部分变量 在es6之前以var进行声明用来存储一个变化数据，可以用来做一个中转的容器方便以后的开发进行使用 变量的类型包括为以下几种： ...
JavaScript基础知识全总结
热门推荐
June.1
04-11 8万+
JavaScript基础 浏览器说明 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。 通俗的讲:可以显示页面的一个软件, 国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世...
25 JavaScript学习：var let const
最新发布
百锦再的博客
05-02 8万+
在JavaScript中，使用let关键字可以重新定义变量，而使用var关键字则不能。重新定义变量指的是在同一作用域内多次声明同一个变量名，后面的声明将覆盖前面的声明。下面分别以let和var使用let重新定义变量：let x = 10;// 输出 10let x = 20;// 可以重新定义x，不会报错// 输出 20在使用let声明变量时，可以在同一作用域内多次声明同一个变量名，后面的声明会覆盖前面的声明。使用var重新定义变量：var y = 30;// 输出 30。
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript 学习技巧
10-29
本文将总结和分享六个有用的 JavaScript 学习技巧，帮助开发者更好地掌握这门语言。 一、隐式类型转换 JavaScript 中的所有值都可以隐式地转换为 Boolean 类型，但是这些值并不是 Boolean 类型。当使用三个等于号...
JavaScript的学习总结
11-22
自己弄得一个总结文档方便初学者快速学习 csdn真恶心
javaScript学习笔记总结.docx
03-17
JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用开发。它由网景公司的Brendan Eich在1995年发明，最初设计目的是增强网页的交互性，验证表单数据。JavaScript的运行环境是浏览器，它不需要预编译，...
mysql如何一秒插入10万条数据
林中有神君
08-28 1万+
当我们需要批量插入或者更新记录时，可以采用Java的批量更新机制，该机制允许多条语句甚至一次性提交给数据库处理。通常情况下比一句一提交处理更有效率。 jdbc处理批量提交有三个方法。（需要注意的是，这三种方法都要和PreparedStatement一起使用） 方法名 描述 addBatch(String) 添加批量处理的SQL语句 executeBatch() 执行批量处理语句 clearBatch() 清理缓存 为什么我们需要批量处理sql语句，如果我们提交100万条.
IDEA 对接口进行快速测试（Create Test）
林中有神君
11-29 6652
在需要创建测试类的接口中 alt+ins快捷键 回车
blob类型字段
林中有神君
08-26 1918
1、在mysql中，bolb是一个二进制大型对象，是一个储存大量数据的容器，例如图片，音频。 2、插入blob类型数据比如使用preparedStatement,而不能使用Statment,因为blob类型数据不能使用字符串拼接。有关preparedStatement的使用请参考https://blog.csdn.net/weixin_46457946/article/details/119781227 3、mysql的四种blob类型 类型 大小 TinyBlob 255byte .
阿里云OCR图片识别使用流程
林中有神君
06-05 1872
前端在控制台获取元素坐标
入门指南: 从零开始学习JavaScript
本文将从JavaScript的历史发展、语法特点、常见应用和未来趋势等方面进行全面总结，以帮助读者更好地了解和运用JavaScript。 首先，JavaScript的历史可以追溯到1995年，当时由网景公司的Brendan Eich开发而成。最初...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

林中有神君

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

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

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

打赏作者

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

抵扣说明：

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

余额充值