- 博客(35)
- 收藏
- 关注
RSS订阅原创 面向对象编程案例—贪吃蛇小游戏
1. 搭建页面放一个容器盛放游戏场景 div#map，设置样式#map { width: 800px; height: 600px; background-color: #ccc; position: relative;}2. 分析对象游戏对象 Game蛇对象 Snake食物对象 Food3. 创建食物对象（1）创建 Food 的构造函数，并设置属性xywidthheightcolor（2）通过原型设置方法render 随机创建一个食物对象，并输出
2021-08-06 22:12:47
812
原创 ES6新特性
目前我们掌握的是 ECMAScript 5 及之前的语法ES 6 已经是前端人员必备的知识技能。ECMAScript通常将 ECMAScript 看作是 JavaScript 的标准规范实际上 JavaScript 是 ECMAScript 的扩展语言ECMAScript 只是提供了最基本的语法JavaScript 在语言基础上进行了扩展JavaScript 语言本身指的就是 ECMAScript2015 年开始 ES 保持每年一个版本的迭代[外链图片转存失败,源站可能有防盗链机制,建
2021-08-06 22:03:20
380
原创 正则表达式
正则表达式1. 概述（1）正则表达式：（Regular Expression）用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。（2）正则表通常被用来检索、替换那些符合某个模式(规则)的文本。（3）正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串” ，这个“规则字符串”用来表达对字符串的一种过滤逻辑2. 正则表达式的作用（1）给定的字符串是否符合正则表达式的过滤逻辑(
2021-08-06 21:54:33
366
原创 继承和函数进阶
面向对象的特点：封装、继承、多态（抽象）对象之间的继承1. 对象拷贝for……in ：父对象的属性拷贝给子对象function extend(parent, child) { for (var k in parent) { // 子级有的属性不需要继承 if (child[k]) { continue; } child[k] = parent[k]; }}extend(laoli, xiaoli);2. 构造函数的属性继承借用构造函数/
2021-08-06 21:46:49
152
原创 面向对象编程
面向对象1. 什么是对象？Everything is object （万物皆对象）。对象是单个事物的抽象。对象是一个容器，封装了属性（property）和方法（method）注：属性——对象的状态；方法——对象的行为在实际开发中，对象是一个抽象的概念，可以将其简单理解为：数据集或功能集。ECMAScript-262 把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。2. 什么是面向对象？面向对象编程 —— Object Oriented Programming，简称 O
2021-08-06 21:37:29
128
原创 BOM 浏览器对象模型
BOM 浏览器对象模型1. BOM 的概念BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前 进、在浏览器中输入URL等BOM 缺乏标准，JS 语法的标准化组织是 ECMA ，DOM 的标准化组织是 W3C
2021-07-05 23:34:28
468
原创 DOM 特效
DOM 特效 —— PC 端网页特效DOM 提供了一套与元素自身有关的位置和大小的属性元素偏移量 offset 系列offset 偏移量，使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置，获得元素自身的大小（宽度、高度）注意：返回的数值都不带单位1. offset 系列常用属性：（1）element.offsetParent偏移参考父级，返回距离自己最近的有定位的父级若父级都没有定位则返回body（html）注：元素天生就认识
2021-07-05 23:24:26
148
原创 DOM 事件详解
注册事件（绑定事件）1. 概述给元素添加事件，称为注册事件 / 绑定事件注册事件有两种方式：传统方式和方法监听注册方式2. 传统注册方式利用 on 开头的事件DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件<button oncilck = "alert(1)"></button>btn.
2021-07-05 23:19:25
4630
原创 DOM 节点操作
DOM 节点操作获取元素通常使用两种方式：（1）利用 DOM 提供的方法获取元素（逻辑性不强，繁琐）（2）利用节点层级关系获取元素（逻辑性强，但兼容性稍差）1. DOM 树2. 节点属性（1）nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读1 → 元素节点2 → 属性节点3 → 文本节点 （包含文字、空格、换行等）（2）nodeName 节点的名称(标签名称)，只读（3）nodeValue 节点值，返回或设置当前节点的值注意：元素节点的 nod
2021-07-05 23:14:48
228
原创 DOM 简介
DOM 简介1. DOM 概念文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。总结：W3C 已经定义了一系列
2021-07-05 23:11:52
9913
原创 Web API 简介
API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数， 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。简单理解就是API是给程序员提供的一种工具，以便能更轻松地实现想要完成的功能。任何开发语言都有自己的 API。API 的特征输入和输出(I/O)， 例如：var max = Math.max(2,3,4);API 的使用方法：(console.log("abc
2021-07-05 22:40:11
416
原创 JavaScript内置对象
JavaScript 包含：ECMAscript、 DOM 、BOMECMAscript 包含：变量、数据、运算符、条件分支语句、循环语句、函数、数组、 对象……JavaScript 的对象包含三种：自定义对象 内置对象 浏览器对象ECMAscript 的对象：自定义对象 内置对象内置对象内置对象是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）内置对象最大的优点是帮助我们快速开发使用一个内置对象，只需要知道对象中有哪些成员，有什么功能，直
2021-06-12 23:43:26
153
2
原创 JavaScript对象
对象现实生活中的对象：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。JavaScript 中的对象： JavaScript 中的对象其实就是生活中对象的一个抽象。 JavaScript 的对象是无序属性的集合。其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象想象成键值对，其中值可以是数据和函数。对象的行为和特征： 特征—在对象中用属性表示；行为—在对象中用方法表示对象字面量***创建一个对象最简单的方式是使用对象字面量赋
2021-06-12 23:41:44
140
原创 简单类型和复杂类型
简单类型和复杂类型的区别简单类型又叫做基本数据类型或值类型，复杂类型又叫做引用类型 。（1）值类型简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，但null特殊。String类型、Number类型、Boolean类型、Undefined、null（其中null比较特殊，返回的是一个空的对象object，若有个变量我们以后打算存储为对象，暂时没想好放啥，这时就给null）（2）引用类型复杂数据类型，在存储时，变量中存储的仅仅是地址（引用）。通过new关键字创建的对象（系统对象、自定
2021-06-12 23:40:11
624
原创 JavaScript预解析
预解析（1）JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器执行 JavaScript 代码的时候，分为两个过程：预解析过程和代码执行过程。（2）预解析过程：把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。先提升 var，再提升 function。（3）JavaScript 的执行过程：在预解析之后，根据新的代码顺序，从上往下按照既定规律执行
2021-06-12 23:39:11
149
原创 JavaScript作用域
作用域（1）作用域：变量可以起作用的范围。目的是为了提高程序的可靠性，更重要的是减少命名冲突（2）如果变量定义在一个函数内部，只能在函数内部被访问到，在函数外部不能使用这个变量，函数就是变量定义的作用域。（3）任何一对花括号 {} 中的结构体都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。（4）在es6之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为 JavaScript 没有块级作用域.全局变量和局部变量（1）局部变量：定义在函数内部的变量，只能在函
2021-06-12 23:38:18
172
3
原创 JavaScript函数
函数概念（1） 函数（function），也叫作功能、方法，函数可以将一段代码一起封装起来，被封装起来的函数具备某一项特殊的功能，内部封装的一段代码作为一个完整的结构体，要执行就都执行，要不执行就都不执行。（2）函数的作用就是封装一段代码，将来可以重复使用。函数声明（1）函数声明又叫函数定义，函数必须先定义然后才能使用。（2）如果没有定义函数直接使用，会出现一个引用错误。（3）函数声明语法：function 函数名(参数){ // 封装的结构体；}特点：函数声明的时候，函数体并不会执行
2021-06-12 23:35:01
187
2
原创 JavaScript数组
数组数组（Array），就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。1. 数组的定义数组是一组有序的数据集合。数组内部可以存放多个数据，不限制数据类型，并且数组的长度可以动态的调整。创建数组最简单的方式就是数组字面量方式。数组的字面量：[]一般将数组字面量赋值给一个变量，方便后期对数组进行操作。如果存放多个数据，每个数据之间用逗号分隔，最后一个后面不需要加逗号2. 获取数组元素数组可以通过一个 index（索引值、下标）去获取对应的某一
2021-06-12 23:30:47
246
3
原创 JavaScript流程控制语句
表达式和语句含义1. 表达式一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。特点：表达式会先执行出一个结果，然后再参与其他程序。2. 语句语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下分号 ; 分割一个一个的语句。语句可以认为是给计算机的一个指令，执行这段代码。一般语句以分号结束，特殊的结构除外。流程控制语句通过一些特殊结构可以让 js 代码加载时，要么可以跳过一部分不加载，或者可以循环加载一
2021-06-04 23:49:52
475
原创 JavaScript操作符
操作符也叫运算符 operator，是js中发起运算最简单的方式，是用于实现赋值、比较和执行算数运算等功能的符号表达式（expression） 的组成包含操作数和操作符，表达式会得到一个结果，然后用结果参与程序JS常用运算符：算术运算符、比较运算符、逻辑运算符、赋值运算符、一元运算符（递增和递减运算符）算术运算符+ - * / % ()%:取余，取模。 a / b = c 余 d，就说a % b = d。运算顺序：先算乘除取余、再算加减，有小括号先算小括号浮点数在算术运算符里会有精
2021-06-04 23:36:19
138
原创 JavaScript数据类型
变量1. 概述变量（variables） 是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据，甚至数据可以修改。变量相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。本质：变量是程序在内存中申请的一块用来存放数据的空间2. 变量使用变量在使用时，分为两步：声明变量、赋值(1) 声明变量例如：声明一个名称为age的变量： var age;变量声明又叫做定义变量、创建变量。变量在使用前，必须先有定义，如果没有定义，会出现引用错误。定义方法：使
2021-06-04 23:35:12
366
原创 JavaScript语法
JavaScript基础1. 网页、网站和应用程序网页：单独的一个页面网站：一系列相关的页面组合到一起应用程序：可以和用户产生交互，并实现某种功能2. 前端三层HTML、CSS标记语言（描述类语言）HTML——结构层——从语义的角度描述页面结构CSS——样式层——从美观的角度描述页面样式JavaScript脚本语言（编程类语言）JavaScript——行为层——从交互的角度描述页面行为，实现业务逻辑和页面控制3. JavaScript的常见应用场景表单动态验证（例如
2021-06-04 23:34:04
82
原创 计算机编程基础
编程语言1. 编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程计算机程序：就是让计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人类控制计算机一定要通过计算机语言向计算机发出命令注：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、智能机器人、服务器等等2. 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介种类非常多，总的来说分为机器语言、汇编语言和高级语言三大类实
2021-06-04 23:33:24
956
原创 响应式布局
响应式布局媒体查询 + bootstrap1. 响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备划分超小屏幕（手机）：<768px小屏设备（平板）：>=768px ~ <992px中等屏幕（桌面显示器）：>=992px ~ <1200px宽屏设备（大桌面显示器）：>=1200px2. 响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果原理：在不同屏幕下，通过媒体查询来改变这个布
2021-06-04 23:30:11
303
原创 rem布局适配
rem适配布局1. rem单位rem（root em）是一个相对单位，类似于em，em是相对于父元素字体大小rem的基准是相对于<html>元素的字体大小rem的优势：整个页面只有一个<html>，可以通过修改<html>里面的字体大小来改变页面中元素的大小，可以整体控制媒体查询媒体查询（Media Query），CSS3的新语法@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当重置浏览器大小的过程
2021-06-04 23:29:16
767
原创 flex布局
flex布局1. 传统布局与flex弹性布局区别传统布局：兼容性好；布局繁琐；局限性，不能在移动端很好的布局flex布局：操作简单、布局极为简单，移动端应用广泛；PC端浏览器兼容情况较差；IE11或更低版本，不支持或仅部分支持建议：PC端用传统布局；移动端/不考虑兼容问题的pc端页面用flex布局2. flex布局原理flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当父盒子设为flex布局以后，子元素的float、clea
2021-06-04 23:27:42
171
原创 流式布局
流式布局（百分比布局）也称为非固定像素布局（只针对于宽度）通过将盒子的宽度设置为百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充注意：制作过程中，需要定义页面的最大和最小支持宽度max-width 最大宽度（max-height 最大高度）min-width 最小宽度（min-height 最小高度）若屏幕宽度 < 最小宽度时，用户需要通过拖动底部滚动条查看页面京东移动端首页 m.jd.com1. 搭建相关文件夹结构2. 设置视口标签以及引入初始化样式&
2021-06-04 23:23:05
303
原创 移动端开发基础
移动端开发基础1. 浏览器现状国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚未自主研发的内核总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可2. 手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重（大小不一样，分辨率也不一样）作为开发者，无需关注这些分辨率，因为我们常用的尺寸单位是px注意：作为前端开发，不建议去纠结dp、dpi、pt、ppi等单位3.移动端调试方法Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机
2021-06-04 23:20:07
161
原创 HTML兼容与CSS兼容
HTML兼容写法html 中可以使用条件注释的方法，对 IE 进行特殊处理。条件注释通过注释演变而来：普通的浏览器认为内部内容为注释，不进行加载，而指定的浏览器会正常加载代码内容。<!--[if lte IE 9]> <h2>小于等于IE9的浏览器可以看到</h2><![endif]-->注：if 如果、endif 结束如果IE <= 9的版本可以识别条件注释，> 9 的版本会默认为注释处理比较符号：lt less tha
2021-04-17 18:33:23
180
原创 1-3 静态网页开发笔记
静态网页开发基础网页开发流程：需求分析、整体规划、界面设计、前端程序设计、前后端系统整合、测试验收版心指网页中主要内容所在的区域。常见版心值：960px/980px/1000px/1200px等制作方法：使用标准流中的margin居中方法页面布局流程制作网页过程中，文件夹和内部文件的名字都不允许出现中文字符确定页面的版心（可视区域）分析页面中的行模块，以及每个行模块中的列模块制作HTML页面，CSS文件CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各
2021-04-15 22:18:02
218
原创 1-2 CSS常用样式笔记
文章目录CSS常用样式字体属性文本属性盒模型属性宽度width高度height内边距padding边框border外边距margin盒模型拓展应用清除默认样式高度height应用居中父子盒模型margin塌陷现象标准文档流块级元素行内元素行内块元素显示模式display浮动浮动定义浮动性质浮动问题清除浮动的方法总结伪类选择器背景属性背景颜色background-color背景图片background-image背景重复background-repeat背景定位background-position背景附着b
2021-04-06 21:55:21
850
原创 1-2 CSS3笔记
CSS3新增选择器子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2例：div > p {color: red;}兄弟选择器相邻兄弟选择器：element1+element2 ——匹配同一个父元素中紧跟在element1后面的一个element2元素，+ 符号前后可以添加空格书写。其他兄弟选择器：element1~element2 ——匹配同一个父元素中在element1后面的所有element2元素，element2 不必直接紧随
2021-04-06 21:52:27
87
原创 1-2 HTML5笔记
HTML5它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。广义的HTML5是是 HTML5本身 + CSS3 + JavaScript 技术的综合。IE9以下的浏览器几乎都不兼容。新增语义化标签header——头部标签 、nav——导航标签 、main——主体标签 、aside——侧边栏标签、article——独立的内容标签 、section——区段标签 、footer——尾部标签这
2021-04-06 21:51:54
97
原创 1-1CSS笔记总结
文章目录CSS概述CSS书写位置内联式（行内式）内嵌式外联式导入式书写规范文本三属性颜色color颜色名颜色值字体font-family字号font-size盒子实体化三属性CSS选择器标签选择器id选择器类选择器通配符选择器后代选择器(包含选择器)交集选择器并集选择器CSS继承性CSS层叠性CSS概述css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的 文件样式的计算机语言。作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进 行格式化
2021-03-21 22:14:23
317
原创 1-1HTML笔记总结
文章目录HTML概述互联网原理互联网运行过程客户端主流浏览器及其内核浏览器功能HTTP请求与HTTP响应HTML概念纯文本文件的特点语义化网页的优势HTML规范版本vscode常用快捷键HTML基本结构DTD常见字符集编码标题标签h1-h6段落标签p换行标签br文本格式化图像标签imgimg标签属性相对路径同级查找子级查找上级查找绝对路径盘符出发网址形式音频标签audio视频标签video超级链接ahref属性target属性title属性页面内锚点跳转跨页面锚点跳转无序列表ul>li有序列表ol&g
2021-03-20 15:24:10
374
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人