38、重新复习javascript之三
前言
虽然吧，每天都没有什么太有技术性的工作者，但是技术不能丢，希望也要有，人如果没有希望那不就和咸鱼一样了吗?小伙加油吧
1、html与javascript结合
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> alert('aaa'); </script> </body> </html>
2、js基本语法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //1 变量声明 var num = 10; var str = 'haha';//"haha" 没有区别 //变量声明使用var //变量区分大小写 str 和 STR 不是同一个变量 //字符串使用 双引号 或 单引号包裹 都可以. num = "hello";//变量的类型可以随时改变. //命名规则 //2 行尾使用";" 作为一行的结束符号.(可以没有";",以折行符(回车)作为一行的结尾.)(不推荐) var num2 = 20 //3 js中的注释有两种 单行,多行 // 单行注释"//" // 多行注释 "/* */" // 没有文档注释 //4 封装代码块 与 java一样,使用{}. //5 变量声明时,前缀var 也不是必须的. //加var 和 不加 var 有什么区别? // 如果不使用var,那么该变量是全局变量 function fun1(){ var a = 10; b = 100; } fun1(); alert(b); </script> </body> </html>
3、原始类型判断符
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> var num1 = 10; var num2 = 3.14; var str1 = 'a'; var str2 = "hello"; var b = true; var c; var d = null; //typeof alert(typeof num1); alert(typeof num2); alert(typeof str1); alert(typeof str2); alert(typeof b); alert(typeof c); alert(typeof d);// object //为什么null返回object? //是js中的一个bug,这个bug 被认为很贴切.所以保留了该bug. </script> </body> </html>
4、js中的运算符
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //一元加法 ==> java中 类型转换需要自己准备. ==> js 自带类型转换.==> js很随便 var a = +"123"; //alert(typeof a);//number var b = -"123"; // -123 var c = +"abc"; // 还是会进行类型转换,转换失败. alert(typeof c); alert(c);//转换失败之后,会返回NaN. not a number. NaN也属于number. </script> </body> </html>
5、js中的运算符
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //boolean运算符 /* if(NaN){ alert("true"); }else{ alert("false"); } */ //转换规律 (重点) //string ==> ""==>转换为false 其他都为true; //number ==> 除了NaN,+0和-0.其他都转换为true. //null ==> false //undefined ==> false //NaN特性: //1 NaN参与的任何boolean运算返回值都是false. 除了!= /* alert(6>NaN);//false alert(6<NaN);//false alert(6==NaN);//false alert(NaN == NaN);//false */ //因为undefined是null衍生出的,所以 alert(undefined == null);// true </script> </body> </html>
6、js中的运算符03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> alert(11>3);//true //当运算符两端 , 一端是数字,一端是其他类型时, 其他类型会自动向数字类型转换 alert("11">3);// true alert(11>"3");//true //字符串在进行比较时 ,规律是: 比较首字符asc码. 如果一样,比较第2位... alert("11">"3");// false alert("11">"1");// true alert("abc">11);//false </script> </body> </html>
7、function对象的创建
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //1 js中的函数对象 //java中方法,函数 //public void xxx(){} //function fun1(){} ==> 这是定义对象.特殊之处,就是想java中的方法一样,可以执行. //方式3 function fun1(){ alert('aaa'); } alert(fun1.toString());//函数对象的toString方法,打印函数的完整定义 //js中函数对象的创建方式 //方式1 ==> 函数对象的构造方法中,最后一个参数是定义函数的体.之前所有参数都是定义函数的参数 var fun2 = new Function("a","b","alert(a+b);"); function fun2(a,b){ alert(a+b); } //方式2 var fun3 = function (){ alert('bbb'); } //问题如下:观察如下代码,查看是否有问题! function a(a,b){ alert(a+b); } var c = 1; var b = 2; a(c,b); </script> </body> </html>
8、function对象的调用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //1 js中的函数对象 //函数的调用 function fun1(a,b){ alert(a+b); } /*f un1(1,2);//3 fun1(1,2,3);//3 fun1();//NaN */ //js中函数的调用只看函数名称.不看参数列表 function fun2(){ //alert(arguments.length); //取得实际参数个数 alert(arguments[0]); // 获得第一个实际参数 } //函数中的内置对象 arguments //arguments ==> 代表函数运行时的实际参数列表. /* fun2(); //0 undefined fun2(1,2); //2 1 fun2(1,2,3); //3 1 */ // js中存在函数的重载吗? 如何重载? function fun3(){ alert('aaa'); } function fun3(a){ alert('bbb'); } //如上不能重载,是覆盖 function fun4(){ if(arguments.length == 2){ alert(arguments[0]+arguments[1]); }else if(arguments.length == 3){ alert(arguments[0]+arguments[1]-arguments[2]); } } fun4(1,2);//3 fun4(1,2,3);//0 //以上是重载. </script> </body> </html>
9、function对象的返回
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //---如果函数没有显示指定返回值 那么函数返回值为undefined. /* function fun1(){} alert(fun1()); */ //----------------------------------- //使用return 关键字,返回内容 function fun2(a,b){ alert('fun2'); return a+b; } //alert(fun2(1,2));//3 //return 关键字,在js中也可以作为结束方法运行的功能. function fun3(){ alert('aaa'); return ; alert('bbb'); } //fun3(); //--运算符 void()的使用----------- //用来拦截函数的返回值的. //alert(void(fun2(1,2)));//undefined </script> <a href="javaScript:void(fun2(2,3))" >点我</a> <br/> <a href="javaScript:void(0)" >点我</a> </body> </html>
10、String,Boolean&Number
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //JS ==> 原始类型string可以直接使用对象类型的方法和属性.string boolean number 被定义为伪对象. //string boolean number ==> 原始数据类型 //String Boolean Number ==> 对象类型 //java ==> 自动装箱拆箱. //int short .... //Integer Short .... //-------------------------------------------------------------------------- //Boolean 和 Number 类型 中的方法在开发中几乎不可能用到. //String对象 ==> 学习重点. //属性 //length ==> 长度 var str1 = "abc"; var str2 = new String("abc"); /* alert(str1.length); alert(str2.length); alert(typeof str1); //string alert(typeof str2); // object */ //方法 //1 没用的方法 /* alert(str1.big()); alert(str1.sub()); alert(str1.bold());*/ //2 重要的方法 //indexOf //lastIndexOf //charAt //alert(str1.charAt(0));//a //charCodeAt 返回所在字符的asc码 //alert(str1.charCodeAt(0));//97 //subString alert(str1.substring(0, 1));//a //slice 支持负数. 从右往左. alert(str1.slice(0, -1));//a //3 与正则结合的方法(正则对象讲完回来看.) //split //replace //match //search </script> </head> <body> </body> </html>
11、String,Boolean&Number类型转换
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //利用3大包装类的构造函数进行类型转换. // string ==> boolean var b1 = new Boolean("abc"); //boolean ==> string var str1 = new String(true); // number ==> string var str2 = new String(123); //string ==> number var num1 = new Number("123"); //.... //运算符==> //typeof 运算符 判断原始数据类型的. //instanceof 运算符 用来判断属于哪种对象. alert(num1 instanceof Number);//true alert(num1 instanceof Object);//true alert(num1 instanceof String);//false </script> </head> <body> </body> </html>
12、Global对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //利用3大包装类的构造函数进行类型转换. //6个方法==> 关于解码,编码的方法 //encodeURI 编码 只编码汉字 //decodeURI 解码 var url = "http://www.baidu.com?name=?张/三:" var url2 = encodeURI(url); //alert(decodeURI(url2));//张三 //encodeURIComponent 编码 当提交的值中包含一些url中的敏感符号时,使用该方法对敏感符号编码. //decodeURIComponent //alert(encodeURIComponent(url)); //escape 已经过时 //unescape 已经过时 // isNaN 判断某个值是否是NaN ==> NaN==NaN=>false //alert(isNaN(NaN));//true //alert(NaN == NaN);//false // parseInt 转换成整数 // parseFloat 转换成浮点数 var str = "123abc"; //1.使用 + //2.使用 new Number() //3.parseInt //alert(typeof parseInt(str));//number /* alert(+str); //NaN alert(new Number(str));//NaN alert(parseInt(str));// 123 */ //区别: 1,2两种转换属于将字符串整体进行转换.如果字符串中包含1个或以上转换不了的字符,返回NaN //3 从左到右 依次转换,能转一个是一个,直到遇到不能转换的值停止. // parseFloat 转换成浮点数 //与上面的parseInt一样.区别是支持转换小数 var str = "3.1415.9265357"; alert(parseInt(str));// 3 alert(parseFloat(str));//3.1415 // </script> </head> <body> </body> </html>
13、Math对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //Math对象 //属性内建对象==> 不需要创建实例,直接使用即可. //属性 //PI ==> 3.14159 圆周率 //方法 //random方法 ==> 返回随机数 0~1之间的随机数 包括0不包括1 //alert(Math.random()); //round方法==> 四舍五入方法. //返回0~100之间的随机数.0 和100 都可能出现 //alert(Math.round(Math.random()*100)); //max/min 方法 ==> 接收两个参数,比较之后返回最大/最小的那个. alert(Math.max(1,2));//2 //pow ==> 计算参数1的参数2次方. alert(Math.pow(2,3));//8 </script> </head> <body> </body> </html>
14、ECMA中定义的对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //1 js中的函数对象 //java中方法,函数 //public void xxx(){} //function fun1(){} ==> 这是定义对象.特殊之处,就是想java中的方法一样,可以执行. //方式3 function fun1(){ alert('aaa'); } alert(fun1.toString());//函数对象的toString方法,打印函数的完整定义 //js中函数对象的创建方式 //方式1 ==> 函数对象的构造方法中,最后一个参数是定义函数的体.之前所有参数都是定义函数的参数 var fun2 = new Function("a","b","alert(a+b);"); function fun2(a,b){ alert(a+b); } //方式2 var fun3 = function (){ alert('bbb'); } //问题如下:观察如下代码,查看是否有问题! function a(a,b){ alert(a+b); } var c = 1; var b = 2; a(c,b); </script> </body> </html>
15、Array对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //Array对象 ==> 数组 //1.创建方式 //1>创建方式1 创建一个数组并初始化值 var arr1 = ["abc",2,true,null,undefined,new Object()]; //2>创建方式2 同方式1 var arr2 = new Array(1,2,3); //3>创建方式3 ==> 创建一个长度为3的数组. 数组Array的构造函数,如果只传一个参数,并且这个参数是整数.那么这个整数就是数组的初始化长度. var arr3 = new Array(3); //2.属性 //length ==> 数组的长度 /* alert(arr1.length);//6 alert(arr2.length);//3 alert(arr3.length);//3 */ //js中数组的特点: //1.js中的数组,类型任意. //2.数组的长度不是固定的.用到哪里,就有多长. /* arr3[8] = 10; alert(arr3.length);//9 alert(arr3[6]);//undefined */ //3.方法 var arr4 = [1,2,3]; //join方法==> 将数组中的每个元素连接起来返回一个字符串.参数就是连接符.(默认连接符是",") //alert(arr4.join(""));//使用该方法可以模拟一个StringBuilder //join方法的高级应用. /* var str1 = "a"; var str2 = "b"; var str3 = "c"; alert(str1+str2+str3); ["a","b","c"] ==> "abc" */ //push/pop ==> 模拟栈的结构. //shift/unshift==> 模拟队列的结构 //reverse方法 ==> 将数组中的元素顺序倒置 //alert(arr4.reverse());//3.2.1 //sort方法 ==> 排序的方法. //注意: 该方法默认排序规则,按照字符串规则排序. //如果需要按照数字排序,需要准备一个比较器. var arr5 = [2,9,3,100,5,7,1]; alert(arr5.sort(abc))// //函数对象==> 比较器 function abc(a,b){ /* if(a>b){ return 1; }else if(a==b){ return 0; }else{ return -1; } */ return a-b; } </script> </head> <body> </body> </html>
16、Date对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //Date对象 /* 1.new Date() 获取当前时间 2.getFullYear() 获取年份 3.getMonth() 获取月份注意 1月份结果为0 4.getHours() 小时 5.getDate() 日期 6.getMinutes() 分钟 7.getSeconds() 获取秒 8.getTime() 获取毫秒值. 9.toLocaleString() 获取本地的时间格式字符串. 10.getDay();获得星期 */ //空参构造获得当前时间 var date = new Date();//当前时间 //填入毫秒数,获得毫秒数对应的时间 var date2 = new Date(10000000000000); /* alert(date.getFullYear());// alert(date.getMonth());// alert(date.getHours());// alert(date.getDate());// alert(date.getMinutes());// alert(date.getSeconds());// alert(date.getTime());// alert(date.toLocaleString());// alert(date.getDay());// */ //注意: //1.月份计数时是0~11月,所以要加1获得正常月份 //2.星期计数是 0~6 . </script> </head> <body> </body> </html>
17、RegExp对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //正则对象 //1 构造方法 //参数1 正则字符串 ,参数2 匹配模式 //用户名必须 以字母开头,长度在6到10位之间. //匹配模式有两种 //"i": 忽略大小写. ignoredCase //"g": 全局匹配 global var reg1 = new RegExp("^[a-zA-Z][a-zA-Z_0-9]{5,9}$","g"); var reg2 = /^[a-zA-Z][a-zA-Z_0-9]{5,9}$/g; //2 方法 //test方法 ==> 测试字符串与正则是否匹配. var username = "a3456"; //alert(reg1.test(username));//true //与String对象结合的4个方法 var str = "hello world"; //split 切割字符串 //alert(str.split(/o/g)); //replace 查找替换 //alert(str.replace(/o/g, "haha")); //search 只能找第一个出现的位置. 如果需要查找第n个出现的位置使用exec方法. //alert(str.search(/o/g)); //match ==> 找到字符串中符合正则表达式的部分并返回. alert(str.match(/o/g)); </script> </head> <body> </body> </html>
18、作业相关知识
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //1 对数组进行排序 var arr = [2,3,5,9,1]; //选择或冒泡 //2 打印99乘法表 ==> 必须整齐工整 ==> 把99乘法表嵌套到Table中 document.writeln("hello<br/>"); document.writeln("hello"); //3 在页面中写一个 猜数字的游戏! //要求: 生成0~100之间的随机数.让用户猜. //输入错误需要提示,并让用户重新输入 //输入正确,提示正确,并询问是否要继续游戏. //显示提示 alert(); //用户输入值 .参数1提示信息 参数2默认值 //var num = prompt("请输入一个值!","123"); //确认框 返回值 确定=>true 取消=>false //var result = confirm("您确定要删除吗?"); //窗口关闭 //window.close(); </script> </head> <body> </body> </html>
