javascrip基础语法

devtools/2025/1/15 20:38:47/

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为

1. JavaScript 输出

1.1 console.log()：用于将信息输出到浏览器控制台，例如console.log("Hello, World!");，可以输出字符串、变量、表达式等。

  • 1.2 console.error()：专门用于输出错误信息，方便调试时快速定位问题，如console.error("An error occurred!");。
  • 1.3 console.warn()：用于输出警告信息，提示开发者可能存在的潜在问题，如console.warn("This might cause an issue!");。

2. JavaScript 语法

  • 2.1 语句与表达式
    • 2.1.1 语句：JavaScript 代码的基本执行单元，以分号;结尾，例如var x = 5;是一个赋值语句，if (x > 3) { console.log("x is greater than 3"); }是一个条件语句。
    • 2.1.2 表达式：可以产生一个值，如5 + 3是一个算术表达式，其值为8；x > 3是一个比较表达式，其值为true或false。
  • 2.2 代码块：用花括号{}括起来的一组语句，常用于条件语句、循环语句等中，例如if (condition) { statements; }，花括号内的statements就是一个代码块。

3. JavaScript 语句

  • 3.1 变量声明语句
    • 3.1.1 var：函数作用域变量声明，例如var num = 10;，在函数内声明的var变量在整个函数内都可访问，即使在声明之前使用也不会报错（变量提升），但值为undefined。
    • 3.1.2 let：块级作用域变量声明，如let count = 5;，只在声明所在的块（花括号内）及嵌套块中可访问，在声明之前使用会报错。
    • 3.1.3 const：声明常量，值不可修改，如const PI = 3.14;，必须在声明时初始化，且后续不能重新赋值，同样具有块级作用域。
  • 3.2 条件语句
    • 3.2.1 if 语句：基本形式为if (condition) { statements1; } else { statements2; }，根据condition的真假执行不同的代码块。还可以有if...else if...else的形式，例如if (x > 10) { console.log("x is greater than 10"); } else if (x > 5) { console.log("x is greater than 5 but less than or equal to 10"); } else { console.log("x is less than or equal to 5"); }。
    • 3.2.2 switch 语句：根据表达式的值执行不同的代码块，例如：
javascript">switch (expression) {case value1:statements1;break;case value2:statements2;break;default:defaultStatements;
}

当expression的值与某个case后的value相等时，执行对应的statements，直到遇到break跳出switch语句，若都不匹配则执行default后的代码。

4. JavaScript 注释

  • 4.1 单行注释：以//开头，注释该行后面的内容，例如// This is a single-line comment，常用于对单行代码进行简单说明。
  • 4.2 多行注释：以/*开头，以*/结尾，可注释多行内容，例如：
javascript">/*
This is a
multi-line comment
It can span across multiple lines
*/

常用于对一段代码或一个函数等进行详细注释。

5. JavaScript 变量

  • 5.1 变量命名规则
    • 可以包含字母、数字、下划线_和美元符号$。
    • 不能以数字开头。
    • 区分大小写，例如myVar和myvar是不同的变量。
    • 不能使用 JavaScript 的关键字和保留字作为变量名。
  • 5.2 变量作用域
    • 全局作用域：在函数外部声明的变量具有全局作用域，可在整个 JavaScript 程序中访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量，在该文档的所有脚本中都可访问。
    • 函数作用域：在函数内部声明的var变量具有函数作用域，可在该函数内部及嵌套函数中访问（变量提升）。
    • 块级作用域：let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问，在块外不可访问。

6. JavaScript 数据类型

  • 6.1 基本数据类型
    • 6.1.1 数值类型：包括整数和浮点数，例如10（整数）、3.14（浮点数）。JavaScript 中的数值可以进行各种算术运算。
    • 6.1.2 字符串类型：用单引号''或双引号""括起来的字符序列，如'Hello'、"JavaScript"。可以进行字符串连接、截取、查找等操作。
    • 6.1.3 布尔类型：只有true和false两个值，常用于条件判断和逻辑运算。
    • 6.1.4 undefined：表示变量未被赋值，例如var x;，此时x的值为undefined。
    • 6.1.5 null：表示空值，通常用于主动将变量设置为空，例如var y = null;，与undefined有所区别。
  • 6.2 引用数据类型
    • 6.2.1 对象：由键值对组成，例如var person = { name: 'John', age: 30 };，可以通过.或[]访问对象的属性，如person.name或person['name']，对象还可以包含方法（函数）。
    • 6.2.2 数组：一种特殊的对象，用于存储多个值，如var colors = ['red', 'green', 'blue'];，可以通过索引访问数组元素，如colors[0]获取第一个元素'red'，数组有很多内置方法用于操作数组，如push()、pop()、slice()等。

