- 博客(54)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端面试题
前端面试题单选题1 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度A： display：inlineB：display：noneC：display：blockD：display:inherit答案解析：C。内联元素加上display：block;后被块级化。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。2 css属性overflow属性定义溢出元素内容区的内容
2021-08-26 12:41:10
248
原创 js语法基础入门（7）
7.数组7.1.什么是数组以及相关概念？什么是数组？是一组数据有序排列的集合。将一组数据按一定顺序组织为一个组合，并对这个组合命名，这样便构成了数组。什么是数组元素？组成数组的每一个数据称为数组的一个数组元素。什么是数组索引？每一个数组元素对应一个整数值，称为数组元素索引，或者数组元素下标。元素索引为非负整数，由0开始依次增加，即第一个元素索引为0，依次为1，2等。什么是对数组元素的访问...
2019-12-17 23:39:25
119
原创 js基础练习题（1）
1.字符串视频教程地址： js基础练习题1.如何连接两个或者两个以上字符串？var cssname = 'box'var num = 1var html = '<div class="box">这里是box1</div>'问：如何把变量html里面的class属性值box换成变量，如何把‘box1’里的1换成变量num2.如何比较两个字符串看它们是否相同？...
2019-12-17 23:38:27
376
原创 ajax前后端交互原理（2）
2.NPM使用2.1.NPM是什么NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，这里要搞清楚包的概念，通俗的说，包就是具有一定功能的工具(软件)，本质上呢这些包就是很多文件的集合，例如下图就是一个包：这个包的作用就是将ES6的代码转换成ES5的代码，这个包我们在后面的webpack课程中会讲到，总之，你要明白的第一个概念就是包就是一些文件组成的...
2019-12-16 17:48:33
135
原创 ajax前后端交互原理（1）
1.Node.js简介1.1.前后台数据交互流程在web开发中，我们经常听说前端和后台，他们分别是做什么具体工作的呢？他们怎样交互的呢？我们得把这些基础的问题都搞明白了，才有一个大致的学习方向，首先，我们来看一张生活中几乎每个人都经历过的一个场景，如下图：当你去餐馆吃饭的时候，坐下后服务员会带着一个菜单过来，问你需要点什么菜，这个时候你浏览了菜单上的菜，把想吃的菜告诉服务员，服务员把你点的...
2019-12-16 17:46:20
321
原创 移动端布局（3）
4.弹性盒模型4.1.什么是弹性盒模型css3引入了一种新的布局模式，叫做Flexbox布局，即伸缩布局和（Flexible Box）模型，很多地方又称为弹性盒模型，我们下面都叫弹性盒模型，它可以用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局css中的布局方式总结：块布局 行内布局表格布局定位布局FlexBox布局（css3新引入）4.2.掌握Flexbox模型...
2019-12-16 17:38:12
138
原创 移动端布局（2）
3.移动端适配3.1.百分比适配<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ="X...
2019-12-16 17:29:03
95
原创 移动端布局（1）
1.移动端基础1.1.屏幕移动端和pc端开发差异比较大的就是屏幕了，这里说的差异主要体现在移动端大屏幕碎片化，各种尺寸和各种分辨率的机型非常多，所以，移动端需要解决的问题就是如何去适配各种屏幕尺寸，后面我们有单独章节来讲如何适配，在这里需要先科普一些基础知识1.什么是屏幕尺寸？屏幕的尺寸指的是对角线的长度，单位一般用英寸2.什么是分辨率？分辨率指的是屏幕水平和垂直方向上像素点的个数，...
2019-12-16 17:25:44
197
原创 js基础练习题（5）
10.其他1.选择题var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Nodeing'; console.log('Goodbye ' + name); } else { console.log('Hello ' +...
2019-12-16 17:06:13
154
原创 js基础练习题（4）
9.对象阅读代码，回答问题function User(name) { var name1 = name; this.name2 = name; function getName1() { return name1; }}User.prototype.getName2 = function() { return this....
2019-12-16 17:02:33
173
原创 js基础练习题（3）
8.this1.举例说说apply方法和call方法的作用和区别2.读下面代码，写程序结果function identify () { return this.name.toUpperCase()}function speek () { var greeting = 'hello, 我是' + identify.call(this) console.log(greeting...
2019-12-16 17:00:34
191
原创 DOM-BOM-EVENT（5）
5.宽、高、位置相关5.1.clientX/clientYclientX和clientY表示鼠标在浏览器可视区的坐标位置<script> document.onclick = function(ev){ var ev = ev || event alert("clientX:"+ev.clientX+", clientY:"+ev.clie...
2019-12-16 16:40:50
87
原创 DOM-BOM-EVENT（4）
4.dom操作createElement 创建一个元素<button id="btn">点击</button><ul id="ul1"></ul><script> var oBtn = document.getElementById("btn") var oUl = document.getElementById(...
2019-12-16 16:30:13
68
原创 DOM-BOM-EVENT（3）
3.Node常用属性childNodes 获取所有子节点<div id="wrap"> <div>1111</div> <div>2222</div> <div>3333</div> <div>4444</div> <div>5555&...
2019-12-16 16:28:00
87
原创 DOM-BOM-EVENT（2）
2.获取DOM元素的方法2.1.getElement系列documentElementById 通过id获取元素<div id="box"></div><script> var oDiv = document.getElementById("box)</script>documentElementsByClassName 通过类...
2019-12-16 16:24:22
84
原创 DOM-BOM-EVENT（1）
1.DOM简介DOM(Document Object Model)即文档对象模型，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使得从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。<html><head...
2019-12-16 16:18:32
113
原创 js事件入门（6）
7.事件冒泡机制7.1.什么是事件冒泡当一个元素接收到一个事件以后，会将事件传播给它的父级元素，它的负级元素会一层一层往上传播，直到最顶层window，这种事件传播机制叫作事件冒泡。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title...
2019-12-16 16:13:04
61
原创 js事件入门（5）
5.窗口事件5.1.onload事件元素加载完成时触发,常用的就是window.onloadwindow.onload = function(){ //等页面加载完成时执行这里的代码}5.1.resize当浏览器窗口改变的时候触发window.onresize = function(){ alert(1)}6.event对象6.1.什么是event对象？e...
2019-12-16 16:09:41
190
原创 js事件入门（4）
4.表单事件表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。4.1.onsubmit事件当用户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回一个false，就会阻止表单提交，表单就不会发送数据到服务器。<!DOCTYPE html><html> <head> <meta charset...
2019-12-16 16:03:22
68
原创 js语法基础入门（6）
6.函数6.1.函数是什么？函数就是具有名称和一定功能点代码块，这段代码块被封装起来，由一组语句组成，它们是JavaScript的基础模块单元，用于代码复用、信息隐藏和组合调用。一般来说，所谓编程，就是将一族需求分解成一组函数与数据结构的技能。因为函数可以封装一个功能，该功能可以被多次使用而达到代码复用的目的，也可以达到模块化开发的目的，所以，必须学好函数6.2 函数的语法结构函数的定义...
2019-12-16 15:38:24
224
原创 js语法基础入门（5.2）
5.2.循环结构当一段代码被重复调用多次的时候，可以用循环结构来实现，就像第一个实例中出现的场景一样，需要重复询问对方是否有空，这样就可以使用循环结构来搞定5.2.1.for循环语句//语法结构：for(初始化表达式；条件表达式；条件改变表达式)｛ 循环体；｝程序流程图实例：/***输出1-100的整数*/for(var i=1;i<100;i++){ ...
2019-12-16 15:23:37
384
原创 js语法基础入门（5.1）
5.流程控制5.1.选择结构程序流程图图例：椭圆: 开始/结束矩形: 操作菱形: 判断连接线: 走向可以根据程序流程图，理清楚程序执行的流程5.2.1.if语句//if语句语法结构：if（条件表达式）{` 这里是表达式成立后执行的代码}程序流程图实例：var num = prompt('请输入分数：'); //prompt函数的功能是弹出一个输入框，收集...
2019-12-16 15:05:14
131
原创 js语法基础入门（4）
4.运算符4.1.什么是运算符？运算符就是用来表示具体运算规则的符号，例如数学计算中的加减乘除就是具体的运算规则，我们分别用“＋ － * /”等符号来表示4.2.运算符的分类4.2.1 算数运算符算数运算符主要有：+ - * / % ++ --，这些符号主要是用来做数字方面等运算。其中难点属于取模运算％console.log(97%10);//输出7console.log(100%1...
2019-12-16 14:47:24
93
原创 js语法基础入门（3）
3.数据类型3.1.数据类型学习重点前面我们通俗的讲了，数据类型其实就是对数据进行了分类，那么，在js中到底把数据分成了几类？这些类的名称叫什么？每个分类下面有那些值？这些问题是需要记清楚的，例如： 值 8， 我们把它分到数字类里面， 数字类有个特点就是它下面的值都是数字，如果像上面这样能够记住类名，能够分辨出常见的某个值属于哪个类型，那么数据类型这块知识就算掌握了3.2.Number-数字...
2019-12-16 14:43:52
137
1
原创 js语法基础入门（2）
2.变量2.1.变量的声明声明变量的时候没有赋值，默认输出undefined//通过var 声明一个变量var user； //默认输出undefined可以同时声明多个变量var user,email,password;同时声明多个变量，并且赋值var user="zhangsan",password="123456",email="zs@sina.com"2.2.变量命...
2019-12-16 14:34:32
57
原创 js语法基础入门（1.2）
1.4.查找元素的方法1.4.1.查找元素的方法JavaScript可以去操作html元素，要实现对html元素的操作，首选应该找到这个元素，有点类似于css中的选择器html代码：<div id="box">螺钉课堂</div>js代码：oBox = document.getElementById('box')console.log(oBox)1.4....
2019-12-16 14:23:27
187
原创 js语法基础入门（1.1）
#1.基础入门##1.1.hello world###1.1.1.JavaScript是什么?JavaScript是一门跨平台、面向对象的轻量级脚本语言，在web开发中被广泛应用###1.1.2.JavaScript和Java的关系JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript语言类似 Java 但是并没有 Java 的静态类型和强类型...
2019-12-16 13:53:59
125
原创 零基础转行前端开发的最佳入门学习路径
初学者学习路线问题学前端到底好不好？ 前景如何？ 听说python现在很火？我应不应该去学习一下？ 听说某实战课程很好，要不要去买一套？ 到底是学前端还是后端？ 要不学全栈？ …各种问题困惑着准备入行的朋友，一些想转行的、未毕业的在校大学生由于对于整个行业不是太理解，很容易就会被各种广告、各种机构忽悠去交几万培训，那么如何去避免生活中的种种套路呢？1、首先你需要先去动手实践，入门了，对这个行...
2019-04-11 20:56:43
303
原创 使用Easy Mock构建模拟数据
Easy Mock简介Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。 我们可以使用它来模拟数据使用Easy Mock创建一个项目使用Easy Mock网址：https://easy-mock.com/,你需要去注册一个账号，并且登录，才能进行下面的操作1.创建项目把里面的各种选项填写好点创建按钮就可以了2.添加接口进入到刚才创建的项...
2019-02-13 12:49:22
1008
原创 canvas基础入门系列教程(7)-绘制文本
5.绘制文本5.1.strokeText方法通过strokeText方法可以绘制描边的文本// 语法ctx.strokeText(text, x, y [, maxWidth]);参数说明text 使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。x 文本起始点的 x 轴坐标。y 文本起始点的 y 轴坐标。maxWidth...
2019-02-12 20:51:10
174
原创 canvas基础入门系列教程(6)-绘制图片
4.绘制图片在canvas中使用到的图片并不是通过js去画的，如果每张图片都是用js去画，那么会相当麻烦，例如：游戏开发中的地图、背景、人物等，这些素材如果直接用js去画，先不考虑难度问题，就是画这些内容工作量就非常大了，因此，canvas提供了方法可以直接讲图片加载到canvas中，这样就方便多了4.1.绘制图片体验在canvas中绘制图片，实际上说的是把图片加载到canvas中，我们需要...
2019-02-12 20:49:35
287
原创 canvas基础入门系列教程(5)-绘制曲线图形
3.绘制曲线图形在canvas中曲线图形通常分为两种，曲线和弧线，弧线就是圆周上的一部分，曲线上每一点都有相同的曲率，曲线则不一定，曲线的范围更大，曲线包含率弧线3.1.使用点来画曲线&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="
2019-02-12 20:48:00
2282
原创 canvas基础入门系列教程(4)-绘制矩形
2.2.绘制矩形前面章节中我们使用三条线来画一个三角形，同理，也可以用四条线来画出一个矩形，但是这样做代码量会更多，并不推荐这样做，在canvas中提供了相应的方法来快速画出矩形。2.2.1.strokeRect方法strockeRect是获取到的2d环境对象上的方法，可以非常方便的画出一个矩形//语法ctx.strokeRect(x, y, width, height)stroke...
2019-02-12 20:46:58
395
原创 canvas基础入门系列教程(3)-绘制直线图形
2.1.绘制直线2.1.1.设置描边颜色通过strokeStyle属性来设置线条颜色 // 1. 获取到canvas对象 var oCanvas = document.getElementById('cvs') // 2. 获取到上下文环境 var ctx = oCanvas.getContext('2d') // 3. 开始绘制图形 // 3.1.把路径移动到画布中...
2019-02-12 20:45:51
409
原创 canvas基础入门系列教程(2)-绘制直线图形前置知识
2.绘制直线图形准备知识2.0.1.canvas的坐标系在默认情况下，canvas的左上角为原点，X坐标向右增长，Y坐标向下增长，但是，canvas的坐标并不是固定的，可以对坐标系统进行平移以及旋转2.2.路径初识路径中文解释为到达目的地必经的道路在canvas中我们使用stroke函数来画出moveTo和lineTo两点之间的线，调用了stroke函数以后，我们就可以看到一条直线，...
2019-02-12 20:44:20
154
原创 canvas基础入门系列教程(1)-canvas初体验
1.canvas初体验1.1.canvas 是什么canvas是html5新增的一个元素，配合宽度和高度属性定义出一个可绘图的区域，JavaScript可以访问该区域，通过一套完整的绘图函数来动态生成图形。canvas的应用包括绘制图形、绘制图表、制作动画效果、进行游戏开发等总结：本质上canvas是一个html5元素，需要通过JavaScript来操作才能实现各种功能，只是一个canvas...
2019-02-12 20:42:12
1084
原创 es6+最佳入门实践(14)
14.模版字符串模版字符串(template string)是增强版的字符串，定义一个模版字符串需要用到反引号let s = `这是一个模版字符串`console.log(s)14.1.模版字符串的应用场景在es5中,我们经常会遇到字符串拼接的情况，例如：输入标题1-6for(let i = 1; i &lt;= 6; i++){ document.write('&lt;h'...
2019-02-10 09:37:39
114
原创 es6+最佳入门实践(13)
13.模块化13.1.什么是模块化模块化是一种处理复杂系统分解为更好的可管理模块的方式。通俗的讲就是把一个复杂的功能拆分成多个小功能，并且以一种良好的机制管理起来，这样就可以认为是模块化。就像作家把书分成很多章节来写一样，程序员写代码分模块来写也是一种良好的习惯。从本质上来讲，一个模块就是一堆代码而已使用模块化方式写代码，有非常多的优点，例如，可维护性好、避免全局变量污染、可复用性好等，下面...
2019-02-10 09:37:31
108
原创 es6+最佳入门实践(12)
12.class基础用法和继承12.1.class基础语法在es5中，面向对象我们通常写成这样function Person(name,age) { this.name = name; this.age = age;}Person.prototype.showName = function () { console.log(this.name);};let...
2019-02-10 09:37:21
96
原创 es6+最佳入门实践(11)
11.async函数async 函数是什么？一句话，它就是 Generator 函数的语法糖。通俗的说就是Generator函数的另一种写法，这种写法更简洁，除此之外，async函数还对Genrator进行了一些改进首先，来回顾一下Generator函数实现文件读取const fs = require('fs');const co = require('co');function re...
2019-02-10 09:37:11
95
JAVASCRIPT高效图形编程
2017-10-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人