html5画布funcition,2020前端基础知识学习第一节(示例代码)
一、选择题
1. 浏览器端的存储技术有哪些()
A.cookie B.localStorage C.session D.userData
答案:A B D
分析:cookie通常用于存储用户等登录信息,能够存储的数据是有限的,而且在指定域名下所有的请求都会带上。
localStoage是H5新增用于本地存储,能够存储更多的数据,通常是5M
session服务器端与客户端建立的会话,不属于浏览器端存储技术
userData是IE专有的存储方案,可以用来存储一些数据
2. (function() { return typeof arguments; })(); 代码将会返回()
A.object B.array C.arguments D.undefined
答案:A
分析:arguments 是类数组,正常情况下typeof []会返回"object",所以typeof arguments也会返回"object"
3. function fn() { return fn; } new fn() instanceof fn; 上面的代码会输出()
A.true B.false
答案:false
分析:fn作为构造函数,如果内部没有显示的声明return语句,默认会返回一个fn的实例对象,也就是new fn() instanceof fn会返回true,
但是这里有return fn;这条语句,那么new fn()就会返回fn,所以结果为false
4. 下列哪个属性不会让div脱离文档流(normal flow)()
A.position: absolute B.position: fixed C.position: relative D.float: float
答案:C
分析:position: relative相对于自己定位,不会脱离文档流
5. 正则表达式/^d**[^d]*[w]{6}$/,下面的字符串哪个能正确匹配?()
A.***abcABCD_89 B.abc*abcABCDEF
C.123*abcABCD_89 D.123*ABCabcd-89
答案:A,C
分析:
^ 表示匹配字符必须以后面规则开始
d* 表示零个或者多个数字
* 表示只匹配字符*
[^d]* 表示匹配零个或者多个非数字字符
[w] 表示匹配字母数字下划线字符相当于[0-9a-zA-Z_]
{6} 表示要要进行匹配的字符数要大于等于6
答案A,* 属于初次匹配内容,其他的是剩下规则匹配
6. (function() { var a = b = 5; })(); console.log(b); console.log(a); 代码输出结果:()
A.5, 5 B.undeinfed, undefined C.5, undefined D.程序抛错
答案:D
分析:程序执行完之后会先打印5,然后抛错,因为var a = b = 5;相当于b = 5; var a = 5;在非严格模式下,全局环境不声明直接
赋值相当于给window对象赋值,所以相当于window.b = 5; 然而a的作用域是匿名自执行函数内,所以在全局作用域下面是访问不到的
二、简单题
7. 下面的代码输出顺序?
console.log(‘one‘);
setTimeout(function() {
console.log(‘two‘);
}, 0);
new Promise(function(resolve, reject) {
console.log(‘three‘);
resolve();
}).then(function() {
console.log(‘four‘);
});
console.log(‘five‘);
答案:one three five four two
分析:程序从上往下执行首先打印出来one,new Promise会执行他的构造函数这时候打印three,
然后因为Promise属于异步microtask,这个时候会继续执行主线程代码打印出来five,这个时候会执行microtask队列,
打印出来four,接下来执行macrotask任务队列打印出来two
8. 下面的代码输出结果?
falseStr = "false";
if (true) {
var falseStr;
if (falseStr) {
console.log("false" == true);
console.log("false" == false);
}
}
答案:false false
分析:下面的规则用于判定==运算符比较的两个值是否相等:
1.如果两个值具有相同的类型,那么就检测它们的等同性。如果这两个值完全相同,它们就相等。如果它们不完全相同,则它们不相等。
2.如果两个值的类型不同,它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性:
2.1 如果一个值是null,另一个值是undefined,它们相等。
2.2 如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。
2.3 如果一个值是true,将它转换成1,再进行比较。如果一个值为false,把它转换成0,再进行比较。
2.4 如果一个值是对象,另一个值是数字或者字符串,将对象转换成原始类型的值,再进行比较。
2.5 其他的数值组合是不相等的。
9. 下面的代码输出结果?
var length = 10;
var obj = {
length: 5,
func: function() {
console.log(this.length);
}
};
var func = obj.func;
func();
obj.func();
答案:10,5
分析:函数的作用域是在被定义时候决定,跟执行环境没有关系,所以var func = obj.func;可以理解为在全局作用域定义了func
所以func函数内的this应该是全局,浏览器环境下是window,所以length为10。obj.func函数的执行上下文对象是obj,所以
length是5
10. PNG,GIF,JPG的区别及如何选?
GIF:
256色
无损,编辑 保存时候,不会损失。
支持简单动画
支持boolean透明,也就是要么完全透明,要么不透明
JPG:
millions of colors
有损压缩, 意味着每次编辑都会失去质量
不支持透明
适合照片,实际上很多相机使用的都是这个格式
PNG:
无损,其实PNG有好几种格式的,一般分为两类:PNG8和truecolor PNGs
与GIF相比:
它通常会产生较小的文件大小
它支持阿尔法(变量)透明度
无动画支持(可通过CSS3实现动画效果)
与JPEG相比:
文件更大
无损
因此可以作为JPEG图片中间编辑的中转格式
结论:
JPEG适合照片
GIF适合动画
PNG8适合其他任何种类——图表,buttons,背景,图表等等
11. 请用CSS实现屏幕正中间有个元素A,随着屏幕宽度的增加,始终满足以下条件:
1)A元素垂直居中于屏幕中央
2)A元素离屏幕左右边距各10px
3)A元素的高度始终是A元素宽度的50%
答案:这道题目有多种实现方案,方案如下,
1.1 CSS3 flex来实现,对父元素设置样式display: flex; align-items: center;
1.2 父元素设置postion: relative; A元素设置样式position: absolute; top: 50%; transform: translateY(-50%);
1.3 父元素设置postion: relative; A元素设置:postition: absolute; top: 0; bottom: 0; margin: auto 0;
2.1 A元素margin-left: 10px; margin-right: 10px;
3.1 这里借助于padding百分比来实现,padding百分比w3c解释是:规定基于父元素的宽度的百分比的内边距
html5画布funcition,2020前端基础知识学习第一节(示例代码)相关推荐
- 计算机基础知识学习第一课,第一课计算机基础知识~.ppt
第一课计算机基础知识~ 第一章 计算机基础知识(§1.1~§1.2) [教学目标]: 识记:①.计算机的概念:②.第一台计算机的相关信息: ③.计算机的特点. 理解:计算机的分代依据及发展的方向. 应 ...
- 前端基础知识学习总结--百分比布局、Flex布局
#博学谷IT学习技术支持# 一.百分比布局:能够使用百分比布局开发网页.百分比布局, 也叫流式布局 .效果: 宽度自适应,高度固定. 二.Flex布局:能够使用Flex布局模型灵活.快速的开发网页 F ...
- 前端基础知识学习之-ShadowDOMLightDOM
DOM DOM和SAX W3C制定了一套书写XML分析器的标准接口规范--DOM. 除此以外,XML_DEV邮件列表中的成员根据应用的需求也自发地定义了一套对XML文档进行操作的接口规范--SAX. ...
- 前端基础知识学习 XML JSON RESTFUL SOAP WEBSERVICE
目录 一.Web Services 应用程序组件 什么是Web Services? 它如何工作? Web services 平台的元素: 二.SOAP 简易对象访问协议 通信协议 什么是 SOAP? ...
- python装饰器代码简洁_Python基础知识之装饰器(示例代码)
装饰器 https://www.cnblogs.com/EVA-J/articles/7194277.html 1. 装饰器的形成过程 2.装饰器的作用 3.语法糖 原则: 开放封闭原则 ------ ...
- python基础知识整理 第一节:入门记录(包含代码与执行结果)
选中一个单元格,点击Esc,再点击h键,即可出现帮助界面.
- 零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...
- 2021-7-19-OpenStack基础知识学习
OpenStack基础知识学习 参考文献:Wolf_Coder,百度百科 1,云计算 1.1,出现原因 由亚马逊公司提出.1.随着业务增加公司内部的服务器不够使用,进行虚拟化技术->2.随着公司 ...
- python前端基础知识总结 及部分练习题
python前端基础知识总结 知识总结 认识Python 发展历史 版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...
最新文章
- Swoole 源码分析——Server模块之OpenSSL(下)
- C# 常用类-IO-ClassXML
- MVC是架构模式,而不是设计模式
- pythonpptx 楷体_python-pptx 实践 4:添加形状、文本
- 机器学习实战10-Artificial Neural Networks人工神经网络简介(mnist数据集)
- python多线程插入1万条数据
- 批处理实现—循环Ping指定网段(检测网络时使用)
- wxpython安装linux_Ubuntu中安装wxPython
- 一款手机App的开发成本是多少钱?
- docker部署java项目_JAVA项目如何通过Docker实现持续部署
- 关于黑苹果耳机麦克风无法正常输入输出以及VoodooHDA启动慢 解决方法
- 基于SSM+VUE的交通事故案例库系统(前后端分离)
- 计算机网络体系结构-虚拟专用网
- iOS脚本一键生成各种尺寸的icon
- java数据结构与算法总结(二十四)--RoaringBitmap数据结构及原理
- java onmouseover_第8天:javascriptDOM小 案例、onmouseover 、onmouseout
- 专业术语-外文首字母组词的原词组
- 12306铁道部订票网站瘫痪 技术惹的祸?
- Python:人民币兑换
- 计算机图文混合排版教学设计,《Word图文混合排版》说课稿
热门文章
- 使用Spring 3.2的DeferredResult进行长轮询
- LazyInitializationException的四种解决方案–第1部分
- dsp课程设计c语言源码,DSP课程设计-基于C语言实现256点的FFT精选.pdf
- C语言数组、字符与字符串笔记
- linux 4.1.16 ftrace 进程调度,Linux内核进程调度overview(1)
- java 统计数字个数_统计数字问题(Java)
- activiti高亮显示图片_如今透明LED显示屏成为广告橱窗,它们之间有什么关联?...
- centos php支持yaf,CentOS环境下给PHP7.0安装yaf扩展
- 轨道运营管理专业自荐书_轨道运营管理专业自荐信x
- python文件运行哪一个_如何使一个python文件运行另一个?