HTML高级应用-Canvas画布

2019-09-20

目标：熟悉绘制图形和图像

Canvas属性：width、height

Canvas配套API

获取Canvas元素

var MyCanvas = document.getElementById('MyCanvas');

获取Canvas元素操作上下文getContext对象

var c = MyCanvas.getContext('2d');

用实例学习Canvas的基本使用

开始绘制：beginPath();

结束绘制/闭合路径：closePath();

清除画布：clearRect(x,y,width,height);

1. 绘制线段

涉及属性：
	strokeStyle: 线条颜色
	linewidth: 线条粗细

设计方法：
	moveTo(x,y)
	lineTo(x,y)
	stroke()
	
举例
	var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");
    
	mc.beginPath();
    mc.strokeStyle = "black";
    mc.lineWidth = 3;
    mc.moveTo(3,670);
    mc.lineTo(300,670);
    mc.stroke();

2. 绘制矩形

涉及属性：
	fillStyle

涉及方法：
	fillRect(x,y,width,height)	//实心矩阵
	strokeRect(x,y,width,height)	//空心矩阵
	fill();
	
举例
	var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");
    
	 //矩形的绘制
    mc.beginPath();
    mc.fillStyle="yellow";
    mc.strokeRect(50,100,100,50);//空心矩形 设置x,y,w,h
    mc.fillRect(50,150,100,50);//实心矩形 设置x,y,w,h

3. 绘制圆形

涉及方法：
	arc(x,y,r,beginAngle,endAngle,acticlockwise)
		圆心，半径，弧度，顺逆时针
		255,255,0*Math.PI/180,180*Math.PI/180
	stroke()	//空心圆
	fill()		//实心圆
	
举例
	var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");
	
	实心圆
    mc.beginPath();
    mc.strokeStyle = "black"
    mc.fillstyle = "black";
    mc.lineWidth = 3;
    mc.arc(350,350,200,90*Math.PI/180,270*Math.PI/180,false);
    mc.fill();

4. 绘制文字

涉及属性：
	font("style(italic/bold),size,type")
	context.font = "50px Arial"
	
涉及方法：
	strokeText(str,x,y)		//空心字
	fillText(str.x.y)		//实心字
	
举例：
    var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");

	mc.beginPath();
    mc.font = "24px 微软雅黑";
    var x = 0;

    function pwd(){
        x ++;
        if(x > 500){
            x = 0;
        }
        mc.clearRect(0,630,700,100);
        mc.fillText("蒋俊是个大傻逼",x,650);
    }
    setInterval("pwd()",10);

5.图像翻转

设计方法：
	save();		//产生一个与原图相同的一个异次元空间
	translate(x,y);		//设置旋转点
	rotate(angle);		//设置弧度
	restore();		//把旋转后的异次元空间映入原图
	
举例：
    var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");

	mc.beginPath();
    mc.strokeStyle = "black";
    mc.lineWidth = 3;
    mc.moveTo(3,670);
    mc.lineTo(300,670);
    mc.stroke();

    mc.save();
    mc.translate(3,670);
    mc.rotate(-90*Math.PI/180);

    mc.beginPath();
    mc.strokeStyle = "black";
    mc.lineWidth = 3;
    mc.moveTo(0,0);
    mc.lineTo(297,0);
    mc.stroke();

    mc.restore();

6. 绘制渐变图形

涉及方法：
	var color = mc.createLinearGradient(0,0,0,500)		//创建渐变
	color.addColorStop(0,"blue");
	color.addColorStop(1,"yellow");		//追加颜色
	mc.fillStyle = color;
	mc.fillRect(0,0,500,500);
	
举例：
	var myCanvas = document.getElementById('myCanvas');
    var mc = myCanvas.getContext("2d");
    
	//绘制一个渐变矩形，首先需要去预设渐变效果
    var color = mc.createLinearGradient(0,0,500,0);//设置渐变方向
    color.addColorStop(0,"blue");//给我们的渐变添加颜色
    color.addColorStop(0.2,"red");//给我们的渐变添加颜色
    color.addColorStop(0.6,"yellow");//给我们的渐变添加颜色
    color.addColorStop(1,"green");//给我们的渐变添加颜色

    mc.fillStyle = color;
    mc.fillRect(50,300,300,150);//实心矩形 设置x,y,w,h

7. Canvas存储

1 2	设计属性： window.location=mc.toDataURL("image/png").replace("image/png","image/octet-stream");

HTML5多媒体标签

2019-09-20

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器哦之外，使用得最多的工具就是Flash，但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>

注意：需要使用流媒体文件格式（如mp4、webm、ogg等）

1. 嵌入式/音频

video

<video src = "文件路径" id = "" width = "" height = "">如果视频无法播放则会显示这段话</video>

audio

<audio src = "文件路径" id = "" width = "" height = "">如果音频无法播放则会显示这段话</audio>

2. source,指定不同媒体来源

并不是所有的浏览器都支持所有的媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一定要指定多种格式的媒体来源

src：指播放媒体的URL地址

type：媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式

举例

<video id = "video_1">
	<source src = "sample.ogv" type = "video/ogg">
	<source src = "sample.mov" type = "video/quicktime">
	视频播放器无法使用
</video>

<audio id = "audio_1">
	<source src = "" type = "" >
    <source src = "" type = "">
    音频播放器无法使用
</audio>

属性

