从零开始学习JavaScript：轻松掌握编程语言的核心技能④

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量5.7k 收藏 63
点赞数 74
分类专栏： # JavaScript基础入门 文章标签： javascript 学习 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50804299/article/details/131024208
版权

从零开始学习JavaScript：轻松掌握编程语言的核心技能④

🏘️🏘️个人简介：以山河作礼。
🎖️🎖️:Python领域新星创作者，CSDN实力新星认证，阿里云社区专家博主
🎁🎁:Web全栈开发专栏：《Web全栈开发》免费专栏，欢迎阅读！



在这里插入图片描述

1. JavaScript 表单

1.1 JavaScript 表单验证

📌JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

  • 验证表单数据是否为空？
  • 验证输入是否是一个正确的email地址？
  • 验证日期是否输入正确？
  • 验证表单输入内容是否为数字型？

📌以下是一个简单的示例，演示如何验证表单中的文本输入字段：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">电子邮件地址：</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="提交">
</form>

<script>
  const form = document.querySelector('form');
  const nameInput = document.querySelector('#name');
  const emailInput = document.querySelector('#email');
  const passwordInput = document.querySelector('#password');

  form.addEventListener('submit', (event) => {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 检查姓名输入是否为空
    if (nameInput.value.trim() === '') {
      alert('请填写姓名');
      return;
    }

    // 检查电子邮件地址是否有效
    if (!isValidEmail(emailInput.value)) {
      alert('请输入有效的电子邮件地址');
      return;
    }

    // 检查密码是否至少包含一个数字和一个字母
    if (!isValidPassword(passwordInput.value)) {
      alert('密码必须至少包含一个数字和一个字母');
      return;
    }

    // 如果所有验证都通过，则提交表单
    form.submit();
  });

  // 检查电子邮件地址是否有效的函数
  function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  // 检查密码是否至少包含一个数字和一个字母的函数
  function isValidPassword(password) {
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
    return passwordRegex.test(password);
  }
</script>

运行结果：
在这里插入图片描述

在这个示例中，我们使用 addEventListener 方法为表单的 submit事件添加了一个监听器，当用户点击提交按钮时，我们将执行一些自定义验证逻辑。如果验证成功，我们将调用 form.submit()方法提交表单。否则，我们将使用 alert方法显示一个错误消息。同时我们使用了两个正则表达式来验证电子邮件地址和密码。正则表达式是一种强大的工具，可以用来匹配和搜索字符串。在这里，我们使用正则表达式来确保用户输入的电子邮件地址和密码符合特定的格式要求。

2. JavaScript 保留关键字

📌JavaScript 保留关键字是指被 JavaScript 语言保留用于特定用途的单词。这些单词不能用作标识符，如变量名、函数名等。
以下是 JavaScript 中的保留关键字：

await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
for
function
if
implements
import
in
instanceof
interface
let
new
null
package
private
protected
public
return
static
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

在编写 JavaScript 代码时，应避免使用这些保留关键字作为标识符，以免产生语法错误。

3. JavaScript this 关键字

📑 📑 在 JavaScript 中，this 关键字用于引用当前执行上下文中的对象。具体来说，this 引用的是调用当前函数的对象。
📌当函数以对象的方法的形式调用时，this 引用该对象
例如：

const person = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.sayHello(); // 输出 "Hello, my name is Alice."

在上面的例子中，sayHello 方法是以 person 对象的方法的形式调用的，因此在方法内部，this 引用 person 对象。

📌当函数以普通函数的形式调用时，this 引用全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象）。
例如：

function sayHello() {
  console.log(`Hello, my name is ${this.name}.`);
}

sayHello(); // 输出 "Hello, my name is undefined."

在上面的例子中，sayHello 函数是以普通函数的形式调用的，因此在函数内部，this 引用全局对象。由于全局对象没有 name属性，因此输出结果为 undefined。

📌可以使用 call、apply 和 bind 方法来显式地设置函数内部的 this。
例如：

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

