Javascript系列:总体理解
js是一个脚本客户端(浏览器)语言。和sql html类似。多练习。
没有排错的经验,弱类型语言,浏览器解释执行,出错也不会报错
预备
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="JScript.js" type="text/javascript"></script> 7 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 8 </head> 9 <body> 10 <script type="text/javascript"> 11 alert(new Date().toLocaleDateString()); 12 </script> 13 </body> 14 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> </script> <a href="javascript:alert('a标签的js事件')">事件</a> <input type="button"value="事件" onclick="alert('标签属性名(事件名)')"/>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 变量 给变量赋值 循环 打印 2 3 监听动作 4 5 在head中,也可以在body中。都需要<script>标签内 6 7 alert(""); 8 9 html从上到下依次执行,如果js放中间,会先中间执行。 10 11 比如:给一个控件注册事件,无法执行,可能就应为body还没执行完 12 13 14 15 大小写敏感,弱类型。 var 可能是数组 对象 没有var 的变量是全局变量,任何地方都能用。 16 17 注释:// /**/和c#一样 <!-- -->没用和html,习惯用这个标明 这是一些js代码 18 19 多个script标签,就像是一个script标签。在一个script标签定义的变量,在另个script标签页能用。 20 21 字符串使用单引号 双引号都一样 22 23 嵌入到html的js字符串用单引号,为了防止和属性冲突。 24 25 单独的字符串都可以 26 27 new Date().toLocaleDateString()
msdn查看js用法百度msdn library
类型 字符串String、数字Number、布尔Boolen、数组Array、对象、Null、Undefined
用户输入 确认 警告窗口
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> var msg = prompt('你爱我不?', '爱or不爱?');//问,答 返回答 if (confirm('你确定' + msg + "?")) { alert("我也" + msg + "你"); } else { alert("不理你!"); } </script> 用户输入 确认 警告窗口
刷新确定重新加载?,×号确定离开本页面?
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> // window.onunload = function () { alert("卸了"); }; window.onbeforeunload = function () { var msg = "确认离开当前页面吗?离开将会丢失"; return msg; }; // if (confirm('ok????')) { // alert(123); // } </script>
变量流程控制 遍历循环 typeof()方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 //var num = 1 + 2 + "3"; 33 3 //var num = 1 + 2 + '3'; 33 4 var num =' 1' + 2 + '3';123 5 alert(num); 6 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> function fun(argu) { return (argu * 2); } alert(fun('a')); </script>//NaN是Number类型的“值”!!!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> var num = 65; if (num%2==0) { alert('num是偶数'); } else { alert('num是奇数'); } switch (num/10) { case 10: alert('优秀'); break; case 9: alert('良好'); break; case 8: alert('一般'); break; default: alert('差'); break; } </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> // var sum = 0; // var index = 0;//0 1无所谓 // while (index<=100) { // sum += index; // index++; // } // alert(sum); var sum = 0; for (var i = 0; i < 101; i++) { //101非100 sum += i; } alert(sum); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 function fun(argu) { 3 //此处typeof返回的类型的“值”,此处的Numeber类型的值为number注意。 4 if (typeof (argu)=='number') { 5 alert(argu * 2); 6 } else { 7 alert('非数字'); 8 } 9 } 10 fun(2); 11 </script>>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> //js中的Array想当于动态数组,和哈希表和栈的综合。动态扩展,键值对,有pop.push方法 var arr_3 = new Array(); arr_3['李可'] = 20; arr_3['小红'] = 18; arr_3['小王'] = 21; for (var VAR in arr_3) {//for循环对应的是c#中的foreach,对应key不是数字的数组的遍历 } alert(VAR); alert(arr_3[VAR]); } </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> //typeof(变量或者表达式或者对象)方法返回的值都是字符串(都需要加引号),有6中值"string"" number""boolen""function""object""undifined" var ob = function() {//function this.name = "like"; } alert(typeof (ob)); var arr = [1.2, 6];//"object" alert(typeof (arr)); var i;//"undifined" alert(typeof (i)); alert(typeof (m)); //"undifined" 之前不能有个空m放前面,会报错。 var a = 1;//"number" alert(typeof (a)); alert(typeof (1>2) ); //boolen </script>
调试多alert一下; 打开调试工具---开启调试--设断点-- 刷新网页--添加监视。
方法
定义方法命名 小写字母开头,不和系统方法名重复。方法参数没有类型,return也没有返回值。方法的就进原则。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> function fun() { alert('无参数'); } function fun(num) { alert(num); } fun();//会执行第二个fun,就近原则 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 function fun() { 3 for (var i = 0; i < arguments.length; i++) { 4 alert(arguments[i]);//arguments是一个参数数组,在考虑“重载”用arguments。lenth小写.属性方法都小写 5 } 6 } 7 fun('a',1,0,new Date().toLocaleString()); 8 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
class Program { public static void fun(params object[] arObjects) { for (int i = 0; i < arObjects.Length; i++) { Console.WriteLine(arObjects[i]); } } static void Main(string[] args) { fun("a",1,2,3); Console.ReadKey(); } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> // 动态的去创建一个方法,类似委托,有类似创建对象。 // 大写的Function内参数为字符串!!前面的参数为最后“函数体的”参数。!! var fangfa = new Function("i1","i2", "return i1+i2;"); alert(fangfa(1, 2)); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <title></title> <script type="text/javascript"> //window.onload=function(){}把方法写到里面,要先加载好html后执行。否则,html节点都没加载好,也不会找到geElement等。//也可以不写进。写一个方法,在html节点写事件=“方法();” //getElementById()里面引号,得到的var变量表示这个节点。以后操作这个变量,而不是()里的id 。var p = document.getElementById("p1"); var p = document.getElementById("p1").value; //方法名()是调用。只有方法名,没有()是判断这个方法存在与否,常常if(方法名),判断方法是否存在,预留后路。注意木有()哦。 window.onload = function () { // var p = document.getElementById("p1"); // p.appendChild(document.createTextNode("dddddd")); //一段字,也是一个特殊节点。创建方法和创建其他节点不同document.createTextNode("文本")//document.createElement("p"); // alert(p.getAttribute("id")); // p.setAttribute("id", "44"); // alert(p.getAttribute("id")); // var i2 = document.getElementById("wen").value; // alert(i2); // var b = document.getElementsById("aa"); // body节点对象不支持“getElementsById”属性或方法 // var pa = document.getElementById("p1"); // var pa1 = document.createElement("input") // pa.parentNode.insertBefore(pa1, pa);//里面逗号写中文的了,出异常了 } </script> </head> <body id="aa"> <p id="p1">222</p> <input type="text" name="name" value="111" id="wen" /> <input type="button" name="name" value="点击添加 " /><!--onclick="zhuijia();"--> </body> </html>
var b = document.getElementsByTagName("body")[0]
追加方法,实现模块化
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> window.onload = function () { } //给一个方法追加另一个方法 要求:模块化,方法不嵌套。 //例子:给onload方法写一个加方法的追加方法。 function addonload(fun) {//将一个方法字段名传进去。 var oldonload = window.onload;//将onload字段赋值给新的一个字段,让这个新字段指向方法体。当运行新字段();就可以运行老方法。 if (typeof (oldonload) != 'function') {//没有给onload注册方法,直接给onload运行fun window.onload = fun; } else {//里面有方法,执行,并追加一个新方法; oldonload(); fun(); } } function fangfa() { } addonload(fangfa);//以后就不用onload 只用addonload就可以了,达到了模块化的目的 </script>
计时器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> function getvalue() {// var txt = document.getElementById("t").value; //取文本框值 txt = parseInt(txt) + 1; //转化一下 parseInt document.getElementById("t").value = txt; //给文本框赋值 } onload = function () { var id = window.setInterval(getvalue, 1000); //计时器动作返回一个计时器的引用id,关掉 clearInterval(id) //动态给btn添加点击暂停继续事件 document.getElementById("zan").onclick = function () { window.clearInterval(id); }; document.getElementById("jixu").onclick = function () { window.setInterval(getvalue, 1000); }; } </script> </head> <body> <input type="text" name="txt" value="1" id="t" /> <input type="button" name="btn" value="计时暂停" id="zan" /> <input type="button" name="btn1" value="计时继续" id="jixu" /> </body>
匿名方法
类似c#委托变量指向一个匿名函数,这个委托变量就可以当成一个函数来用。在jquery中应用极为广泛。区别,一个function关键字,一个delegate关键字。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> var i = function(num1,num2){return num1+num2};//犯的错,函数加双引号了当成属性了 alert(i(1, 2));//此处用“委托变量”+参数 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public delegate void delfun(); class Program { static void Main(string[] args) { delfun delbianliang = delegate() { Console.WriteLine("委托变量调用此delegate开头的匿名函数"); }; delbianliang(); } }
Lambda表达式
c#就是一个省去关键字delegate和返回这的匿名函数。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public delegate void delfun(); class Program { static void Main(string[] args) { delfun delbianliang = delegate() { Console.WriteLine("委托变量调用此delegate开头的匿名函数"); }; delbianliang(); delfun debianliang2 = () => { Console.WriteLine("Lambda表达式(省去delegate return字的匿名函数的调用)"); };//没参数就写一个()==>省去关键字的麻烦 debianliang2(); Console.ReadKey(); } }
js扩展方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> String.prototype.addkuozhanming= function() {//this表示这个对象。对象.prototype.扩展方法名=匿名函数 return this+".str" ; } var name = 'llike'; alert(name.addkuozhanming()); </script>
undifined null
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> // null为object类型的值 undifined为Undifined类型的值 null undifined 0 false 均为false,数值 字符串均为true if ("asdasd") {// alert('true'); } else { alert('false'); } // undifined的几种情况 "undifined"为String类型的值。String类型的值还有"number" 等6中”“类型 不要和Number类型弄混淆. // 在上面typeof()方法中已经详解String的6个返回”“类型。 var num;//1,声明但没有初始化 alert(num);//输出undefined alert(typeof (sth));//2,对没声明的变量 typeof时候。输出undefined function add(i1,i2) {//3,方法没有返回值会返回undifined i1 + i2; } alert(add(1, 2));//输出undefined // null没有值,可以赋值给变量,表示不存在的对象, 是一个值相当与 1 2 3 var a = null; alert(typeof (a));//为”object“ //下面可以判断其类型(对应String的”undefined“)或者直接看值是否和undefined相等。这两种做法一样 var m; if (typeof(m)=="undefined") { alert(2); } var n; if (n==undefined) { alert(3); } // 但在if()条件中,和null判断相等也能执行。这点只是因为一些兼容的问题导致的。 var m; if (m == null) { alert(1);//输出1 } else { alert(2); } var m;//此种方法整名,为赋值的变量不等null而等undefined if (typeof (m)=="null") { alert(1); } else { alert(2);//输出2 } //因为兼容性,有木有区分到底的方法呢?答案是有的。就是===绝对相等 var m; if (m===null) { alert(1); } else { alert(2);//输出2 } var m; if (m===undefined) { alert(1);//输出1 } else { alert(2); } </script>
对象
如何使用js实现一个对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> //第一种方法定义个一“类”闭包,有点像构造函数。 function person(name, age, sex) { this.Name = name; this.Age = age; this.Sex = sex; this.act = function() { alert("动作") };//任意增加一个属性或者动作,指向一个匿名函数。 } var li=new person('李可',18,'男'); alert(li.Age + li.Sex + li.Name); li.act(); li.height = 180;//new出这样一个对象后,也可以动态扩展增加其对象的属性。类似动态函数 alert(li.Age + li.Sex + li.Name + li.height); //第二种方法,先定义这样的一个空类, 在后面动态添加就ok function animal() { } var dog = new animal(); dog.Name = "旺旺"; dog.Age = 3; dog.act = function () { alert('汪汪') }; alert(dog.Age + dog.Name); dog.act(); alert(dog['Age'] + dog['Name']);//用【】来访问,和.的意义一样的,此种和字典数组很类似,就是对象和数组,键值对的统一。 </script>
数组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> //js中的Array想当于动态数组,和哈希表和栈的综合。动态扩展,键值对,有pop.push方法 var arr_0 = [5, 10, 5156, 5165, 9999, 161]; var arr=['li','wang','zhang']; //定义“动态数组”的简单形式。相当与c#中的ArrayList var arr_1 = { "李可": 20, "小红": 18, "小王": 21 }; //定义“键值对”的简单形式相当于c# 哈希和字典 var arr_02 = new Array();//也可以固定长度new Array(n); arr_02[0] = 1; arr_02[1] = '小可'; arr_02[2] = "男"; alert(arr_02.join('|'));//jion方法比徐处理的字符串数组,里面包含数字都不能处理 下面有实例 for (var i = 0; i < arr_02.length; i++) {//for 对应的key为数字的数组的遍历 alert(i); //对应的“动态数组”alert的是索引,可以arr_02[i]输出值。后面的“键值对”的“哈希字典”alert的是key还是value注意一下。 var arr_3 = new Array(); arr_3['李可'] = 20; arr_3['小红'] = 18; arr_3['小王'] = 21; alert(arr_3.join("|")); //此时不能jion方法,显示不出来 for (var VAR in arr_3) {//for循环对应的是c#中的foreach,对应key不是数字的数组的遍历 } alert(VAR); alert(arr_3[VAR]); } </script>
知识没有高低贵贱之分。