7. JavaScript 对象

  • 7.1 对象创建
    • 7.1.1 字面量方式：如上述var person = { name: 'John', age: 30 };，直接使用花括号和键值对创建对象，简洁直观，常用于创建简单对象。
    • 7.1.2 使用 new 关键字和构造函数：例如var obj = new Object(); obj.name = 'Tom';，先创建一个空对象，然后通过点语法添加属性和方法。JavaScript 还提供了一些内置的构造函数，如Array、Date等，用于创建特定类型的对象。
  • 7.2 对象属性和方法
    • 7.2.1 属性：通过.或[]访问，如person.name或person['name']，可以动态添加、修改和删除属性，例如person.city = 'New York';添加一个新属性，delete person.age;删除age属性。
    • 7.2.2 方法：在对象中定义的函数，如var person = { name: 'John', sayHello: function() { console.log('Hello!'); } }; person.sayHello();，通过对象名和方法名调用方法，方法内部可以访问对象的属性，使用this关键字指代当前对象。

 

8. JavaScript 函数

  • 8.1 函数定义
    • 8.1.1 函数声明：function functionName(parameters) { statements; return value; }，例如function add(a, b) { return a + b; }，函数声明会被提升到当前作用域的顶部，所以可以在声明之前调用函数（但不推荐这样做，会影响代码可读性）。
    • 8.1.2 函数表达式：var functionName = function(parameters) { statements; return value; }，如var multiply = function(x, y) { return x * y; }，函数表达式不会被提升，只有在执行到赋值语句时，函数才被定义，所以必须在赋值之后才能调用。
  • 8.2 函数参数
    • 8.2.1 形参：函数定义时的参数，如function add(a, b)中的a和b，用于接收函数调用时传递的实参。
    • 8.2.2 实参：函数调用时传递的参数，例如add(3, 5)中的3和5，实参会赋值给对应的形参。
    • 8.2.3 默认参数：可以为函数参数设置默认值，如function greet(name = 'Guest') { console.log('Hello,'+ name); }，如果调用函数时没有传递该参数，则使用默认值。

9. JavaScript 作用域

  • 9.1 全局作用域：在函数外部定义的变量和函数具有全局作用域，可在任何地方访问，例如在 HTML 文档中引入的外部 JavaScript 文件中声明的全局变量和函数，在该文档的所有脚本中都可访问。全局作用域中的变量可能会导致命名冲突，尤其是在大型项目中，应谨慎使用。
  • 9.2 函数作用域：在函数内部声明的变量和函数只在该函数内部及嵌套函数中可访问（对于var声明的变量）。函数作用域内的变量和函数与外部的同名变量和函数互不干扰，形成了一个相对独立的作用域空间。
  • 9.3 块级作用域：let和const声明的变量具有块级作用域，只在声明所在的块（花括号内）及嵌套块中可访问。块级作用域使得变量的作用范围更加明确，有助于避免一些由于变量作用域不清晰导致的问题，例如循环中的变量污染等。

10. JavaScript 事件

  • 10.1 事件类型
    • 10.1.1 鼠标事件：如click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）等，常用于响应用户对页面元素的鼠标操作，例如document.getElementById('myButton').addEventListener('click', function() { console.log('Button clicked!'); });，当点击id为myButton的按钮时，控制台输出'Button clicked!'。
    • 10.1.2 键盘事件：如keydown（按键按下）、keyup（按键抬起）等，可用于处理用户的键盘输入，例如document.addEventListener('keydown', function(event) { console.log('Key pressed:', event.key); });，当用户按下键盘上的键时，控制台输出按下的键。
    • 10.1.3 页面加载事件：如load，当页面及其资源（如图片、脚本等）完全加载完成后触发，例如window.addEventListener('load', function() { console.log('Page loaded!'); });，在页面加载完成后控制台输出'Page loaded!'。
  • 10.2 事件处理程序
    • 10.2.1 内联事件处理：在 HTML 元素中直接指定事件处理函数，如<button onclick="myFunction()">Click Me</button>，当点击按钮时，会调用名为myFunction的 JavaScript 函数。这种方式将 HTML 和 JavaScript 紧密耦合，不利于代码的维护和管理，一般不推荐在大型项目中使用。
    • 10.2.2 通过 JavaScript 代码绑定事件处理函数：使用addEventListener方法为元素绑定事件处理函数，如document.getElementById('myButton').addEventListener('click', myFunction);，这种方式将 HTML 和 JavaScript 分离，更便于代码的组织和维护，是推荐的事件处理方式。addEventListener可以为同一个事件绑定多个处理函数，它们会按照绑定的顺序依次执行。

