JavaScript初级--变量函数预解析/匿名函数/js函数传参/函数return关键字/条件语句/数组/数组去重/通过标签获取元素/循环/字符串处理方法-js调试方法
函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
aa(); // 弹出 hello！
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
函数传参
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
函数'return'关键字
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript"> function add(a,b){ var c = a + b; return c; alert('here!'); } var d = add(3,4); alert(d); //弹出7 </script>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>变量函数预解析/匿名函数</title> 9 10 <script type="text/javascript"> 11 alert(a); // 弹出undefined---------变量预解析 12 var a='hello'; 13 14 //alert(b) 报错，b没有声明 15 16 // 弹出 hello! --------函数预解析 17 c() 18 19 function c(){ 20 alert('hi') 21 } 22 23 window.onload=function(){ 24 var oDiv1=document.getElementById('div1'); 25 26 /* 27 oDiv1.onclick=myalert; 28 29 function myalert(){ 30 alert('cherry'); 31 } 32 */ 33 34 //定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。 35 oDiv1.onclick=function(){ 36 alert('cherry') 37 } 38 39 } 40 41 </script> 42 </head> 43 <body> 44 45 <div id="div1">这是匿名函数</div> 46 </body> 47 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>js函数传参/函数return关键字</title> 9 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var oDiv=document.getElementById('div'); 13 14 changestyle('color','red'); 15 changestyle('background','green'); 16 changestyle('width','300px'); 17 changestyle('height','200px') 18 19 function changestyle(a,b){ 20 oDiv.style[a]=b; 21 } 22 23 24 var oInput01=document.getElementById('input01'); 25 var oInput02=document.getElementById('input02'); 26 var oBtn=document.getElementById('btn'); 27 28 oBtn.onclick=function(){ 29 var val01=oInput01.value; //获取写入的值 30 var val02=oInput02.value; //获取写入的值 31 32 var res=add(val01,val02); //引用add函数 33 alert(res) 34 } 35 36 function add(a,b){ 37 var c=parseInt(a)+parseInt(b); //parseInt将字符串转成int类型 38 39 return c; // return 返回函数设定的值，同时结束函数的运行。 40 alert('结果如下'); //这句话在return后，所以不会执行 41 } 42 43 } 44 </script> 45 </head> 46 <body> 47 <div id="div">哈哈哈</div> 48 <br><br><br><br><br> 49 50 <input type="text" name="" id="input01"> 51 <input type="text" name="" id="input02"> 52 <input type="button" name="" id="btn" value="相加"> 53 </body> 54 </html>
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>条件语句</title> 9 10 <style type="text/css"> 11 .div1{ 12 width:400px; 13 height:400px; 14 background-color:gold; 15 } 16 </style> 17 18 <script type="text/javascript"> 19 window.onload=function(){ 20 var oBtn=document.getElementById('btn'); 21 var oDiv1=document.getElementById('box'); 22 23 oBtn.onclick=function(){ 24 if(oDiv1.style.display=='block' || oDiv1.style.display=='' ){ 25 oDiv1.style.display='none'; 26 } 27 else 28 { 29 oDiv1.style.display='block'; 30 } 31 } 32 } 33 34 35 /* 36 var a=1; 37 if(a==1){ 38 alert('语文'); 39 } 40 else if(a==2){ 41 alert('数学'); 42 } 43 else if(a==3){ 44 alert('英语'); 45 } 46 else if(a==4){ 47 alert('美术'); 48 } 49 else if(a==5){ 50 alert('舞蹈'); 51 } 52 else 53 { 54 alert('不补习'); 55 } 56 */ 57 58 //一般推荐使用此种条件语句 59 var a=1; 60 switch (a){ 61 case 2: 62 alert('语文'); 63 break; 64 case 1: 65 alert('数学'); 66 break; 67 case 1: 68 alert('英语'); 69 break; 70 case 1: 71 alert('美术'); 72 break; 73 case 1: 74 alert('舞蹈'); 75 break; 76 default: 77 alert('不补习'); 78 } 79 80 81 82 83 </script> 84 </head> 85 <body> 86 87 <input type="button" name="" value="切换" id="btn"> 88 <div class="div1" id="box"></div> 89 90 </body> 91 </html>
数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4
6、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
7、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
获取元素的第二种方法
document.getElementsByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>数组/数组方法</title> 9 10 <script type="text/javascript"> 11 12 /* 求余 13 var a=0; 14 var b=7; 15 var c=a%b; 16 alert(c); 弹出0; 17 alert(b+=1); 等同于 b+=1; 18 */ 19 20 21 /* 数组 22 var aRr01=new Array(1,2,3,'abc'); // 第一种创建数组的方式 23 var aRr02=[1,2,3,'abc'] //第二种创建数组的方式 24 var aRr03=[[1,2,3],['a','b','c'],['hello','world']] //多维数组 25 26 alert(aRr02.length); // 弹出4 27 alert(aRr02[1]); // 弹出2 28 alert(aRr03.length); // 获取数组的成员数量,弹出3 29 alert(aRr03[2].length); // 弹出2 30 alert(aRr03[1][2]); // 弹出c 31 */ 32 33 34 /* 数组方法 */ 35 var aAr=[1,2,3,4]; 36 var sTr01=aAr.join('-'); 37 var sTr02=aAr.join(''); 38 39 // alert(sTr01); 弹出 1-2-3-4 40 // alert(sTr02); 弹出 1234 41 42 //push() 和 pop() 从数组最后增加成员或删除成员 43 aAr.push(5); 44 alert(aAr); // 弹出1,2,3,4,5 45 aAr.pop(); 46 alert(aAr); // 弹出1,2,3,4 47 48 //unshift()和 shift() 从数组前面增加成员或删除成员 49 aAr.unshift(0); 50 alert(aAr); // 弹出0.1,2,3,4 51 aAr.shift(0); 52 alert(aAr); // 弹出1,2,3,4 53 54 //reverse() 将数组反转 55 aAr.reverse(); 56 alert(aAr); // 弹出 4,3,2,1 57 58 //indexOf() 返回数组中元素第一次出现的索引值 59 var aRr2 = ['a','b','c','d','a','b','c','d']; 60 var num=aRr2.indexOf('b'); 61 alert(num); // 弹出1 62 63 //splice() 在数组中增加或删除成员 64 aRr2.splice(2,1); 65 alert(aRr2); // 弹出 a,b,d,a,b,c,d 66 aRr2.splice(2,1,'e'); //从第2个元素开始，删除1个元素，然后在此位置增加'e'一个元素 67 alert(aRr2); // 弹出 a,b,e,a,b,c,d 68 aRr2.splice(4,4,'f','g','h','i'); 69 alert(aRr2); // 弹出 a,b,e,a,f,g,h,i 70 71 72 </script> 73 </head> 74 <body> 75 76 </body> 77 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>通过标签获取元素/循环</title> 9 10 <script type="text/javascript"> 11 12 window.onload=function(){ 13 var oLi=document.getElementById('list1'); 14 var aLis=oLi.getElementsByTagName('li'); 15 alert(aLis.length); 16 // aLi.pop(); 出错！ aLi 是一个类似数组的选择集，没有数组通用的一些方法。 17 18 /* 19 aLis[0].style.backgroundColor='gold'; 20 aLis[1].style.backgroundColor='gold'; 21 aLis[2].style.backgroundColor='gold'; */ 22 23 for(var i=0;i<aLis.length;i++){ 24 aLis[i].style.backgroundColor='gold'; 25 } 26 } 27 </script> 28 29 </head> 30 <body> 31 32 <ul id="list1"> 33 <li>1</li> 34 <li>2</li> 35 <li>3</li> 36 <li>4</li> 37 <li>5</li> 38 <li>6</li> 39 <li>7</li> 40 <li>8</li> 41 <li>8</li> 42 </ul> 43 44 <ul id="list2"> 45 <li>9</li> 46 <li>10</li> 47 <li>11</li> 48 <li>12</li> 49 </ul> 50 51 </body> 52 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>数组去重（很重要--经常面试被考到）</title> 9 10 <script type="text/javascript"> 11 var aRr = [1,2,3,4,3,5,6,7,8,4,5,3,7,9,2,4,6,8,9,2]; 12 var aRr0=[]; 13 14 for(var i=0;i<aRr.length;i++){ 15 if(aRr.indexOf(aRr[i])==i){ //如果数组中元素第一次出现的索引值等于下标 16 aRr0.push(aRr[i]); 17 } 18 } 19 20 alert(aRr0); 21 </script> 22 23 </head> 24 <body> 25 26 </body> 27 </html>
Javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
字符串处理方法
1、字符串合并操作：“ + ”
2、parseInt() 将数字字符串转化为整数
3、parseFloat() 将数字字符串转化为小数
4、split() 把一个字符串分隔成字符串组成的数组
5、charAt() 获取字符串中的某一个字符
6、indexOf() 查找字符串是否含有某字符
7、substring() 截取字符串 用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
调试程序的方法
1、alert
2、console.log
3、document.title
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>字符串处理方法-js调试方法</title> 9 10 <script type="text/javascript"> 11 var name='Tom'; 12 var age=18; 13 //alert('my name is '+name+',my age is '+age); 14 15 var a=12; 16 var b='34'; 17 var c=5.6; 18 var d='123abc'; 19 var e=3.1; 20 21 // alert(a+b); 弹出1234 22 // alert(parseInt(a)+parseInt(b)); 弹出46 23 // alert(parseInt(c)); 弹出5 24 // alert(parseInt(d)); 弹出123 25 // alert(parseFloat(c)+parseFloat(e)); 弹出8.7 26 27 var f=0.1; 28 var g=0.2; 29 // alert(f+g); 弹出0.30000000000000004 30 // alert((parseFloat(f)*100+parseFloat(g)*100)/100); // 相加等于0.30000000000000004的问题，解决方法是先乘以100，再除以100 31 32 var sTr = '2016-12-5'; 33 var aAr=sTr.split('-'); 34 var aAr01=sTr.split(''); 35 36 //调试程序的方法如下三种：alert 、console.log 、document.title 37 //alert(aAr); 弹出2016,12,5 38 //alert(aAr01); 弹出2,0,1,6,-,1,2,-,5 39 console.log(aAr); //控制台打印 40 console.log(aAr01); 41 document.title=aAr01; //标题展示 42 43 var sTr2 = '#div1'; 44 var sTr3 = '.div1'; 45 var sTr4=sTr2.charAt(0); 46 var sTr5 = 'Microsoft yahei'; 47 48 if(sTr4=='#'){ 49 // alert('对了'); 50 } 51 52 var num=sTr5.indexOf('yahei'); 53 alert(num); //找到就弹出字符串出现的位置：10 54 var num1=sTr5.indexOf('hhh'); 55 alert(num1); //没有找到就弹出 -1 56 57 var sTr6=sTr5.substring(10,15); //从第10截到第14个 58 alert(sTr6); 59 var sTr7=sTr5.substring(10); //从第10个截到结尾 60 alert(sTr7); 61 62 alert(sTr5.toUpperCase()); //弹出MICROSOFT YAHEI 63 alert(sTr5.toLowerCase()); //弹出microsoft yahei 64 65 66 //字符串反转 67 var str = 'asdfj12jlsdkf098'; 68 var str1=str.split('').reverse().join(''); 69 alert(str1); //弹出 890fkdslj21jfdsa 70 71 72 </script> 73 </head> 74 <body> 75 76 </body> 77 </html>
posted on 2019-12-14 15:11 cherry_ning 阅读(176) 评论(0) 收藏 举报
浙公网安备 33010602011771号