属性值	描述
width、height	播放控件的宽度和高度
controls	默认播放控制条是否显示
autoplay	自动播放
preload	预加载
poster	视频预览图（视频不用或者不可用时）
loop	循环播放
currentTime	当前播放位置
duration	文件总的播放
played	是否播放中
paused	是否暂停
ended	是否播放完毕
defaultPlaybackRate	播放速度
playbackRate	设置播放速度1
volume	音量 0-1
muted	静音 true/false

方法

play()：播放

pause()：暂停

3.自定义媒体播放器

自定义视频播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #myVideo{
            position: relative;
            width: 640px;
        }
        #p{
            width: 50px;
            height: 50px;
            border:3px solid skyblue; 
            border-radius: 50%;
            background: none;
            font-size:24px;
            font-weight: bold;
            color: skyblue; 
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <div id="myVideo">
        <video id="video1">
            <source src="./a1.mp4" type="video/mp4"/>
            <source src="./a1.webm" type="video/webm"/>
            <source src="./a1.ogg" type="video/ogg"/>
            您的浏览器不支持该插件!
        </video>
        <input type="button" value=">" id="p" onclick="pl()" />
        <div id="showTime"></div>
        <input type="range" min="0" max="1" step="0.1" id="ra" 		oninput="getVolume()"/>
        <input type="button" value=">>" onclick="up()" />
    </div>
    
    <script>
        var v = document.getElementById('video1');//媒体元素
        var p = document.getElementById('p');//播放按钮
        var showTime = document.getElementById('showTime');//显示时间DIV
        var ra = document.getElementById('ra');//滑块
        //P按钮移入移出作业
        function pl(){
            if(v.paused){
                v.play();
                p.value='||';
            }else{
                v.pause();
                p.value='>';
            }
        }
        //获取媒体总时间时，必须文档装载完毕后，所以必须在onload事件后获取
        window.onload=function(){
            s = parseInt(v.duration);
        }
        //获取当前播放的时间
        setInterval('current()',1000);
        function current(){
            //把当前播放时间显示到对应div
            showTime.innerHTML = parseInt(v.currentTime) + '/' +s;
        }
        //将滑块的值赋值给媒体元素
        function getVolume(){
            v.volume = ra.value;
        }
        //快放
        function up(){
            v.playbackRate = v.playbackRate*2;
        }
    </script>
</body>
</html>

自定义音频播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <audio id="audio1" controls>
        <source src="./1.mp3" type="audio/mp3"/>
        <source src="./1.cda" type="audio/cda"/>
        <source src="./1.flac" type="audio/flac"/>
        您的浏览器不支持该插件！
    </audio>
    <input type="button" onclick="next()" value="下一曲" />
    <script>
        var MyAudio = document.getElementById('audio1');
        var data = ['1.mp3','2.mp3'];//保存我的歌曲库
        var index = 0;//歌曲当前的索引位置
        var dataLength = data.length;//获取歌曲总数量
        //制作上一曲
        function next(){
            index++;
            if(index>=dataLength){
                index=0;
            }
            var getdata = data[index];
            MyAudio.src = getdata;
        }
    </script>
</body>
</html>

jQuery的基本介绍及用法

2019-09-14

复习

iconfont提供了图标
moment提供了Date的api
lodash封装了数组的api
jQuery封装了DOM、BOM、ECMAScript

DOM问题(jQuery的出现可以完美解决dom中的问题)

获取元素比较复杂，querySelector【兼容性较差】
dom操作较为复杂，不能进行批量操作

引用jQuery

jQuery = $

在script直接使用$即可代表jQuery

使用jQuery

用法	描述
$(function(){})	当文档加载完毕后回调函数执行
$(“`<div>`one`</div>`“)	创建dom元素，并且将其转换为jquery对象
$(“选择器”)	通过选择器找到满足要求的dom对象，并且封装到jquery对象中
$(dom对象)	将一个dom对象转换为jquery对象

jQuery对象和dom对象区别

jquery更像NodeList,是一个类数组对象，但是比NodeList厉害多了，jquery构造函数原型中有超级多的方法

特点

1.兼容性好
2.简化dom操作
3.链式操作（dom操作方法返回值为当前jQuery对象）
4.不污染顶级变量 $/jQuery

jQuery对象

jQuery对象，类数组对象。数组中的元素是DOM对象

var one = document.getElementById("one")
one是Element的实例，可以调用Element、Node

var $one = $(one)
$one是jQuery的实例，可以调用jQuery

属性、css

attr():获取或者设置attribute（核心、自有、自定义）

参数：
1.attr(key)
2.attr(key,val)

prop():获取或者设置property（核心、自有）

参数：
1.prop(key)
2.prop(key,val)

removeAttr(attrName)：移除attribute

removeProp(propName)：移除property

val()：获取或设表单元素的值

css()：获取或者设置样式

参数：
1.css(key)
2.css(key,val)

addClass():为每个匹配的元素添加指定的类名

removeClass()：为每个匹配的元素移除指定的类名

hasClass()：检查当前的元素是否含有某个特定的类，如果有，则返回true

DOM操作

API	操作
clone()	克隆jQuery对象
wrap()	为选中元素添加一个父元素
append()	为选中元素追加一个子元素
prepend()	为选中元素插入一个子元素
after()	在当前元素后添加一个兄弟元素
before()	在当前元素前添加一个兄弟元素
empty()	清空子元素
remove()	移除当前元素
replace()	替换元素
html()	获取或设置一个元素的html内容
text()	获取或试着一个元素的text内容

遍历

