JavaWeb——JavaScript常用操作

最新推荐文章于 2023-09-24 23:45:19 发布
最新推荐文章于 2023-09-24 23:45:19 发布
阅读量311 收藏
点赞数
分类专栏： JavaWeb 笔记 文章标签： js javascript javaweb html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_handsome_/article/details/109631678
版权

JavaScript

基本介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。
JS 是Netscape 网景公司的产品，最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。JS 是弱类型，Java 是强类型。

特点：

  1. 交互性（它可以做的就是信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释JS 的浏览器都可以执行，和平台无关）

js与HTML的结合

方式一：
只需要在head 标签中，或者在body 标签中， 使用script 标签来书写JavaScript 代码

<script type="text/javascript">
// alert 是JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>

方式二：
使用script 标签引入单独的JavaScript 代码文件

<script type="text/javascript" src="hello.js"></script>

变量

JavaScript 的变量类型：

数值类型number
字符串类型string
对象类型object
布尔类型boolean
函数类型function

JavaScript 里特殊的值：

undefined未定义
null空值
NaNNot a Number 非数值。

JS 中的定义变量格式：

var 变量名;
var 变量名= 值;

关系运算

等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算

且运算： &&
或运算： ||
取反运算： !

在JavaScript 语言中，所有的变量，都可以做为一个boolean 类型的变量去使用。
0 、null、undefined、””(空串) 都认为是false；

&& 且运算:

  1. 当表达式全为真的时候。返回最后一个表达式的值。
  2. 当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算:

  1. 当表达式全为假时，返回最后一个表达式的值
  2. 当有一个表达式为真。就会把回第一个为真的表达式的值

数组

JS 中数组的定义：
格式：
var 数组名= [ ]; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素

如果我们通过数组下标给数组中的元素赋值，那么数组会自动扩容
比如：

<script type="text/javascript">
        var arr=[];//定义一个空数组
        alert(arr.length);// 空数组长度：0
        
        arr[0]  = 12;
        
        alert(arr.length);//自动扩容至：1
        arr[3] = "abc";
        alert(arr.length);//自动扩容至：4

        //数组的遍历
        for (var i = 0 ; i < arr.length;i++){
            alert(arr[i]);
        }//12,undefined,undefined,"abc"

    </script>

函数

局部变量与全局变量

局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

定义函数

第一种
语法格式:
function 函数名(形参列表){
函数体
}
如果想定义带返回值的函数，直接在函数体内使用return 语句就行。
示例：

<script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert("无参函数fun()");
        }
        //函数调用
        fun();
        
        //有参函数
        function fun1(a,b){
            alert("有参函数fun1()a:" + a + ",b:" + b);
        }
        fun1(1,"abc");
        
        //定义带有返回值的函数
        function sum(num1,num2){
            var result = num1 + num2;
            return result;
        }
        alert(sum(100,100));

    </script>

第二种
语法格式:
function 函数名(形参列表){
函数体
}
实例：

<script type="text/javascript">
        var fun = function(){
            alert("无参函数");
        }
        fun();

        var fun1 = function (a, b) {
            alert("有参函数a = " + a  + ",b = " + b);
        }
        fun1(1,2);
        
        var fun2 = function (num1,num2){
            return num1 + num2;
        }
        alert(fun2(1,2));

    </script>

注：js中不允许函数重载，如果函数名相同，就只能调用最后声明的函数。

隐形参数

含义：在function 函数中不需要定义，但却可以直接用来获取所有参数的变量。就是你可以给函数传入多个参数，即使它是无参。

<script type="text/javascript">
        function fun() {
            alert(arguments);//[object Arguments]
            alert(arguments.length);//查看参数个数
            alert(arguments[0]);
            alert(arguments[1]);
            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }
            alert("无参函数fun()");
        }
        fun(1,"adc");

        //需求：要求编写一个函数。用于计算所有参数相加的和并返回
        function sum(num1, num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }

        alert(sum(1, 2, 3, 4, 5, "abc", 67, 2, 12, ""));//15abc67212
        alert(sum(1, 2, 3, 4, 5, "abc", 67, 2, 12, ""));//96
    </script>