11. JavaScript 字符串

  • 11.1 字符串操作
    • 11.1.1 连接字符串：使用+运算符，如var str1 = 'Hello'; var str2 = 'World'; var result = str1 + str2;，result的值为'HelloWorld'。也可以使用+=运算符进行字符串的追加，例如str1 += str2;，此时str1的值变为'HelloWorld'。
    • 11.1.2 获取字符串长度：通过length属性获取字符串的长度，如var length = 'JavaScript'.length;，length的值为10。
    • 11.1.3 提取子字符串：
      • substring(start, end)：提取从start索引（包含）到end索引（不包含）之间的子字符串，例如var str = 'Hello World'; var subStr = str.substring(0, 5);，subStr的值为'Hello'。
      • substr(start, length)：从start索引开始，提取length个字符的子字符串，如var subStr2 = str.substr(6, 5);，subStr2的值为'World'。
      • slice(start, end)：与substring类似，但slice支持负数索引，表示从字符串末尾开始计数，例如var subStr3 = str.slice(6, -1);，subStr3的值为'World'（不包含最后一个字符'd'）。

12. JavaScript 字符串模板

  • 12.1 模板字面量：用反引号括起来，可以包含变量和表达式，如var name = 'John'; var greeting = Hello, ${name}!; console.log(greeting);，输出'Hello, John!'。模板字面量使得字符串的拼接更加方便和直观，尤其是在需要插入变量或表达式时，可以避免繁琐的字符串连接操作，提高代码的可读性。

13. JavaScript 运算

  • 13.1 算术运算
    • 加+、减-、乘*、除/、取余%，例如var x = 5 + 3;，x的值为8；var y = 10 % 3;，y的值为1。
    • 递增++、递减--，分为前置和后置两种形式，前置++（--）会先将变量的值加（减）1，然后再使用该变量的值，例如var a = 5; var b = ++a;，此时a和b的值都为6；后置++（--）会先使用变量的值，然后再将变量的值加（减）1，例如var c = 5; var d = c++;，此时c的值为6，d的值为5。
  • 13.2 比较运算
    • 等于==、全等===、不等于!=、不全等!==、大于>、小于<、大于等于>=、小于等于<=。==在比较时会进行类型转换，例如'5' == 5结果为true；===不会进行类型转换，'5' === 5结果为false。比较运算常用于条件判断，如if (x > 3) { console.log("x is greater than 3"); }。
  • 13.3 逻辑运算
    • 与&&、或||、非!，例如if (x > 0 && y < 10) { console.log('Both conditions are true'); }，只有当x > 0和y < 10都为true时，才会执行花括号内的代码；if (x > 0 || y < 10) { console.log('At least one condition is true'); }，只要x > 0或y < 10其中一个为true，就会执行花括号内的代码；if (!x) { console.log('x is false'); }，当x为false（或转换为false的值，如0、null、undefined、空字符串等）时，执行花括号内的代码。

14.JavaScript 比较 和 逻辑运算符

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。x=5，下面的表格解释了比较运算符：

运算符描述比较返回值实例
==等于x==8false实例 »
x==5true实例 »
===绝对等于（值和类型均相等）x==="5"false实例 »
x===5true实例 »
!= 不等于x!=8true实例 »
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）x!=="5"true实例 »
x!==5false实例 »
> 大于x>8false实例 »
< 小于x<8true实例 »
>= 大于或等于x>=8false实例 »
<= 小于或等于x<=8true实例 »

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符描述例子
&&and(x < 10 && y > 1) 为 true
||or(x==5 || y==5) 为 false
!not!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2 

例子

如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";

 

15. JavaScript for 循环

  • 15.1 基本语法：
