简述JavaScript_注册失去焦点事件-CSDN博客

本文链接：https://blog.csdn.net/m0_73757009/article/details/128834191

一、概述

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多的java程序员。更名为JavaScript.

JS是弱类型，Java是强类型

特点：

交互性（他可以做的就是信息的动态交互）

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

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

二、JavaScript和html代码的结合方式

2.1 第一种方式

只需要在head标签中，或者在body标签中，使用script标签来书写javascript代码

测试代码：

<!DOCTYPE html>

<head>

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>

</head>

<body>

</body>

</html>

2.2 第二种方式

使用script标签引入单独的JavaScript

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

</head>

<body>

</body>

</html>

三、变量

JavaScript的变量类型：

变量类型名称

数值类型number

字符串类型string

对象类型object

布尔类型boolean

函数类型function

JavaScript里特殊的值：

类型含义

undefined未定义，所有js变量未赋予初始值的时候，默认值都是undefined

null空值

NAN全称是： Not a Number。非数字。非数值

JS中的定义变量格式：

var 变量名;

var 变量名 = 值;

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

// var i;

// i = 12;

// alert(i);

// alert(typeof(i)) // 取出变量的数据类型 number

var a = 12;

var b = "abc"

alert(a * b) // NAN是非数字，非数值

</script>

</head>

<body>

</body>

</html>

javascript的关系运算符和java的关系运算符有略微的区别：（其他的都一样）

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

// var i;

// i = 12;

// alert(i);

// alert(typeof(i)) // 取出变量的数据类型 number

// var a = 12;

// var b = "abc"

// alert(a * b) // NAN是非数字，非数值

var a = "12"

var b = 12

alert(a == b) //仅仅是字面上的比较 true

alert(a === b) // 字面上的比较还有数值类型的比较 false

</script>

</head>

<body>

</body>

</html>

四、逻辑运算

且运算：&&

或运算：||

取反运算：!

在javascript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。

0、null、undefined、空串都认为是false

javascript的逻辑运算与java的逻辑运算符还有些不一样：

&& 且运算。

第一种：当表达式全为真的时候，返回最后一个表达式的值

第二种：当表达式有一个为假的时候。返回第一个为假的表达式

|| 或运算

第一种：当表达式全为假的时候，返回最后一个表达式的值

第二种：只要表达式有一个为真，返回第一个为真的表达式

并且&&运算与||运算有短路：有一个有了结果后面的逻辑运算都不执行

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

// var i;

// i = 12;

// alert(i);

// alert(typeof(i)) // 取出变量的数据类型 number

// var a = 12;

// var b = "abc"

// alert(a * b) // NAN是非数字，非数值

/*var a = "12"

var b = 12

alert(a == b) //仅仅是字面上的比较 true

alert(a === b) // 字面上的比较还有数值类型的比较 false*/

var a = "abc"

var b = true;

var d = false;

var c = null;

// alert(b && a)

// alert(c && a)

alert(a || d)

alert(d || c)

</script>

</head>

<body>

</body>

</html>

五、数组

数组定义方式：

JS中数组的定义：

格式：var 数组名 = []; // 空数组

var 数组名 = [1,‘abc’,true]; // 定义数组同时赋值元素

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

var arr = [];//定义一个空数组

arr[0] = 12;

arr[2] = "abc"

// javascript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组进行扩容

alert(arr.length); // 数组长度3

</script>

</head>

<body>

</body>

</html>

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

var arr = [];//定义一个空数组

arr[0] = 12;

arr[2] = "abc"

// javascript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组进行扩容

alert(arr.length); // 数组长度3

for (var i = 0; i < arr.length; i++) {

alert(arr[i])

}

</script>

</head>

<body>

</body>

</html>

六、函数

1.使用function关键字定义函数

function 函数名(形参列表){

函数体

}

测试代码：

<!DOCTYPE html>

<head>

<!-- <script type = "text/javascript">

//alert 是JavaScript语言提供的一个警告框函数。

//它可以接受任意类型的参数，这个参数就是警告框的提示信息

alert("Hello javaScript!");

</script>-->

<!--

现在需要使用script引入外部的js文件来执行

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

script标签可以用来定义js代码，也可以用来引入js文件

但是，两个功能二选一使用，不可以同时使用两个功能

-->

function fun(){

alert("无参函数被调用");

}

fun();

function fun2(a,b){

alert("a=" + a + ",b=" + b);

}

fun2(1,2)

//定义带有返回值的函数

function fun3(a,b){

var result = a + b;

return result;

}

alert(fun3(1,2))

</script>

</head>

<body>

</body>

</html>

2.函数定义第二种方式

就是把函数名调到前面

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

测试代码：

<!DOCTYPE html>

<head>

<title>JavaScript测试</title>

var fun = function (a,b){

alert(a + b)

}

fun(1,2)

</script>

</head>

<body>

</body>

</html>

说明：JS不允许函数重载,会直接覆盖上一次的函数定义

3.函数的arguments隐形参数（只在function函数内部）

就是在function函数中不需要定义，但是却可以直接用来获取所有参数的变量。我们管它叫做隐形参数。

