1.js引入
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>js引入</title> <style type="text/css"> .span1{ color: red;} </style> <!--外链式--> <!--<script src="./1.js"></script>--> </head> <body> <!-- dom == document object model 有属性 有方法 行内式引入 --> <p class="" id="" onclick="clickhandler()">123</p> <span>234</span> </body> <!-- 内部式 引入 建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作--> <script type="text/javascript"> // window.document.write() // document.write('有一首歌叫123') document.write('<span class="span1">233</span>'); // windows.console.log() console.log('我很好'); console.error('错误ss'); console.dir(window); console.clear(); var a = prompt('输入姓名'); console.log(a); function clickhandler(){ // 弹出警告框 /* 这是一个方式 一个很好得方法 */ window.alert(1); alert(1) } </script> </html> <!-- 总结： 引入js 三种方式； 行内式 内部式 外链式 做项目时：css js 一般使用外链式引入； javascript得输出方式： 1.document.write('有一首歌叫123') document.write('<span class="span1">233</span>'); window.document.write() 2.console.log('我很好'); console.error('错误'); console.clear(); windows.console.log() 3.alert(1); window.alert(1); 4.innerHTML/innerText ... 5.var a = prompt('输入姓名'); console.log(a); -->
2.变量的声明和定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量得声明和定义</title> </head> <body> </body> <script type="text/javascript"> // 变量得声明 //js 中代码得执行顺序 自上往下 //1.先声明在定义 var dog; // alert(dog); //undefined 未定义 dog='小黄'; // alert(dog) // alert(dog) // alert(dog) //2.声明立刻定义 var dog2='小红'; // alert(dog2); var $='aa'; alert($); //建议使用驼峰标识 来命名 var myHousePrice = '$1234'; /* 变量命名规范： 1.严格区分大小写 2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。 关键字：var number等 除了关键字 top name 也尽量不使用。 3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写 4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀 */ </script> </html>
3.五种基本数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本数据类型</title> </head> <body> <script type="text/javascript"> /* js中有两种数据类型 1.基本数据类型 number string boolean null undefined 2.引用数据类型 对象 Array object 正则 函数 */ //1.number 数字类型 var a = 123; console.log(a); console.log(typeof a); //2.string 字符串类型 var str = '123'; console.log(str); console.log(typeof str); //3.boolean 布尔类型 var b1 = false; //true/false console.log(b1); console.log(typeof b1); //4.null var c1 = null; //空对象 console.log(c1); console.log(typeof c1); //5.undefined var d1; console.log(d1); console.log(typeof d1); //特殊：分母为0； // Infinity // number var e1 = 5/0; console.log(e1); console.log(typeof e1); </script> </body> </html>
4.运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script type="text/javascript"> //1.赋值运算符 // var money = prompt('请输入金额...'); // var saveMoney = money * (1+0.02); // console.log(saveMoney); //2.算数运算 var a = 10; var b = 3; var sum = a + b; var min = a - b; var t1 = a * b; var t2 = a / b; var t3 = a % b; // 余数 console.log(sum,min,t1,t2,t3); // 13 7 30 3.3333333333333335 1 //3.复合运算符 var c = 7, d = 8; // d = c + d; d += c; console.log(c,d); // 7 15 // 自增 自减 var e1 = d++; //先赋值后+++ var e2 = ++d; //先++后赋值 console.log(e1,e2); var f1 = d--; var f2 = --d; console.log(f1,f2); //4.比较运算符 > < >= <= == === != console.log(5>6); //false console.log(4==4); //true console.log(4==5); //false // 隐式转换 浏览器会将数值转成字符串； === 类型和值都比较 console.log('5'==5); // true console.log('5'===5); // false console.log(4!=3) // true //5.逻辑运算符 &&（and） ||(or) console.log('xxx:',false && false) // console.log(true && true) console.log(true || false) // true </script> </body> </html>
5.字符串处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串处理</title> </head> <body> <script type="text/javascript"> //字符串运算 var firstName = 'alice'; var lastNmae = 'B'; var fullName = firstName + " " + lastNmae; console.log(fullName); // 字符串拼接 //字符串拼接 var str1 = '飞行员'; var str2 = '航空公司'; var str = '该法院受理的'+str1+'离职纠纷案件中，'+str2+'要求离职飞行'; console.log(str); // 对字符串 + 是拼接 其他得运算可以 - * / var a1='1'; var a2='2'; console.log(a1+a2); // 12 拼接 不是数值 console.log(typeof(a1+a2)); // string console.log(parseInt(a1)+parseInt(a2)); // 3 console.log(a1*a2); // 2 console.log(typeof (a1*a2)); //number var b1 = 'one'; var b2 = 'two'; console.log(b1*b2); // NaN == not a number console.log(typeof (b1*b2)) // number </script> </body> </html>
6.数据类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型转换</title> </head> <body> <script type="text/javascript"> //1.将数字类型转换成字符串类型 隐式转换 String() num.toString() var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 123 隐式转换 将数字转换成 string 进行拼接 console.log(n3); // 123123 console.log(typeof n3) // string //强制类型转换 String() toString() console.log(':',typeof n1) var str1 = String(n1) console.log(str1); console.log(typeof str1) var num = 234; console.log(num.toString()) //2.将 字符串 类型转换成 数字 类型 Number() parseInt() parseFloat() var stringNum = '789.123as'; var num2 = Number(stringNum); console.log(num2) console.log(typeof num2); // parseInt() 解析一个字符串 并且返回一个整数 console.log(parseInt(stringNum)); console.log(typeof parseInt(stringNum)); console.log(parseFloat(stringNum)) console.log(typeof parseFloat(stringNum)) //number // 在js中所有得数据类型 都会被转换为boolean类型 // 0 NaN null undefined 为false 其他得为true var b1 = '123'; var b2 = -123; var b3 = Infinity; //无穷大 var b4 = 0; var b5 = NaN; var b6; //undefined var b7 = null; console.log(':',Boolean(b1)) //true console.log(Boolean(b2)) // true console.log(Boolean(b3)) // true console.log(Boolean(b4)) // false console.log(Boolean(b5)) // false console.log(Boolean(b6)) // false console.log(Boolean(b7)) // false </script> </body> </html>
7.if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>if</title> </head> <body> <script type="text/javascript"> //if 语句 var ji = 10; if(ji>=20){ console.log('大吉大利') }else{ console.log('下次努力') } if(true){ }else if(true){ }else if(true){ }else{ } // alert(222) // 浏览器解析代码得顺序 是 从上往下 执行 // 考试系统录入 var math = 90; var english = 85; var sum = 485; //1.模拟 总分 > 400 并且(&&两个条件都成立才成立)数学 > 89 被清华录入 if(sum>400 && math>90){ console.log('录入成功') }else{ alert('高考失利') } //2.模拟 总分>400或者（|| 只要有一个成立就成立）英语>85 就被复旦录入 if(sum>500 || english>85){ alert('录入') }else{ alert('失利') } if(sum>500 || (math+english)>170){ alert(22) } </script> </body> </html>
8.switch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>switch</title> </head> <body> <script type="text/javascript"> //switch var gameScore = 'good'; // case 表示一个条件 满足条件走进去 遇到break 跳出 switch(gameScore){ case 'good': console.log('good 玩得很好'); break; // 一定要加 break 否则会打印 better 下得内容 case 'better': console.log('better 很好'); break; case 'best': console.log('best'); break; default: console.log('很遗憾'); // break; // 不需要些 走到最后了 } // alert(11) </script> </body> </html>
9.while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>while</title> </head> <body> <script type="text/javascript"> // while 循环 //1.初始化循环变量 2.判断循环条件 3.更新循环变量 var i = 1; while(i<=9){ // console.log(i); i+=1; } //练习 // 1-100 之间 是3得倍数 输出出来 var j = 1; while(j<=100){ if(j%3===0){ console.log(j) } j++; } </script> </body> </html>
10.do while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>do_while</title> </head> <body> <script type="text/javascript"> // do while //1.初始化循环变量 2.判断循环条件 3.更新循环变量 // 不管有没有满足while，do里面得代码都会执行一次 var i = 3; do{ console.log(i); i++; }while(i<5); </script> </body> </html>
11.for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for</title> </head> <body> <script type="text/javascript"> //for 循环 //1.初始化 2.循环条件 3.更新循环变量 // for(var i = 1; i < 10; i++){ // console.log(i); // } //1-100 偶数 // for(var i=1;i<=100;i++){ // if(i%2===0){ // //偶数 // console.log(i) // } // } //1.练习 //1-100之间所有数得和 // var sum = 0; // for(var i=1;i<=100;i++){ // sum += i; // } // console.log(sum) //2.练习 /* ****** ****** ****** */ // 双重for 循环 // for(var i=1;i<=3;i++){ // 行 // for(var j=1;j<=6;j++){ //列 // document.write('*') // } // document.write('<br>') // } //作业： 在浏览器中输出直角三角形 6行 等边三角形 使用python 和js 语言输出 /* * * * * * * * * * * * * * * * * * * * * * */ for(var i=1;i<=6;i++){ for(var j=1;j<=i;j++){ document.write('*') } document.write('<br>') } document.write('<br><br>'); /* * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 */ /* * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 ********* ******* ***** *** * */ //等边三角形 for(var m=1;m<=6;m++){ for(var n1=m;n1<6;n1++){ document.write(' ') } for(var n2=1;n2<=2*m-1;n2++){ document.write('*') } document.write('<br>') } document.write('<br>'); //菱形 for(var a=1;a<=11;a++){ if(a<=6) { for (var a1 = a; a1 < 6; a1++) { document.write(' ') } }else{ for(var a2=7;a2<=a; a2++){ document.write(' ') } } if(a<=6){ for(var a3=1;a3<=2*a-1;a3++){ document.write('*') } }else{ for(var a4=a*2-1;a4<22;a4++){ document.write('*') } } document.write('<br>') } </script> </body> </html>