javascript">for (initialization; condition; increment/decrement) {// 循环体语句
}
  • initialization：初始化表达式，用于初始化循环变量，只在循环开始时执行一次。例如var i = 0;。
  • condition：条件表达式，每次循环开始前都会检查该条件，如果为true，则执行循环体，否则循环结束。例如i < 5;。
  • increment/decrement：递增或递减表达式，用于在每次循环体执行后更新循环变量的值。例如i++;。
  • 示例：

收起

javascript

javascript">for (var i = 0; i < 5; i++) {console.log(i);
}

  • 上述代码会输出0、1、2、3、4。

  • 15.2 for...in 循环：用于遍历对象的可枚举属性（包括继承的可枚举属性），但不建议用于遍历数组（因为会遍历数组的索引，且顺序不一定是数组元素的顺序）。

收起

javascript

for (var prop in obj) {console.log(obj[prop]);
}

  • 例如：

收起

javascript

var person = { name: 'John', age: 30 };
for (var key in person) {console.log(key + ': ' + person[key]);
}

  • 输出：

收起

plaintext

name: John
age: 30

16. JavaScript while 循环

  • 16.1 while 循环：
while (condition) {// 循环体语句
}

只要condition为true，就会一直执行循环体。

  • 示例：
var i = 0;
while (i < 5) {console.log(i);i++;
}

输出0、1、2、3、4。

  • 16.2 do...while 循环：

do {// 循环体语句
} while (condition);

先执行一次循环体，然后再检查condition，如果为true，则继续执行循环体，直到condition为false。

  • 示例：
var j = 0;
do {console.log(j);j++;
} while (j < 5);

输出0、1、2、3、4。

17. JavaScript break 和 continue 语句

  • 17.1 break 语句：用于跳出当前循环（for、while、do...while），不再执行循环体中剩余的语句，直接执行循环后面的代码。
    • 示例：
for (var k = 0; k < 5; k++) {if (k == 3) {break;}console.log(k);
}

输出0、1、2，当k等于3时，执行break，循环结束。

  • 17.2 continue 语句：用于跳过当前循环的剩余语句，直接进入下一次循环的条件判断。

    • 示例：
for (var l = 0; l < 5; l++) {if (l == 2) {continue;}console.log(l);
}

  • 输出0、1、3、4，当l等于2时，执行continue，跳过本次循环体中console.log(l);语句，直接进行下一次循环。

18. JavaScript typeof

  • 18.1 用途：用于检测变量的数据类型，返回值为字符串。
    • 示例：
typeof 5; // 返回'number'
typeof 'Hello'; // 返回'string'
typeof true; // 返回'boolean'
typeof undefined; // 返回'undefined'
typeof null; // 返回'object'（这是JavaScript的一个历史遗留问题，实际上null是一个特殊值，不是对象）
typeof {}; // 返回'object'
typeof []; // 返回'object'（数组也是对象的一种特殊形式）
typeof function() {}; // 返回'function'

19. JavaScript 类型转换

  • 19.1 显式类型转换：

    • 数值转换：
      • Number('123')：将字符串转换为数值，如果字符串不能转换为有效的数值，则返回NaN（Not a Number）。例如Number('123')返回123，Number('abc')返回NaN。
      • parseInt('123')：将字符串转换为整数，从字符串开头开始解析，直到遇到非数字字符为止。例如parseInt('123abc')返回123，parseInt('abc123')返回NaN。还可以指定进制，如parseInt('10', 2)将二进制字符串'10'转换为十进制整数2。
      • parseFloat('3.14')：将字符串转换为浮点数，与parseInt类似，但可以解析小数点。例如parseFloat('3.14abc')返回3.14，parseFloat('abc3.14')返回NaN。
    • 字符串转换：
      • String(123)：将其他类型的值转换为字符串，例如String(123)返回'123'。
      • 123.toString()：将数值转换为字符串，注意null和undefined没有toString方法，如果直接调用会报错。例如(123).toString()返回'123'。
    • 布尔转换：
      • Boolean(0)：将其他类型的值转换为布尔值，以下值转换为false：0、null、undefined、空字符串''、NaN，其他值都转换为true。例如Boolean(0)返回false，Boolean('abc')返回true。

  • 19.2 隐式类型转换：在某些运算或操作中自动发生，例如：

    • '5' + 3：由于+运算符一侧是字符串，另一侧是数值，JavaScript 会将数值3隐式转换为字符串'3'，然后进行字符串连接，结果为'53'。
    • '5' * 3：*运算符要求两侧都是数值，JavaScript 会将字符串'5'隐式转换为数值5，然后进行乘法运算，结果为15。