function sayHello() {
  console.log(`Hello, my name is ${this.name}.`);
}

sayHello.call(person1); // 输出 "Hello, my name is Alice."
sayHello.call(person2); // 输出 "Hello, my name is Bob."

在上面的例子中，call 方法用于调用 sayHello 函数，并将 this 设置为 person1 或 person2对象。因此在函数内部，this 引用相应的对象。

4. JavaScript let 和 const

📑 📑 let 和 const 是 ES6 中新增的声明变量的关键字，它们与传统的 var 关键字有所不同。

4.1 let

📌let 关键字用于声明块级作用域的变量。块级作用域是指在代码块（如函数、循环、条件语句等）内部声明的变量只在该代码块内部可见，外部无法访问。
例如：

let x = 1;

if (true) {
  let x = 2;
  console.log(x); // 输出 2
}
console.log(x); // 输出 1

在上面的例子中，let x = 2 声明了一个块级作用域的变量，只在 if 语句块内部可见。外部的 x 变量仍为 1。

4.2 const

📌const 关键字用于声明块级作用域的常量。与 let 类似，const 声明的变量也是块级作用域的。
与 let 不同的是，const 声明的变量不能被重新赋值。一旦声明，其值就不能再改变。
例如：

const x = 1;

if (true) {
  const x = 2;
  console.log(x); // 输出 2
}
console.log(x); // 输出 1
// 以下代码会抛出 TypeError 错误
const y = 1;
y = 2;

在上面的例子中，const x = 2 声明了一个块级作用域的常量，只在 if 语句块内部可见。外部的 x 常量仍为 1。 尝试重新赋值常量 y 会抛出 TypeError 错误，因为常量不能被重新赋值。

5.JavaScript JSON

📑 📑 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，基于 JavaScript 语法的子集。
📌JSON 的语法规则非常简单，它由以下三种基本类型组成：

  • 对象（Object）
  • 数组（Array）
  • 值（Value）

📌对象是一组键值对，键和值之间使用冒号分隔，键值对之间使用逗号分隔，对象使用花括号包裹。
例如：

const person = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'Beijing',
    country: 'China'
  }
};

// 将对象转换为 JSON 字符串
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // 输出 {"name":"Alice","age":25,"address":{"city":"Beijing","country":"China"}}

📌数组是一组有序的值，值之间使用逗号分隔，数组使用方括号包裹。
例如：

const fruits = ['apple', 'banana', 'orange'];

// 将数组转换为 JSON 字符串
const jsonStr = JSON.stringify(fruits);
console.log(jsonStr); // 输出 ["apple","banana","orange"]

📌值可以是字符串、数字、布尔值、null、对象或数组。
例如：

const data = {
  name: 'Alice',
  age: 25,
  married: false,
  hobbies: ['reading', 'running'],
  address: {
    city: 'Beijing',
    country: 'China'
  },
  job: null
};

// 将值转换为 JSON 字符串
const jsonStr = JSON.stringify(data);
console.log(jsonStr); // 输出 {"name":"JavaScript

📌在JavaScript中，可以使用JSON对象来解析和生成JSON数据。
📑 📑 JSON对象提供了两个方法：

  1. JSON.parse()用于解析JSON字符串，将其转换为JavaScript对象；
  2. JSON.stringify()用于将JavaScript对象转换为JSON字符串。

例如，以下是一个JSON字符串的示例：

{
  "name": "John Doe",
  "age": 30,
  "isMarried": true,
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": "12345"
  }
}

📌可以使用JSON.parse()方法将其转换为JavaScript对象，
例如：

var jsonString = '{"name":"John Doe","age":30,"isMarried":true,"hobbies":["reading","music","sports"],"address":{"street":"123 Main St","city":"Anytown","state":"CA","zip":"12345"}}';
var jsonObj = JSON.parse(jsonString);

📌这样就可以使用JavaScript对象的方式访问JSON数据了,同样地可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，
例如：

