【HTML5+CSS3+JavaScript(ES6)】JavaScript篇

最新推荐文章于 2024-05-02 10:57:41 发布
最新推荐文章于 2024-05-02 10:57:41 发布
阅读量914 收藏 19
点赞数 20
分类专栏： Html5+Css3+JavaScript(ES6) 文章标签： html5 css3 javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43916081/article/details/134528230
版权

目录

1 JS介绍

1.1 JS的作用

1.2 JS实际开发场景中的应用：

1.3 JS语法组成

2 ECMA script 基础语法

2.1 JS基本语法

2.1.1 JS的编写位置

2.2.2 JS的注释

2.2.3 JS的输出

2.2.4 JS外部文件引入

2.2.5 变量声明

2.2.6 变量赋值

2.2 JS数据类型

2.2.1 number类型

2.2.2 boolean类型

2.2.3 undefine类型

2.2.4 string类型

2.2.5 null类型

2.2.6 Number强转

2.2.7 Boolean强转

2.2.8 String强转

2.2.9 parseInt&parseFloat

2.3 JS运算符

2.3.1 数学运算符

2.3.2 自增自减运算符

2.3.3 赋值运算符

2.3.4 比较运算符

2.3.5 逻辑运算符

2.3.6 三元运算符

2.3.7 字符串连接运算符

2.4 JS流程控制

2.4.1 if语句

2.4.2 switch语句

2.4.3 for循环

2.4.4 while循环

2.4.5 dowhile循环

2.4.6 break和continue

2.4.7 隐式转换

2.5 JS函数

2.5.1 函数定义和调用

2.5.2 函数表达式

2.5.3 arguments对象

2.5.4 变量作用范围

2.6 JS内置对象

2.6.1 如何学习内置对象

2.6.2 字符串对象String

2.6.3 数组对象

2.6.4 数学对象

2.6.5 日期对象

2.6.6 正则对象

2.7 弹框

2.7.1 警告框

2.7.2 询问框

2.7.3 确认框

2.7.4 定时器

2.8 JS自定义对象

3 DOM

3.1 DOM概述

3.1.1 Document对象

3.1.2 Element对象

3.1.3 标签体内容操作

3.1.4 元素关系操作

3.1.5 插入节点

3.1.6 删除节点

3.2 DOM表单操作

3.3 事件概述

3.3.1 单击事件

3.3.2 焦点事件

3.3.3 改变事件

3.3.4 鼠标移入移出事件

3.3.5 页面加载事件

3.3.6 表单事件

4 BOM

4.1 BOM对象

4.1.1 window对象

4.1.2 location对象

4.1.3 history对象

5 ECMAScript 6

5.1 let关键字

5.2 const关键字

5.3 构造函数创建对象

5.4 原型

5.4.1 什么是原型

5.4.2 原型继承和继承链

1 JS介绍

学习网站：

官网：https://developer.mozilla.org/zh-CN/docs/Web

适合国内学习的网站：https://www.w3school.com.cn/

1.1 JS的作用

为了设计一套语言，在前端页面实现逻辑处理，JavaScript诞生了

JS：作用在前端页面的一个逻辑处理语言

1.2 JS实际开发场景中的应用：

1.3 JS语法组成

2 ECMA script 基础语法

2.1 JS基本语法

2.1.1 JS的编写位置

2.2.2 JS的注释

2.2.3 JS的输出

2.2.4 JS外部文件引入

2.2.5 变量声明

2.2.6 变量赋值

2.2 JS数据类型

2.2.1 number类型

2.2.2 boolean类型

2.2.3 undefine类型

2.2.4 string类型

2.2.5 null类型

2.2.6 Number强转

2.2.7 Boolean强转

2.2.8 String强转

2.2.9 parseInt&parseFloat

2.3 JS运算符

2.3.1 数学运算符

2.3.2 自增自减运算符

2.3.3 赋值运算符

2.3.4 比较运算符

2.3.5 逻辑运算符

2.3.6 三元运算符

2.3.7 字符串连接运算符

2.4 JS流程控制

2.4.1 if语句

2.4.2 switch语句

2.4.3 for循环

2.4.4 while循环

2.4.5 dowhile循环

2.4.6 break和continue

2.4.7 隐式转换

2.5 JS函数

2.5.1 函数定义和调用

2.5.2 函数表达式

2.5.3 arguments对象

2.5.4 变量作用范围

2.6 JS内置对象

2.6.1 如何学习内置对象

网站：https://www.w3school.com.cn/ （国内网站，更适合国内风格学习）

点击：Browser Side→参考书

2.6.2 字符串对象String

2.6.3 数组对象

