JavaScript学习笔记

最新推荐文章于 2024-10-10 09:56:47 发布

谦_duke

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量412

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/rickyduke/article/details/50577890

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、强制类型转换

（1）显示转换

parseInt（a）是将a里面的数字转换成整数类型，如果a是字符串，那么从左到右开始将数字取出，直到遇到第一个非数字的字符即跳出。

例如：var a = '12as25';

var b = parseInt(a);

则b的值为12。

如果a第一个字符就不是数字，则b的值为NaN。

parseFloat（a）是转换成float型，如果是整型值，则会转成整型。

（2）隐式转换

例：var a = 1;

var b = ‘1’;

a==b的值为true。==运算符会先将b的类型转换成a的类型，然后进行比较。即先转换再比较。

a===b的值为false。===运算符不进行转换，直接比较a和b的值。

a-b的值为0。-运算符也会进行类型转换之后再进行减法运算。但是+则不行，因为+有两种功能，一是字符串连接，一是数字相加。

2、关于NaN（Not a Number，即非数字）

a、任何数字跟NaN相加的结果都是NaN。

b、NaN与NaN不相等。

c、检测一个值是不是NaN可以用方法： isNaN(a);

3、闭包

子函数可以使用父函数的局部变量就叫闭包。

4、命名规范

匈牙利命名法：类型前缀+首字母大写。

5、流程控制

（1）跳出：break、continue

break是结束整个循环，continue是结束本次循环，下面的循环还会继续。

（2）什么是真什么是假

真：true、非零数字、非空字符串、非空对象。

假：false、数字零、空字符串、空对象、undefined

（3）for in循环

对于json循环取值可以采用for in循环。

<script>
    var json = {a:12 , b:5 , c:'abc'};
    for(var i in json){
       alert('第'+i+'个json数据的值是'+json[i]);    
    }
</script>

6、json

var json = {a :12 , b : 5 , c = 'abc'};

使用的时候直接 json.a 或者 json['a']即可取出值 12。

7、可变参（不定参）：arguments

参数的个数可变，参数数组。

<script>
	function sum()
	{
		var result=0;
		
		for(var i=0;i<arguments.length;i++)
		{
			result+=arguments[i];
		}	
		
		return result;
	}
	
	alert(sum(12, 6 ,8));
</script>

8、获取非行间样式

<script>
	//可以获取width、height等单一样式值
	//不可以获取类似background等复合样式的值，取背景颜色可以使用backgroundColor
	function getStyle(obj, name)
	{
		if(obj.currentStyle)
		{
			//针对IE浏览器
			return obj.currentStyle[name];	
		}	
		else
		{
			//针对于火狐等浏览器
			//getComputedStyle(obj, false)第二个参数没作用，随便传什么都行
			return getComputedStyle(obj, false)[name];	
		}
	}
	
	//调用例子，获取div对象的宽度
	alert(getStyle(oDiv, 'width'));
	
</script>

9、数组

数组的length

可以获取也可以赋值

例如： var arr = [1, 2, 3, 4, 5, 6];

arr.length = 3;

这时候数组的长度就变为3了，如果length=0；则可以清空数组。

sort使用例子：

<script>
	var arr=[12, 89, 99, 19, 112]
	arr.sort(function (n1, n2){
		if(n1<n2)
		{
			return -1;
		}
		else if(n1>n2)
		{
			return 1;
		}
		else
		{
			return 0;	
		}
	});
	
	alert(arr);
</script>

或者可以写成

<script>
	var arr=[12, 89, 99, 19, 112]
	arr.sort(function (n1, n2){
		return n1-n2;
	});
	
	alert(arr);
</script>

a.concat(b);就是数组a连接数组b。

var arr = [1,2,3];

arr.join('-');

结果就是1-2-3-4。

splice（a, b, c, d,.....）表示的是从a位置开始，删除b个数值，然后从a位置开始插入c, d, ....等值。

10、定时器

setInterval使用例子：

实现效果为1秒弹一次窗口

<script>
	function show()
	{
		alert('a');	
	}
	
	setInterval(show, 1000);
</script>

setTimeout使用例子：

实现效果，1秒后弹出窗口

<script>
	function show()
	{
		alert('a');	
	}
	
	setTimeout(show, 1000);
</script>

clearInterval使用例子：

<script>
	var timer = null;
	function show()
	{
		alert('a');	
	}
	//开启定时器之后会有一个返回值
	timer = setInterval(show, 1000);
	//关闭指定的定时器
	clearInterval(timer);
</script>

实现一个数码时钟效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
function toDou(n)
{
	if(n<10)
	{
		return '0'+n;	
	}	
	else
	{
		return ''+n;	
	}
}

window.onload = function()
{
	var aImg = document.getElementsByTagName('img');

	function tick(){
		var oDate=new Date();
		var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())
		+toDou(oDate.getSeconds());
		
		for(var i=0;i<aImg.length;i++)
		{
			aImg[i].src='img/'+str.chatAt(i)+'.png';
		}
	}
	setInterval(tick, 1000);
	tick();
}
	
</script>
</head>

<body>
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
</body>
</html>

使用offsetLeft/offsetTop可以实现无缝滚动。