- 博客(23)
- 收藏
- 关注
原创 Node.js基础
4.如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件。6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件。别人写好的,具有特定功能的,我们能直接拿来使用的,通常由多个文件组成,又叫包。5.如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有被找到。可用于文件压缩合并,语法转换,公共文件抽离,修改文件浏览器自动刷新。在项目的开发阶段和线上运行阶段,都需要依赖的第三方包,称为项目依赖。
2023-09-28 09:48:43
151
原创 CSS盒子模型
box-shadow: h-shadow(水平阴影) v-shadow(垂直阴影) blur(可选 模糊距离)padding:10px 20px 30px 40px;上是10 右是20 下是30 左是40 顺时针。spread(可选 阴影尺寸) color(可选 阴影颜色) inset(可选 将外部阴影改为内部阴影)解决方法: 内边距一定要给,我们只能改变内容宽度 width 让他减去多出来的内边距。
2023-09-27 17:00:30
115
原创 关于css设置canvas画布大小的问题
查阅资料后发现canvas的绘制会是画布大小为准的,canvas的默认画布大小为300×150,在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。如果canvas的width和height没指定或值不正确,就被设置成默认值(width:300px,height:150px)。宽400高300的画布,在中间画一个红色的十字,看起来没什么问题,但结果却出了问题。
2023-09-27 13:32:32
467
原创 构造函数和原型
构造函数和原型 1.1 概述 在经典的面向对象语言中,都存在类的概念,类就是对象的模板,对象就是类的示例,在ES6之前,JS中没有引入类的概念 在ES6之前,对象不是基于类创建的,而是用一种构造函数来定义对象 1.2 构造函数 构造函数用于创建某一类对象,首字母要大写 构造函数要和new一起使用才有意义 new在执行时会做四件事 1.在内存中创建一个新的空对象 2.让this指向这个新对象 3.执行构造函数里面的代码,给这个新对象添加属性和方法 4.返回这个新对象 JS的构造函数中可以添加一些成员,称为..
2021-08-11 15:00:10
192
原创 面向对象和类的继承
面向对象编程 1.1 两种编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-orientend programming) 分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现 1.3 面向对象编程OOP(Object Oriented Programming) 把事物分解成一个个对象,然后由对象之间分工合作,面向对象编程灵活,代码可复用,易于维护和开发。 面向对象的特性 封装性 继承性 多态性 1.4 面向过程和面向对象的对比 面向过程 性能比面向对象高,适合跟硬件联系很..
2021-08-04 10:05:34
237
原创 请求相应原理和http协议
URL 统一资源定位符,是专为标识Internet网上资源位置而设的一种编址方式 URL组成 传输协议://服务器IP或域名:端口/资源所在位置标识 创建web服务器 // 引用系统模块 const http = require(‘http’); // 创建web服务器 const app = http.createServer(); // 当客户端发送请求的时候 app.on(‘request’, (req, res) => { // 响应 res.end(’< h1> hi, use
2021-02-26 14:11:35
204
原创 jQuery基础入门
1.jQuery概述 1.1 JavaScript库 library,是一个封装好的特定的集合,是一个JS文件 常见的JS库 jQuery Prototype YUI Dojo Ext JS zepto 1.2 jQuery概念 jQuery是一个快速,简洁的JavaScript库,倡导写更少的代码,做更多的事情 jQuery封装了JavaScript常用的功能代码,优化了DOM操作,事件处理,动画设计和Ajax交互 1.3 jQuery优点 轻量级,不影响页面加载速度 跨浏览器兼容,基本兼容了现在主流的浏
2021-02-15 14:58:25
712
原创 BOM浏览器对象模型
BOM BOM提供了独立于内容而与浏览器窗口进行交互的对象,其核心是window,BOM比DOM更大且包含DOM window:document,location,navigation,screen,history window对象时浏览器的顶级对象 1.是JS访问浏览器的一个接口 2.是一个全局对象,定义在全局作用域中的变量和函数都会变成window对象的属性和方法 2. window对象的常见事件 窗口加载事件 window.onload = function() {} 只能写一次 或者 window.
2021-02-07 10:00:17
157
原创 Web API详解
Web APIs Web APIs是w3c组织的标准 Web APIs中主要学习DOM和BOM Web APIs是JS独有的 1.1 API和Web APIs API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 Web APIs是浏览器提供的一套操作浏览器功能和页面元素的API MDN详细API:https://developer.mozilla.org/zh-CN/docs/Web/API 1.2 DOM DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过这些DOM接口可以改..
2021-02-05 13:57:14
1065
原创 JavaScript 作用域,预解析以及对象
1. 作用域 作用域就是代码名字在某个范围内起作用和效果,目的是为了提高程序可靠性和减少命名冲突 1.1 js作用域(es6之前) 全局作用域:整个script标签,或者是一个单独的js文件 局部作用域:在函数内部 1.2 变量作用域 根据作用域不同,变量分为两种 全局变量:在全局作用域下的变量,以及在函数内部没有声明直接被赋值的变量 局部变量:在局部作用域下的变量 全局变量只有浏览器关闭的时候才会销毁,比较占内存资源 局部变量当程序执行完毕就会销毁,节省内存 1.3 作用域链 根据内部函数可以访问外部函数
2021-01-27 10:15:51
181
原创 JavaScript 循环
标题js中主要有三种循环:for循环 while循环 do while循环 1.1 for循环 for循环主要用于把某些代码循环若干次,通常跟计数有关系 for (初始变化量;条件表达式;操作表达式) { 循环体 } 初始变化量:用var声明一个变量,作为计数器使用 条件表达式:决定每一次循环是否执行,作为终止条件 操作表达式:每次循环最后执行的代码,用于计数器变量进行更新 断点调试: 在程序的某一行设置一个断点,调试时,程序运行到这一行会挺停住,然后可以一步一步往下调试,调试过程中可以看各个变量当前的值,
2021-01-24 19:03:53
230
原创 JavaScript 运算符
运算符 用于实现赋值,比较和执行算数运算等功能的符号 js中常用的运算符 算术运算符 +(加) -(减) *(乘) /(除) %(取余) 注意:浮点数最高精度是十七位小数,在进行算术运算时精确度不如整数 表达式:是由数字,运算符,变量等以能求出数值的有意义排列方法所得的组合 递增和递减运算符 ++(递增) –(递减) 可分为前置递增和后置递增 前置自增和后置自增如果单独使用,效果是一样的 后置自增是先返回原值,再自+1 注意:递增递减运算符必须配合变量使用 比较运算符 < (小于) > (大..
2021-01-15 10:46:35
147
原创 JavaScript 变量
1.1 JavaScript是一种运行在客户端的脚本语言,不需要编译,运行过程中由js解释器逐行解释并执行 1.2 JavaScript的作用 表单动态校验 网页特效 服务端开发 桌面程序 APP 控制硬件 游戏开发 1.3 html/css/js/关系 html决定网页结构和内容,决定看到什么 css决定网页呈现给用户的模样,决定好不好看 js实现业务逻辑和页面控制,决定功能 1.4 浏览器执行js 浏览器分成两部分,渲染引擎和js引擎 1.5 js组成 ECMAScript(js语法) DOM(页面文
2021-01-14 16:29:37
156
原创 CSS 2D转换
转换之移动translate 语法:transform:transform(x,y); 重点:定义2D转换中的移动,沿着X轴和Y轴移动元素 不会影响到其他元素的位置 百分比单位是相对于自身元素的 对行内标签没有效果 转换之旋转rotate 语法:transform:rotate(度数) 重点:度数单位是deg 角度为正时,顺时针;角度为负时,逆时针 默认的旋转中心是元素的中心点 转换中心点 transform-origin(我们可以设置元素转换的中心点) 语法:transform-origin: x y;
2021-01-10 09:59:31
168
原创 CSS高级技巧
1.1 dispaly设置或检索对象是否以及如何显示 dispaly:none 隐藏对象(隐藏元素,不保留位置) dispaly:black 除了转换为块级元素之外,还有显示元素的意思 1.2 visibility可见性 visibility:visible; 对象可见 visibility:hidden; 对象隐藏(隐藏元素,保留位置)–> 1.3 overflow溢出:检索或设置当对象的内容超过其指定高度及宽度时如何管理内容(只隐藏超出大小的部分) visible 不剪切内容也不添加滚动条 hid
2021-01-09 09:04:02
256
2
原创 移动布局基础之 响应式布局
响应式开发 1.1 响应式开发原理 使用媒体查询针对不同宽度设备进行布局和样式的设置,从而适配不同设备 1.2 响应式布局容器 响应式需要一个父级作为布局容器,来配合自己元素来实现变化效果 通过媒体查询改变布局容器的大小,再改变里面子元素的排列方式和大小 2. bootstrap前端开发框架 2.1 bootstrap是基于html,css,javascript的最受欢迎的前端框架 下载网址:http://bootstrap.css88.com/ 标准化的html+css编码规范 提供了一套简洁,直观,强.
2021-01-05 09:14:21
405
原创 移动布局基础之 rem适配布局
rem基础 rem单位是是一个相对单位,相对于HTML元素的字体大小,和em不同 通过修改HTML里面的文字大小来改变页面中元素的大小可以整体控制 2.1 媒体查询(media query) 使用@media查询,可以针对不同的媒体类型定义不同样式 可以针对不同屏幕尺寸设置不同样式 在重置浏览器大小的过程中,会根据浏览器宽高重新渲染页面 2.2 语法规范 @media media type and|not|only (media feature) { CSS-Code } mediatype查询类型 al.
2021-01-02 11:32:41
309
2
原创 移动布局基础之 flex布局
1.1 传统布局与flex布局 传统布局: 兼容性好 布局繁琐 局限性 flex布局: 操作方便 布局简单 PC端兼容较差 IE 11及以下版本不支持 2.1 flex布局原理 弹性布局,用来为盒状模型提供最大的灵活性 当我们为父盒子设为flex布局后,子元素的float,clear和vertical-align属性失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素,称为flex容器,他的所有子元素称为flex项目 总结:通过给父盒子添加flex属性,来控制盒子的位置和排
2020-12-31 10:48:54
204
原创 移动布局基础之 流式布局
移动端调试方法 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.搭建本地web服务器,手机和服务器一个局域网,通过手机访问服务器 3.使用外网服务器,直接IP域名访问 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要针对手机开发 现在移动端碎片化比较严重,分辨率和屏幕大小尺寸不一 学会用谷歌浏览器模拟手机页面以及调试 视口 viewport就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口,视觉视口和理想视口 1.1 布局视口(layout viewport)
2020-12-30 13:36:01
464
原创 CSS 动画
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 相比于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 下面给大家带来关于CSS动画的基本语法 动画的基本使用: 1.先定义动画 使用keyframes定义动画(类似定义类选择题) @keyframes 动画名称 { 0% { width:100px; } 100% { width:100px; } } 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列,可以做多个状态的变化,
2020-12-29 10:28:50
272
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