隐形参数特别想java基础的可变长参数一样。可变长参数其实是一个数组。那么js中的隐形参数也跟java的可变长参数一样。操作类似于数组。

测试代码：

<!DOCTYPE html>

<head>

<title>JavaScript测试</title>

var fun = function (){

alert(arguments[0])

alert(arguments[1])

alert(arguments[2])

alert(arguments.length) // 查看数组的长度

}

// alert(arguments.length())

fun(1,2,3)

</script>

</head>

<body>

</body>

</html>

测试代码：

<!DOCTYPE html>

<head>

<title>JavaScript测试</title>

// var fun = function (){

// alert(arguments[0])

// alert(arguments[1])

// alert(arguments[2])

// alert(arguments.length) // 查看数组的长度

// for (var i = 0; i < arguments.length; i++) {

// alert(arguments[i])

// }

// // alert(arguments.length())

// fun(1,2,3)

function sum(num1,num2){

var result = 0;

for (var i = 0; i < arguments.length; i++) {

result += arguments[i];

}

return result;

}

alert(sum(1,2,3,4,54,56));

</script>

</head>

<body>

</body>

</html>

七、object自定义对象

7.1 方法一

对象的定义：

var 变量名 = new object();// 对象实例（空对象）

变量名.属性名 = 值 ; // 定义一个属性

变量名.函数名 = function(){} //定义一个函数

对象的访问：

变量名.属性/函数名();

测试代码：

<!DOCTYPE html>

<head>

<title>JavaScript测试</title>

var obj = new Object();

obj.name = "华仔";

obj.age = 18;

obj.fun = function (){

alert("姓名： " + this.name + ",年龄" + this.age)

}

obj.fun();

</script>

</head>

<body>

</body>

</html>

7.2 方法二

{}花括号形式的自定义对象

var 变量名 = {

属性名: 值,

函数名: function(){} // 定义一个函数

};

对象的访问：

变量名.属性/函数名()

测试代码：

<!DOCTYPE html>

<head>

<title>JavaScript测试</title>

var obj = {

name: "张三",

age:19,

fun:function(){

alert("姓名：" + this.name + ", 年龄：" + this.age);

}

};

alert(typeof(obj));

alert(obj.age);

obj.fun();

</script>

</head>

<body>

</body>

</html>

八、js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

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

onclick单击事件：常用于按钮的点击响应操作

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

onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变之后的操作

onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法

事件的注册又分为静态注册和动态注册两种：

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

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.时间名 = function(){} 这种形式赋予事件响应后的代码，叫做动态注册。

动态注册基本步骤：

* 获取标签对象

* 标签对象.事件名 = function(){}

九、onload事件

测试代码：静态事件

<!DOCTYPE html>

<head>

<title>Title</title>

// onload事件的方法

function onloadfun()

{

alert('静态注册onload事件')

}

</script>

</head>

</body>

</html>

测试代码：动态事件

<!DOCTYPE html>

<head>

<title>Title</title>

// onload事件的方法

// function onloadfun()

// {

// alert('静态注册onload事件')

// }

window.onload = function (){

alert("动态注册的onload事件");

}

</script>

</head>

<body>

</body>

</html>

十、onclick事件

测试代码：静态注册事件

<!DOCTYPE html>

<head>

<title>Title</title>

function onclickFun(){

alert("静态注册onclick事件");

}

</script>

</head>

<body>

</body>

</html>

测试代码：动态注册

<!DOCTYPE html>

<head>

<title>Title</title>