数组对象创建：

数组对象属性：

数组常见操作：

数组对象方法：

2.6.4 数学对象

2.6.5 日期对象

日期对象方法：

2.6.6 正则对象

常见正则表达式

一、校验数字的表达式
1、数字：^[0-9]*$

2、n位的数字：^\d{n}$

3、至少n位的数字：^\d{n,}$

4、m-n位的数字：^\d{m,n}$

5、零和非零开头的数字：^(0|[1-9][0-9]*)$

6、非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$

7、带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$

8、正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$

9、有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$

10、有1~3位小数的正实数：^[0-9]+(\.[0-9]{1,3})?$

11、非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$

12、非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$

13、非负整数：^\d+$ 或 ^[1-9]\d*|0$

14、非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

二、校验字符的表达式
1、汉字：^[\u4e00-\u9fa5]{0,}$

2、英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

3、长度为3-20的所有字符：^.{3,20}$

4、由26个英文字母组成的字符串：^[A-Za-z]+$

5、由26个大写英文字母组成的字符串：^[A-Z]+$

6、由26个小写英文字母组成的字符串：^[a-z]+$

7、由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

8、由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$

9、中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$

10、中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

11、可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+

12、禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式
1、Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

2、域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?

3、InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

4、手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

5、电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

6、国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}

7、电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)

8、身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)

9、帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

10、密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

11、强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$

12、强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

13、日期格式：^\d{4}-\d{1,2}-\d{1,2}

14、一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

15、一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$

16、xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

17、腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)

18、中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