var jsonObj = {
  "name": "John Doe",
  "age": 30,
  "isMarried": true,
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": "12345"
  }
};
var jsonString = JSON.stringify(jsonObj);

6.JavaScript 异步编程

📑 📑 JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。但是，JavaScript 中的异步编程模型允许我们在执行长时间运行的任务时不会阻塞主线程。
📌JavaScript 中常用的异步编程模型包括：

  • ·回调函数：回调函数是异步编程中最常用的模型之一。在这种模型中，我们将一个函数作为参数传递给另一个函数，并在异步操作完成后调用该函数。
  • Promise：Promise 是一种更现代的异步编程模型，它提供了一种更优雅的方式来处理异步操作。Promise
    对象表示一个异步操作的最终完成或失败，并且允许我们在异步操作完成后执行一些代码。
  • async/await：async/await 是一种基于 Promise 的异步编程模型。async/await使得异步代码看起来像同步代码，这使得代码更易于理解和维护。

无论使用哪种异步编程模型，都需要小心处理异步代码中的错误和异常。异步代码中的错误可能会导致程序崩溃或无法正常工作。因此，一定要确保正确地处理错误和异常。

7.JavaScript 代码规范

📑 📑 在 JavaScript 中，代码规范是非常重要的。它可以提高代码的可读性和可维护性，并减少代码错误和漏洞的风险。
📌以下是一些常见的 JavaScript 代码规范：

  1. 使用驼峰命名法来命名变量、函数和对象属性。
  2. 使用 const 或 let 来声明变量，不要使用 var。
  3. 在代码块中使用花括号，即使代码块只有一行。
  4. 在函数名和括号之间留一个空格，例如 function test() { }。
  5. 在操作符周围留空格，例如 a + b。
  6. 在逗号后留一个空格，例如 var arr = [1, 2, 3]。
  7. 使用分号来结束语句。
  8. 避免使用全局变量，尽可能使用局部变量。
  9. 使用注释来解释代码的目的和功能。
  10. 尽可能使用模块化的代码结构，将相关的代码组织在一起。
以山河作礼。
关注
  • 74
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 125
    评论