window.onload = function(){

// 1获取标签对象

* docunment 是javascript语言提供的一个对象表示整个页面

* */

var btnObj = document.getElementById("btn01"); // 根据id获取标签对象

// 2 通过标签对象.事件名 = function(){}

btnObj.onclick = function(){

alert("动态注册的onclick事件");

}

</script>

</head>

<body>

</body>

</html>

十一、onblur事件

测试代码：静态注册

<!DOCTYPE html>

<head>

<title>Title</title>

// 静态注册失去焦点事件

function onblurFun(){

// console 是控制台对象是由javascript语言提供，专门用来向浏览器的console进行打印输出，用于测试使用

//log 是打印的方法

console.log("静态注册失去焦点事件"); // 文本框失去焦点时候 F12 看到console打印这条语句

}

</script>

</head>

<body>

用户名:<input type = "text" onblur = "onblurFun();"><br/>

密码:<input type = "text">

</body>

</html>

测试代码：动态注册

<!DOCTYPE html>

<head>

<title>Title</title>

// 静态注册失去焦点事件

function onblurFun(){

// console 是控制台对象是由javascript语言提供，专门用来向浏览器的console进行打印输出，用于测试使用

//log 是打印的方法

console.log("静态注册失去焦点事件"); // 文本框失去焦点时候 F12 看到console打印这条语句

}

// 动态注册onblur事件

window.onload = function (){

//获取标签对象

var passwordobj = document.getElementById("password"); // 根据id获取标签对象

passwordobj.onblur = function (){

console.log("动态注册失去焦点事件");

}

</script>

</head>

<body>

用户名:<input type = "text" onblur = "onblurFun();"><br/>

密码:<input id = "password" type = "text"><br/>

</body>

</html>

效果图：

十二：onchange事件

测试代码：静态注册

<!DOCTYPE html>

<head>

<title>Title</title>

function onchangeFun(){

alert("不你不喜欢");

}

</script>

</head>

<body>

请选择你心目中的男神

</select>

</body>

</html>

测试代码：动态注册

<!DOCTYPE html>

<head>

<title>Title</title>

function onchangeFun(){

alert("不你不喜欢");

}

window.onload = function (){

var nvshen = document.getElementById("01");

nvshen.onchange = function (){

alert("你的女神根本不是她们！")

}

</script>

</head>

<body>

请选择你心目中的男神

</select>

请选择你心目中的女神

</select>

</body>

</html>

十三、onsubmit事件

测试代码：静态注册

<!DOCTYPE html>

<head>

<title>Title</title>

// 静态注册表单提交事件

// 提交表单需要验证所有的表单项如果有一个不合法就阻止表单提交

function onsubmitFun(){

alert("静态注册表单提交事件--输入不合法");

return false;

}

</script>

</head>

<body>

</form>

</body>

</html>

测试代码：动态注册

<!DOCTYPE html>

<head>

<title>Title</title>

// 静态注册表单提交事件

// 提交表单需要验证所有的表单项如果有一个不合法就阻止表单提交

function onsubmitFun(){

alert("静态注册表单提交事件--输入不合法");

return false;

}

window.onload = function (){

// 获取标签对象

var form1 = document.getElementById("form01")

form1.onsubmit = function (){

alert("动态注册表单提交事件--输入不合法");

return false;

}

</script>

</head>

<body>

</form>

</form>

</body>

</html>

十四、document对象概念的介绍

1.DOM模型

DOM全称就是Document Object Model文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理

那么，他们是如何是先把标签，属性，文本转换成对象来管理。这就是我们马上要学习的重点

2.Document对象

Document他管理了所有的html文档内容

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

她让我们把所有的标签都对象化

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

测试代码：

<!DOCTYPE html>

<head>

<title>Title</title>

// 需求：当用户点击校验按钮，要获取输出框中的内容。然后验证是否合法

// 验证的规则：必须有字母，数字，下划线组成。长度是5 ~ 12 位

function onclickFun(){

// 当我们需要操作一个标签的时候一定要先获取这个标签对象

var username = document.getElementById("username");

// alert(username.value); // 获取输入框的值

var username_text = username.value();

// 验证字符串是否符合某一个规则需要使用正则表达式

var patt = /^\w{5,12}$/;

* test() 方法用于测试某个字符串是不是匹配规则

* */

if(patt.test(username_text)){

alert("用户名合法");

}

else{

alert("用户名不合法！");

}

</script>

</head>

<body>

用户名:<input type = "text" id = "username"/>

</body>

</html>

3. 正则表达式(具体用法查看文档)

正则表达式是描述字符模式的对象

正则表达式用于对字符串模式匹配以及检索替换，是对字符串执行模式匹配的强大工具

语法：

测试代码：

<!DOCTYPE html>

<head>

<title>正则表达式</title>

// 表示要求字符串中，是否包含字母e

// var patt = new RegExp("e");

// var patt = /e/; // 表示字符串包含字母e

// var patt = /[abc]/; // 表示要求字符串中，是否包含字母a或b或c

var patt = /[a-z]/; // 表示要求字符串是否包含小写字母

var str = "abcde";

alert(patt.test(str));

</script>

</head>

<body>

</body>

</html>

\w 元字符用于查找单词字符。

单词字符包括：a-z、A-Z、0-9，以及下划线，包含_(下划线)字符。

语法

new RegExp("\w")

更加简单的方式：

/\w/

测试代码：

<!DOCTYPE html>

<head>

<title>正则表达式</title>

// 表示要求字符串中，是否包含字母e

// var patt = new RegExp("e");

// var patt = /e/; // 表示字符串包含字母e

// var patt = /[abc]/; // 表示要求字符串中，是否包含字母a或b或c

// var patt = /[a-z]/; // 表示要求字符串是否包含小写字母

var patt = /\w/; // 表示字符串是否包含字母

var str = "abcde";

alert(patt.test(str));

</script>

</head>

<body>

</body>

</html>

关于量词:

测试代码：

<!DOCTYPE html>

<head>

<title>正则表达式</title>

// 表示要求字符串中，是否包含字母e

// var patt = new RegExp("e");

// var patt = /e/; // 表示字符串包含字母e

// var patt = /[abc]/; // 表示要求字符串中，是否包含字母a或b或c

// var patt = /[a-z]/; // 表示要求字符串是否包含小写字母

// var patt = /\w/; // 表示字符串是否包含字母

var patt = /a+/;// 字符串至少包含一个a

var str = "abcde";

alert(patt.test(str));

</script>

</head>

<body>

</body>

</html>

测试代码：

4.表单提交验证提示效果

5.getElementsByName(str)

测试代码：

6.getElementsByTagName(str)

注意：document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询，其次是getElementsByName方法进行查询

补充说明方法：