API	操作
each(function(index,item){})	以每一个匹配的元素作为上下文来执行一个函数
map(function(index,item){})	将一个数组中的元素转换到另一个数组中
eq()	获取类数组中的某一个jQuery对象
filter(expr	obj
first()	获取第一个元素
last()	获取最后一个元素
not(selector)	从匹配元素的集合中删除与指定表达式匹配的元素
parent([`selector`])	取得一个包含着所有匹配元素的唯一父元素的元素集合
parents(selector)	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
children([`selector`])	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find(selector)	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
next()	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
prev()	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
siblings()	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

事件机制

on(eventType[,代理],handler)

off(eventType[,代理],handler)

click(handler);

mouseover()

mouseout()

focus()

blur()

关于DOM中事件的介绍

2019-09-11

1.介绍（或者时DOM事件怎么使用和获取数据）

获取事件源：使用dom选择器去选择你想要绑定事件的dom
为事件绑定事件处理函数
事件类型：click、focus、blur、mouseover、mouseout、….
事件处理函数：当绑定的事件类型被触发的时候该函数执行
从事件对象中获取事件详细信息
当事件处理函数执行的时候，dom会将事件对象传递给事件处理函数event

2.事件流

前提条件：元素嵌套，每层元素上绑定事件

<div class="outer">
    <div class="center">
        <div class="inner">

        </div>
    </div>
</div>

1.事件捕获顺序：外层 -> 内层（上方代码捕获顺序为：outer > center > inner）
2.事件冒泡：内层 -> 外层（上方代码冒泡顺序为：inner > center > outer）

3.事件对象

属性或API	事件对象
target	目标对象，用户操作的那个dom对象
currentTarget	当前目标对象，表示事件处理函数绑定的那个dom对象
stopPropagation()	停止冒泡
preventDefault()	阻止默认行为
keyCode	按键值

4.事件类型

属性	当以下情况发生时，出现此事件
click	鼠标点击某个对象
dbclick	鼠标双击某个对象
keyup	键盘弹起时
keydown	鼠标按下时
keypress	鼠标完成一次操作时（鼠标按下弹起）
focus	元素获得焦点
blur	元素失去焦点
mouseup	某个鼠标按键被松开
mousedown	某个鼠标键被按下
mouseover	光标移动到元素上，支持子元素
mouseout	光标移出元素，支持子元素
mouseenter	光标移动到元素上，不支持子元素
mouseleave	光标移出元素，不支持子元素
onload	某个页面或图像被完成加载

5.事件代理

原理：将事件绑定在当前元素的父元素上而非当前元素上，这时候当点击当前元素的时候，执行父元素上绑定的事件处理函数，可以通过event.target获取当前元素

好处：父元素代理子元素所有的事件，子元素可以动态添加和删除而不用频繁绑定事件

6.事件绑定的方式

onxxx:属性，简单，兼容性比较好
addEventListenner、removeEventListener:方法，非IE低版本才能兼容
attachEvent、detachEvent：方法，IE低版本下才能兼容

DOM的基本介绍及方法

2019-09-02

Dom是JS操作HTML的api

在HTML中插入相关代码

在HTML中添加CSS代码（复习）

在HTML中的元素中加入style属性
在HTML中加入style标签即<style></style>
在head中引入相关CSS文件或者第三方CSS即link href = "CSS文件名或链接.CSS"

在HTML中添加js代码

事件属性/href
在HTML中加入script标签即<script></script>
在HTML中引入相关script文件或者第三方script即script src = "script文件名或链接.js"

DOM构造函数树

1
2
3

                                         Node(节点)
Doucument（文档）              Element（元素）       Text（文本）             Comment（注释）
HTMLDoucument（html文档）   HTMLElement（HTML元素）

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

请看下面的HTML片段

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的HTML中：

<html>节点没有父节点；它是根节点
<head>和<body>的父节点是<html>节点
文本节点”Hello world!”的父节点是<p>节点

并且：

<html>节点拥有两个子节点：<head>和<body>
<head>节点拥有一个子节点：<title>节点
<title>节点也拥有一个子节点：文本节点”DOM教程”
<h1>和<p>节点是同胞节点，同时也是<body>的子节点

并且：

<head>元素是<html>元素的首个子节点
<body>元素是<html>元素的最后一个子节点
<h1>元素是<body>元素的首个子节点
<p>元素是<body>元素的最后一个子节点

第三方JS库【操作HTML】

1.实例化（如何创建对象）

var one = document.getElementById("one");

实例化不需要去实例document，浏览器已经自动实例化好了，直接用就行

2. API

1.node

html中所有的内容都可以认为是节点，比如：doctype、html、head、注释、div内容’hello’、空格、回车都是节点

属性：
        1.获取节点基本信息的属性
                nodeType
                        ELEMENT_NODE       1
                        TEXT_NODE          3
                        COMMENT_NODE       8
                        DOCUMENT_NODE      9
                nodeName
                        document           #document
                        文本               #text
                        元素               标签名大写，如DIV
                nodeValue
                        文本，注释         内容

        2.表示层次结构的属性
                parentNode:父节点
                parentElement:父元素
                ownerElement:当前元素所在的文档对象
                childNodes:孩子节点【类数组】
                firstChild:第一个孩子节点
                lastchild:最后一个孩子节点
                nextSibling:下一个兄弟节点
                previousSibling:上一个兄弟节点

方法：
        1.父节点调用的方法
                appendChild():在父节点中添加一个新的子节点
                insertBefore(new,reference):在某个子节点上方插入一个新的子节点
                replaceChild(new,old):用新的子节点取代一个旧的子节点
        
        2.其他
                cloneNode([boolean]):克隆一个旧节点，如果参数为true，表示克隆

2.Document

文档，表示整个HTML文档或者xml文档，一般情况下一个HTML可以使用一个Document的实例来表示，即document

属性
        body
        head
        title

方法
        getElementById()：通过某个元素id来获取相关元素
        getElementsByClassName()：通过某个元素Class来获取相关元素【一般为一个类数组】
        getElementsByTagName()：通过某个元素名称如div、p来获取相关元素【一般为一个类数组】
        getElementsByName()：通过某个元素的name来获取相关元素【一般为一个类数组】

3.Element

元素，HTML文档中所有的元素都可以映射为一个Element实例（如body/div/p/span…..）

属性
        1.元素属性相关的属性
                id
                className
            自有属性
                name
                href
                src
                alt
                target
                ...
            自定义属性
        
        2.元素层次结构相关属性
                children:子代元素【一般为一个类数组】
                firstElementChild:第一个子元素
                lastElementchild:最后一个子元素
                nextElementSibling:下一个兄弟元素
                previousElementSibling:上一个兄弟元素
                innerHTML:获取或设置一个元素内的html内容
                innerText:获取或设置一个元素内的文本内容

1
2
3

方法
        getAttribute(key):获取某个元素的内容
        setAttribute(key):设置某个元素的内容

4.Text

<div>hello world</div>
文本内容，如上’hello world’表示文本内容

5.Comment


注释如上方

关于构造函数的存储方式及调用方式

2019-09-01

无标题.png

上图的讲解

内存分为堆区和栈区，构造一个构造函数的实例以及构造函数的定义都是保存在堆区，并各自开辟一个空间。

上面的Dog的构造函数现在开辟了一个的空间，并且栈区中B001这个空间，并在栈区中构建了两个空间，一个是B001，一个是B002，Boo1中拥有一个指向原型函数的指针，叫做prototype，B002中拥有一个指向构造函数的指针叫做constructor，原型函数中包含方法，且B001和B002互相指向，即为夫妻关系。

var d1 = new Dog()，构造了一个叫做d1的Dog的实例，并且在堆区中开辟了一个空间，并且指向栈区中的B003，栈区中的B003中具有d1的所有变量以及Dog的构造函数（及d1的母亲）留给他的一个指向Dog的原型函数的一个指针(__proto__)，因此d1可以使用Dog原型函数中的方法。

下方的Person的构造函数，基本原理和上方一模一样，只不过Perosn的原型函数改成了Dog的原型函数，下方代码中有具体的介绍。

function Dog(name,age){
    this.name = name;
    this.age = age;
} //构造Dog的构建方程

Dog.prototype= {
    constructor:Dog,
    sayName:function(){
        console.log("My name is",this.name);
    },
    sayAge:function(){
        console.log("My age is",this.age);
    },
    sayGender:function(){
        console.log("My gender is",this.gender);
    }
} //在Dog的原形函数（就是prototype，并且实例的方法调用都是来自prototype，所以在数组的函数重构时，都是在Array.prototype.xxx中加入）中加入一些方法

function Person(name,age,gender){
    Dog.call(this,name,age);
    this.gender = gender;
}  //构造Peroson的构造函数

Person.prototype = new Dog(); //将Person的原型函数(prototype)改成Dog的prototype，更换方式为将person的prototype变为Dog的实例
Person.prototype.constructor = Person; //将Person的创造函数变为他本身，如果没有这一步那么之后的console.log(person的实例)，输出的实例将是Dog的

Person.prototype.sayHello = function(){
    console.log("Hello world");
} //在Person的prototype（即Dog的prototype）中加入SayHello这个方法

var d1 = new Dog("jiangjun",21); //创建一个Dog的实例
var p1 = new Person("xiaomiao",21,"male"); //创建一个Person的实例

console.log(d1); //输入Dog实例
console.log(p1); //输出Person的实例

d1.sayName(); //d1调用Dog的prototype中SayHello这个方法
d1.sayAge();  //d1调用Dog的prototype中sayAge这个方法

//下面相类似
p1.sayName(); 
p1.sayAge();
p1.sayGender();
p1.sayHello();

数组部分算法重构

2019-08-29

1.Every

Array.prototype.myEvery = function(handler){
    var flag = true;

    for(var i = 0; i < this.length; i ++){
        var result = handler(this[i],i,this);

        if(result){
            continue;
        }else{
            flag = false;
            break;
        }
    }

    return flag;
}

2.Some

Array.prototype.mySome = function(handler){
    var flag = false;

    for(var i = 0; i < this.length; i ++){
        var result = handler(this[i],i,this);

        if(!result){
            continue;
        }else{
            flag = true;
            break;
        }
    }

    return flag;
}

3.foreach

Array.prototye.myForEach = function(handler){
    
    for(var i = 0; i < this.length; i ++){
        handler(this[i],i,this);
    }
}

4.filter

Array.prototype.myFilter = function(handler){
    var arr = [];
    var flag = 0;
    
    for(var i = 0; i < this.length; i ++){
        
        var result = handler(this[i],i,this);

        if(result){
            arr[flag] = this[i];
            flag ++;
        }else{
            continue;
        }
    }

    return arr;
}

5.map

Array.prototype.myMap = function(handler){
    var arr = [];

    for(var i = 0; i < this.length; i ++){
        arr[i] = handler(this[i],i,this);
    }

    return arr;
}

6.sort(加函数版)

Array.prototype.mySort = function(handler){
    
    for(var i = 0; i < this.length - 1; i ++){
        for(var j = i + 1; j < this.length; j ++){

            var result = handler(result[i],result[j]);

            if(result < 0){
                result = 0;
            }

            if(result){
                var temp;
                temp = this[i];
                this[i] = this[j];
                this[j] = temp;
            }else{
                continue;
            }
        }
    }
}

7.pop

Array.prototype.myPop = function(){
    var item = this[this.length - 1];
    this.length --;
    return item;
}

8.push

Array.prototye.myPush = function(){
    var len = this.length;

    for(var key in arguments){
        var item = arguments[key];
        this[len + (+key)] = item;
    }

    return this.length;
}

9.shift

Array.prototype.myShift = function(){

    var item = result[0];

    for(var i = 0; i < this.length - 1; i ++){
        arr[i] = arr[i + 1];
    }

    this.length --;

    return item;
}

10.unshift

Array.prototype.myUnshift = function(){
    
    var arr = [];
    var len = this.length;
    var arg = arguments.length;
    var arr.length = len + arg;

    for(var i = arr.length - 1; i > arg - 1; i --){
        arr[i] = this[i - arg];
    }

    for(var key in arguments){
        var item = arguments[key];
        arr[key] = item;
    }

    this.length = arg + len;

    for(var i = 0; i < this.length; i ++){
        this[i] = arr[i];
    }

    return this.length;
}

JavaScript的一些基本介绍及应用

2019-08-26

Javascript组成

1.ECMAScript5 （Javascript语法标准）

JS标准语法

2.DOM (document object model)

JS操作HTML

3.BOM（browser object model）

JS操作浏览器

JS解释器

1.在所有的主流浏览器中都具备JS解释器

2.JS运行在浏览器端：动画、表单验证、Ajax数据交互

3.JS运行在服务器端：JS转换、代码编译、操作数据库、流、网络、IOT

变量

强类型

变量的数据类型取决于变量的声明

弱类型

变量的数据类型取决于值的类型

变量类型

基本数据类型

数据类型	变量
数字类型	number
字符串类型	string
布尔类型	boolean
空对象	null object
未定义	undefined
a是什么类型	typeof a
如果result是NaN，那么这个函数返回true	isNaN(result)
如果result是一个有穷数，返回true	isFinite(result)

引用数据类型

数组、函数、对象、正则表达式

基本数据类型与引用数据类型在内存中的表示

基本

var a = “terry”;

引用

var b = {
name:”terry”,
age:12,
gender:”male”
}

基本数据类型的值保存在栈区;引用数据类型的引用地址保存在栈区，内容保存在堆区

操作符

算术操作符

进行的操作	算数操作符

| +=

| -=

| *=
/ | /=
% | %=

赋值操作符

var result = 1 + 2;
result += 3;
==等价于==>
result = result + 3;

一元操作符

操作	一元操作符
自增	++
自减	–

前置：先自增、减再参与其他运算
后置：先参与其他运算，再自增、自减

逻辑运算符

操作	逻辑运算符
当第一个表达式为假的时候，不再计算第二个表达式，整个表达式为false	&&
当第一个表达式为真的时候，整个表达式的结果为true，不再计算第二个	11
将表达式的结果颠倒，而且具有将其他数据类型转换为boolean的作用	！

比较运算符（比较栈区的值）【返回类型为Boolean】

比较对象的时候比较的是对象的引用

==
！=

先比较数据类型，如果数据类型不一致，会直接返回false，如果数据类型一致，再比较值

===
!==

三目运算符

exp1 ? exp2 : exp3

当exp1为真，返回exp2，否则返回exp3

位运算符(number，先将number转换二进制再运算)

操作	位运算符
异或	^
位与	&
位或	1

拼接运算符

当使用“+”，操作符中出现了字符串，那么肯定是拼接运算

类型转换

其他数据类型转换为Boolean

!!v

Boolean(v)

其他数据类型转换为String

v + “”

String(v);

v.toString();

其他数据转换为number

+v

-(-v)

Number();

流程控制语句

1.分支语句

1
2
3

if(条件){
    进行的操作
}

if(条件){
    进行的操作
}else{
    不是if那个条件，又该运行什么操作
}

if(){
    
}else if(){

}else{

}

switch(所要判断的值){
    case 某个条件:{
        操作
    }
    ....

    default:{
        case的条件都没有所进行的操作
    }
}

2.循环语句

三要素：初始化条件，结束判定条件，迭代

1.for循环语句

for(初始化条件;结束判定条件;迭代){
循环体
}

2.前置判断循环while循环

初始化条件
while(结束判定条件){
循环体
迭代
}

3.后置判断循环do-while循环

初始化条件
do{
循环体
迭代
}while(结束判定条件);

对象

1.介绍

复杂的数据类型，引用数据类型，一般情况下，对象中包含了多个属性和方法

2.对象创建方式

1.对象字面量

对象使用”{}”作为边界，对象是由多个属性（方法是一种特殊的属性）来组成，每个属性之间通过”,”分割，属性名与属性值之间通过”:”分割。属性名可以不使用双引号，当属性名中包含特殊字符一定要使用双引号，属性值一般为常量或者具体的值，也可以变量

2.使用构造函数创建对象

var obj = new Object();

3.属性的访问：

点访问符

对象名.属性名

中括号访问符

对象名[“属性名”]

4.所有的对象直接或者间接的继承Object，也就是说所有的对象都可以调用Object原型中的方法和属性

Object.prototype.xxx

constructor:构造函数，谁创建了当前的对象

hasOwnProperty(prop):判断某个属性是否属于当前对象的自有属性

propertyIsEnumerable(prop):检测某个属性是否可以被枚举

isPrototypeOf(prop):检测某个属性是否是原型链中的属性

toString():返回该对象的字符串信息

valueOf():返回该对象的数字描述

5.删除属性

delete obj1.name

6.对象序列化和反序列化

将js对象转换为json字符串

var json = JSON.stringify(obj)

将JSON字符串转换为js对象

var obj = JSON.parse(json)

7.对象的遍历

var obj = {
    name:"terry",
    age:12;
}
var arr = ["terry","larry"];

for(var key in obj){
    //如何获取属性名
    var value = obj[key];
}

obj可以为对象或者数组;key表示对象的属性名或者是数组的索引;在运行的时候，每次
从obj中获取一个属性名或者索引赋值给key，然后执行循环体，循环.....

8.in关键字

prop in obj
检测prop是否可以被obj调用

函数（方法）

1.函数的用处

1.使用函数封装某些功能代码，执行特定功能

2.使用封装创建对象的模板【构造函数】面向对象

2.函数的使用（功能）

2.1函数的定义

1）函数声明

1
2
3

funcftion 函数名(形参){
    函数体
}

2) 函数表达式

