随笔分类 -  Web前端入门

Web前端入门入门笔记
摘要:JS 是单线程语言。这句话对不对? 按照目前的情况来看,JS 自从支持了 Web Worker 之后,就不再是单线程语言了,但 Worker 的工作线程与主线程有区别,在 Worker 的工作线程中无法直接操作 DOM、window 对象或大多数浏览器 API(如 localStorage),Wor 阅读全文
posted @ 2025-06-23 09:47 前端路引 阅读(579) 评论(0) 推荐(1)
摘要:此 对象 非彼对象啊,不要理解错了哦~~ 面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。 像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如: Vue 中的 组合式API 和 选项式API 也是两种编程模式的代表。 React 阅读全文
posted @ 2025-06-20 10:32 前端路引 阅读(529) 评论(0) 推荐(0)
摘要:什么是作用域? 就像孙悟空给唐僧画个圈圈一样,这个圈圈就可以称之为作用域,这个比喻可能不太形象。 作用域和孙悟空的圈圈还是有点区别,作用域内部可以获得作用域外部的变量,而内部的变量无法逃逸到作用域外面,如果逃逸出去了,那就造成内存泄漏了,程序将会出现崩溃! 全局作用域 可以理解为就是放在 JS 最外 阅读全文
posted @ 2025-06-17 10:13 前端路引 阅读(679) 评论(0) 推荐(0)
摘要:函数参数是什么? 就是函数内部无法确定的一个东西,需要外部传给函数内部的玩意儿,语法上就是写在函数括号中的东东。比如: function test(a) {} 其中的 a 就是 test 函数的参数,在函数体内部,a 作为一个变量存在,可以修改它。 JS 的函数参数,真的是可以传入任意值,没有任何限 阅读全文
posted @ 2025-06-13 09:18 前端路引 阅读(580) 评论(0) 推荐(2)
摘要:函数 作为 JS 的一等公民,随处可见它的身影。 我理解的它最主要作用就是用来提取重复代码,但凡有 JS 代码需要复制粘贴的时候,那么这时候就可以考虑使用函数封装了。 当函数写在对象中的时候,这时候它变了一个名字,称之为 方法。 function 声明 在使用 function 关键字声明函数时,需 阅读全文
posted @ 2025-06-10 13:51 前端路引 阅读(616) 评论(0) 推荐(1)
摘要:神奇的 for 循环代码执行顺序并不是按照代码书写顺序执行,这就导致在看很多程序算法的时候,会有那么一点打脑壳。 for 语法 for 循环的语法很简单,重点是小括号里面的三个部分,这三部分的执行顺序对于不太懂程序的兄弟来说,可以把人晃晕~ for (初始化; 条件; 增量) { // 循环体 } 阅读全文
posted @ 2025-06-04 10:29 前端路引 阅读(879) 评论(0) 推荐(0)
摘要:曾经有人说 JS 语言中万物皆对象,虽然这种说法不一定完全准确,但也有一定的道理。原因是 JS 的语法看起来所有的数据类型都像是一个对象,包括原始类型。 const a = 1.234; console.log(a.toString()); console.log(a.valueOf()); con 阅读全文
posted @ 2025-05-30 10:21 前端路引 阅读(546) 评论(0) 推荐(0)
摘要:数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。 数组的定义 JS 的数组花样很多,不像其他强类型语言中的数组限制颇多。 数组中的元素 JS 数组中的元素可以是任何类型, 阅读全文
posted @ 2025-05-28 10:50 前端路引 阅读(609) 评论(0) 推荐(2)
摘要:条件语句 JS 的条件语句不太多,就 if 和 switch 两个,不过他们的使用方式也可以算是眼花缭乱了。 if 语句 if 字面意思:如果 xxx。程序中的用法也是这样,如果条件为真,则执行执行代码块,反之则不执行。 语法: if (条件) { // 条件为真时执行 } else if (其他条 阅读全文
posted @ 2025-05-27 14:15 前端路引 阅读(706) 评论(0) 推荐(0)
摘要:运算符 JavaScript 运算符是真的多,尤其是 ES6 之后还在不停的加运算符,其他编程语言看 JS 就像怪物一样,各种骚操作不断~~ 运算符分类 1、算术运算符 算术运算符的作用就是用来基础计算,跟小学课本一样,包含:加 +,减 -,乘 *,除 /,取余(也叫做取模) %,指数 **,自增 阅读全文
posted @ 2025-05-26 10:39 前端路引 阅读(633) 评论(0) 推荐(2)
摘要:在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。 如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变化。 在 JS 中,数据类型可以分为 原始类型 和 对象类型。 原始类型 直接存储值,不可变(值的 阅读全文
posted @ 2025-05-22 10:27 前端路引 阅读(533) 评论(0) 推荐(0)
摘要:曾经 var 如帝王一般统治过 JS 的变量声明,直到后来大佬们实在是忍不了 var 那稀烂的声明规则,便引入了 let 和 const 这两大刀斧手,var 被轻轻松松的斩落马下,如今,再难看见 var 的身影。 变量声明 在 JS 中,所有变量都可以用 var、let 和 const 这三个关键 阅读全文
posted @ 2025-05-21 11:21 前端路引 阅读(713) 评论(0) 推荐(0)
摘要:JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。 启用严格模式 1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声明后所有 JS 代码启用严格模式: "use str 阅读全文
posted @ 2025-05-20 09:08 前端路引 阅读(600) 评论(0) 推荐(1)
摘要:JS 的代码并没有强制规定放在 HTML 中的某个位置,如果您有使用过开发者工具查看过网页源码,那么您会看到很多 JS 代码都以 .js 文件的形式存放,并且放在了 HTML 文件最后,也就是 </body> 结束标签之前。 但如果仔细观察,在 <head> 标签中,也会找到很多 script 标签 阅读全文
posted @ 2025-05-16 11:15 前端路引 阅读(565) 评论(0) 推荐(2)
摘要:任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类! 程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢? 如何排查编程问题,这就是一门艺术了,同样的问题,也许 A 只需要 10 分钟,B 可能需要 30 分钟 阅读全文
posted @ 2025-05-15 10:28 前端路引 阅读(594) 评论(2) 推荐(8)
摘要:截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。 当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。 那么咱们接下来看看 JavaScript 的相关知识,作为前端领域三剑客之一,JavaScript 阅读全文
posted @ 2025-05-14 09:23 前端路引 阅读(764) 评论(0) 推荐(2)
摘要:经常查看网页源码的同学应该都有注意到,基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。 为什么需要 meta 标签? 在移动端刚起步的时候,默认网页是以 PC 端的宽度渲染,这就导致用户看到的网页过小,需要用户手动缩放才能看到网页内容。 在 阅读全文
posted @ 2025-05-13 09:24 前端路引 阅读(653) 评论(0) 推荐(4)
摘要:溢出:盒模型装不下内容的时候,超出盒子大小的内容就称之为内容溢出,这里的内容又分为盒模型和文本,所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。 正常情况内容溢出应该换行自动撑开盒子大小,但某些情况下我们盒子大小可能是固定的,不允许自动撑开盒子大小,这种情况就需要处理溢出情况。 盒子溢出 盒 阅读全文
posted @ 2025-05-12 10:21 前端路引 阅读(338) 评论(1) 推荐(4)
摘要:什么是路径动画? 随手画一条不规则的线,让元素按照这条不规则的线运动起来,这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性,要想实现路径动画可没办法,路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性 要实现路径动画,必须用到 offset 的相关属 阅读全文
posted @ 2025-05-11 10:18 前端路引 阅读(578) 评论(0) 推荐(4)
摘要:什么是瀑布流? 看一张图,以下图片来源于花瓣网截图: 如上图所示,瀑布流就是让内容按列显示,自动填充空白。 使用 column 实现瀑布流 源码: <div class="masonry"> <div class="item"> </div> <div class="item"> </div> <d 阅读全文
posted @ 2025-05-09 09:31 前端路引 阅读(345) 评论(0) 推荐(3)