1.js最初始体验
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div onclick="alert('我是行内式')">你好</div>--> <!--<script src="tool.js"></script>--> <script type="text/javascript"> //内嵌式 alert("我是内嵌式"); prompt("请输入："); confirm("你好吗？"); //输出语句 console.log("我是控制台输出"); console.error("我是错误");//了解 console.warn("我是警告");//了解 document.write("<h1>我是h1标签</h1>");//页面输出内容而且识别标签 /** * * @param a * @param b * @returns {number} */ function fn(a,b){ return 111; } </script> </body> </html>
2.变量
a）变量命名
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var _$1 = 1; var 我爱你 = "I love you!" var top = 1; alert(top); alert(我爱你); alert(name); // alert(break); var aaa = 1; var bbb; bbb = 1; var bool; bool = true; var name = "张三"; console.log(name); name = 18; console.log(name); var a, b, c; var a;b;c; </script> </body> </html>
b）变量交换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> //需求：交换两个变量 //步骤： //1.把a交换给b //2.把b交换给a // var a = 1; // var b = 2; // console.log("a:"+a+"---"+"b:"+b); // //1.把a交换给b // b = a; // //2.把b交换给a // a = b; // console.log("a:"+a+"---"+"b:"+b); //需求：交换两个变量 //步骤： //0.定义一个中间值 //1.先把a存储进中间值中，把b交换给a //2.把中间值交换给b // var temp = 0; // var a = 1; // var b = 2; // console.log("a:"+a+"---"+"b:"+b); // //1.先把a存储进中间值中，把b交换给a // temp = a; // a = b; // //2.把中间值交换给b // b = temp; // console.log("a:"+a+"---"+"b:"+b); // var a = "aaa"; // var b = "bbb"; // console.log("a:"+a+"---"+"b:"+b); // var temp = a; // a = b; // b = temp; // console.log("a:"+a+"---"+"b:"+b); //难点 //需求：交换两个变量（数值型）而且不能用中间值。 //步骤：（求两个数的和，然后减去其中一个交换给另一个） //1.求和。 //2.利用和减去其中一个交换给本身变量 //3.减去刚才的一个交换给另一个 // //1.求和。 // var a = 10; // var b = 20; // var sum = a + b; // console.log("a:"+a+"---"+"b:"+b); // //2.利用和减去其中一个交换给本身变量 // b = sum - b; // //3.减去刚才的一个交换给另一个 // a = sum - b; // console.log("a:"+a+"---"+"b:"+b); //1.求和。 var a = 10; var b = 20; console.log("a:"+a+"---"+"b:"+b); a = a + b; //2.利用和减去其中一个交换给本身变量 b = a - b; //3.减去刚才的一个交换给另一个 a = a - b; console.log("a:"+a+"---"+"b:"+b); </script> </body> </html>
3.数据类型
a）数据类型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var str = "abc"; var num = 18; var bool = true; var bbb = null; var aaa; console.log(typeof str); console.log(typeof num); console.log(typeof bool); console.log(typeof(aaa)); console.log(typeof(bbb)); //number // 进制转换 值 = 位值*进制的（位置-1）次方+位值*进制的（位置-1）次方+位值*进制的（位置-1）次方+........... var num1 = 0.1; var num2 = 0.2; console.log(num1+num2); console.log(0.07*100); console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(1/0); console.log(-1/0); console.log("aaa"/10); console.log(undefined-1 == NaN); console.log(isNaN("aaa")); console.log(isNaN(123)); console.log(isNaN(NaN)); //string var str1 = "abc"; var str2 = 'cde'; //var str3 = "'; var str4 = 'asdf"asdf"asdf' var str5 = "afads'lkfhasld'fjk"; var str6 = "adfasdlfjka"ldskf"; var str7; str7 = "anc"; str7 = "adfsadfasdf"; console.log(str4); console.log(" "+str5); console.log(str6); console.log("我爱你"+str1+"中国"); //+和加法不一样。对于字符串来说，+是连接符。 console.log("aaa"+"bbb"); console.log(111+111+"bbb"); //boolean console.log(true); console.log(false); var a = 1; if(a){ alert(a); } //undefined 和 null console.log(undefined == null); console.log(undefined === null); console.log(undefined+10); console.log(null+10); </script> </body> </html>
b）数据类型转换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> //转换成字符串 var bool = true; var num = 111; var aaa; var bbb = null; console.log(typeof(bool+"")); console.log(typeof(num+"")); console.log(typeof(aaa+"")); console.log((aaa+"")); console.log(typeof(bbb+"")); console.log(typeof(String(bool))); console.log(typeof(num.toString())); //转换成数字 var str = "11"; var bool = true; console.log(typeof (str-0)); console.log(typeof (bool-0)); console.log(typeof (str*1)); console.log(typeof (bool*1)); console.log(typeof (str/1)); console.log(typeof (bool/1)); console.log(typeof typeof (bool/1)); //数据类型是用string定义的 console.log(typeof Number(str)); console.log(typeof Number(bool)); var str2 = "12.34abc"; var str3 = "12.34"; console.log(parseInt(str2)); console.log(parseFloat(str2)); console.log(Number(str3)); //布尔类型转换 var date = new Date(); // console.log(Boolean(0)); console.log(Boolean("")); console.log(Boolean(null)); console.log(!!1); console.log(!!"abc"); console.log(!!date); </script> </body> </html>
4.操作符优先级
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> (false || true) && !(false && true); true && true var bool = ((4 >= 6) || ("人" != "阿凡达")) && !(((12 * 2) == 144) && true); console.log(bool); var num = 10; // 5 == num / 2 && (2 + 2 * num).toString() === "22" // 5 == 5 && "22"==="22" if(5 == num / 2 && (2 + 2 * num).toString() === "22") { console.log(true); } var a = 1; var b = 2; a++; var num = ++a + (a++) + a + (++b) + b++; // 3 + 3 + 4 + 3 + 3; console.log(num); var aa = 0&&1; alert(aa) var bb = 1&&0; alert(bb); var cc = 1&&10; alert(cc); console.log(0||1); console.log(1||0); console.log(1||5); console.log(5||1); var a = 1 && 2 && 3; console.log(a); var b = 0 && 1 && 2; console.log(b); var c = 1 && 0 && 2; console.log(c); var a = 0 || 1 || 2; var b = 1 || 0 || 3; console.log(a),console.log(b); var a = 3 && 0 || 2; var b = 3 || 0 && 2; var c= 0 || 2 && 3; alert(a),alert(b),alert(c); var a = 1+1&&3; var b = 0 && 1+1; var c = 1 || 2 && 3-1; alert(a);alert(b);alert(c); </script> </body> </html>
5.if判断
a）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> if(true){ alert(1); } if(false){ alert(2); }else{ alert(3); } if(false){ alert(4); }else if(false){ alert(5); }else if(false){ alert(6); }else if(false){ alert(7); }else if(true){ alert(8); }else if(false){ alert(9); }else{ alert(10); } //switch底层用的是===比较 switch ("111"){ case 111: alert(111); break; case 222: alert(222); break; case 222: alert(333); break; default : alert("都不是！"); } </script> </body> </html>
b）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> //需求：输入名人，弹出他所参演的电视剧！ //步骤： //1.页面输出，后台获取。 //2.判断输出的人物是谁并给出电视剧。 //3.如果没有这个人，那么弹框警示！ var str = prompt("请输入一位名人："); if(str === "陈道明"){ alert("陈老师参演过：《康熙王朝》《楚汉传奇》《江山风雨情》..."); }else if(str === "吕超"){ alert("吕老师参演过：《雷雨》负责里面的雷雨......"); }else{ alert("这货谁，换一个，不认识！"); } //需求：弹框显示今天是星期几。 //步骤： //1.获取当天是星期几。 //2.判断星期几，弹簧弹窗显示 var date = new Date(); // console.log(date.getDay());//礼拜日给我们的值将是0 var num = date.getDay(); switch (num){ case 0: alert("星期日"); break; case 1: alert("星期一"); break; case 2: alert("星期二"); break; case 3: alert("星期三"); break; case 4: alert("星期四"); break; case 5: alert("星期五"); break; case 6: alert("星期六"); } //需求：百分制转换成优良中可差。 //思路1：获取值，然后判断在90-100....80-90... //思路2(难点)：获取值，然后除以10取整，==10满分，==9优，==8良，==7中，==6可，其他差！ //步骤： //1.获取值，然后除以10取整。 //2.判断 var num = prompt("输入成绩："); num = parseInt(num/10); switch (num){ case 10: alert("满分"); break; case 9: alert("优"); break; case 8: alert("良"); break; case 7: alert("中"); break; case 6: alert("可"); break; default : alert("差！！！"); } </script> </body> </html>
6.for循环
a）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var i=1; for(;i<=10;i++){ console.log(i); // i++; } console.log(i); // 死循环 // for(;;){ // alert(1); // } </script> </body> </html>
b）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 1 打印1到100 for(var i=1;i<=100;i++){ console.log(i); } // 2 打印1到100的和 //计数器思想 var sum = 0; for(var i=1;i<=100;i++){ // sum = sum+i; sum += i; } console.log(sum); // 3 求1-100之间所有数的和、平均值 var sum = 0; for(var i=1;i<=100;i++){ sum+=i; } var avg = sum/(i-1); console.log(avg); // 4 求1-100之间所有偶数的和、所有奇数的和 var sumOdd = 0;//奇数和 var sumEven = 0;//偶数和 for(var i=1;i<=100;i++){ //判断如果是奇数加到sumOdd，如果是偶数加到sumEven if(i%2 === 1){ sumOdd += i; }else{ sumEven += i; } } console.log(sumOdd); console.log(sumEven); </script> </body> </html>
c）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 5 本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？ //需求：本金10000，利率千分之3，求5年本息和。 //步骤： //1：利用for循环，把每年的利息添加到本金中作为第二年的本金 //2：一共循环五次 var money = 10000; var rote = 0.003; for(var i=1;i<=5;i++){ // money = money+money*rote); // money = money*(1+rote); // money *= (1+rote); money *= 1+rote; } alert(money); // 6 有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？ // 兔子的规律为数列，1，1，2，3，5，8，13，21 // n1 n2 n3=n1+n2,n4=n2+n3,n5=n4+n3...... //斐波那契数列：1，1，2，3，5，8，13，21，34，55，89，144........... //需求：求斐波那契数列第12项是多少？ //思路：设置两个变量，分别代表第一个和第二个数值，然后从第三项开始，当前项等于前两项之和。在赋值之前，先把后一项保存起来，赋值完毕在把保存值赋值给第一项。 //步骤： //1.定义两个变量和一个中间值 //2.然后利用循环交换变量和以及变量 //3.直接打印n2 //1.定义两个变量和一个中间值 var num1 = 1; var num2 = 1; //2.然后利用循环交换变量和以及变量(循环次数 = 从第三项开始循环，到第12项结束) for(var i=3;i<=12;i++){ var temp = num2; num2 = num1+num2; num1 = temp; // num1 = num2-num1; } //3.直接打印num2 alert(num2); </script> </body> </html>
d）打印正方形，三角形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> document.write("☆") document.write("☆") document.write("☆<br>") document.write("☆") document.write("☆") document.write("☆<br>") document.write("☆") document.write("☆") document.write("☆") document.write("<br>"); //需求：打印宽9，长9的正方形。 //for(var k=1;k<=9;k++){ for(var j=1;j<=9;j++){ for(var i=1;i<=9;i++){ document.write("☆"); } document.write("<br>"); } // document.write("<br>"); //} document.write("<br>"); //需求：打印三角形(外循环控制行，内循环控制列) for(var j=1;j<=9;j++){ for(var i=1;i<=j;i++){ document.write("☆"); } document.write("<br>"); } </script> </body> </html>
e）打印乘法表
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1"> <tr> <td>1*1=1</td> </tr> <tr> <td>1*2=2</td> <td>2*2=4</td> </tr> <tr> <td>1*3=3</td> <td>2*3=6</td> <td>3*3=9</td> </tr> </table> <script> for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(i+"*"+j+"="+i*j+" "); } document.write("<br>"); } document.write("<table border='1'>"); //在这里面利用for循环输出tr和td... document.write("</table>"); </script> </body> </html>