1
2
3

var 函数名 = function(形参){
    函数体
}

2.2函数的调用

函数名(实参)

函数名.call(this,实参列表);

函数名.apply(this,实参数组);

函数声明会提升

如果一个函数使用函数声明的方式来定义，那么再函数定义之前就可以调用该函数

函数的作用域

如果一个变量声明再函数中，那么这个变量只能在函数中访问，当函数执行完毕后，这个变量就会被释放掉

函数内部属性

只能在函数运行的时候才能确定的属性，只能在函数内部访问。

1.形参

2.arguments（接受实参的真正所在，类数组对象）

3.this

如何判断this的值为谁：

如果函数使用”()”来调用，那看一下括号前面是不是函数名，如果是，看函数名前面有没有对象，如果有，this指向该对象，否则，指向全局对象(window/global)
如果通过call,apply来调用,this为用户手动指向的那个对象

值传递和引用传递

var a = 3;
var b = a;   //b为3     值传递

b ++;
console.log(a);

var a = {name:"terry",age:12};
var b = a;      //a为指针，b为指针      引用传递

b.age ++
console.log(a.age);

数组

作用

存放多个数据的集合

定义方式

1.数组字面量

1 2	var name = "terry"; var arr = [name,1,true,"hello",null,{name:"a"},function(){}];

