近期学习笔记

Posted 2020-07-09 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-infinity为NaN,-INFINITY--INFINITY=NaN,INFINITY--INFINITY=INFINITY,-INFINITY-INFINITY=NAN

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

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

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

9.练习一：

<!DOCTYPE html>

<html>

<body>

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>

<html>

<body>

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的位置开始向后搜索arg1，lastIndexOf(arg1,arg2)指从arg2开始向前搜索arg1

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

<!DOCTYPE HTML>

<html>

<body>

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>

<head>

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

</head>

<body>

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>

<head>

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

</head>

<body>

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>

<head>

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

</head>

<body>

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>

<head>

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

</head>

<body>

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>

<head>

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

</head>

<body>

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>

<head>

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

</head>

<body>

</form>

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>

<head>

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

</head>

<body>

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

</body>

</html>

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

3.图片自适应

<!DOCTYPE HTML>

<html>

<head>

<style>

img{

display:flex;

height:300px;

width:50%;

}

</style>

<body>

</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-color、border-color这种属性的改变，而重排是指margin、padding的数值改变、

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

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

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