20. JavaScript 正则表达式

  • 20.1 创建正则表达式：

    • 字面量方式：/pattern/flags，例如/abc/gi，pattern是正则表达式的模式，flags是可选的标志，g表示全局匹配（查找所有匹配，而不是在找到第一个匹配后停止），i表示不区分大小写。
    • 使用RegExp构造函数：new RegExp('pattern', 'flags')，例如new RegExp('abc', 'gi')，与字面量方式效果相同。

  • 20.2 正则表达式方法：

test()：用于检测字符串是否匹配正则表达式，返回true或false。

javascript">var regex = /abc/;
regex.test('abcdef'); // 返回true
regex.test('defabc'); // 返回false

match()：返回匹配的结果，如果正则表达式带有g标志，则返回所有匹配的结果组成的数组，否则返回第一个匹配的结果及相关信息（如匹配的起始位置等）。

javascript">var str = 'abcdefabc';
str.match(/abc/g); // 返回['abc', 'abc']
str.match(/abc/); // 返回['abc', index: 0, input: 'abcdefabc', groups: undefined]

21. JavaScript 错误

  • 21.1 错误类型：

    • Error：基本错误类型，其他错误类型都继承自它。
    • SyntaxError：语法错误，例如代码中存在拼写错误、缺少括号等语法问题时会抛出该错误。
    • ReferenceError：引用错误，当使用未声明的变量或访问不存在的对象属性时会抛出该错误。
    • TypeError：类型错误，例如对不支持的操作数进行操作，如'abc' + 5（字符串和数值相加），或者调用不存在的方法等情况会抛出该错误。

  • 21.2 错误处理：

    • 使用try...catch语句来捕获和处理错误，例如：
javascript">try {// 可能出错的代码var x = y; // y未声明，会抛出ReferenceError
} catch (error) {console.log(error.message); // 输出错误信息
}
  • try块中放置可能会抛出错误的代码，catch块用于捕获错误并进行处理，可以通过error对象获取错误的相关信息，如message属性获取错误消息。

22. JavaScript 调试

  • 22.1 浏览器开发者工具：

    • 大多数现代浏览器都提供了开发者工具，通常可以通过按F12键打开。开发者工具包含多个面板，如控制台（Console）、元素（Elements）、源代码（Sources）等。
    • 在控制台面板中，可以查看代码运行时输出的信息（包括console.log等输出）、错误信息等，还可以直接在控制台中输入 JavaScript 代码进行测试。
    • 在源代码面板中，可以查看页面加载的 JavaScript 文件，设置断点（在代码行号旁边点击即可设置断点），当代码执行到断点时，会暂停执行，此时可以查看变量的值、调用栈等信息，方便调试代码。

  • 22.2 使用debugger语句：在代码中设置断点，当代码执行到debugger时，会暂停执行，进入调试模式（前提是浏览器开发者工具已打开且处于调试状态）。例如：

javascript">function myFunction() {var x = 5;debugger;var y = 10;
}
myFunction();

  • 当执行myFunction函数时，代码执行到debugger语句会暂停，此时可以在开发者工具中进行调试操作。

23. JavaScript 变量提升

  • 23.1 变量提升现象：
    • 使用var声明的变量会发生变量提升，即变量声明会被提升到函数顶部，但赋值不会提升。例如：
javascript">console.log(x); // 输出undefined
var x = 10;

  • 在上述代码中，虽然var x = 10;在console.log(x);之后，但由于变量提升，JavaScript 会将var x;提升到函数顶部，所以在console.log(x);时，x已经声明，但还未赋值，所以输出undefined。

  • let和const声明的变量不存在变量提升，在声明之前使用会报错。例如：

javascript">console.log(y); // 报错：ReferenceError: y is not defined
let y = 20;

24. JavaScript 严格模式

  • 24.1 启用严格模式：
    • 在函数内部开头添加'use strict';，则该函数内的代码将处于严格模式。例如：