2.构造函数 Array

Array继承Object
通过Array构造函数构建出来的对象可以调用Array原型中的方法，还可以调用Object原型中的方法

var arr = new Array();
var arr = new Array(length);
var arr = new Array(item1,item2,......);

arr -> Array.prototype -> Object.prototype

数组访问方式

中括号访问符，索引从0开始，如果指定索引的位置没有值，返回undefined

数组内存

var arr = ["terry",12,[1,2,3]];

arr是变量，保存在栈区
arr是引用数据类型的变量，栈区保存的引用地址，数组的值保存在堆区

数组的属性

数组也是一种对象，length是表示数组长度的属性，length表示数组中元素的个数

数组的遍历(循环遍历索引)

var arr = [1,2,3,4,5];

1.使用for循环

for(var i = 0; i < arr.length; i ++){
    var val = arr[i];
    console.log(val);
}

2.使用while

3.使用do-while

4.使用增强for循环

1
2
3

for(var key in arr){
    var val = arr[key];
}

数组相关的API

1.添加元素移除元素相关【改变原值】

push(p1,p2,….);
入栈，在数组的最后添加一个元素
参数：要入栈的元素
返回值：数组长度
pop();
出栈，从数组的最后去除一个元素
参数：none
返回值：出栈的元素
shift();
出队，将数组中第一个元素取出来
参数：none
返回值：出队的元素
unshift(p1,p2,….);
插队，将元素插入在数组的最前面
参数：要插队的元素
返回值：插队后队列的长度

