js是一个脚本客户端（浏览器）语言。和sql html类似。多练习。
没有排错的经验，弱类型语言，浏览器解释执行，出错也不会报错
预备
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>
<script> </script> <a href="javascript:alert('a标签的js事件')">事件</a> <input type="button"value="事件" onclick="alert('标签属性名（事件名）')"/>
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
用户输入 确认 警告窗口
<script type="text/javascript">
var msg = prompt('你爱我不？', '爱or不爱？');//问，答 返回答
if (confirm('你确定' + msg + "？")) {
alert("我也" + msg + "你");
} else {
alert("不理你！");
}
</script>
用户输入 确认 警告窗口
刷新确定重新加载？，×号确定离开本页面？
<script type="text/javascript">
// window.onunload = function () { alert("卸了"); };
window.onbeforeunload = function () {
var msg = "确认离开当前页面吗？离开将会丢失";
return msg;
};
// if (confirm('ok????')) {
// alert(123);
// }
</script>
变量流程控制 遍历循环 typeof()方法
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>
<script type="text/javascript">
function fun(argu) {
return (argu * 2);
}
alert(fun('a'));
</script>//NaN是Number类型的“值”！！！
<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>
<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>
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>>
<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>
<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也没有返回值。方法的就进原则。
<script type="text/javascript">
function fun() {
alert('无参数');
}
function fun(num) {
alert(num);
}
fun();//会执行第二个fun，就近原则
</script>
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>
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(); } }
<script>
// 动态的去创建一个方法，类似委托，有类似创建对象。
// 大写的Function内参数为字符串！！前面的参数为最后“函数体的”参数。！！
var fangfa = new Function("i1","i2", "return i1+i2;");
alert(fangfa(1, 2));
</script>
<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]
追加方法，实现模块化
<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>
计时器
<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关键字。
<script>
var i = function(num1,num2){return num1+num2};//犯的错，函数加双引号了当成属性了
alert(i(1, 2));//此处用“委托变量”+参数
</script>
public delegate void delfun(); class Program { static void Main(string[] args) { delfun delbianliang = delegate() { Console.WriteLine("委托变量调用此delegate开头的匿名函数"); }; delbianliang(); } }
Lambda表达式
c#就是一个省去关键字delegate和返回这的匿名函数。
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扩展方法
<script> String.prototype.addkuozhanming= function() {//this表示这个对象。对象.prototype.扩展方法名=匿名函数 return this+".str" ; } var name = 'llike'; alert(name.addkuozhanming()); </script>
undifined null
<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实现一个对象
<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>
数组
<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>