19、IPv4地址：((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}

20、空白行的正则表达式：\n\s*\r (可以用来删除空白行)

2.7 弹框

2.7.1 警告框

window.alert：window太常用了，可以省略

2.7.2 询问框

2.7.3 确认框

用户在页面上点击按钮，根据按钮点击的为‘是’或‘否’，得到一个布尔值，根据布尔值做一些操作

2.7.4 定时器

2.8 JS自定义对象

3 DOM

3.1 DOM概述

3.1.1 Document对象

3.1.2 Element对象

3.1.3 标签体内容操作

3.1.4 元素关系操作

3.1.5 插入节点

3.1.6 删除节点

3.2 DOM表单操作

3.3 事件概述

事件三要素：事件源，事件，事件驱动程序

3.3.1 单击事件

3.3.2 焦点事件

onfocus:聚焦

onblur:离焦

3.3.3 改变事件

3.3.4 鼠标移入移出事件

3.3.5 页面加载事件

页面加载时的事件源是：window

3.3.6 表单事件

4 BOM

4.1 BOM对象

4.1.1 window对象

window对象是所有BOM对象的根对象

4.1.2 location对象

location对象是一个地址栏对象，它能通过操作地址栏来改变页面访问的资源

4.1.3 history对象

5 ECMAScript 6

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。

5.1 let关键字

5.2 const关键字

const相当于Java中的final，声明常量用

5.3 构造函数创建对象

5.4 原型

5.4.1 什么是原型

获取原型对象：stu.__proto__

5.4.2 原型继承和继承链

获取原型对象：Object.prototype

开五档的蒙奇
关注
  • 20
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
animais-fantasticos：网站没有JavaScript JavaScript ES6 +的完整版本Origamid
02-16
HTML5 e CSS3 JavaScript 节点 Webpack 埃斯林特 巴别塔 科摩磨损 正面克隆存储库： $ git clone https://github.com/lucianesantcs/animais-fantasticos.git 作为依赖的过时： # com npm $ npm install # ...
探索前端世界：HTML、CSS和JavaScript入门概述
dsfdaifeng的博客
11-05 375
我是学化工的海潮，分享下自己学习前端的知识。在现代的网页开发中，HTML、CSS 和 JavaScript 被默认称为前端三大件，。它们共同构成了构建互联网世界的基石，也是是vue,react等热门前端框架的基础，为我们创造出美观、交互性强的网页和应用程序。无论是开发简单的静态网页还是复杂的网络应用程序，熟练掌握 HTML、CSS 和 JavaScript 都是至关重要的。它们的组合使用让我们能够构建出精美、功能丰富的网页，将我们的创意和想法传达给全世界。
CSS基础和js基础
逼哥很疯狂的博客
05-21 972
组成： 首先，我们需要了解下web前端由哪些组成： 1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java 2. 页面样式：css（Cascading Style Sheet，层叠样式表） 3. 页面交互：js（javascript）、jQuery、AJAX 一、CSS的优先级和继承： 1.1 CSS的优先级： 行内样式>ID选择器>类选择器>标签选择器。 就近原则。 1.2 CSS继承： 原则： ...
前端高频面试题整理-JS+ES6+算法篇（2024）
Yy327823295的博客
02-27 1095
2024前端面试题整理，含JS,ES6,算法等
理论知识总结（js和css）
fdbyd的博客
01-28 2049
目录 css 选择器 一：类选择器 class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。 <p class="first done"></p> .first{ background-color: red; } 二：ID选择器 #(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。 <p id="polite"></p> #polite{ ..
css实现js效果，超详细，非常实用
weixin_62981580的博客
09-24 418
CSS和JavaScript是两种不同的前端技术，各有其作用和用途。CSS主要用于样式设计和页面布局，而JavaScript则用于实现页面的交互功能和动态效果。虽然CSS和JavaScript的功能不同，但有时候我们可以通过一些技巧使用CSS来模拟一些JavaScript功能，从而达到简化页面代码和提高加载速度的目的。下面就介绍几种使用CSS实现JS功能的常见技巧。
CSS&JavaScript讲解
weixin_51094637的博客
03-29 2041
CSS 概念 全称：Cascading Style Sheets 层叠样式表（用于美化页面，布局页面） 层叠：多个样式可以作用在同一个html的元素上，同时生效 好处： 功能强大 将内容展示和样式控制分离： ①降低耦合度，解耦 ②让分工写作更容易 ③提高开发效率 CSS的使用 ①内联样式：在标签内使用style属性指定css代码 如：<div style="color:red;">hello css</div> ②内部样式:在head标签内，定义style标签，
移动web前端开发教程含课件从0到1课程包含HTML、CSS、HTML5、CSS3、JavaScript 基础语法
04-10
【04】HTML5+CSS3 【05】Flex伸缩布局 【06】移动web开发 【07】 JavaScript 基础语法 【08】WebAPI编程 【09】jQuery快速开发 【10】JavaScript高级（含ES6） 【11】前后端交互 Node+Gulp 【12】前后端交互 MongoDB...
html5-bejeweled:HTML5 + CSS3 + JS电子游戏，“宝石迷阵”克隆
05-18
这是一个HTML5视频游戏，同时阅读了Jacob Seidelin的著作《 HTML5游戏：用HTML5，CSS3和WebGL创造乐趣》。 设置 只需在浏览器中打开index.html ，就可以开始了。 警告 该存储库基于一本已经很古老的书（来自2012年）...
Personal_Website_MiguelNonaka:我的个人网站是使用HTML5，CSS3和JavaScript ES6构建的
05-09
个人网站 介绍 该网站原本不是SPA网站，而是一个多页网站，但我决定省略滚动条，因为它与我的设计不符。 附加信息 我的网站导航栏位于底部，我将文本替换为Font Awesome图标，以改善用户体验。... CSS3
es6-css-minify：轻松缩小VS Code中CSS和JavaScript
02-05
操作系统状态Linux和MacOS 视窗 一个简单的Javascript和CSS缩小器。 当打开.js或.css文件时，状态栏中将出现一个Minify按钮。 您也可以通过单击F1或CTRL+SHIFT+P来运行Minify: Document 。加载自定义配置默认情况下...
javaScript es6+系列
Cheng的博客
04-15 310
ES6 新增特性 ES7 新增特性 ES8 新增特性 ES9 新增特性 ES10 新增特性 ES11 新增特性
JavaScript之ES6+的常用新特性
qq_38836435的博客
05-29 175
本文转载自：Vue中文社区https://mp.weixin.qq.com/s/BXw4Bz7S-2yUV8oL2JSHTA ES6(2015) 1. 类(class) class Person { constructor(name) { this.name = name; } showName() { console.log(this.name); } } const me = new Person('Lucky'); me.showName(); // lucky 2.
JS高级之ES6+模块化
Hfeidz的博客
11-18 209
本文链接：https://blog.csdn.net/qq_29677867/article/details/90482887 文章目录十四、es6内容14.1 数组API、正则API、字符串API14.2 模板字符串14.3 解构赋值三级目录 十四、es6内容 14.1 数组API、正则API、字符串API 14.2 模板字符串 14.3 解构赋值 三级目录 14.3.1 对象的解构赋值 14.3.2 函数参数的解构赋值 14.3.3 补充：属性的简写 14.4 函数的扩展 14.4.1 rest参数 1
使用 HTML、CSS 和 JS 制作一个中国象棋
热门推荐
努力是为了站在万人之中，成为别人的光
07-24 2万+
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：🌟【100个摸鱼小游戏】（源码永久免费开源）直接跳到末尾 参与评论送书 直接跳到末尾 领取完整源码 快速跳转 如何高效学习目前已上线的小游戏有90+个游戏入口地址有多个：在线演示地址：https://haiyong.site/moyu/xiangqi/源码可在文末免费获取目录结构如下：
css js写在一起 vue_问题记录（关于css、js、Vue、ES6）
weixin_28767599的博客
02-01 208
一.css样式问题1.一行省略以及多行省略问题一行省略样式:width: 200px; // 必须是定宽overflow: hidden; // 超出隐藏text-overflow: ellipsis; // 隐藏部分用省略号代替white-space: nowrap; // 文本内容不换行(默认在定宽的情况下换行)多行省略样式:width: 200px; // 必须是定宽overflow: hi...
探索JavaScript ES6+新特性
精通前端技术，了解后端接口
10-25 240
箭头函数：提供了更简洁的函数定义语法，并且自动绑定了上下文（this解构赋值：可以从数组或对象中快速提取值并赋给变量，使操作复杂数据结构更加方便。模板字符串：使用反引号（`）包裹字符串，并且可以在其中插入变量或表达式，使字符串拼接更灵活和易读。Promise：解决了回调地狱问题，提供了一种优雅和可读性更高的处理异步代码的方式。这些新特性使得JavaScript编程更加简洁、灵活和易读，提升了开发效率和代码质量。希望这个总结对你有所帮助！
现代JavaScript：对ES6+的深入讲解，新型的JS特性以及怎样在项目中使用它们
最新发布
哎 你看的博客
05-02 827
let 和 const 关键字、模板字符串（Template Strings）、箭头函数（Arrow Functions）、解构赋值（Destructuring）、Promise 和 async/await、类（Classes）、模块（Modules）、展开语法（Spread Operator）、**默认参数(Default Parameters)**、对象/数组的静态方法：
用html和css和js和es6帮我写一份粒子生长树的完整代码
07-09
当然可以帮您编写使用 HTML、CSS、JavaScript 和 ES6 的粒子生长树的完整代码。以下是一个示例： ```html <!DOCTYPE html> <html> <head> <style> #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 使用 ES6 的类来表示粒子 class Particle { constructor(position, parentPosition) { this.position = position; this.parentPosition = parentPosition; this.children = []; } addChild(child) { this.children.push(child); } } // 创建画布 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 生成粒子生长树 function generateTree(numParticles, maxDepth, growthStep) { const particles = [new Particle({ x: canvas.width / 2, y: canvas.height }, null)]; for (let i = 0; i < maxDepth; i++) { const newParticles = []; for (const particle of particles) { for (let j = 0; j < numParticles; j++) { const deltaX = Math.random() * growthStep - growthStep / 2; const deltaY = Math.random() * growthStep - growthStep / 2; const newPosition = { x: particle.position.x + deltaX, y: particle.position.y - growthStep + deltaY }; const newParticle = new Particle(newPosition, particle.position); particle.addChild(newParticle); newParticles.push(newParticle); } } particles.push(...newParticles); } return particles; } // 绘制粒子生长树 function drawTree(particles) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = 'black'; function drawParticle(particle) { ctx.beginPath(); ctx.moveTo(particle.parentPosition.x, particle.parentPosition.y); ctx.lineTo(particle.position.x, particle.position.y); ctx.stroke(); for (const child of particle.children) { drawParticle(child); } } for (const particle of particles) { drawParticle(particle); } } // 示例用法 const numParticles = 3; const maxDepth = 5; const growthStep = 50; const particles = generateTree(numParticles, maxDepth, growthStep); drawTree(particles); </script> </body> </html> ``` 这段代码使用了 HTML、CSS 和 JavaScript（包括 ES6）来实现粒子生长树。HTML 部分定义了一个 canvas 元素用于绘制树形结构。CSS 部分设置了 canvas 的样式，使其占满整个页面。JavaScript 部分使用 ES6 的类来表示粒子，并提供了生成和绘制粒子生长树的函数。 在 JavaScript 部分，生成粒子生长树的 `generateTree` 函数接受三个参数：`numParticles` 表示每个粒子在每一步中生成的子粒子数量，`maxDepth` 表示生长树的最大深度，`growthStep` 表示每一步中粒子的位置变化量。该函数使用循环逐步生成粒子生长树，并返回所有生成的粒子。 绘制粒子生长树的 `drawTree` 函数使用 canvas 的 API 绘制树形结构。它使用递归的方式绘制每个粒子及其子粒子之间的连线。 示例用法部分展示了如何使用上述函数生成并绘制一个简单的粒子生长树。您可以根据需要调整参数，并进一步扩展和美化界面。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

开五档的蒙奇

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

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

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

打赏作者

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

抵扣说明：

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

余额充值