2.排序方法【改变原值】

sort()
按照字符在字符编码表中出现的位置进行排序
sort(conparator)
comparator为一个比较器函数，函数可以接受两个值a,b; 当a位于b之前的时候返回

3.序列化方法

toString():将数组转换为字符串，数组中的元素通过逗号连接
join(v):将数组转换为字符串，数组中的元素通过v连接
JSON.stringify():将数组转换为JSON字符串

4.截取方式

concat()【不改变原值】
将参数中的数组和当前数组合并为一个数组
参数：多个数组
返回值：合并后的数组
slice(begin,end)【不改变原值】
从当前数组中截取一个子数组并取范围
参数：begin 起始位置；end 结束位置
返回值：截取到的子数组
splice(begin,delete[p1,p2,p3…])【改变原值】
从数组中删除、插入、更新元素
参数：
begin：起始位置（删除，插入）
delete：删除的个数
p1,p2,….：插入的值
返回值：删除的元素组成的数组

5.迭代方法

forEach(function(item,index,arr){})
遍历当前数组
参数：function(item,index,arr){}
每次遍历一次，这个匿名函数就会被调用一次，forEach将当前遍历的元素，索引，当前数组当做实参传递这个匿名函数
every(function(item,index,arr){})
判断数组中所有的元素是否满足回调函数中给定的条件
参数:function(item,index,arr){}
当每次回调函数返回值为true，every方法的结果就为true，
当回调函数返回值为false，every方法的结果就为false
some(function(item,index,arr){})
判断数组中是否有满足条件的元素
参数：function(item,index,arr){}
当回调函数返回true，some方法的结果就为true
当每次回调函数返回false，some方法的结果才为false
filter(function(item,index,arr){})
参数：function(item,index,arr){}
当回调函数返回true，当前元素就会被添加到返回值数组中
返回值：数组
map(function(item,index,arr){})
参数：function(item,index,arr){}
回调函数可以返回任意类型的值，这些值都会被添加到map方法的返回值数组中
返回值：数组

