学习笔记——day30（JS2）

一.数组

java数组与js数组的区别：

java：
			 * 数组：
			 * 	有序
			 * 	长度固定
			 * 	存储相同类型
			 * 	查询快，修改慢
js：
			 * 	数组：
			 * 		有序
			 * 		长度可变，可扩容，可缩容
			 * 		存储类型不要求一致

            //1.不同类型
			arr = [1,3.14,true,undefined,'string',NaN,null];
			console.log(arr.length);
			//2.容量可变
			//压栈，添加
			arr.push(1024);
			console.log(arr.length);
			
			//弹栈，移除
			var temp = arr.pop();
			console.log("被移除元素："+temp);
			console.log("被移除元素后长度："+arr.length);
			
			//长度-扩容
			arr.length=100;
			console.log("第五十个元素"+arr[49]);
			//缩容
			arr.length=1;
			console.log("第一个元素："+arr[0]);
			console.log("第二个元素："+arr[1]);
			console.log("-----------------------------");
			/*
			 * 遍历：普通
			 */
			
			/*for(var i=0;i<arr.length;i++){
				console.log(i+":"+arr[i]);
			}*/
			console.log("-----------for in  -------")
			
			/*
			 赋值
			 * */
			arr[1] = 20;
			arr[10] = 1024;
			arr[-1]=100;
			/*for in*/
			for(var i in arr){
				console.log(i+":"+arr[i]);
			}
			console.error("----------------");
			for(var i=0;i<arr.length;i++){
				console.log(i+":"+arr[i]);
			}
			
			/*
			 数组的第三种遍历方式foreach
			 
			 * */
			arr.forEach(function(ele,idx){
				console.log(ele+"---"+idx);
			});
			arr.forEach(function(ele){
				console.log(ele);
			});

二.数据类型

var arrays = [];
			var a = 100;
			arrays.push(a);
			var b = "100";
			arrays.push(b);
			var c = true;
			arrays.push(c);
			var d = "hello";
			arrays.push(d);
			var arr = [1,2];
			arrays.push(arr);
			var fun = function(){
				
			};
			arrays.push(fun);
			var obj = {};
			arrays.push(obj);
			var un = undefined;
			arrays.push(un);
			var nu = null;
			arrays.push(nu);
			var na = NaN;
			arrays.push(na);
			/*
			 遍历*/
			for(var i in arrays){
				console.log(arrays[i]+"---"+ typeof arrays[i]);
			}

三.数据类型转换

/*
		 解释型语言：
		 动态语言：
		 * */
			/*数据类型*/
			var a = 1;
			var b = '1';
			//弱类型转换
			console.log(a==b);//等于
			console.log(a===b);//等同   ，先检查类型，再看值
			
			var c = true;
			console.log(a==c);
			//计算转化
			console.log("a+c="+(a+c));
			
			var d = false;
			console.log(d+1);
			
			/*
			 条件表达式，返回值是boolean
			 false: 
			 	0
			 	NaN
			 	undefined
			 	null
			 	''
			 	false
			 true：其他值
			 * */
			var e = {};
			if(e){
				alert("true");	//true，报错
					
			}else{
				alert("false");
			}

四.parselnt

parseInt(str)取整
parseFloat(str2)取到第一个小数点后面的值

var str = "100px";
			console.log(parseInt(str));
			str = "3.14";
			console.log(parseInt(str));
			str = "a123";
			console.log(parseInt(str));
			
			/*float:浮点*/
			var str2 = "100.px";
			console.log(parseFloat(str2));
			str2 = "3.14px";
			console.log(parseFloat(str2));
			str2 = "3.14.15926px";
			console.log(parseFloat(str2));
			str2 = "a3.14.15926px";
			console.log(parseFloat(str2));
			console.log(parseInt("1A", 16));
			console.log(parseInt("0x1A"));

五.obj

var xiaowei = ['肖崴','其他',180,150]
			console.log("姓名："+xiaowei[0]);
			console.log("性别："+xiaowei[1]);
			console.log("体重："+xiaowei[2]);
			console.log("身高："+xiaowei[3]);
			/*
			 对象存储
			 * */
			var objxw = {'age':18,"name":"肖崴","sex":"公","weight":150,"height":180};
			console.log("姓名："+objxw.name);
			console.log("性别："+objxw.sex);
			console.log("体重："+objxw.weight);
			console.log("身高："+objxw.height);
			
			/*组合*/
			var infos = [
				{'age':18,"name":"肖崴","sex":"公","weight":150,"height":180},
				{'age':38,"name":"刘杭","sex":"不详","weight":130,"height":170},
				{'age':18,"name":"憨憨","sex":"母","weight":130,"height":180}
			];
			/*infos小微的年龄*/
			console.log("小微的年龄:"+infos[0].age);
			console.log("小微的年龄:"+infos[0]["age"]);
			//in
			if("money" in infos[0]){
				console.log("小微的余额:"+infos[0]["money"]);
			}
			/*遍历小微*/
			for(var k in infos[0]){
				console.log(k+":"+infos[0][k]);
			}
			for(var k in infos[1]){
				console.log(k+":"+infos[1][k]);
			}
			for(var k in infos[2]){
				console.log(k+":"+infos[2][k]);
			}
			/*删除小微的年龄*/
			delete infos[0].age;
			console.log("--------------");
			for(var k in infos[0]){
				console.log(k+":"+infos[0][k]);
			}
			/*
			 给小微添加余额
			 * */
