Web前端笔记
文章平均质量分 78
yji534123343
热爱编程的大学生
展开
-
JavaScript-4
1、分支结构2、循环结构=============================1、分支结构1、else...if语句(多重if结构)1、问题根据考试成绩,给出 A-E 等级成绩为100分,则输出A成绩在90分以上 则输出B成绩在80分以上 则输出C成绩在60分以上 则输出D否则 输出E 标题原创 2018-01-30 11:02:29 · 151 阅读 · 0 评论 -
HTML5-4
今日目标:(1)视频和音频 —— 简单必须掌握(2)Canvas绘图 —— 重点&难点 1.面试题:Flash被HTML5取代在哪些方面? 音频和视频 —— 和 绘图 —— 动画/游戏 —— +定时器 统计图表 —— 、 客户端数据存储 —— WebStorage原创 2018-01-29 17:01:24 · 147 阅读 · 0 评论 -
HTML5-3
1.常用的前端开发软件 (1)小型软件:小巧启动快,功能简单 Editplus、Notepad++、VIM、Emacs (2)中型软件: SublimeText (3)中型软件:体积大启动慢,功能强大 Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver原创 2018-01-29 16:57:40 · 224 阅读 · 0 评论 -
HTML5-2
1、图像和链接1、URL地址1、分类1、绝对路径1、引用互联网资源协议名主机名(IP地址,域名)目录路径文件名2、本机文件从文件所在的最高目录处(盘符)开始2、相对路径通过 文件间的位置关系 找到资源文件1、同目录,直接用2、子目录,先进入3、父目录,先返回(../)3、根相对路径永远都是从WEB站点所在的根目录处开始查找原创 2018-01-29 16:50:45 · 401 阅读 · 0 评论 -
HTML5 -1
1、WEB基础知识(了解) 1、WEB与Internet 1、Internet 全球性计算机互联网络 因特网、国际互联网、网际网 2、Intenet提供的服务 Email:电子邮件 WWW:万维网 www.baidu.co原创 2018-01-29 16:28:49 · 411 阅读 · 0 评论 -
Node.js
Node.js概述:Node.js官网:www.nodejs.org1.Node.js是C++编写的基于V8引擎的JS运行时环境。2.Node.js是一门基于ECMAScript开发的服务器端语言,提供了(全端JS没有的)很多扩展对象。前端js:1.ES原生对象:String、Number、Boolean、Math、Date、Error、Function、Object、Arra原创 2018-02-03 09:47:18 · 278 阅读 · 0 评论 -
微信开发
一、微信开发的整体介绍开放平台:https://open.weixin.qq.com/公众平台:https://mp.weixin.qq.com/1、微信开发的种类①移动应用开发支持微信的分享、收藏、支付三大功能,原生开发的人员去使用的开发类别②网站应用开发网站支持使用微信账号进行注册和登录,从而来实现:提高用户的留存率,方便不同账号的统一(结合unionId)③公原创 2018-02-03 09:43:54 · 1615 阅读 · 0 评论 -
React.js
一、React介绍what?是一个开源的(为数据提供渲染视图)的js库--》ui层fb、instgram、社区公司共同维护。美团、阿里。。。why? fb 问题:视图更新频繁-》浏览器性能 数据--》业务逻辑复杂virtualDOM、单向数据流when? 数据大量变化 视图更新频繁,(简单的页面、应用如果采用react 不建议)原创 2018-02-03 09:40:33 · 243 阅读 · 0 评论 -
ZeptoJS
ZeptoJS1、介绍what? 是一个轻量级的针对现代浏览器的js库why? ①门槛比较低 ②轻量 ③性能优越when? 功能简单的移动端的app不支持ie10以下的浏览器,支持现代浏览器zeptojs.comhttp://github.e-sites.nl/zeptobuilder/自定义构建的模块:①到zeptoBuil原创 2018-02-03 09:38:29 · 2521 阅读 · 0 评论 -
Ionic
混合编程: 前端代码结合原生组件去编码生成的应用程序。①WebView 缺点:无法像原生应用程序调用底层的信息②phoneGap 是一个通过各种插件提供了js的API的平台,支持调用底层信息③无论是WebView还是phoneGap实现的移动端的应用,都是实现一些功能,但是UI并没有移动端的处理一、Ionic介绍what?一个强大的H5应用程原创 2018-02-03 09:30:35 · 409 阅读 · 0 评论 -
移动端设计
回顾:①jQuery:简化DOM操作,常用于DOM操作频繁,数据增删改查不是特别多的场景②bootStrap:在网站或者网络应用程序开发的开源前端框架,在响应式的开发,偏向于pc端③angularJS:实现SPA应用,数据操作非常频繁。1采用了MVC的设计模式 2双向数据绑定 3依赖注入 4模块化设计框架学习:①明确框架定位:解决什么样的问题②掌握框架的原创 2018-02-03 09:29:49 · 2130 阅读 · 1 评论 -
HTML5-5
1.使用Canvas绘制路径(Path) 提示:Canvas中的路径概念与Photoshop中钢笔工具类似的。路径本身是不可见的,有三个用途:描边、填充(闭合)、裁剪(闭合) Canavs中与路径绘制相关方法: ctx.beginPath() //开始一条新路径 ctx.closePath() //闭合路径,让最后一个锚点自动连接到第一个锚点原创 2018-01-29 17:04:12 · 190 阅读 · 0 评论 -
HTML5-6
1.如何等待所有图片加载完成后,才开始绘图? 多张图片绘制需要按照特定的顺序,而加载完成顺序是完全无法预测,只能等待所有图片加载完成,才能开始绘制。 /*************************** //典型的错误代码 var img1 = new Image(); img1.src = ""; img1.onload = fun原创 2018-01-29 17:06:23 · 156 阅读 · 0 评论 -
HTML5-7
1.SVG中定义特效对象——渐变特效 2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径 更多滤镜效果及使用方法:https://developer.mozilla.org/en-US/docs/Web/SVG/Element原创 2018-01-29 17:08:50 · 132 阅读 · 0 评论 -
JavaScript-3
1、运算符1、赋值运算符1、使用"="进行赋值注意:赋值符号的左边,必须是变量const PI=3.14;(特殊)2、扩展赋值表达式+=,-=,*=,/=,%=,&=,|=,^=ex:var num = 5 ;num+=3; ==> num=num+3;num-=5; ==> num=num-5;语法:a+=b;==> a=a+b;2、字原创 2018-01-30 10:55:38 · 210 阅读 · 0 评论 -
JavaScript-2
1、数据类型的转换2、运算符和表达式==========================================1、数据类型转换1、弱类型由数据来决定数据类型var num;//undefinednum=12;//numbernum="你好";//stringnum=false;//boolean强数据类型:由数据类型来决定数据1原创 2018-01-30 10:53:53 · 162 阅读 · 0 评论 -
CSS3-6
1、复杂选择器2、内容生成3、多列4、CSS Hack(浏览器兼容性)*******************************1、复杂选择器1、兄弟选择器1、作用通过元素的平级关系来匹配其他元素只能向后不能向前2、分类1、相邻兄弟选择器匹配指定元素的相邻兄弟相邻:紧紧挨在指定元素的后面语法:选择器1+选择器2ex:1原创 2018-01-30 09:11:51 · 114 阅读 · 0 评论 -
JavaScript-1
1、Javascript概述2、Javascript基础语法3、变量和常量(重点)4、数据类型*******************************************1、JS概述1、什么是JSJS是一种运行于JS解释器/引擎中的解释型脚本语言编译型语言:程序在运行前会进行编译解释型语言:运行之前不会编译,直接执行,出错则停止JS解释器/原创 2018-01-30 09:12:38 · 343 阅读 · 0 评论 -
CSS3-7
1、转换2、过渡3、动画4、CSS 优化******************************1、转换1、转换简介1、什么是转换改变元素在页面中的大小,位置,角度和形状的一种方式2、转换分类1、2D转换使元素在x轴和y轴上发生变化效果2、3D转换在2D转换基础上,增加 z轴的变化效果3、转换属性属性:transform取原创 2018-01-30 09:12:19 · 548 阅读 · 1 评论 -
CSS3-5
1、定位1、定位属性1、定位属性属性:position取值:1、static默认值,默认定位方式2、relative相对定位3、absolute绝对定位4、fixed固定定位注意:position取值为 relative,absolute,fixed 的元素被称为 已定位元素2、偏移属性作用:移动已定位元素属性:top:值;b原创 2018-01-30 09:11:30 · 494 阅读 · 0 评论 -
CSS3-4
1、浮动(重难点)2、显示3、列表4、定位(重难点)*****************************1、浮动1、定位1、什么是定位元素该出现在网页的哪个位置处2、定位方式1、普通流定位2、浮动定位3、相对定位4、绝对定位5、固定定位3、普通流定位又称为 文档流定位网页元素默认定位方式页面元素块级元素-从上到下的方原创 2018-01-30 09:11:04 · 495 阅读 · 0 评论 -
CSS3-3
1、渐变1、什么是渐变多种颜色变化的一个过程分类:1、线性渐变2、径向渐变3、重复渐变(线性,径向)特点:1、渐变都有填充方向(线性渐变)2、色标(颜色,位置)2、语法属性:background-image取值:1、linear-gradient():线性渐变2、radial-gradient():径向渐变3、repeating-原创 2018-01-30 09:10:39 · 482 阅读 · 0 评论 -
CSS3-2
************************************1、边框2、框模型3、背景属性4、渐变****************************1、边框1、边框倒角属性:border-radius该属性为简写属性,可以设置四个角的倒角半径取值:以px为单位 或 以 % 为单位单角定义:border-top-left-ra原创 2018-01-30 09:10:04 · 504 阅读 · 0 评论 -
Less 语法学习
Less 语法学习(1)Less 支持CSS 所有的语法(2)Less 支持多行/单行注释,但CSS 只支持多行注释,所以Less 中的单行注释不会被编译到CSS 文件(3)Less 有变量(Variable)的概念声明变量: @变量名: 值;使用变量: 选择器{ 样式: @变量名; }变量值可以是任意合法的样式值。(4)Less 可以执行样式/变量的计算加、减、乘、除、取余(5)Less 支持样...原创 2018-02-10 19:25:11 · 369 阅读 · 0 评论 -
CSS3-1
1、CSS概述1、问题1、设置页面中所有的文本颜色为红色2、页面中所有的div里面的文本的颜色变为 蓝色3、页面中所有的div里面的文本的颜色变为 绿色HTML元素属性的弊端:1、想完成相同效果,却要使用不同属性2、HTML元素改变的样式可重用性不高2、CSSCSS:Cascading Style Sheets层叠样式表,级联样式表,样式表特点:原创 2018-01-29 17:23:32 · 300 阅读 · 0 评论 -
HTML5-9
1.如何得知localStorage中数据的修改? localStorage中任何数据的修改,都会触发一个事件: window.onstorage = function(){ } 2. HTML5新特性之十——WebSocket 提示:重在概念的理解 HTTP协议:是基于“请求-响应”模型的协议,客户端发起一个请求,服务器就要返回一个响应,原创 2018-01-29 17:12:16 · 151 阅读 · 0 评论 -
HTML5-8
(1)扩展:如何在网页中拖拽显示客户端的图片(2)WebWorker(3)WebStorage 1.面试题:如何在服务器端下载的网页中显示客户端图片? 一般情况下,网页只能显示服务器上的图片; HTML5中,可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中。 container.ondrop = function(e)原创 2018-01-29 17:11:03 · 130 阅读 · 0 评论 -
AngularJS-4
ng四大特征:①采用了MVC的设计模式②双向数据绑定(view和model)③依赖注入④模块化设计一、如何自定义模块并进行调用??自定义模块:angular.module()模块之间如何相互之间的调用: angular.module('myApp02',['ng','myApp01']);模块化好处:体现“高内聚低耦合”的设计原则,提原创 2018-02-03 09:18:03 · 240 阅读 · 0 评论 -
AngularJS-3
一、ng内置的服务($http,$interval,$timeout...)①双向数据绑定的工作原理{{num}}===>ng框架自动添加一个监听(watch),和$scope.$watch是一样的,只要是数据发生了变化,视图就会更新。???如何知道数据是否发生了变化?ng会周期性的运行一个函数来检查$scope的模型数据是否发生变化,称之为$digest===>$scop原创 2018-02-03 09:16:29 · 249 阅读 · 0 评论 -
AngularJS-2
一、自定义指令语法:var app = angular.module('myModule',['ng']);app.directive(name,fn);自定义指令:restrict:'EACM'E-->Element 元素A-->Attribute 属性C-->Class M-->Comment 注释(在指令中添加一个属性:replace:true)原创 2018-02-03 09:10:20 · 153 阅读 · 0 评论 -
DOM-5
正课:1. *****定时器 动画2. screen3. history4. ***location5. ***navigator6. ****event1. *****定时器 动画: 练习: 获取长度属性值时: 获得都是带单位的字符串,不能直接计算 都要原创 2018-02-01 14:29:23 · 157 阅读 · 0 评论 -
DOM-4
正课: 1. ***HTML DOM常用对象: Form2. BOM1. ***HTML DOM常用对象: Form: 代表一个 获取: var form=document.forms[i/id/name]; 属性: .length: 相当于form.elements.length 方法: .submit() : 专用于手动提交表单原创 2018-02-01 14:26:39 · 144 阅读 · 0 评论 -
DOM-3
正课:1. 添加/删除元素2. ***HTML DOM常用对象 select/option table/行分组/tr/td form1. 添加/删除元素: 添加: 3步: 1. 创建新的空元素: var a=document.createElement("a"); 相当于: 2. 设原创 2018-02-01 14:25:31 · 190 阅读 · 0 评论 -
DOM-2
正课: 1. ***查找 按选择器查找2. 修改: 1. ***查找: 按选择器查找: 1. 如果只找一个: var elem=parent.querySelector("selector"); 2. 如果找多个: var elems=parent.querySelectorAll("selec原创 2018-02-01 14:24:08 · 157 阅读 · 0 评论 -
DOM-1
正课:1. DOM 什么是***DOM Tree 查找 按节点间关系查找 遍历 查找API 按HTML查找(了解) 按Selector查找1. 什么是: Document Object Model 专门操作HTML内容的API 原生js: ES(核心语法)原创 2018-02-01 14:12:46 · 134 阅读 · 0 评论 -
JavaScript-13
正课:1. *****ES5 对对象的保护: 对单个属性的保护: 数据属性: 访问器属性:对对象的保护: 问题: 属性可随时直接用=赋值任何值 属性可随时被访问 可随时添加和删除属性 ——不严格! 解决: 对对象提供保护:原创 2018-01-31 12:14:45 · 129 阅读 · 0 评论 -
JavaScript-12
正课: 1. *****OOP 内置对象的原型对象 共有属性和自有属性 原型链 原型相关API*****自定义继承1. 内置对象的原型对象: 所有内置对象都是一个构造函数(除Math外) 每类内置对象都有自己的原型对象(prototype) 所有内置对象的API都保存在类型.prototype对象中 何时: 解决原创 2018-01-31 12:13:28 · 151 阅读 · 0 评论 -
JavaScript-11
正课: 1. *****作用域和作用域链2. *****闭包1. *****作用域和作用域链 作用域scope: 什么是: 一个变量的使用范围——使用 本质上作用域是一个对象——存储 作用域中的变量都是对象的成员 程序/函数的执行过程: 1. 开原创 2018-01-31 12:11:47 · 156 阅读 · 0 评论 -
JavaScript-10
正课: 1. ***日期API2. ***Error1. ***日期API 单位: FullYear Month Date Day Hours Minutes Seconds Milliseconds API: 1. 每个单位都有一个对儿get/set方法原创 2018-01-31 12:09:55 · 149 阅读 · 0 评论 -
JavaScript-9
1. 正则: 指定匹配位置2. ***String API: 替换: 衍生: 删除和格式化 切割3. ***RegExp对象1. 正则: 指定匹配位置: 三个位置: 字符串的开头 ^ 字符串的结尾 $ 比如: 开头的空字符: ^\s+ 结尾的空字符:原创 2018-01-31 12:08:13 · 162 阅读 · 0 评论