6.查找方法

indexOf()
lastIndexOf()

包装器类型

Number

Boolean

String

String.prototype.xxx

函数	描述
length	获取字符串中字数的子量
charAt(index)	获取指定索引处的字符
charCodeAt(index)	获取指定索引处的字符编码
indexOf()	获取指定字符在字符串中的索引
lastIndexOf()	获取指定字符在字符串中的所有，从后往前
concat()	连接两个字符串
slice(begin,end)	截取子字符串，begin开始位置，end结束位置，不包含结束位置
substring（begin，end)	截取子字符串，begin开始位置，end结束位置，不包含结束位置
substr(begin,length)	截取子字符串，begin开始位置，length截取的字符的个数
trim()	删除字符串左右两边的空格
toUpperCase()	转换为大写
toLowerCase()	转换为小写

RegExp

RegExp.prototype.xxx

search(RegExp)

测试，类似于test(),不支持global
返回值匹配内容的索引

match(RegExp)

查找匹配的内容
返回值数组，保存了匹配的内容

Math对象

Math.min()：返回最小值

Math.max：返回最大值

Math.random():获取0~1之间的随机小数

Math.round():四舍五入

Math.ceil():向上舍入

Math.floor():向下舍入

正则表达式

1.实例化正则表达式对象

1.构造函数模式

var pattern = new RegExp(“正则表达式”,”模式”);
var pattern = new RegExp(“[0-9]{4}-[0-9]{7}”,”g”);

2.正则表达式字面量

var pattern = /正则表达式/模式
var pattern = /[0-9]{4}-[0-9]{7}/gim

2.正则表达式

字符类

字符	描述
.	匹配任何单个字符
\d	匹配任意数字，等价于[0-9]
[0-9]	匹配中扩展任意一个字
\D	匹配任意非数字
[^0-9]	等价于\D，上箭头在中括号中表示非
^[0-9]	表示任意一个数字作为一行的开始
\w	字符，等价于[a-zA-Z0-9_]
\W	非字符，等价于[^a-ZA-Z0-9]
\s	空白字符，tab,return,space
\S	非空白字符

分组

/[a-z][0-9]/ig:匹配一个字符后拼接一个数字
/([a-z])([0-9])/ig:匹配一个字符后拼接一个数字，分组匹配字符，分组匹配数字

数量词

数量词	描述
exp(3)	将前面的表达式匹配三次
exp(3,5)	将前面的表达式匹配3~5次
exp(3,)	将前面的表达式匹配3+次
exp*	将前面的表达式匹配0次或多次
exp+	将前面的表达式匹配1次或多次
exp?	将前面的表达式匹配0次或一次

贪婪匹配（默认情况下）: /\d{2,}/【尽可能多的匹配】

非贪婪匹配：/\d{2,}?/【尽可能少的匹配】

3.模式

i：ignoreCase
g：global
m：multiline

4.引用

属性	描述
lastIndex	如果模式中包含g,每次执行test或者exec的时候，都会维护这个属性，下一次搜索开始的位置;如果模式中不包含g,lastIndex为0
ignoreCase	如果模式中包含i，返回true
global	如果模式中包含g，返回true
multiline	如果模式中包含m，返回true
source	正则表达式的字符串表示
flags	正则表达式模式的字符串表示

方法	描述
test(str)	使用正则表达式对象测试str，如果str满足正则表达式返回true,否则返回false
exec(str)	从str中查找出满足正则表达式的字符串

关于Linux的特点、基本操作及用法

2019-08-25

Linux的特点

性能强劲，运行稳定，一般作为服务器
整个操作系统可以被压缩成很小的一个文件，容易植入一些硬件设备中
开源免费(linux源代码)
对于初学者容易建立编程思维，是学习编程语言最好的环境
没有盘符的概念，所有的文件都处于根目录下，目录也是一种特殊的文件

Linux的使用

用户管理

1.创建新用户：`$ aduser + 用户名称`

2.删除用户：`$ userdel -r 用户名`

3.切换用户：`$ su - 用户名`

4.修改用户：`$ usermod -g 1008 zhangsan`(将zhangsan的组id换成1008)

5.修改组消息：`$ groupmod -n group0 boss`(将组名boss换成group0)

Linux目录结构

路径	描述
/home	普通用户家目录(默认情况下，普通用户只能在用户家目录中进行更新操作)
/root	超级管理员的家目录
/etc	系统配置文件目录
/opt	第三方文件解压安装目录
/usr	文件的默认目录
/var	包含系统一般运行时要改变的数据
/sys	系统目录
/dev	包含了所有Linux系统中使用的外部设备

文件系统

1.新建目录

$ mkdir linux es5 es6:直接在当前目录创建es5、es6文件
$ mkdir -p day01/a/b/c:在多个嵌套的文件夹中创建文件

2.新建文件/修改最近访问时间

$ touch 文件名:如果指定的文件名不存在，创建该文件。如果存在，修改最近访问时间为当前时间

3.拷贝文件或者目录

$ cp a.txt a.txt.bak:拷贝a.txt并将拷贝文件名设为a.txt.bak
$ cp -r dir1 dir2:递归处理，将指定目录下的所有文件与子目录一并处理。

4.连接

命令行	描述
`$ ln a.txt`	创建硬连接(防止误删除，多个指针指向同一个inode)
`$ ln -s a.txt a.txt.s`	创建软连接(快捷方式)