javascript">function strictFunction() {'use strict';// 函数内的代码处于严格模式
}

  • 也可以在整个脚本开头添加（对于模块脚本，默认处于严格模式），则整个脚本内的代码都处于严格模式。

  • 24.2 严格模式的限制和变化：

    • 禁止使用未声明的变量，在非严格模式下，给未声明的变量赋值会自动在全局作用域创建该变量，但在严格模式下会报错。
    • 禁止删除变量或对象，在非严格模式下，可以使用delete操作符删除某些对象的属性，但在严格模式下，除了删除对象的可配置属性外，其他情况使用delete都会报错。
    • 函数的参数不能有同名属性，在非严格模式下，函数参数可以像对象属性一样被赋值和修改，但在严格模式下，这种行为是不允许的，会报错。
    • 不允许使用八进制字面量（如010），在严格模式下，必须使用0o10表示八进制数。

25. JavaScript 使用误区

  • 25.1 常见错误和不良实践：
    • 全局变量滥用：在全局作用域中随意声明变量，可能导致命名冲突，尤其是在大型项目中，多个脚本文件可能会相互影响。例如在一个脚本中声明了var globalVar = 10;，在另一个脚本中可能会不小心覆盖这个变量的值，或者使用了相同的变量名但含义不同，导致难以排查的问题。
    • 不恰当的类型转换：如上述提到的隐式类型转换可能导致意外结果，开发者应该清楚地知道在什么情况下会发生类型转换，并根据需要进行显式类型转换，以避免出现不符合预期的结果。例如在进行数值计算时，如果涉及到字符串和数值的混合运算，应该先确保数据类型的正确性。
    • 过度依赖隐式类型转换：使代码可读性变差，其他开发者可能不容易理解代码的意图和逻辑。例如if ('5' == 5)这种比较，虽然在 JavaScript 中可以正常工作，但不如if (Number('5') === 5)这样的代码清晰易懂，明确地展示了类型转换的过程。

26. JavaScript 表单

  • 26.1 表单元素获取：

    • 通过document.getElementById()方法根据id获取表单元素，例如var inputElement = document.getElementById('myInput');，获取id为myInput的输入框元素。
    • 通过document.querySelector()方法使用 CSS 选择器获取表单元素，如var buttonElement = document.querySelector('button.submitButton');，获取类名为submitButton的按钮元素。
    • 通过document.querySelectorAll()方法获取多个符合条件的表单元素，返回一个 NodeList 集合，例如var inputElements = document.querySelectorAll('input[type="text"]');，获取所有type为text的输入框元素。

  • 26.2 表单元素的属性和方法：

    • 属性：
      • value：获取或设置表单元素的值，例如inputElement.value获取输入框的值，inputElement.value = 'New Value';设置输入框的值。
      • checked：对于复选框（checkbox）和单选按钮（radio），用于获取或设置是否选中，例如checkboxElement.checked = true;选中复选框。
      • disabled：用于获取或设置表单元素是否禁用，例如buttonElement.disabled = true;禁用按钮。
    • 方法：
      • focus()：使表单元素获得焦点，例如inputElement.focus();使输入框获得焦点，方便用户输入。
      • blur()：使表单元素失去焦点，例如inputElement.blur();。

27. JavaScript 表单验证

  • 27.1 客户端验证：
    • 在表单提交前，使用 JavaScript 检查输入内容是否符合要求，例如：
javascript">function validateForm() {var nameInput = document.getElementById('name');if (nameInput.value === '') {alert('请输入姓名');return false;}// 其他验证逻辑，如邮箱格式、密码强度等return true;
}

将onsubmit事件绑定到表单的onsubmit属性上，如<form onsubmit="return validateForm();">，当validateForm函数返回false时，表单不会提交，从而实现客户端的表单验证，减少无效数据提交到服务器。

28. JavaScript 验证 API

  • 28.1 HTML5 表单验证属性：HTML5 提供了一些内置的表单验证属性，可以在表单元素上直接设置，无需编写大量 JavaScript 代码。例如：

    • required：表示该表单元素为必填项，例如<input type="text" required>，如果用户未填写该输入框，表单提交时会自动提示必填。

    • pattern：用于设置正则表达式模式，验证输入内容是否符合指定的格式，例如<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}">，用于验证邮箱格式。

    • min、max：用于设置数值输入框的最小值和最大值，例如<input type="number" min="1" max="100">，限制输入的数值范围。

    • 可以通过checkValidity()方法检查表单元素是否有效，通过validity属性获取表单元素的有效性状态信息，例如