自定义对象

  1. Object 形式的自定义对象
    语法格式：
    var 变量名= new Object(); // 对象实例（空对象）
    变量名.属性名= 值; // 定义一个属性
    变量名.函数名= function(){} // 定义一个函数
    对象的访问：
    变量名.属性/ 函数名();
  2. {}花括号形式的自定义对象
    对象的定义：
    var 变量名= { // 空对象
    属性名：值, // 定义一个属性
    属性名：值, // 定义一个属性
    函数名：function(){} // 定义一个函数
    };
    对象的访问：
    变量名.属性/ 函数名();

事件

事件是电脑输入设备与页面进行交互的响应。

常用的事件：

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

事件的注册

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册

通过html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册

是指先通过js 代码得到标签的dom 对象，然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名= fucntion(){}

注：动态注册(window.onload)的内容会在页面加载完之后执行

以onblur实例动态的静态注册（其他事件步骤一样）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun(){
            //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
            //log()是打印的方法。
            console.log("静态注册失去焦点事件");
        }

        //动态注册 onblur事件
        window.onload = function (){
            //1.获取标签对象
            var passwordObj = document.getElementById("password");
            alert(passwordObj);//[object HTMLInputElement]
            //2.通过标签对象.事件名 = function(){}
            passwordObj.onblur = function (){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type = "text" onblur="onblurFun()"> <br/>
    密码：<input type="text" id="password"> <br/>
</body>
</html>

DOM模型

DOM（Document Object Model）文档对象模型。就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象

Document 对象的理解：
第一点：Document 它管理了所有的HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化。
第四点：我们可以通过document 访问所有的标签对象。

Document 对象中的方法

元素:页面中所有的标签,元素—element, 标签----元素—对象

  1. document.getElementById(elementId)
    通过标签的id 属性查找标签dom 对象，elementId 是标签的id 属性值
  2. document.getElementsByName(elementName)
    通过标签的name 属性查找标签dom 对象，elementName 标签的name 属性值
  3. document.getElementsByTagName(tagname)
    通过标签名查找标签dom 对象。tagname 是标签名

以getElementById来示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击了校验按钮，要获取输入框里的内容。然后验证其是否合法。
        * 验证的规则是：必须由，字母，数字，下划线组成。并且长度是5-18位。
        * */
        function onclickFun(){
            //1.当我们要操作一个标签是，一定要获取这个标签的对象。
            var usernameObj = document.getElementById("username");
            alert(usernameObj);//[object HTMLInputElement]就是dom对象
            alert(usernameObj.value);//就是输入框的内容
            var usernameTest = usernameObj.value;
            
            //如何验证字符串，符合某些规则，需要使用正则表达式
            var patt = /^\w{5,18}$/;
            
            /*
            test()方法用于测试某个字符串，是不是匹配我的规则，
            匹配就返回true,不匹配犯规false
             */
            var usernameSpanObj = document.getElementById("usernameSpan");
            //innerHTML 表示其实标签和结束标签中的内容
            //innerHTML 这个属性可读，可写，有标签效果

            usernameSpanObj.innerHTML="不合法就是不合法";
            // alert(usernameSpanObj.innerHTML);

            if (patt.test(usernameTest)){
                // alert("用户名合法");
                // usernameSpanObj.innerHTML="用户名合法";//改过HTML内容后直接显示在span的位置上，不要alert 不好
                usernameSpanObj.innerHTML=" <img src=\"right.png\" width=\"16\" height=\"16\"/>";
            }else {
                // alert("用户名不合法！");
                // usernameSpanObj.innerHTML="用户名不合法";
                usernameSpanObj.innerHTML=" <img src=\"wrong.png\" width=\"16\" height=\"16\"/>";

            }
        }
    </script>
</head>
<body>

    用户名：<input type = "text" id = "username" value="hah"/>
    <span style = "color:red" id="usernameSpan"></span>
    <button onclick="onclickFun()">校验</button>
    
</body>
</html>

注：
document 对象的三个查询方法，如果有id 属性，优先使用getElementById 方法来进行查询如果没有id 属性，则优先使用getElementsByName 方法来进行查询如果id 属性和name 属性都没有
最后再按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

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

<script type="text/javascript">
        window.onload = function () {
            //现在需要我们使用js代码来创建html标签，并显示在页面上
            //显示的标签内容：<div> 标签文本 </div>
            var divObj = document.createElement("div");//在内存中<div></div>
            
			//方式一：创建文本节点对象
            var textNodeObj = document.createTextNode("标签文本");
            divObj.appendChild(textNodeObj);//<div> 标签文本 </div>
            
			//方式二：直接给innerHTML属性赋值
            // divObj.innerHTML = '标签文本';//<div> 标签文本 </div>，但是，还只在内存中
            
            //给body添加子元素
            document.body.appendChild(divObj);//添加到了body对象中，也就是添加到了页面中
        }
    </script>

节点

概念:页面中所有的内容包括标签,属性,文本,甚至注释,空格
但一般来说节点就指标签对象（我们能操控的）。

方法：
通过具体的元素节点调用

getElementsByTagName()获取当前节点的指定标签名孩子节点
appendChild( ChildNode )可以添加一个子节点，ChildNode 是要添加的孩子节点

属性：

childNodes获取当前节点的所有子节点
firstChild获取当前节点的第一个子节点
lastChild获取当前节点的最后一个子节点
parentNode获取当前节点的父节点
nextSibling获取当前节点的下一个节点
previousSibling获取当前节点的上一个节点
className用于获取或设置标签的class 属性值
innerHTML表示获取/设置起始标签和结束标签中的内容
innerText表示获取/设置起始标签和结束标签中的文本
i_am_handsome_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
trout-script:用JavaScript编写的经过编译的强类型脚本语言
05-01
鳟鱼脚本 用javascript编写的经过编译的强类型脚本语言。 这是我第一次（真正）尝试编写一种完整的编程语言。 在此过程中，我学到了很多东西，最终将使它变得稳定并清理所有内容。 特征 严格类型的变量 Javascript中的运行时 编译器发出“运行时操作”为js 结构类型 功能闭包 闭包中对上下文的显式控制 可读，明确的语法 例子 var x = 1 // inferred type var y: int // not initialized, but declared var hello:string hello = " world " struct Node { val:string next:Node // struct allows recursive definition } struct vec { x: int = 0 , // default
Java第四课（Java中的运算符）
GQYjava的博客
11-17 106
/* java中的运算符： 算术运算符: +，-，*，/，%，++，-- 赋值运算符 = 一个等号=是赋值，两个等号==是关系运算符 扩展赋值运算符:+=，-=，*=，/= 关系运算符: >，<，>=，<=，==，!= 逻辑运算符: &&，||，! 位运算符: &，|，^，~ ， >>，<<，>>> (了解！！！) 条件运算符 ...
java中的各种集合排序
热门推荐
码农小默
05-03 1万+
一、背景 1.软件开发过程中集合排序是比较强大的功能，会使用集合Map、Set、List实现排序功能，知道匿名内部类Comparator很关键，搞清楚集合排序的性能开销，排序遇到的坑以及解决的方法，注意下面的例子都是JDK1.8的用法。 二、LIst集合排序 1.UML类图 2.重点分析下ArrayList的排序，毕竟实战开发用的最频繁的就是它了 三、第一种做法 介绍：这种叫定制排...
JavaScript类型系统特征、强类型与弱类型、静态类型与动态类型
小卡酷谋的博客
07-12 470
TypeScript 解决JavaScript类型系统的问题 类型系统 强类型与弱类型（类型安全） 静态类型与动态类型（类型检查） 它们分别从类型安全与类型检查两个维度去区分了不同的编程语言 强类型–语言层面限制函数的实参类型必须与形参类型相同 弱类型–语言层面不会限制实参的类型 由于这种强弱类型之分根本不是某一个权威机构的定义 强类型有更强的类型约束，而弱类型中几乎没有什么约束 强类型语言中不允许任意的数据隐式类型转换 弱类型语言中允许任意的数据隐式类型转换 ...
【JavaScript】——强类型和弱类型
严文文 Chris
07-03 2944
强弱类型的判别 按照计算机语言的类型系统的设计方式,可以分为强类型和弱类型两种。二者之间的区别，就在于计算时是否可以不同类型之间对使用者透明地隐式转换。What弱类型从使用者的角度来看，如果一个语言可以隐式转换它的所有类型，那么它的变量、表达式等在参与运算时，即使类型不正确，也能通过隐式转换来得到正确地类型，这对使用者而言，就好像所有类型都能进行所有运算一样，所以这样的语言被称作弱类型。强类型与此...
Javaweb——疫情出入信息管理系统
06-23
疫情出入信息管理系统（其他修改版本） 项目开发工具 1. IDEA 2020.1 2. Navicat Premium 15 项目开发环境 1.java version“1.8.0.... 有源代码包，数据库文件和说明文件 详细信息分布内容参考 此项目仅供学习使用
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
11_JavaWeb——Cookie&Session案例资源
05-01
此资源是我的博客11_JavaWeb——Cookie&Session中的案例资源，关于比较难以编写的工具类我已在博客中给出，下载此资源后可直接运行，实现登录注册功能。其中登录功能能够记住用户使得下次登录不需要重复输入用户名和...
12_JavaWeb——Filter&Listener案例资源
05-02
此资源与我的博客12_JavaWeb——Filter&Listener中的案例对应，在11_JavaWeb——Cookie&Session案例资源基础上加上了过滤器，实现了对未登录用户的拦截，希望有所帮助。
javaweb——serlvet简单登录案例.rar
11-28
javaweb——serlvet简单登录案例.rar
Java web9
weixin_58526600的博客
11-17 372
1.初识JavaBean 1.1 什么是javaBean: 它是java开发中常用的组件，其实就是一个java类，它的作用就是封装数据。 书写JavaBean需要满足五个规范： >>>1.这个java类，被public修饰 >>>2.这个java类要提供公共的无参数的构造方法 >>>3.要提供私有的属性 >>>4.要给私有的属性提供公...
javascript技术总结
m0_74436299的博客
02-06 507
js语法名称为：ECMA ScriptEcma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）ECMA Script 缩写为 ES常见说法ES5、ES6，后面的数字，代表的是语法版本号变量就是存放数据的一个容器 (盒子)变量所保存的数据本质是存储在计算机的内存中的!内存是通过硬件内存条所产生一块虚拟空间!通常称为内存空间!内存中数据存储的特点:1.读写速度快 2.临时数据的存储 3.内存的存储空间是比较小的。
JavaScript简介
wsdhy_的博客
04-02 4421
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
Java与JavaScript的区别
lino_yao的博客
03-13 417
Java与JavaScript的区别
JavaWeb-JavaScript
qq_59621600的博客
09-24 198
ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。 外部脚本： 将JS代码定义在外部JS文件中，然后引入到HTML页面中 外部JS文件中，只包含JS代码，不包含标签 标签不能自闭合 代码运行结果 输出语句 使用window.alert()写入警告框 使用document.write()写入HTML输出 使用console.log()写
java于Javascript的关系
weixin_45384029的博客
11-23 3844
java于Javascript的关系,就像是刘德与刘德华的关系 JavaScript 与Java是两个公司挨得特别近， JavaScript 与Java是两个公司开发的不同的两个产品。Java 是原Sun Microsystems公司推出的面向对象的程序设计语言，特别适合于互联网应用程序开发；而JavaScript是Netscape公司的产品，为了扩展Netscape浏览器的功能而开发的一种可以嵌...
JavaWeb—JavaScript
夏日漱石的博客
03-09 988
JavaWeb—JavaScript
JavaWeb之JavaScript
qq_46130027的博客
12-17 2593
!// 定义一个空数组 // alert(arr.length);// 0 // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。// undefined // 数组的遍历 for(var i = 0;i ++) {
JavaWeb——HTTP
最新发布
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值