专栏目录
js基础-表单
front_end_fan
09-21 2095
表单Web表单是开发人员与用户交互的重要控件。1、form1.1 form独有的属性和方法在HTML中，表单是由<form>来表示的，而在JavaScript中，表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它跟其他HTML元素具有相同的默认属性。<form>也有自己独有的属性和方法：acceptCharset：服务器能够处理的字符集
JavaScript（五）—— JavaScript 表单及表单事件
Jsundoku的博客
03-26 4246
文章目录
JavaScript操作表单元素
pan_junbiao的博客
08-07 1401
表单元素在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。下面将介绍一些常用的使用JavaScript操作表单元素的方法。 1、表单（form） 1.1 使用JavaScript脚本提交form表单 //提交表单 myForm.method = 'POST'; myForm.action = "action.html"; myForm.submit(); 1.2使用J...
JavaScript 表单
笔记
02-03 2008
在实际工作中，JavaScript 表单常常需要结合 JavaScript 验证 API，以确保用户提交的数据是正确的。例如，在表单提交前，我们可以通过 JavaScript 对用户名、邮箱、密码等字段进行验证，以确保数据的准确性。在实际工作中，JavaScript 表单的应用非常广泛，从简单的验证到复杂的处理，都可以用 JavaScript 实现。如果是，则显示错误消息，并防止表单提交。JavaScript 表单验证 API 可以使用在表单的验证中，来检查用户的输入是否符合预期的格式。
前端练习题——JavaScript 表单的全选/全不选、反选，以及隔行换色
Today_He的博客
08-17 264
思路 1.全选/全不选：通过获取 “全选选项” 的状态（是否打勾），判断其他选项是否要打勾 2.反选：获取其他选项的状态，判断并且取反（优化：不需要判断状态，使用逻辑非直接取反） 3.用户自己为选项打勾时（每个勾选一个选项时都要判断），如果全部选中，自动将 “全选选项” 选中；反之，取消。 4.如果点击反选时，其他选项全被选中，则自动将 “全选选项” 选中；反之，取消 感悟 采坑 不要将id之类的名称设置与函数名称相同 js中checked 是一个boolean类型的值，但是不能再html中设
html表单调用js方法,使用js提交form表单的两种方法
weixin_42117485的博客
06-04 1910
提交form表单的时候瑶族一些简单的验证，验证完后才能提交，避免无效提交。1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一：在jsp的前端页面的头部插入一个js方法：function checkUser(){var result = document.getElementById...
JS 表单操作form
Nicole1118的博客
05-06 182
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> /** ...
从零开始学习jQuery 教程加源码
11-10
"从零开始学习jQuery"教程旨在帮助初学者快速掌握这个库的基本用法。 1. **选择器**：jQuery的核心是选择器，它们用于在HTML文档中定位元素。基本的选择器包括ID选择器（`#id`）、类选择器（`.class`）和标签选择器...
invata-programare:适合那些想从头开始学习编程的应用程序，目前只有基础知识
08-03
【标题】"invata-programare" 是一个专为初学者设计的应用程序，旨在帮助那些希望从零开始学习编程的人。这个应用目前专注于提供基础编程知识，可能是为了建立一个坚实的编程概念基础。 【描述】"学习编程" 提示了...
《JavaScript+jQuery零起点飞学》本书配套的源代码
04-07
《JavaScript+jQuery零起点飞学》是一本专为初学者...通过实际操练，你可以从零开始，逐步掌握Web开发的核心技能，为未来的项目开发打下坚实的基础。无论是为了个人兴趣还是职业发展，这都是一条值得投入的探索之路。
零基础学Qt 4编程随书代码
11-01
"零基础学Qt 4编程随书代码"是一个专门为初学者设计的学习资源，它包含了与Qt 4编程相关的示例代码和练习，帮助读者从零开始逐步掌握Qt编程。 在学习Qt 4编程时，以下是一些核心知识点： 1. **环境搭建**：首先，...
nodejs-course:只是另一个 Node.js 课程
05-29
通过这个课程，你可以学习到如何从零开始构建一个完整的 Node.js 应用。课程内容覆盖了基础到进阶的各种主题，包括安装配置、模块系统、文件操作、网络编程、路由处理、数据库集成以及错误处理等。 **JavaScript ...
JavaScript 操作表单
寇大大的博客
06-07 500
目录 JS操作表单 1.HTML表单 2、获取值 3、设置值 4、提交表单 JS操作表单 1.HTML表单 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text"> ，用于输入文本； 口令框，对应的<input .
用javascript实现简单的表单
qq_41672008的博客
01-19 1559
表单的按钮分别为全选，全不选，反选，提交，分别实现相应的功能，并且有很详细的注释 以下是代码： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script
JavaScript 表单的制作
susiefeng的博客
09-09 1304
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否合法？ 用户是否已输入合法的日期？ 用户是否在
js动态创建form以post方式提交
iteye_6607的博客
01-31 1149
&lt;script &gt;//js动态创建form 提交表单function formSubmit(elementValue) {     var turnForm = document.createElement("form");       //一定要加入到body中！！       document.body.appendChild(turnForm);    turnForm.met...
JS创建一个Form表单
tuonioooo
04-30 4263
(function(){ //设置命名空间 var CodeSTD = window.CodeSTD || {}; window.CodeSTD = CodeSTD; /** * 创建Form表单 * @author 王成委 * @param config Object * &lt;p&gt;url:form的Acti...
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1110
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
从零开始学JavaScript：儿童编程入门
本书旨在引导孩子们了解并掌握JavaScript编程，通过实践项目激发他们的创造力。书中的内容涵盖了从基础的HTML和CSS到更高级的JavaScript概念，如对象导向编程和Canvas游戏开发。 在第一章"Exploring JavaScript in ...
评论 125
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

以山河作礼。

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

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

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

打赏作者

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

抵扣说明：

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

余额充值