JavaScript学习笔记之基础部分

1. jacaScript组成

  1. ECMAScript:解释器.翻译,把人们编辑的代码语言解释给计算机,同时把计算机运行 编辑结果返回翻译给人们认识的语言;
  2. DOM:DocumentObject Model,操作html的能力;
  3. BOM: Browser Object model,可以来操作浏览器本身,window操作;
    2. 变量类型
  4. 查看变量函数:typeof()
  5. 常见类型:number、string、boolean、undefined、object、function
  6. 变量类型转换:
    &显示类型转化(强制类型转换)
    parseInt()把字符串转成整数;
    parsefloat()把字符串转成浮点数;
    & 隐式类型转化:
    ==先转换类型,然后比较
    ===不转换类型直接比较
    减法
    3. 变量的作用域和闭包
  7. 局部变量,全局变量,注意变量作用的范围
  8. 闭包:子函数可以使用父函数的局部变量
    4. 命名规范
    注意名字的可读性和规范性,做到见名知意;
    5. 运算符
    JavaScript学习笔记之基础部分_第1张图片
    例子:利用取模实现隔行变色
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    window.onload = function(){
     
    	var aLi = document.getElementsByTagName('li');
    	for(var i= 0;i<aLi.length;i++){
     
    		if(i%2==0){
     
    			aLi[i].style.background = '#ccc';//利用取模进行隔行变色
    		}else{
     
    			aLi[i].style.background = '';
    		}
    	}
    }
    </script>
</head>
<body>
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
</body>

6. 流程控制
判断:if、switch、?:
例如:a%55==0?alert('双数‘):alert(‘单数’);
循环:while、for
跳出:break、continue
真:true 非零数字 非空字符串 非空对象
假:false 数字零 空字符串 空对象 undefined
7. Json

  • json是一种轻量级的数据交换格式,轻量级是指相对于xml做比较,数据交换是指客户端和服务器之间业务数据的传递格式。
  • json是由键值对组成,并且由花括号(大括号)包围,每个键由引号引起来,键和值之间使用冒号进行分割,多组键值对之间进行逗号来分隔。
  • json存在形式:对象,字符串(一般操作json数据是用对象,再客户端与服务器之间数据交换是用字符串)
  • 循环:
    数组:for 0—length
    json: for in
    8. 函数返回值
    函数返回值即函数的执行结果;
    可以有return,也可以没有return;
    一个函数应该只返回一种类型的值;
    9. 函数传参
  • 可变参,不定参:arguments
    例子:当参数个数可变 function sum(){
	var result = 0;
	for(var i=0;i<arguments.length;i++){
     
		result +=arguments[i];
	}
	return result;
	}
	alert(sum(4,5,6));
  • 取非行间样式
    复合样式:background等
    单一样式:width,height…
 <style>
	#div1 {
     width:200px; height:280px; background:red;}
</style>
<script>
	window.onload = function(){
     
		var oDiv = document.getElementById('div1');
		//利用currentStyle获取非行间样式,但是兼容性不好,只在IE下好使
		alert(oDiv.currentStyle.width);
		//chrome,火狐获取非行间样式,使用getComputeStyle,但又不支持IE
		alert(getComputedStyle(oDiv,false).backgroundColor);//注意复合样式得具体点
		//两者皆兼容
		if(oDiv.currentStyle){
     
			alert(oDiv.currentStyle.width);//IE
		}else{
     
			alert(getComputedStyle(oDiv,false).height);//火狐
		}	
	}
</script>
</head>
<body>
	<div id="div1"> </div>
</body>

10. 数组

  • 数组方法
    push(),从尾部添加;
    unshift(),从头部添加;
    pop(),从尾部删除;
    shift(),从头部删除;
    splice(开始,长度,元素…)
var arr = [1,2,3,4,5,6];
//删除:splice(起点,长度)
arr.splice(2,3);
//插入:splice(开始,0,元素...);
arr.splice(2,0,'a','b','c');
//替换:splice(开始,长度,元素)
arr.splice(2,3,'a','b','c');

concat()连接连个数组
join()分隔符
sort()排序

var arr1=[1,3,5,2,7,0,9];
	arr1.sort(function(n1,n2){
     
		return n1-n2;//等效下列注释部分
		/* if(n1n2){
			return 1;
		}else{
			return 0;
		} */
	});
	alert(arr1);

你可能感兴趣的:(javascript)