javascript">var inputElement = document.getElementById('myInput');
inputElement.checkValidity(); // 返回true或false，表示元素是否有效
inputElement.validity; // 返回一个对象

 


http://www.ppmy.cn/devtools/150245.html

相关文章

Python爬虫-爬取汽车之家全部汽车品牌的brandid（品牌ID）

Python爬虫-爬取汽车之家全部汽车品牌的brandid（品牌ID）

前言 本文是该专栏的第42篇，后面会持续分享python爬虫干货知识，记得关注。 本文以汽车之家平台为例子，获取所有汽车品牌的“全部品牌ID”，即brandid数据。如下所示： 具体的实现思路以及完整实现代码逻辑，笔者将在正文进行详细介绍。废话不多说，跟着笔者直接往下看正文详…
阅读更多...
Maven核心插件之maven-resources-plugin

Maven核心插件之maven-resources-plugin

前言 Maven 插件是 Maven 构建系统的重要组成部分&#xff0c;它们为 Maven 提供了丰富的功能和扩展能力&#xff0c;使得 Maven 不仅是一个构建工具&#xff0c;更是一个强大的项目管理平台。在 Maven 项目中&#xff0c;插件的使用通常通过配置 pom.xml 文件来完成。每个插件…
阅读更多...
三台Centos7.9中Docker部署Redis集群

三台Centos7.9中Docker部署Redis集群

Docker部署Redis集群 1. 安装 Docker 和 Docker Compose安装 Docker&#xff1a;安装 Docker Compose&#xff1a; 2. 配置 Redis 容器和网络3. 启动 Redis 容器4. 设置 Redis 集群4.1 集群创建异常处理 5. 验证和测试总结 如果 CentOS 服务器上还没有安装 Docker 和 Docker Co…
阅读更多...
手游业务该如何选择服务器？

手游业务该如何选择服务器？

在网络游戏行业当中&#xff0c;对于服务器配置的需求是非常高的&#xff0c;大型的网络游戏需要服务器的高稳定性&#xff0c;来保证用户的游戏体验感&#xff0c;那么对于手游业务来说该如何进行选择服务器呢&#xff1f; 手游业务通常都需要处理大量的用户数据信息和并发请求…
阅读更多...
Flutter中Get.snackbar避免重复显示的实现

Flutter中Get.snackbar避免重复显示的实现

在pubspec.yaml中引入依赖框架。 #GetX依赖注解get: ^4.6.5创建一个SnackBarManager管理类去管理每个提示框。 import package:get/get.dart; import package:flutter/material.dart;class SnackBarManager {factory SnackBarManager() > instance;static final SnackBarMa…
阅读更多...
代理模式详解与应用

代理模式详解与应用

代理模式&#xff08;Proxy Pattern&#xff09;&#xff0c;也称为委托模式或 surrogate 模式&#xff0c;是一种结构型设计模式。它为其他对象提供一个代理以控制对这个对象的访问。通过引入代理对象&#xff0c;可以在不改变原始对象接口的前提下&#xff0c;添加额外的功能…
阅读更多...
ue5玩家角色添加武器。切换武器位置，手上武器放到背上。演示一下人体插槽和武器的连接。仅仅演示，实际项目不是这么用的

ue5玩家角色添加武器。切换武器位置，手上武器放到背上。演示一下人体插槽和武器的连接。仅仅演示，实际项目不是这么用的

把第一人称资源包导进来 这就是我们枪的骨骼网格体 我们找到这个骨骼 右手添加插槽 取个名字 因为武器上也有动画&#xff0c;所有武器单独写个蓝图类 新建一个蓝图类 BP_Weapon 把枪的蓝图拖到人的静态网格体下&#xff0c;成为一个部分 选中BP_Weapon的父类套接字…
阅读更多...
计算机网络之---网络层的基本功能

计算机网络之---网络层的基本功能

网络层简述 网络层&#xff08;Network Layer&#xff09;是OSI&#xff08;开放系统互联&#xff09;模型的第三层&#xff0c;主要负责将数据包从源主机传输到目的主机&#xff0c;处理数据传输过程中的路由选择、寻址和分段等任务。网络层的主要目的是确保数据能够从源设备准…
阅读更多...
最新文章

Copyright @ 2022~2023