5.移动

命令行	描述
`$ mv a.* dir1`	将前缀名为a的所有文件移动到dir1文件夹内
`$ mv a b`	将a文件的移动到b文件夹中，如果b不是文件目录，则将a改名为b,并覆盖己存在的同名文件

6.删除

命令行	描述
`$ rm a.txt`	删除a.txt文件
`$ rm -r dir2`	删除dir2文件目录
`$ rmdir`	只能删除空目录

7.重定向

命令行	描述
`$ date > a.txt`	将当前时间打印到a.txt中，如果a.txt中有内容则会覆盖掉
`$ date >> a.txt`	将当前时间打印到a.txt中，如果a.txt中有内容则会追加在后面
`$ more /etc/passwd > b.txt`	将etc目录下的passwd中的内容打印到b.txt中
`$ ls -l /etc > c.txt`	将/etc下的内容以长内容形式打印到c.txt中

8.压缩与解压缩

压缩

压缩文件后缀名	压缩形式	含义
.gz	gzip	纯压缩
.bz2	bzip2	纯压缩
.zip	zip	打包压缩

打包命令行

压缩形式	命令行
gzip	`$ gzip a.txt`
bzip2	`$ bzip2 a.txt`
zip	`$ zip all.zip *.txt`

解压缩

压缩形式	命令行
gzip	`$ gunzip a.txt.gz`
bzip2	`bunzip2 a.txt.bz2`
zip	`$unzip all.zip`
文件夹中的压缩文件解压	`$ unzip all.zip -d dir2`

归档：tar

参数	含义
-c	创建归档文件
-x	拆档
-v	打印细节
-f	指定归档/拆档文件
-j	bzip2格式
-z	gzip格式

命令行	描述
`$ tar cvf all.tar *.txt`	将后缀名为.txt的文件归档为all.tar，并打印细节
`$ tar cvzf all.tar.gz *.txt`	将后缀名为.txt的文件归档为all.tar，并且压缩格式为gzip，打印细节
`$ tar cvjf all.tar.bz2 *.txt`	将后缀名为.txt的文件归档为all.tar，并且压缩格式为bzip2，打印细节

拆档：$ tar xvf all.tar.gz

其它命令

命令行	描述
$ clear	清理终端屏幕
$ ls /home	列出家目录的所有的目录以及文件
$ man	查看指定命令的手册
$ more	预览
$ less	预览
$ cat	连接后显示
$ tac	倒叙连接后显示
$ nl	添加行号后显示
$ tail	预览末尾10行
$ head	预览头10行
$ cd	切换目录
$ pwd	输出当前目录地址

权限

1.通过表达式来修改

命令行	描述
`$ chmod g-r a.txt`	去掉同组人阅读a.txt文件的权限
`$ chmod o+w a.txt`	增加其他人更改a.txt内容的权限

2.通过二进制方式修改

$ chmod 644 a.txt:修改a.txt的权限，拥有者具有读写权限，同组人和其他人具有读权限

参数	二进制写法	二进制总数
–x	001	1
-w-	010	2
-wx	011	3
r–	100	4
r-x	101	5
rw-	110	6
rwx	111	7

sudo(管理员权限)

怎么加入sudoer

$ vim /etc/sudoers
将要添加的用户添加到root后面

其他重要命令

1.`$ find ./ -name ‘.txt’`:查找当前目录中的所有.txt文本文档（其他格式的文档将.txt更换成相对应的后缀名）

2.`$ grep 1000 /etc/passwd`:查找passwd文件中的包含1000行的内容

3.`$ sleep 1000s &`:将当前进程放到后台执行

4.`ps -ef | grep Java`:在所有进程中找到Java相关的进程

5.`$ kill -9 pid`、`reboot`:重启云服务器

CSS_过渡效果

2019-08-25

transition和animation的区别

transition必须要触发，一般使用hover
transition不需要设置关键帧

简单的过度效果使用transition, 复杂的动画使用animation

用法

`transition-property`：指定过渡属性

可以指定一个属性
可以指定多个属性
可以指定所有的属性（all）

`transition-duration`：过渡持续的时间

可以指定秒、以及毫秒

`transition-timing-function`: 过渡的时间曲线，一般使用linear(线性曲线，平滑过渡)

linear: 规定以相同速度开始至结束的过渡效果
ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in: 规定以慢速开始的过渡效果
ease-out: 规定以慢速结束的过渡效果
ease-in-out: 规定以慢速开始和结束的过渡效果

`transition-delay`: 过渡延迟

可以指定秒、以及毫秒

速写：transition:property duration timing delay;

关于 `transform`

scale: 图片变大的倍数
skew: 角度大小 + deg
rotate: 角度大小 + deg
translate: 往坐标轴前进的距离 + px

举例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Transform</title>
	
	<style>
		/*重置*/
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		/*加宽度，高度自适应，让盒子居中，剪切溢出来的图片部分，并把图片带来的空格取消*/
		.box {
			width: 500px;
			margin: 50px auto;
			overflow: hidden;
			border: 5px solid lightblue;
			font-size: 0;
		}
		
		/*让图片铺满div，并加过渡效果*/
		.box > img{
			width: 100%;
			transition-property: transform;
			transition-duration: 2s;
			transition-timing-function: linear;
		}
		
		/*放大的过渡效果，可以在这里测试过渡的各种效果*/
		.box:hover > img{
			transform: scale(1.3);

		}
	</style>

</head>
<body>
	<div class="box">
		<img src="./images/cat.jpg" alt="">
	</div>
</body>
</html>