![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
大地飞鸿
这个作者很懒,什么都没留下…
展开
-
ajax前后端交互原理(2)
2.NPM使用2.1.NPM是什么NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质上呢这些包就是很多文件的集合,例如下图就是一个包:这个包的作用就是将ES6的代码转换成ES5的代码,这个包我们在后面的webpack课程中会讲到,总之,你要明白的第一个概念就是包就是一些文件组成的...原创 2019-12-16 17:48:33 · 133 阅读 · 0 评论 -
ajax前后端交互原理(1)
1.Node.js简介1.1.前后台数据交互流程在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首先,我们来看一张生活中几乎每个人都经历过的一个场景,如下图:当你去餐馆吃饭的时候,坐下后服务员会带着一个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的...原创 2019-12-16 17:46:20 · 320 阅读 · 0 评论 -
移动端布局(3)
4.弹性盒模型4.1.什么是弹性盒模型css3引入了一种新的布局模式,叫做Flexbox布局,即伸缩布局和(Flexible Box)模型,很多地方又称为弹性盒模型,我们下面都叫弹性盒模型,它可以用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局css中的布局方式总结:块布局 行内布局表格布局定位布局FlexBox布局(css3新引入)4.2.掌握Flexbox模型...原创 2019-12-16 17:38:12 · 136 阅读 · 0 评论 -
移动端布局(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 · 93 阅读 · 0 评论 -
移动端布局(1)
1.移动端基础1.1.屏幕移动端和pc端开发差异比较大的就是屏幕了,这里说的差异主要体现在移动端大屏幕碎片化,各种尺寸和各种分辨率的机型非常多,所以,移动端需要解决的问题就是如何去适配各种屏幕尺寸,后面我们有单独章节来讲如何适配,在这里需要先科普一些基础知识1.什么是屏幕尺寸?屏幕的尺寸指的是对角线的长度,单位一般用英寸2.什么是分辨率?分辨率指的是屏幕水平和垂直方向上像素点的个数,...原创 2019-12-16 17:25:44 · 196 阅读 · 0 评论 -
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 · 152 阅读 · 0 评论 -
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 · 172 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
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 · 375 阅读 · 0 评论 -
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 · 85 阅读 · 0 评论 -
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 · 67 阅读 · 0 评论 -
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 · 85 阅读 · 0 评论 -
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 · 83 阅读 · 0 评论 -
DOM-BOM-EVENT(1)
1.DOM简介DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。<html><head...原创 2019-12-16 16:18:32 · 111 阅读 · 0 评论 -
js事件入门(6)
7.事件冒泡机制7.1.什么是事件冒泡当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title...原创 2019-12-16 16:13:04 · 60 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
js事件入门(4)
4.表单事件表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作。4.1.onsubmit事件当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返回一个false,就会阻止表单提交,表单就不会发送数据到服务器。<!DOCTYPE html><html> <head> <meta charset...原创 2019-12-16 16:03:22 · 67 阅读 · 0 评论 -
js语法基础入门(7)
7.数组7.1.什么是数组以及相关概念?什么是数组?是一组数据有序排列的集合。将一组数据按一定顺序组织为一个组合,并对这个组合命名,这样便构成了数组。什么是数组元素?组成数组的每一个数据称为数组的一个数组元素。什么是数组索引?每一个数组元素对应一个整数值,称为数组元素索引,或者数组元素下标。元素索引为非负整数,由0开始依次增加,即第一个元素索引为0,依次为1,2等。什么是对数组元素的访问...原创 2019-12-17 23:39:25 · 118 阅读 · 0 评论 -
js语法基础入门(6)
6.函数6.1.函数是什么?函数就是具有名称和一定功能点代码块,这段代码块被封装起来,由一组语句组成,它们是JavaScript的基础模块单元,用于代码复用、信息隐藏和组合调用。一般来说,所谓编程,就是将一族需求分解成一组函数与数据结构的技能。因为函数可以封装一个功能,该功能可以被多次使用而达到代码复用的目的,也可以达到模块化开发的目的,所以,必须学好函数6.2 函数的语法结构函数的定义...原创 2019-12-16 15:38:24 · 216 阅读 · 0 评论 -
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 · 383 阅读 · 0 评论 -
js语法基础入门(5.1)
5.流程控制5.1.选择结构程序流程图图例:椭圆: 开始/结束矩形: 操作菱形: 判断连接线: 走向可以根据程序流程图,理清楚程序执行的流程5.2.1.if语句//if语句语法结构:if(条件表达式){` 这里是表达式成立后执行的代码}程序流程图实例:var num = prompt('请输入分数:'); //prompt函数的功能是弹出一个输入框,收集...原创 2019-12-16 15:05:14 · 130 阅读 · 0 评论 -
js语法基础入门(4)
4.运算符4.1.什么是运算符?运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用“+ - * /”等符号来表示4.2.运算符的分类4.2.1 算数运算符算数运算符主要有:+ - * / % ++ --,这些符号主要是用来做数字方面等运算。其中难点属于取模运算%console.log(97%10);//输出7console.log(100%1...原创 2019-12-16 14:47:24 · 92 阅读 · 0 评论 -
js语法基础入门(3)
3.数据类型3.1.数据类型学习重点前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如: 值 8, 我们把它分到数字类里面, 数字类有个特点就是它下面的值都是数字,如果像上面这样能够记住类名,能够分辨出常见的某个值属于哪个类型,那么数据类型这块知识就算掌握了3.2.Number-数字...原创 2019-12-16 14:43:52 · 132 阅读 · 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 · 56 阅读 · 0 评论 -
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 · 186 阅读 · 0 评论 -
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 · 123 阅读 · 0 评论 -
es6+最佳入门实践(9)
9.Iterator和for…of9.1.Iterator是什么?Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制。这里说的接口可以形象的理解为USB接口,有了这个接口可以做不同的事情,在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的。而Iterator接口提供的统一访问机制主要表现为遍历操作,任何数据类型只要具有Iterator接口,就可以完成...原创 2019-02-09 22:00:59 · 118 阅读 · 0 评论 -
es6+最佳入门实践(8)
8.Promise8.1.什么是异步?要理解异步,首先,从同步代码开始说alert(1)alert(2)像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码alert(0)setTimeout(function () { alert(1);}, 2000);setTimeout(function () { alert(2)}, 1000);...原创 2019-02-09 21:59:58 · 678 阅读 · 0 评论 -
es6+最佳入门实践(7)
7.set和map数据结构7.1.什么是set?Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = new Set([1,2,2,3,3,4])console.log(st) // [1,2,3,4]Set的size属性可以知道set中有多少元素,类似于数组的length属性let s...原创 2019-02-09 21:59:00 · 629 阅读 · 0 评论 -
es6+最佳入门实践(6)
6.Symbol用法6.1.什么是Symbol?Symbol是es6中一种新增加的数据类型,它表示独一无二的值。es5中我们把数据类型分为基本数据类型(字符串、数字、布尔、undefined、null)和引用数据类型(Object),在es6中新增的Symbol数据类型划分到基本数据类型为什么会有这样一种数据类型呢?//别人给了你一个定义好的对象var obj = { name:...原创 2019-02-09 21:57:58 · 245 阅读 · 0 评论 -
es6+最佳入门实践(5)
5.对象扩展5.1.对象简写在es5中,有这样一种写法var name = "xiaoqiang";var age = 12;var obj = { name : name, age : age}在es6中,我们可以简写成这样一种形式let name = "xiaoqiang";let age = 12;let obj = { name, ag...原创 2019-02-09 21:56:57 · 110 阅读 · 0 评论 -
es6+最佳入门实践(4)
4.函数扩展4.1.参数默认值默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现function Fn(a, b) { b = b || "nodeing"; return a + b}console.log(Fn("hello"))这样写有一个缺点就是当我传入一个空字符串的时候,返回的结果并不是我想要的结果,正确的输出结果应...原创 2019-02-09 21:56:04 · 93 阅读 · 0 评论 -
es6+最佳入门实践(3)
3.数组扩展3.1.扩展运算符扩展运算符用三个点(…)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下:let arr = [1, 2, 3];console.log(...arr); //打印结果 1 2 3//等价于console.log(1,2,3);从上面代码中,我们可以看出…arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列在函数调用的时候,可以...原创 2019-02-09 21:54:37 · 83 阅读 · 0 评论 -
es6+最佳入门实践(2)
2.解构赋值2.1.什么是解构赋值?什么是解构赋值?这里的关键字还是赋值,这是说如何去赋值的问题,这里说的解构可以理解为解散重新构造,所以解构赋值可以理解为解散重新构造后进行赋值,通常是左边一种结构,右边一种结构,左右的结构拆开来一一对应进行赋值,例如:let a, b[a, b] = [1, 2]console.log(a, b)这里就相当于把1赋值给a,把2赋值给b,这样的操作就...原创 2019-02-09 21:53:32 · 89 阅读 · 0 评论 -
es6+最佳入门实践(1)
1.let和const1.1.let和块级作用域在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的区域是一个块级作用域{ var a = 10}// 输出10console.log(a) 如果上述代码中定义变量的时候使用let,在外面使用变量a就会报错{ let a ...原创 2019-02-09 21:52:22 · 118 阅读 · 0 评论 -
2017最好的JavaScript框架、库和工具 — SitePoint
与开发者数量相比,可能有更多的JavaScript框架、库和工具。截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目。 在npmjs上有50万的可用包,并且这些包每个月的下载量将近100亿次。2017.05.29: 更新了本文,旨在能正确的描述当前JavaScript生态的状态。本文着重讲述目前最流行的客户端JavaScript框架、转载 2017-06-09 23:00:32 · 431 阅读 · 0 评论 -
react最佳入门实践(1)
1.环境搭建React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库1.1.安装node(mac版) 安装homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"原创 2017-06-08 21:23:29 · 550 阅读 · 0 评论 -
es6+最佳入门实践(10)
10.Generator10.1.Generator是什么?Generator函数是ES6提供的一种异步编程解决方案。在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator函数后返回一个迭代器对象,使用这个迭代器对象可以遍历出Generator函数内部的状态Generator函数和传统函数的不同点有:1 函数定义的时候,function关键字后面加“*”, 2 内部使...原创 2019-02-09 22:01:52 · 76 阅读 · 0 评论 -
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 · 94 阅读 · 0 评论 -
使用Easy Mock构建模拟数据
Easy Mock简介Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。 我们可以使用它来模拟数据使用Easy Mock创建一个项目使用Easy Mock网址:https://easy-mock.com/,你需要去注册一个账号,并且登录,才能进行下面的操作1.创建项目把里面的各种选项填写好点创建按钮就可以了2.添加接口进入到刚才创建的项...原创 2019-02-13 12:49:22 · 1005 阅读 · 0 评论