前端入门:(五)JavaScript 续

10. 浏览器存储
10.1 Cookie的概念和使用

Cookie是一种存储在用户计算机上的小型文本文件,用于跟踪和识别用户。Cookie通常用于存储用户的偏好设置、会话信息等,可以通过JavaScript进行读取和设置。

// 示例:设置和读取Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";
var username = document.cookie.split(";")[0].split("=")[1];
console.log(username); // 输出:John Doe
10.2 Web Storage(localStorage和sessionStorage)的概念和使用

Web Storage是HTML5提供的一种客户端存储数据的机制,包括localStorage和sessionStorage两种方式。localStorage存储的数据在浏览器关闭后仍然保留,而sessionStorage存储的数据在会话结束时被清除。

// 示例:使用localStorage存储数据
localStorage.setItem("username", "John Doe");
var username = localStorage.getItem("username");
console.log(username); // 输出:John Doe
// 示例:使用sessionStorage存储数据
sessionStorage.setItem("token", "abc123");
var token = sessionStorage.getItem("token");
console.log(token); // 输出:abc123
10.3 IndexedDB的概念和使用

IndexedDB是一种客户端数据库,用于在浏览器中存储大量结构化数据。它提供了比localStorage更强大和灵活的存储机制,支持事务、索引等高级功能。

// 示例:使用IndexedDB存储数据
var request = indexedDB.open("myDatabase", 1);
request.onupgradeneeded = function(event) {var db = event.target.result;var objectStore = db.createObjectStore("customers", { keyPath: "id" });objectStore.createIndex("name", "name", { unique: false });
};
request.onsuccess = function(event) {var db = event.target.result;var transaction = db.transaction(["customers"], "readwrite");var objectStore = transaction.objectStore("customers");var customer = { id: 1, name: "John Doe" };var request = objectStore.add(customer);
};

浏览器存储是在客户端保存数据的重要方式,它可以用于保存用户的偏好设置、会话信息、缓存数据等,提供了丰富的API和功能来满足不同的需求。深入了解浏览器存储的原理和使用方法对于Web开发至关重要。

11. 错误处理与调试
11.1 JavaScript错误的类型

JavaScript中的错误分为语法错误和运行时错误两种类型。语法错误是由于代码不符合语法规则而导致的错误,通常会在代码执行之前被检测到并报错;运行时错误是由于代码在执行过程中出现了问题而导致的错误,如变量未定义、空指针引用等。

