JavaScript
Posted hao_1234_1234
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。
*书籍： javascript高级编程设计 JavaScript语法精辟 FunctionJavaScript 周爱民-JavaScript JavaScript模式 *JavaSript前身LiveScript由Netscape公司开发。 JavaScript本身与Java无直接关系。 *当到了高级的时候看高手的开源代码学习最快。 编程在精，贪多嚼不烂。 *只要是Web开发都是请求和响应。 JavaScript代码可以在浏览器进行简单计算，避免频繁访问服务器（TCP三次握手协议）的耗费流量和时间。 html只是描述网页长相的标记语言，没有计算和判断能力，如果所有计算、判断（比如文本框是否为空，判断两次密码是否一致）都放在服务器端执行的话，网页会非常慢，服务器压力会很大，因此要求能在浏览器执行一些简单的运算和判断。JavaScript就是一种在浏览器端执行的脚本语言。 *JavaScript组成：核心语法（ECMAScript）、Dom（文档对象模型）、Bom（浏览器对象模型）。Bom没有标准，易不兼容，慎重使用。 *JavaScript是一种脚本语言，由所使用的浏览器来执行。 *脚本，一条条的文字命令。执行时由系统的一个解释器将其一条条的翻译成机械可识别的命令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBSCript等。（.net生成的EXE文件用记事本打开看不懂） *JavaScript是解析型语言，无需编译，直接执行。不像C#或java需要先将源代码编译后才能运行。 描述： *js是基于对象和事件的脚本语言，主要应用在客户端，由浏览来执行js代码。 *可以与用户执行信息交互。 *安全性，不允许访问本地磁盘。 *跨平台，只要是支持js的浏览器即可。 *js也是一门编程语言，所以也具有编程语言的基本特征，如：数据类型、变量、语句、函数、数组、对象等，但是表现实现和C#不同。 *js也是C系语言，所以语法与C、java、C#非常类似。 开发环境： *记事本，没有语法着色、没有良好的缩进、行号，不方便。但用VS准确和快一些。 *高级记事本：editplus、ultraedit、notepad++ *VS中直接写在html文件里。 *js代码必须写在js标签里，如 <script type="text/javascipt"> alert(‘hello‘)/*警告信息：hello*/ alert（new Date().toLocateTimeString()）;//显示当前时间 </script> *整个网页代码从上到下依次执行，上面没执行下面不会执行。 *在<script>块中有一处语法出错，本块整体不执行，直接跳过，不会影响其他部分。 *提取js代码到单独的js文件：右键添加建项-JScript文件- *如果要使用js文件，直接将单独js文件拖拽到目标文件。 语法介绍： *严格区分大小写。（n和N是两个不同的变量） *js中定义字符串可以使用双引号也可以使用单引号。 推荐js中使用单引号，html中使用双引号，避免发生冲突。 *在js中声明变量不需要写数据类型，统一用var来声明。 *JavaScript是“弱类型”语言，支持动态类型。var n=10;n="a"; *每条语句后面用;结尾。（不是必须浏览器有自动插入分号的机制） 原因：1可以放心的做js压缩多余空白。2提高代码的可读性、性能（省去编译器加分号步骤）、避免出错。 *js注释 单行注释：//这里是注释代码【建议对于代码推荐都用单行注释】 块级注释：/*这里是注释代码*/【建议对于说明性文字使用块级注释】 *变量命名规则：以字母、下划线或$（英文模式下）开头，中间可以包含数字、字母、下划线或$. *js是灵活的动态语言不想C#静态语言那样严谨。智能提示只能辅助，并不全面，不要因为"点不出来"而烦恼。 数据类型 *js共六种数据类型： Boolean(布尔），取值：只有两种true或false Number（数字），取值：所有数字，包含整数、小数等，范围相当于double String(字符串)，取值：所有字符串。 Undefined（未定义），取值：只有一个值underfined Null（空对象），取值：只有一个值null Object（对象类型），取值：任何对象、Array、function等等。 以上除了Object是引用类型以外，其他都是基本类型。 typeof运算符，该运算符返回一个表达式的数据类型的字符串表示形式。 <script type="text/javascript"> var n= new Date(); alert(typeof (n)); var n=‘hi ‘; alert(typeof (n)); </script> 循环语句 if-else、while、do-while、for、switch、continue、break语句几乎和C#一致。但是for循环和switch语句也有点不同。 var sum=0;//变量声明后，使用前一定要赋，不赋值会认为是Undefined。 //var sum; //sum=0; for(var i=1;i<=100;i++){ sum=sum+i; } alert(sum); 奇数和、偶数和 var sum=0; for(var i=1;i<=100;i++){ if(i%2=0) { sum1=sum+i} else { sum2=sum+i} } alert("奇数和={0},偶数和={1}",sum1，sum2) js中的==与=== *相等运算符：==、（！=） 对于==两边的表达式，如果类型相同，则直接比较。 对于==两边的表达式，如果类型不同，则先试图将==两边的运算符转换为String、Boolean、Number这些相同的数据类型，然后在判断是否相等。 ==认为null与undefined、null与null、undefined与undefined是相等的。 *完全相等运算符（恒等运算符）：===、（！==） ====运算符判断前不进行类型转换，并且===两边必须类型相同、值也相同的情况下才返回true。 <script type="text/javascript"> var n1=‘123‘; var n2=123; alert(n1==n2);//true alert(n1==n2);//false var n1=null; var n2; alert(n1==n2);//true alert(n1===n2);//false var n1=true; var n2=‘false‘; alert(n1==n2);//false alert(n1===n2);//false //switch内部使用的也是===恒等于来判断是否相等。 var s=123; switch(s){ case‘123‘: alert(‘等于字符串123‘); case 123: alert(‘等于数字123‘); default: alert(‘没有找到相等的‘); break; } </script> W3C资料：Ecma-262 1如果==两边都是字符串类型，那么必须这两个字符串完全相同才返回ture 2如果==两边的两个变量指向了同一个对象，那么也返回true 3如果==两边一个是字符串一个是数字类型，那么js引擎会尝试把其中的字符串类型转换为数字类型后在进行比较。 4如果==两边一个字符串类型，一个是数字类型，会尝试吧其中布尔类型转换为数字类型后在比较。 5如果==两边其中一是string或number类型，而另外一个是object类型，那么判断相等前先将object转化为string或number，然后在于另一个值比较。 null和undefined *当声明变量未赋值的时候，那么变量的值 就是undefined var x； alert(x); *变量压根没有声明。 alert(w);//报错 在使用变量前，先校验该变量是否可用。 if(typeof(w)==‘undefined‘){ alert(‘变量不可用‘); }else{ alert(w); } *方法没有返回值的时候，接受的返回值就是undefined类型 var n=fun1(); alert(n); functon fun1(){ } *---------null---------- *null值表示指定了一个空对象，需要我们为n赋值一个null值。 一般爱对象使用完毕，需要显示告诉浏览器可以被垃圾回收站回收的情况下，需要显示吧变量赋值为null，这样这个变量所指向的对象就可以被垃圾回收站回收了。var n=null; *无论变量的值为null还是nudefined都表示变量不可用。所以在使用变量前可以先判断变量是否可用。 var x; //var x; //var x=‘‘; //var x=null; if(typeof(x)!=‘undefined‘&&x!=null){ alert(‘x变量可用！‘); }else{ alert(‘x变量不可用！‘); } js中变量作用域 <head> <title></title> <script type="text/javascript"> //在页面声明的变量，在整个页面中任何一个地方都可以访问。 // var n = 10; // alert(n);//10 // var x = 100; // function f1() { // x++; // alert(x);//101 // } // f1(); // alert(x);//101 // var y = 100; // function f1(){ // var x = 1; // x++; // alert(x); //2 // } // f1(); // alert(x); //报错，未定义。（实际：360浏览器并没有报错，只是没有任何显示） // function f1() { // 在js中不存在块级作用域范围，所以在方法累不任何一个地方声明变量，都是在整个方法内部有效。 // var x = 10; // if (x > 5) { // var y = 100; // alert(y);//100 // } // alert(y);//100 // } // f1(); // alert(y); //无显示 // function f1() { // var sum=0; // for (var i = 0; i < 10; i++) { // sum=sum+i; // } // alert(i);//10 // for (var i = 0; i < 5; i++) { // //当重复声明变量（i）时，js会自动忽略第一次以后的所有声明语句，但是赋值会正常执行。 // alert(i); // } // alert(i);//5//i++后i变成了5 // } // f1(); function f1() { //声明变量时不写var关键字，表示该变量时一个整个页面都能访问的全局变量。 //建议：声明变量时，一定不要忘记加var，避免使用全局变量。 x = 100; x++; alert(x);//101 } f1(); alert(x);//101 </script> </head> <body> <!-- <script type="text/javascript"> //在页面声明的变量，在整个页面中任何一个地方都可以访问。 n++; alert(n); //11 </script>--> </body> </html> 转义符和C#中一样 注意：js不能用@，@只在C#中有效。想在页面输出：c:\windows\microsoft\vs.txt,需要这样写：alert(‘c:\\windows\\microsoft\\vs.txt‘). innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：<div id="aa">这是内容</div> ，我们可以通过 document.getElementById(‘aa‘).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘abc‘).innerHTML=‘这是被插入的内容‘; 这样就能向id为abc的对象插入（还是替换？）内容 <head> <title></title> <script type="text/javascript"> //// 数据类型转换 //字符串转换为数字类型 // var n = ‘123‘; // alert(n + 1); //1231 // var n=‘2pew3‘;//2 //var n=‘e2343‘;//NaN // var n = ‘123dfjafda‘; // alert(typeof (n));//string 显示该数据的数据类型 // n = parseInt(n);//将字符串转换为整数的函数，当他遇到非字符时停止解析。 // alert(typeof (n));//number // alert(n + 2);//125 // var n = ‘15‘; // //把15转为8进制 // n = parseInt(n, 8); // alert(n); //13 //-------------- // alert(parseInt(‘828.3‘));//828 // alert(parseFloat(‘232.3.4.4‘)); //232.3 // alert(parseInt(‘0782‘)); //782 // alert(parseInt(0782)); //782 // //---------把任意类型转换为数字类型 // var n = ‘123.3‘; // alert(Number(n)); // var n = 123; // n.toString(); //把任何类型转换为string类型 // alert(n); // alert(typeof (n)); //number？？？？？ // var n = null; // alert(n.toString()); //null对象不能调用任何方法 // alert(String(n)); //字符型的"null" // var s4; // alert(s4); //undefined //isNaN()函数 // var n = parseInt(‘a432v‘); // //判断一个值是否是一个NaN不能用==或!=，必须使用isNaN()函数。 // if (isNaN(n)) { // alert(‘转换失败！‘); // } else { // alert(‘转换成功结果是：‘+n); // } ////js中的逻辑运算符 //eval() 函数 // var n = ‘var x=1;x++;alert(x);‘; // eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。; //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 // x++; // alert(x); // var r = "a" || ""; // alert(r); //a // r = null || 15; // alert(r);//15 // r = null && 15; // alert(r);//null // r = "123" || 12; // alert(r);//123 // r = "1234" && 12; // alert(r);//12(同时为真，以最后一个为准) ////在浏览器中调试错误 // aletr(‘hello‘); //浏览器-工具-开发人员工具-console（控制台） // for (var i = 0; i < 10; i++) { // alert(i); // } // var arr = [1,2,3,‘hello,true‘]; var sum=0; for (var i = 0; i < 5; i++) { sum=sum+i; } alert(sum); //调试问题： //1、没有刷新页面； //2、浏览器安装了各种插件影响了调试结果。 //卸载插件-IE浏览器Internet选项-删除信息-高级-还原高级设置-重置-应用-重启IE。 //3、浏览器禁用了javascript. //4、IE和vs调试功能同时只能用一个。 //5、火狐浏览器-f12-控制台，有错不报的原因是没有安装插件,需要添加Firebug组件。 //函数的定义： // 1.在C#中创建函数 // public string GetMessage（int id） // { // } // 2、在js中创建函数 // //定义一个函数 // function getMessage(id){ // return id+‘Hello‘; // } // //调用函数 // var msg = getMessage(‘0001‘); // //输出返回结果 // alert(msg); //定义一个函数 // function sayHi(){ // alert(‘Hi‘); // } // //调用一个函数 // sayHi(); // //定义一个函数 // function getSum(x, y) { // return x + y; // } // var result = getSum(50, 20); // alert(result); // // 注意：1、js函数永远有返回值，如果没有则返回undefined。 // 把函数当做’构造函数‘时，return语句将不返回。 // 2、自定义函数名不要与js内置、dom内置函数重名。 // function f1() { // alert(‘first f1‘); // } // function f1(name) { // alert(name); // } // f1(); //因为js中没有函数重载的概念，所以遇到同名的函数，会用最后一次定义覆盖前面的函数定义。 //所以下面调用f1()函数，其实调用的是最后一次函数定义，但最后一次函数定义需要传递一个参数 //给name变量，但是却没有传递，所以name变量没有赋值，所以就是undefined //函数和变量的预解析功能 // 1、如果不确定函数中将来要传递的参数的个数，那么可以使用了类似于C#中可变 // 参数的解决方法。在js中叫做arguement对象。 // 2、其实所有的方法都无需定义形参，定义形参的目的仅仅是为了使用方便。 // 无论是否定义了“形参”，在实际调用该函数的时候，所有的参数都包含了arguement对象中。 // function add() { // var sum = 0; // for (var i = 0; i < arguments.length; i++) { // sum += arguments[i]; // } // return sum; // // } // //add(10,20); // //add(1); // //add(x1,x2,x3,...xn); // var result = add(10, 23, 0, 12); // alert(result); // // var x = 1, y = 0, z = 0; // function add(n) { n = n + 1; return n } // y = add(x); // function add(n) { n = n + 3; return n } // z = add(x); // alert(y + ‘....‘ + z); //结果是多少？why？4...4 //因为函数有预解析功能，所以函数从上到下依次执行之前，最后一个定义add //函数就已经覆盖了前面的定义的add函数。但是预解析无法解析函数体里面的东西。 // var user_name = ‘steve‘; // function f1() { // alert(user_name); //undefined //// 变量与函数具有同样的预解析功能，在函数的代码正式执行之前，先会 //// 解析函数中声明的多有的变量。也就是说正执行第一句代码： alert(user_name); 的时候， //// 局部变量user_name已经声明了，但是没有赋值（为yzk）。因为预解析只解析声明，不包含赋值语句（所以是underfined）。 //// // var user_name = ‘yzk‘; // alert(user_name); //yzk // //如果遇到局部变量与全局变量冲突，优先选用局部变量。 // } // f1(); // alert(user_name); //steve // //1、函数内部声明的变量作用域只在这个函数内，超过作用域则失效。 // //2、函数内部声明的变量在整个函数中都有效，相当于在函数内部（的函数和声明）也有预解析功能，只不过不能超出作用域。。 // 正是因为函数中具有变量预解析功能，所以一般函数中声明变量不会像下面这样: // function myfunction(){ // var n=10; // alert(n); // var m=n++; // alert(m); // var sum=n+m; // alert(sum); // } // 而是在函数一看是就把所有要使用的变量都统一声明好： // function myfuncton(){ // var n=10,m,sum; // alert(n);//10 // m=n++; // alert(m);//10 ??? // sum = n + m; // alert(n);//11 ??? // alert(sum);//21 // } // myfuncton(); // //alert(n);//错误，超出局部变量作用域。 //匿名函数 </script> </head> <body> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> *document.getElementById(‘btn‘).click()搜索引擎的智能提示，点击后相当于点击了"搜索"按钮 *click();focus();blur();相当于通过程序来触发元素的单击事件，获得焦点以及失去焦点的事件。 *form对象是表单中的Dom对象。 *submit()提交表单，但是不会触发onsubmit事件。 *实现autopost,也就是焦点离开控件以后页面立即提交，而不需要提交submit按钮，当光标离开的时候 触发onblur事件，在onblur中调用form的submit方法。 *在待机submit后form的onsubmit事件比触发，在onsubmit中可以进行数据校验。如果数据有问题，返回false即可取消提交。 <title></title> <style type="text/css"> #dv1 { width:100px; height:100px; background-color:Blue; } </style> <script type="text/javascript"> window.onload = function () { //为div层注册一个单击事件 document.getElementById(‘dv1‘).onclick = function () { //单击层的时候提交表单 //1.手动获取提交表单的按钮，并且调用该按钮的click()方法，触发该按钮的单击事件，从而实现表单的提交 // document.getElementById(‘btnSearch‘).click(); //2.直接调用表单对象的submit()方法来实现提交 document.getElementById(‘form1‘).submit(); //如果是通过调用submit按钮来提交的表单，会触发onsubmit事件，但是如果是通过调用的表单的submit()函数提交的表单不会触发事件的。 }; //为表单对象注册一个提交事件 document.getElementById(‘form1‘).onsubmit = function() { //在表单的提交事件中验证用户是否在文本框中输入了内容，如果输入了内容则提交表单，否则停止提交表单 var searchTxt =document.getElementsByName(‘wd‘)[0].value; if (searchTxt.length == 0) { alert(‘请输入内容！‘); return false; } }; }; </script> </head> <body> <form action="http://www.baidu.com/s" method="get" id="form1"> <input type="text" name="wd" value="" /> <input type="submit" value="百度很强大哦" id="btnSearch"/> <div id="dv1"> </div> </form> </body> </html> <!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">请点击按钮向列表中添加项目。</p> <button onclick="myFunction()">亲自试一试</button> <script> function myFunction() { var node=document.createElement("LI"); var textnode=document.createTextNode("hi"); node.appendChild(textnode); document.getElementById("myList").appendChild(node); } </script> <p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p> </body> </html>
以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章