//			infos[0].money=1000000;
			infos[0]["money"]=10000;
			console.log("--------------");
			for(var k in infos[0]){
				console.log(k+":"+infos[0][k]);
			}
			 /*修改性别为男*/
			infos[0].sex="男";
			console.log("------------------");
			for(var k in infos[0]){
				console.log(k+":"+infos[0][k]);
			}

六.随机数

<script>
		//范围[0,1)
			Math.random();
			//0-100
			Math.random()*101;
			//取整
			var rnd = Math.floor(Math.random()*100+1);
			alert(rnd);
			//取整
			rnd = parseInt(Math.random()*101);
			alert(rnd);
		</script>

七.弹出框

 <script>
			/*警告框\n*/
//			window.alert("你愁啥！");
			/*确认框*/
			var result = window.confirm("确定删除？");
			console.log(result);
			console.log(typeof result);
			
			if(result){
				alert("删除成功");
			}else{
				alert("熊孩子没事别瞎点。。。。");
			}
			
			/*输入框*/
			/*var age = window.prompt("芳龄","18");
			//age是string类型
//			var age_num = parseInt(age);
			var age_num = Number(age);
			console.log(typeof age_num);*/
		</script>

八.获取元素

四种方法：

• getElementById

• getElementsByName

• getElementsByClassName

• getElementsByTagName

<body>
		<div id="dv" class="dv" name="dv">我是div</div>
		<div>fdsfds</div>
		<script>
			/*
			 1：id    id属性值    返回值：ele
			 2：name    name名称	返回值：collection
			 3：className类名称	返回值：collection
			 4.tagName:标签名称   返回值：collection
			 * */
			var divId = document.getElementById("dv");
			console.log(divId);
			var divName = document.getElementsByName("dv")[0];
			console.log(divName);
			var divClassName = document.getElementsByClassName("dv")[0];
			console.log(divClassName);
			var divTagName = document.getElementsByTagName("div")[0];
			console.log(divTagName);
		</script>
	</body>

九.事件

1.onload

<script>
			/*
			 onload事件，body有onload事件
			 * */
			function load(){
				//加载完成div的文字编程红色
//				alert("加载完毕。。。。");
				var dv = document.getElementById("dv");
				dv.style.color="red";
			}
//			var dv = document.getElementById("dv");
//			dv.style.color="green";
		</script>

2.onclick

//测试是否是闰年
<body>
		输入年份：<input type="text" id="year" placeholder="请输入一个年份" /><br />
		<button type="button" onclick="isLeap();">测试</button>
		<div id="tip"></div>
		<script>
			/*
			 输入年份
			 点击测试
			 生成结果
			 * */
			function isLeap(){
				var year = document.getElementById("year");
				var val = Number(year.value);
				var tip = document.getElementById("tip");
				if((val%4==0&&val%100!=0)||(val%400==0)){
					//闰年
					tip.innerText=val+'是闰年';
				}else{
					//平年
					tip.innerHTML=val+'是平年';
				}
				
			}
		</script>
	</body>

点击子类的父类的也会出来
点击父类的 子类不会出来

<div id="parent" onclick="alert('parent')">
			parent
			<div id="child" onclick="alert('child')">
				child
			</div>
		</div>

3.onchange

<body>
		<select name="" id="menu" onchange="getVal(this);">
			<option >香蕉</option>
			<option >猕猴桃</option>
			<option >哈密瓜</option>
			<option >葡萄</option>
			<option >木瓜</option>
			<option >西瓜</option>
			<option >火龙果</option>
			<option >西红柿</option>
			<option >车厘子</option>
			<option >牛油果</option>
		</select>
		偶像：<select name="" onchange="getIdol(this);">
			<option value="">请选择你的偶像</option>
			<option value="xiaozhan">肖战</option>
		</select>
		
		<script>
			//变化，选中被选中元素的innerHTML
			function getVal(t){
//				alert(t.value);
				console.log(t.value);
			};
			
			function getIdol(t){
				console.log(t.innerHTML);
				console.log(t.value);
			}
		</script>
	</body>