近期学习笔记

Posted Abracadabra

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了近期学习笔记相关的知识,希望对你有一定的参考价值。

Js笔记

1.可以把<script>放在head中而不必担心影响页面加载速度,方法是在<script>中加上defer=”defer”,如<script defer=”defer” type=”text/javascript” src=”examplae.js”></script>

2.除法中infinity/infinity=NaN,有限大的数值除以无限大的数值结果是有限大的数值,有限大的数值除以0结果是NaN,无穷大值除以有限大值结果是NaN

3.加法,有一个数是NaN则结果是NaN,INFINITY+-INFINITY结果是NaN

4.字符串相加则是拼接

5.减法,infinity-infinityNaN,-INFINITY--INFINITY=NaN,INFINITY--INFINITY=INFINITY,-INFINITY-INFINITY=NAN

6.数值进行比较时,有一个数是nan,则相等操作符返回false,不等操作符返回truenan不等于nannan等于undefined

7.对象字面量中使用逗号来区分属性,而最后一个属性结束后则不用加任何符号,直接加},如var person={name:”Nicolas”,age:29};

8.访问对象的属性方法有两种,一种是person.name,另一种是person[“name”]

9.练习一:

<!DOCTYPE html>

<meta charset="UTF-8">

<html>

<head><title>js练习</title></head>

<body>

<script>

function displayInfo(args){

var output="";

if(typeof args.name=="string")

output+="Name:"+args.name;

if(typeof args.age=="number")

output+=", age:"+args.age;

alert(output);

}

displayInfo({name:"abracadabra",age:18});

displayInfo({name:"nicolas"});

</script>

</body>

</html>

10.练习二(升值排序):

<!DOCTYPE HTML>

<meta charset="UTF-8">

<html>

<head><title>js练习</title></head>

<body>

<script>

function compare(a,b){

return a-b;

}

var number=[78,13,4,3,5];

number.sort(compare);

alert(number);

</script>

</body>

</html>

11.数组中slice(num1,num2),num1是分割开始的地方,num2-1是数组分割结束的地方,若num1/num2是负数,则用数组长度length加上该负数得到起始结束的地方,若num2小于num1,则返回空数组

12.数组中的splice用法,splice(arg1,arg2,arg3,arg4)中第一个参数是指要修改的元素位置,第二个参数是指要删除多少个元素,第三个参数开始直到最后一个参数都是要加进该数组的元素内容,splice可用来增减数组元素

13.indexOf(arg1,arg2),arg1不可省略,arg2可省略,两个参数都存在的时候是指从arg2的位置开始向后搜索arg1lastIndexOf(arg1,arg2)指从arg2开始向前搜索arg1

14.练习三(every得每一个元素都满足条件才能返回真,some只要一个袁术满足条件就返回真的代码验证):

<!DOCTYPE HTML>

<meta charset="UTF-8">

<html>

<head><title>js练习</title></head>

<body>

<script>

var number=[1,2,3,4,5,6,7];

var result=number.every(function(item,index,array){

return item>2;

});

var result1=number.some(function(item,index,array){

return item>2;

});

alert("result is "+result);

alert("result1 is "+result1);

</script>

</body>

</html>

15.Math.ceil()向上取整,Math.floor()向下取整,Math.round()四舍五入

16.练习四(运用对象思想计算一本书的版本)

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<script>

var book={_yaer:2004,edition:1};

Object.defineProperty(book,"year",{

get:function(){

return this._year;

},

set:function(newValue){

if(newValue>2004){

this._year=newValue;

this.edition=newValue-2004+1;}

}

})

book.year=2015;

alert(book.edition);

</script>

</body>

</html>

17.js的模式:

工厂模式

代码示例:

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<script>

function createPerson(name,age,sex){

var o=new Object();

o.name=name;

o.age=age;

o.sex=sex;

alert(o.name);

}

createPerson("Abracadabra",21,"woman");

createPerson("John",21,"man");

</script>

</body>

</html>

构造函数模式

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<script>

function person(name,age,sex){

this.name=name;

this.age=age;

this.sex=sex;

alert(this.name);

}

person("Abracadabra",21,"woman");

person("John",21,"man");

</script>

</body>

</html>

18.<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<script>

function person(name,age,sex){

this.name=name;

this.age=age;

this.sex=sex;

}

var person1=new person("Abracadabra",21,"woman");

var person2=new person("John",21,"man");

alert(person1.constructor==person);

alert(person2 instanceof Object);

</script>

</body>

</html>

Constructor:某个对象.constructor是指他的对象类型

19.练习

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<script>

function personName(name){

this.getName=function(){

return name;

};

this.setName=function(value){

name=value;

};

}

var name1=new personName("Abracadabra");

alert(name1.getName());

name1.setName("john");

alert(name1.getName());

</script>

</body>

</html>

Html5笔记

1.mark标签可以使得文本高亮

2.验证邮箱格式

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<form id="check" onsubmit="return check()">

<input type=email name="email" id="email">

<input type="submit">

</form>

<script>

function check(){

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

if(email.value=="")

{alert("please enter email");}

else if (!email.checkValidity())

alert("please enter the right email");

else

{alert("enter the right one");}

}

</script>

</body>

</html>

3.进度条

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>版本数计算</title>

</head>

<body>

<p>磁盘使用率<meter min="0" max="100" value="90"></meter>GB</p>

</body>

</html>

除了IE都支持,在IE上要用的话就加上

3.图片自适应

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<head>

<title>自适应</title>

<style>

img{

display:flex;

height:300px;

width:50%;

}

</style>

<body>

<img src="./image/images.jpg">

</body>

</html>

4.一个小图标

 

<!DOCCTYPE HTML>

 

<html>

 

<head>

 

<style>

 

.triangle,.word{float:left;}

 

.triangle{

 

width:20px;height:20px;transform:rotate(45deg);

 

}

 

.word{margin-left:-14px;margin-top:-5px;width:100px;height:30px;border-radius:7px;padding-left:18px;color:#fff;}

 

.int{margin-top:4px;}

 

</style>

 

</head>

 

<div class="icon">

 

<div class="triangle"></div>

 

<div class="word"><div class="int"><input type="radio">Hexo</div></div>

 

</div>

 

</html>

 

 

 

 

text-overflow:ellipsis指对象内文本溢出时显示省略符;

text-overflow:clip指对象内文本溢出时不显示省略符直接将多余的部分裁剪掉

 

网页设计中重绘指的是像background-colorborder-color这种属性的改变,而重排是指marginpadding的数值改变、

 

缩进用text-indent:2em没有作用是因为元素不是块级元素,给该元素添加浮动使其变为块级元素就会有用了

以上是关于近期学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

近期学习数据结构笔记=====>队列

Linux学习笔记

虚拟化技术学习笔记

Android属性动画初步学习笔记

推荐算法 学习笔记一

Redux 入门学习笔记 ① —— 基本概念及使用