时间：2023-05-24 23:03:01 | 来源：网站运营
时间：2023-05-24 23:03:01 来源：网站运营
web开发(五)：JS基础：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JaveSript基础</title> <style> a {display: block;} </style></head><body> <!--一、JS简介： JS是一种面向对象、解释性的程序设计语言。 它是一种运行在客户端的脚本语言，因为它不需要在一个语言环境下运行，只需浏览器即可，主要目的是验证发往服务器端的数据、web前后端交互、增加用户体验等。 所以一个网页是由三部分组成：结构(HTML5,实现布局的)、表现(css3,调整格式的)、行为(JS,负责逻辑的) 所以前端开发的核心是JS。--> <!--二、JS组成： 1、ECMAScripy(标准：ECMA-262)：是JS中的基础语言部分 2、DOM(标准：W3C规范)：属于节点操作，文档对象模型。 比如可以动态的添加HTML中的标签、css中的结构样式等。比如我们要做前后端交互，数据从后端拿到后，前端要去做渲染，这个渲染过程就是一个动态渲染，就是把 数据嵌入到标签中并且漂亮的展现出来。我们之前都是提前把数据写入HTML、css中，这叫静态渲染。动态就是从数据库中取数据，然后再临时加载到html/css中。 3、BOM（无规范，因为有很多浏览器厂商，这些厂商各有各的标准，所以没有统一的标准）：浏览器操作--> <!--三、使用JS 1、script标签： <sript></script>这组标签，是用在html页面中插入JS的主要方法。属性有： type:必需。表示代码使用的脚本语言的内容类型。type="text/jacasript"就表示script标签里面的语言是js语言。 charset:字符编码,主要解决汉字乱码问题。因为前面的meta都已经定义了，所以这里是不需要再设置这个属性的。 defer:表示脚本可以延迟到文档完全被解析和显示之后再执行。 src：表示要执行代码的外部文件 async：规定异步执行脚本，仅适用于外部脚本。 说明：就是JS代码要嵌入到script标签里面。 script标签可以写在html文档的任意地方。但是由于JS和THML标签一起同步执行的，为了避免JS阻塞，JS最好写在body后 2、在a标签的href中写JS代码，但是开发中不建议这样写，因为会影响到性能。A 3、用script标签引入外部JS文件。B src:表示引入的外部JS文件的路径和文件名，只能用于引入JS文件，如果引入其他文件写法是不一样的。 async:表示异步加载JS代码，就是在加载DOM元素的同时可以运行JS代码。默认的是同步处理，加上这个参数就是异步处理。 说明：JS文件目前是不能独立进行的。 --> <script type="text/javascript" defer="defer" charset="utf-8"> //defer="defer"表示DOM(DOM就是HTML文档中的所有标签)被加载完毕后，再执行下面的alert语句。 alert("这是我的第一个JS程序"); //alert表示弹出一个警告框，alert()后面填写的是警告的内容 alert("上一个警示错了") //如果上一句代码写错了，浏览器解析不出，就出现JS阻塞。 </script> <a href="javascript:alert('大家好')">链接</a> <!--A--> <a href="javascript:var a=10,b=20; alert('结果是：'+(a+b))">复杂一点的逻辑</a> <!--A--> <a href="javascript:close();">×</a> <!--A:给a标签里面封装一个close方法,页面就出现一个X号，就可以关闭页面--> <a href="javascript:void(1);">test</a> <!--A:当我们刷新页面时，test也会跟着刷新，但是加了javascript:void(1)后就阻值了test的刷新，就是不会跳转--> <script src="6-1-test.js" type="text/javascript" async="async"></script> <!--B--> <script> var x=10; //定义一个内存变量x，并且这个变量的初始值是10 var y=20; </script> <script> //编写一个程序，键盘输入用户名，然后在浏览器中输出来。 //开发步骤：1、引入prompt()方法。2、输出到浏览器中 var yonghuming = prompt('请输入你的大名：'); //开发步骤：1、引入prompt()方法。表示从键盘输入的内容存入到内存变量yonghuming中 document.write('你的大名是：'+yonghuming); //开发步骤：2、输出到浏览器中。表示在浏览器中显示出来。document是文档的意思，write是写入。 </script> <hr> <!--四、常量、变量、定义变量、数据类型 常量，就是在程序中直接给出具体数值的对象。比如：100，true, 'abc', null, undefined等。 变量：就是在内存中开辟一段空间用于存放某个数据。变量必须有变量名，就是数据在内存中的名字。 定义变量：1、只定义变量： var x; var a, b, c; 2、定义变量且赋值：var x1=true; var y1=100, y2=null; 说明：定义变量时不需要给出数据的类型，是一个弱类型语言。 在定义变量时，如果没有给变量赋值，系统将自动默认值为'undefined'. 一条语用分号结束。如果多条语句写在同一行上必须用分号隔开。 数据类型：指数据在内存中存储的方式。分：基本数据类型和引用数据类型。 基本数据类型：JS中只提供number数值型、string字符型、boolean布尔型、null空、undefined未定义5个类型。 引用数据类型：只有object对象型1种。用来声明或存储一个对象(对象，函数，正则、字符、数值等) --> <script> var x=100; var x='abc'; console.log(x); //查看一下变量x的值，就用console.log(),表示在控制台输出，用于开发时的测试。 name='张三'; //这里不用var去定义name变量也是可以的。默认是为window对象添加了属性。相当于：window.name='张三'。window是JS已经定义好的全局对象，所以不用再去定义直接用即可。 console.log(name) </script> <script> //NAN,非数值，not a number,是一个特殊的值，用于表示一个本来要返回数值的操作数未返回数值的情况，这样就不会抛出错误了。 //null，空，表示一个空对象的地址指向为空。undefined表示定义了一个变量，但如果没有给这个变量赋值，系统将自动赋值为undefined。 alert(isNaN(NaN)); //返回true alert(isNaN(25)); //返回false,25是一个数值 alert(isNaN('25')); //返回false,因为'25'是一个字符串数值，可以转成数值 alert(isNaN('lee')); //返回true,因为'lee'不能转换为数值 alert(isNaN(true)); //返回false,true可以转换成1. </script> <script> var a1 = new Number(10); //这样定义的话，a1就是一个object var a2 = 10; //这样定义a2就是一个数值 console.log(a1, a2); console.log(a1==a2); //看看a1和a2是否相等，返回true. console.log(typeof a1, typeof a2); //typeoff用于获取对象类型 console.log(a1===a2); //三个等号是精确比较，比较的不止是数值还比较数据类型，所以返回false var obj = { //定义一个对象类型的数据 xuehao:'007', name:'张三', }; console.info(obj, typeof obj) //console.log是以日志的方式显示，console.info()是以消息的方式显示 </script> <!--五、运算符： 算术运算符：+-*/%(求余、求模) ++(加1，自增) --(减1，自减) 字符串运算符：+，用于将字符串连接。 关系运算符：< > <=> = == != === !==,返回只能是true or false。字符比较是比较ASCII码值。汉字比较是比较Unicode编码值的大小。 逻辑运算符：AND, OR ,NOT。非！与&&或||。非！表示取反。逻辑与&&：只要一个操作数是false,结果为false。逻辑或||：只要一个操作数是true,结果为true。 &&运算时，如果第一个操作数是false，不需要计算第二个操作数，直接结果返回false. ||运算时，如果第一个操作数是true,不需要计算第二个操作数，直接返回结果true. 三目运算符：又称条件运算符。语法是：表达式1？表达式2：表达式3 意思是：如果表达式1成立，返回表达式2的结果。如果表达式1不成立，返回表达式3的结果。相当于if语句中的双分支结构。 --> <script> var x = 10, y = 20; console.log(x+y); console.log(x-y) var z = ++x; //相当于x=x+1; z=x;所以x=11,z=11 console.log(x, z) var z = x++; //相当于先执行z=x;再执行x=x+1 ,所以返回12 11 console.log(x,z) console.log('aaa'+'bbb') console.log(123+'abc') //此时数值对象自动转换为字符串类型然后再相加，返回123abc console.log(true+'nihao')//返回truenihao console.log((true+'hello').length);//求字符串长度，返回9 console.log('张三'.charCodeAt(0)) //求’张‘的unicode编码 console.log('100'==100) //返回true console.log('100'===100) //返回false console.log(!0) //数值0自动转换为false,所以返回true. console.log(![]) //对象或数组不管有没有值都转换为true.所以这个返回false. console.log({}) //返回true. console.log(true&&true) //返回true. console.log(false&&true) //返回false. console.log(false&&false) //返回false. console.log(true||false) //返回true. var a=3>2?'abc':'123' console.log(a) </script> <!--六、流程控制： JS是一门既面向过程，也是面向对象的解释型语言。是用在浏览器端，不需要编译的。面向过程是按照代码书写顺序依次执行。 JS的结构分为：顺序结构、分支(条件/选择)结构、循环结构3种。 顺序结构：就是按照代码的顺序依次执行，一般包括初始化、赋值、输入输出等语句 条件结构：用if或switch语句实现，就是代码是有条件选择执行的。 循环结构：某部分代码在指定的条件范围内反复执行，用for、for...in、forEach、while、do...while语句实现 语法：if(条件){语句} if(条件){语句}else if(条件){语句} else if(条件){语句}...else{语句} A switch(表达式){ B case 表达式1: 语句1; [break] case 表达式2: 语句2；[break] case 表达式3: 语句3; [break] default: 语句4； } 说明：先执行switch后面的表达式，如果执行完的结果复合case1，就执行case1后面的语句1，如果case1后面还有break就跳出switch代码块。 如果case1后面没有break，就直接执行case2后面的语句2而不需要判断case2后面的表达式2。同理类推直到执行default语句完毕停止。 --> <script> //A var name = window.prompt('please input your name:') if(name) { document.write(name+'同学，你好！') } else{ document.write('你没输入名字呀！') } </script> <script type="text/javascript"> //B:情况语句示例 //要求：根据学生的成绩情况，如果90-100分输出非常棒，60-70及格，70-80良好，80-89优秀，60以下不及格。 var score = parseInt(prompt('请输入你的成绩：')); //parseInt表示转换成整型数值，parseFloat()表示转换成浮点型。 var rs = ''; switch(Math.floor(score/10)){ //Math.floor()表示向下取整 case 0: case 1: case 2: case 3: case 4: //这里都是一个空语句，也就是没有break,就会一直往下执行，直到执行到case5,遇到break就跳出switch代码块。 case 5: rs='不及格'; break; case 6: rs='及格'; break; case 7: rs='良好'; break; case 8: rs='优秀'; break; case 9: rs='非常棒'; break; case 10: rs='满分'; break; default: rs='您输入的成绩格式不对，请输入数字！'; } document.write('您的成绩是：'+rs) </script> <script> //用if结构写上面的需求 var score = parseInt(prompt('输入你的成绩：')); var rs = ''; if(score>=90 && score<=100){ rs = '非常棒'; }else if(score<90 && score>=80){ rs = '优秀' }else if(score<80 && score>=70){ rs = '良好' }else if(score<70 && score>=60){ rs = '及格' }else if(score<60){ rs = '不及格' }else{ rs = '您输入的成绩格式不对，请输入数字！' } </script> <script> //需求：求1+2+3+。。+100=？ var sum = 0; for(var i=1; i<=100; i++){ //初值、终值、步长。for()中一定要写条件，不然就默认条件一直是true,就会一直循环不会跳出、死循环。 sum = sum + i; } document.write(sum + '<br/>') </script> <script> var i=1; sum=0; for(; i<=100;){ sum = sum + i; i++ } document.write('1+2+3+...+100= '+sum + '<br/>') </script> <script> var i=1, sum=0; for(;;){ if(i<=100){ sum = sum+i; i++; }else{ break; } } document.write('计算:1+2+3+...+100= '+sum + '<br/>') </script> <script> //while循环示例： //语法：while(条件){循环体[continue;][break;]} //当条件成立时，执行循环体，否则跳出。 var i=1, sum=0; while(i<=100){ sum += i; i++; } document.write('用while循环计算的结果是:' + sum + '<br/>') </script> <script> //do...while循环示例： //do{循环体[continue;][break;]} while(条件) //先执行循环体，再判断条件，如果条件成立继续循环，反之跳出循环。 var i=1, sum=0; do{ sum += i; i++; }while(i<=100); document.write('用do while计算的结果是:' + sum + '<br/>') </script></body></html>写得也不是很详细，因为我发现各种语言的套路其实都一样，所以就简单提及一下即可。关键词：基础