// 示例:JavaScript错误的类型
// 语法错误示例
var x = 10
console.log(x;// 运行时错误示例
var y = null;
console.log(y.toString());
11.2 try-catch语句的使用

try-catch语句是JavaScript中用于捕获和处理异常的机制,它允许程序员在发生错误时执行特定的代码块,而不会导致整个程序崩溃。

// 示例:try-catch语句的使用
try {// 可能会抛出错误的代码var result = x / y;console.log(result);
} catch (error) {// 捕获并处理错误console.error("An error occurred: " + error.message);
}
11.3 常见的调试技巧(如console.log、断点调试等)

调试是开发过程中非常重要的一环,它可以帮助程序员查找并修复代码中的错误。常见的调试技巧包括使用console.log输出调试信息、在浏览器中使用开发者工具设置断点进行逐行调试等。

// 示例:使用console.log输出调试信息
var x = 10;
var y = 0;
console.log("x: " + x + ", y: " + y);
var result = x / y;
console.log("Result: " + result);

调试技巧在开发过程中起着至关重要的作用,它可以帮助程序员快速定位并解决代码中的问题,提高开发效率和代码质量。

12. ES6及更新版本
12.1 let和const关键字

ES6引入了let和const两个新的变量声明方式,let声明的变量具有块级作用域,而const声明的变量是常量,其值在声明后不可修改。

// 示例:let和const关键字
let x = 10;
x = 20; // 合法const y = 10;
y = 20; // 报错:Assignment to constant variable.
12.2 箭头函数

箭头函数是ES6中引入的一种新的函数定义方式,它更加简洁和直观,并且自动绑定了当前上下文的this。

// 示例:箭头函数
const add = (x, y) => x + y;
console.log(add(3, 5)); // 输出:8
12.3 模板字符串

模板字符串是一种新的字符串表示方式,使用反引号(`)包裹字符串,并且可以在字符串中插入变量或表达式。

// 示例:模板字符串
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出:Hello, John!
12.4 新的数据结构(如Map、Set)

ES6引入了许多新的数据结构,如Map和Set,它们提供了更加灵活和高效的方式来处理数据。

// 示例:Map和Set数据结构
const map = new Map();
map.set("key", "value");
console.log(map.get("key")); // 输出:valueconst set = new Set([1, 2, 3, 4, 5]);
console.log(set.has(3)); // 输出:true

ES6及更新版本带来了许多新的语言特性和改进,如新的变量声明方式、箭头函数、模板字符串以及新的数据结构等,它们使得JavaScript语言更加强大和易用,提高了开发效率和代码质量。

13. JavaScript模块化
13.1 CommonJS模块规范

CommonJS是一种JavaScript模块化规范,主要用于服务器端的模块化加载。它使用require()函数导入模块,使用module.exports导出模块。

// 示例:CommonJS模块规范
// module1.js
const data = require("./data");
exports.doSomething = function() {// 使用data
};// module2.js
const module1 = require("./module1");
module1.doSomething();
13.2 ES6模块规范

ES6模块是ECMAScript 6引入的一种新的模块化规范,用于在浏览器和服务器端进行模块化加载。它使用import语句导入模块,使用export关键字导出模块。

// 示例:ES6模块规范
// module1.js
import data from "./data";
export function doSomething() {// 使用data
}// module2.js
import { doSomething } from "./module1";
doSomething();
13.3 模块加载器和打包工具

模块加载器和打包工具用于处理模块化加载和依赖管理,常见的工具包括Webpack、Parcel、Rollup等。它们可以自动分析模块之间的依赖关系,并将多个模块打包成单个文件,提高网页加载速度和性能。

// 示例:使用Webpack打包模块
// webpack.config.js
const path = require("path");module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"}
};

模块化是现代JavaScript开发中的重要特性之一,它可以将代码分割成多个独立的模块,提高了代码的可维护性和复用性。了解不同的模块化规范和工具对于开发大型应用程序至关重要。

14. JavaScript框架和库
14.1 常见的JavaScript框架(如React、Vue、Angular)

JavaScript框架是用于简化和加速Web开发的工具,常见的框架包括React、Vue和Angular等。这些框架提供了丰富的功能和组件,可以帮助开发者快速构建交互式的用户界面。

// 示例:使用React创建组件
import React from "react";class MyComponent extends React.Component {render() {return <div>Hello, World!</div>;}
}
14.2 常见的JavaScript库(如jQuery、Lodash)

JavaScript库是一组封装了常用功能的函数和工具,可以帮助开发者简化代码编写并提高开发效率。常见的JavaScript库包括jQuery、Lodash等。

// 示例:使用jQuery操作DOM
$("#myButton").click(function() {$(this).hide();
});
14.3 如何选择合适的框架和库

选择合适的JavaScript框架和库取决于项目的需求、团队的技术栈和开发经验等因素。通常需要考虑框架的性能、学习曲线、社区支持、更新频率等因素。

// 示例:如何选择JavaScript框架和库
// React适合构建大型单页面应用,具有虚拟DOM和一流的性能优化。
// Vue易于学习和上手,适合快速开发中小型应用。
// Angular适合企业级应用,提供了完整的解决方案和丰富的功能。

JavaScript框架和库在Web开发中扮演着重要角色,它们可以帮助开发者快速构建现代化的用户界面和功能,并提高开发效率。选择合适的框架和库可以根据项目需求和团队技术栈来进行评估和决策。

15. 实践示例
15.1 基于DOM的简单应用

基于DOM的简单应用可以实现一些基本的交互功能,如点击按钮改变文本内容、显示/隐藏元素等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM应用示例</title>
</head>
<body><button id="myButton">Click me</button><div id="output">Hello, World!</div><script>document.getElementById("myButton").addEventListener("click", function() {document.getElementById("output").textContent = "Button clicked!";});</script>
</body>
</html>
15.2 AJAX实时搜索功能

实时搜索功能可以通过AJAX技术实现,用户在输入框中输入关键字时,页面将实时向服务器发送请求并获取匹配的结果,并将结果显示在页面上。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX实时搜索示例</title>
</head>
<body><input type="text" id="searchInput" placeholder="Search..."><ul id="searchResults"></ul><script>document.getElementById("searchInput").addEventListener("input", function() {const keyword = this.value.trim();if (keyword.length === 0) {document.getElementById("searchResults").innerHTML = "";return;}fetch(`https://api.example.com/search?keyword=${keyword}`).then(response => response.json()).then(data => {const results = data.results;const listItems = results.map(result => `<li>${result}</li>`).join("");document.getElementById("searchResults").innerHTML = listItems;}).catch(error => {console.error("Search error:", error);});});</script>
</body>
</html>
15.3 使用ES6重构现有项目

使用ES6语法可以使现有的项目更加现代化和简洁,包括使用let和const声明变量、使用箭头函数简化函数定义、使用模板字符串拼接字符串等。

// 示例:使用ES6重构现有项目
// 使用let和const声明变量
let x = 10;
const PI = 3.14;// 使用箭头函数简化函数定义
const add = (x, y) => x + y;// 使用模板字符串拼接字符串
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting);

实践示例是学习和理解JavaScript的重要方式之一,通过编写简单的应用程序和功能,可以加深对JavaScript语言特性和技术的理解,并提高编程能力。

16. JavaScript安全性
16.1 XSS攻击和防范

跨站脚本攻击(XSS)是一种常见的Web安全漏洞,攻击者通过注入恶意脚本到Web页面中,从而获取用户的敏感信息或者执行恶意操作。为了防范XSS攻击,可以对用户输入进行严格的过滤和验证,并使用安全的HTML编码方式来输出数据。

// 示例:防范XSS攻击
const userInput = "<script>alert('XSS Attack!');</script>";
const safeOutput = escapeHTML(userInput);
document.getElementById("output").innerHTML = safeOutput;function escapeHTML(input) {return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\//g, "&#x2F;");
}
16.2 CSRF攻击和防范

跨站请求伪造(CSRF)是一种常见的Web安全漏洞,攻击者通过伪造用户请求来执行未经授权的操作。为了防范CSRF攻击,可以使用CSRF令牌来验证用户请求的合法性,并在敏感操作中使用POST请求而不是GET请求。

// 示例:防范CSRF攻击
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
fetch("/delete", {method: "POST",headers: {"Content-Type": "application/json","X-CSRF-Token": csrfToken},body: JSON.stringify({ id: 123 })
});
16.3 安全最佳实践

除了防范XSS和CSRF攻击外,还有一些其他的安全最佳实践可以帮助提高JavaScript应用程序的安全性,例如:

  • 使用HTTPS协议保障数据传输的安全性。
  • 及时更新和修补软件和库,以避免已知的安全漏洞。
  • 使用安全的密码存储和身份验证机制,如哈希算法和盐值。
  • 最小化权限并严格控制用户的访问权限。
// 示例:其他安全最佳实践
// 使用HTTPS保障数据传输的安全性
// 使用bcrypt等安全的哈希算法存储密码
// 严格控制用户访问权限,避免越权操作

JavaScript安全性是Web开发中非常重要的一个方面,合理的安全措施可以帮助保护用户的隐私和数据安全,防止恶意攻击和数据泄露。对于JavaScript安全性的深入理解和实践是每个开发者的责任。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

侵入式智能指针和非侵入式智能指针

一直有个疑问&#xff0c;为什么chromium代码没有使用shared_ptr呢&#xff1f; 在这里讨论&#xff1a;https://groups.google.com/a/chromium.org/g/cxx/c/aT2wsBLKvzI 不过我在这里找到了一个简单的答案&#xff1a;https://groups.google.com/a/chromium.org/g/chromium-d…

MySQL优化器

优化器 MySQL存储引擎中存在了一个可插拔的优化器OPTIMIZER_TRACE&#xff0c;可以看到内部查询计划的TRACE信息&#xff0c;从而可以知道MySQL内部执行过程 查询优化器状态 show variables like optimizer_trace;Variable_name Valueoptimizer_trace enabledoff,one_lineoff…

sqlite3数据库操作接口详细整理,以及常用的数据库语句

sqlite3_open() int sqlite3_open( const char *filename, /* Database filename (UTF-8) */ sqlite3 **ppDb /* OUT: SQLite db handle */ ); 功能&#xff1a;打开一个数据库&#xff0c;如果数据库不存在&#xff0c;则创建一个数据库 参数1&#xff1a;要打开的数据库的名字…

Go语言每日一题——链表篇(七)

传送门 牛客面试笔试必刷101题 ----------------删除链表的倒数第n个节点 题目以及解析 题目 解题代码及解析 解析 这一道题与昨天的题目在解题思路上有一定的相似之处&#xff0c;都是基于双指针定义快慢指针&#xff0c;这里我们让快指针先走n步&#xff0c;又因为n一定…

吉他学习:右手拨弦方法,右手拨弦训练 左手按弦方法

第六课 右手拨弦方法https://m.lizhiweike.com/lecture2/29362775 第七课 右手拨弦训练https://m.lizhiweike.com/lecture2/29362708

Matplotlib 中文柱状图绘制详解

在数据可视化的过程中,Matplotlib是Python中最受欢迎的绘图库之一。然而,当涉及到中文字符的显示时,可能会遇到一些挑战。在这篇博客中,我们将详细讨论如何使用Matplotlib绘制中文柱状图。 1. 设置中文显示 首先,为了确保中文字符的正确显示,我们需要设置Matplotlib的字…

vue.js基于springboot的实验室设备管理系统10345

(1)设备信息模块&#xff1a;记录设备的基本信息&#xff0c;如设备采购来源信息、设备需求量、当前数量、日期等。 (2) 用户模块&#xff1a;教师职工。实现对用户个人信息、消息管理和实验室设备的查询使用申请等。 (3) 管理员模块&#xff1a;实现对所有设备信息的增删改查&…

关于LLaMA Tokenizer的一些坑...

使用LLaMA Tokenizer对 jsonl 文件进行分词&#xff0c;并将分词结果保存到 txt 文件中&#xff0c;分词代码如下&#xff1a; import jsonlines import sentencepiece as spm from tqdm import tqdmjsonl_file /path/to/jsonl_file txt_file /path/to/txt_filetokenizer s…

腾讯云游戏服务器购买入口,详细配置精准报价

2024年更新腾讯云游戏联机服务器配置价格表&#xff0c;可用于搭建幻兽帕鲁、雾锁王国等游戏服务器&#xff0c;游戏服务器配置可选4核16G12M、8核32G22M、4核32G10M、16核64G35M、4核16G14M等配置&#xff0c;可以选择轻量应用服务器和云服务器CVM内存型MA3或标准型SA2实例&am…

BUUCTF-Real-[Tomcat]CVE-2017-12615

目录 漏洞描述 一、漏洞编号&#xff1a;CVE-2017-12615 二、漏洞复现 get flag 漏洞描述 CVE-2017-12615&#xff1a;远程代码执行漏洞 影响范围&#xff1a;Apache Tomcat 7.0.0 - 7.0.79 (windows环境) 当 Tomcat 运行在 Windows 操作系统时&#xff0c;且启用了 HTTP P…

MVC模式Nodejs+express+Mysql开发后台

想给自己的博客做个后台&#xff0c;一开始考虑的是java开发&#xff0c;然后把idea和一堆东西勤勤恳恳安装完了之后&#xff0c;心里一想&#xff0c;算了&#xff0c;咱就nodejs不方便多了&#xff0c;于是开始Nodejs开发后台。 Java和idea环境安装 安装jdk(1.8)安装idea&…

Qlik Sense : where exists

什么是Exists函数 Exists() 用于确定是否已经将特定字段值加载到数据加载脚本中的字段。此函数用于返回 TRUE 或 FALSE&#xff0c;这样它可以用于 LOAD 语句或 IF 语句中的 where 子句。 信息注释您也可使用 Not Exists() 来确定是否尚未加载字段值&#xff0c;但是如果要在…

Excel+VBA处理高斯光束

文章目录 1 图片导入与裁剪2 获取图片数据3 数据拟合 1 图片导入与裁剪 插入图片没什么好说的&#xff0c;新建Excel&#xff0c;【插入】->【图片】。 由于图像比较大&#xff0c;所以要对数据进行截取&#xff0c;选中图片之后&#xff0c;点击选项卡右端的【图片格式】…

【JavaWeb】头条新闻项目实现 基本增删改查 分页查询 登录注册校验 业务功能实现 第二期

文章目录 一、为什么使用token口令二、登录注册功能2.1 登录表单提交后端代码&#xff1a; 2.2 根据token获取完整用户信息代码实现&#xff1a; 2.3 注册时用户名占用校验代码实现&#xff1a; 2.4 注册表单提交代码实现&#xff1a; 三、头条首页功能3.1 查询所有头条分类3.2…

打卡今天学习 Linux

过年了&#xff0c;祝大家过年快乐 在今天的学习中&#xff0c;我们涉及了一些关键的 Linux 系统管理知识点&#xff0c;包括 systemctl、IP 地址配置、域名解析、映射的创建、软链接等。让我们简要回顾一下这些主题。 1. systemctl systemctl 是一个强大的 Linux 系统管理工…

docker自定义镜像并使用

写在前面 本文看下如何自定义镜像。 ik包从这里 下载。 1&#xff1a;自定义带有ik的es镜像 先看下目录结构&#xff1a; /opt/program/mychinese [rootlocalhost mychinese]# ll total 16 -rw-r--r-- 1 root root 1153 Feb 5 04:18 docker-compose.yaml -rw-rw-r-- 1 el…

利巴韦林市场规模及厂商格局分析

利巴韦林又名病毒唑&#xff0c;是一种合成鸟苷类似物&#xff0c;对多种DNA和RNA病毒具有广谱活性&#xff0c;可干扰病毒mRNA的合成。利巴韦林1970年由ICN制药公司发现&#xff0c;1986年被批准临床应用&#xff0c;通常与干扰素药物&#xff08;如聚乙二醇干扰素α-2a或聚乙…

开源大型语言模型概览:多语种支持与中文专注

开源大型语言模型概览&#xff1a;多语种支持与中文专注 开源大型语言模型概览&#xff1a;多语种支持与中文专注什么是大型语言模型如何工作大型语言模型的发展应用领域 开源大语言模型概览支持多种语言的开源LLMsLLaMA&#xff08;由Meta开发&#xff09;BERT&#xff08;由G…

什么是Java中的类加载器(ClassLoader),并举例说明不同类型的类加载器?

什么是Java中的类加载器&#xff08;ClassLoader&#xff09;&#xff0c;并举例说明不同类型的类加载器&#xff1f; 在Java中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是负责加载 Java 类文件的重要组件之一。ClassLoader 将字节码数据加载到 JVM 中&#x…

vue-cil的watch函数详解

在Vue中&#xff0c;watch是一个非常有用的API&#xff0c;用于侦听一个响应式引用&#xff08;例如由ref创建&#xff09;或响应式对象&#xff08;由reactive创建&#xff09;的属性&#xff0c;并在值变化时执行回调函数。Vue 3的Composition API引入了这种侦听方式&#xf…