js入门学习
1.1 js语言核心
本节为js的快速概览，这里有一些示例和代码： // 注释,对js代码作解释 var x; //声明一个变量x x=0; //x赋值为0 x //通过变量获取其值0 js数据类型: 数字(number),字符串(string),boolean(true,false), null,undefined,对象(object),数组(arry)js中最重要的类型就是对象，它是名/值对的集合，或字符串到值的集合
// 对象是由花括号括起来的，右花括号标记了对象的结束 var book = { topic : "Hello World", // 属性topic的值是"Hello World" fat : true //属性fat的值是true }; // 通过.或者[]来访问对象属性 book.topic //=>"Hello World" (.获取方式) book["fat"] //=>true ([]获取方式) // 对象中可以包含数组 var data = { trial1: [[1,2],[3,4]], trial2: [[2,3],[4,5]] };js同样支持数组
var primes = [2,3,5,7]; primes[0] // => 2:数组中的第一个元素(索引为0) primes.length //=> 4:数组中的元素个数即为数组长度 primes[primes.length-1] //=> 7: 数组中最后一个元素 primes[4] = 9; //通过赋值来添加新元素 ***console.log(primes) => [2, 3, 5, 7, 9]*** primes[0] = 300; //通过赋值来改变已有元素 ***console.log(primes) => [300, 3, 5, 7, 9]*** // 数组中可以包含对象 var points = [ {x:0,y:0}, {x:1,y:1} ];运算符(作用于操作数，生成一个新的值)
// 最常见的是算术运算符 3+2 //=> 5: 加法(+) 3-2 //=> 1: 减法(-) 3*2 //=> 6: 乘法(*) 3/2 //=> 1.5: 除法(/) points[1].x-points[0].x //=> 1: 上文数组中定义过的points "3"+"2" //=> "32": +可以完成加法运算也可以作为字符串连接 // 算术运算符的简写形式 var count = 0; // 定义一个变量 count ++; // 自增1 count --; // 自减1 count += 2; // 自增2: 等同于count = count + 2; count *= 3; // 自乘3: 等同于count = count * 3; count //=> 6: 变量名本身也是一个表达式; // 相等关系运算符用来判断两值是否相等，运算结果为true或false var x = 2, y = 3; //此等号为赋值的意思，不是比较相等 x == y; //=> false: 相等 x != y; //=> true: 不等 x < y; //=> true: 小于 x <= y; //=> true: 小于等于 x > y; //=> false: 大于 x >= y; //=> false: 大于等于 "two" == "three"; //=> false: 两个字符串不相等 "two" > "three"; //=> true: "tw"在字母表中的索引大于"th" false == (x > y); //=> true: false和false相等 //逻辑运算符是对布尔值得合并或求反 (x == 2) && (y == 3) //=> true: 两个比较都为true, &&表示"与" (x > 3) && (y < 3) //=> false: 两个比较都为false, ||表示"或" !(x == y) //=> true: ! 求反函数是一段带有参数的js代码端，可以多次调用
function plus1(x){ return x+1; } plus1(3) //=> 4: 传入参数为3，调用函数结果为3+1 // 函数是一种值，可以赋值给变量 var square = function(x){ return x*x; } square(plus1(3)) //=> 16: 在一个表达式中调用两个函数 // 当将函数和对象合写在一起时，函数就变成了方法 (即：当函数赋值给对象的属性，我们称为方法，所有的js对象都有方法) var a = []; a.push(1,2,3); //=> [1,2,3]: 向数组中添加元素 a.reverse(); //=> [3,2,1]: 将数组元素的次序反转 //我们可以定义自己的方法,"this"关键字是对定义方法的对象的引用 var points = [ {x:0,y:0}, {x:1,y:1} ]; points.dist=function(){ //通过this获得对当前数组的引用 var p1 = this[0]; //=> {x:0,y:0} var p2 = this[1]; //=> {x:1,y:1} var a = p2.x - p1.y; //=> 1: 即 1-0 var b = p2.y - p1.y; //=> 1: 即 1-0 return Math.sqrt(a*a + b*b); // Math.sqrt()计算平方根 }; points //=> [{x:0,y:0},{x:1,y:1},dist:f()] points.dist(); //=> 1.414 注： 数组是特殊的对象控制语句(比如条件判断和循环)
// 求绝对值的函数 function abs(x){ if(x >= 0){ return x; // 如果比较结果为true则执行这里的代码 } else { // 当if条件不满足时执行else字句 return -x; } } abs(-4) //=> 4 //计算阶乘的函数 function factorial(n){ var product = 1; while(n > 1){ product *= n; n-- } return product; } factorial(4) //=> 24: 1*4*3*2 //实现循环的另一种写法 function factorial2(n){ var i, product = 1; for(i=2; i<=n; i++) product *= i; // 当循环体中只有一句代码，可以省略{} return poduct; } factorial2(5) //=> 120: 1*2*3*4*5JavaScript是一种面向对象的编程语言，以下为简单示例，以后会详细介绍
//定义一个构造函数以初始化一个新的Point对象 function Point(x,y){ // 按照惯例，构造函数均以大写字母开始 this.x = x; // 关键字this指代初始化的实例 this.y = y; // 将函数参数存储为对象属性(也可以自定义属性例如:this.id=y) this.id = y; } // 不需要return // 使用new关键字和构造函数来创建一个实例 var p = new Point(1,2); //=> {x:1,y:2,id:2} p.name = "test"; // name属性仅仅被当前实例p所拥有 console.log(p); //=> {x:1,y:2,id:2,name:"test"} //通过给构造函数的prototype对象赋值来给Point对象定义方法 Point.prototype.r=function(){ return this.x*this.x } //Point实例对象p(以及所有的Point实例对象)继承了方法r() p.r(); //=> 1 new Point(4,6).r(); //=> 16 let p1 = new Point(5,7).r = "改变"; console.log(p1.r) //=> 改变: 当前实例化对象p1的继承属性r值被改变 注：prototype属性使您有能力向对象添加属性和方法,添加后的方法和属性会被所有的实例对象所继承1.2客户端JavaScript
以下对客户端编程技术做一个快速概览，详细内容在以后介绍，这里作为初步了解
// js在web浏览器中运行起来(js代码可以通过<script>标签来嵌入到HTML) <html> <head> <script src="XXX.js"></script> <!--引入一个js库--> </head> <body> <p>这是一个段落</p> <script> //在这里编写嵌入到HTML文件中的js代码 </script> </body> </html>以后会有web浏览器脚本技术内容，并涵盖客户端js中的一些重要全局函数，例如：
<script> function movenon(){ //通过弹出一个对话框来询问用户一个问题 var answer = confirm("准备好了吗?"); //单击"确定"按钮，浏览器会加载一个新页面 if(answer) window.location = "http://taobao.com" } // 在一分钟(6万毫秒)后执行定义的这个函数 setTimeout(movenon(),60000); </script>通过脚本来操纵HTML文档内容，以下示例展示了如何查找和修改基本文档的内容
// document中的一个指定的区域输出调试消息 // 如果document不存在这样一个区域，则创建一个 function debug(msg){ // 通过HTML元素id属性来查找文档的调试部分 var log = document.getElementById("debuglog"); // 如果这个元素不存在，则创建一个 if(!log){ log = document.createElement("div"); log.id = "debuglog"; log.innerHTML = "<h1>定义初始内容</h1>"; // 将其添加到文档的末尾 document.body.appendChild(log) } // 将消息包装在<pre>中，并添加至log中 var pre = document.createElement("pre"); // 创建pre标签 var text = document.createTextNode(msg); // 将msg包装在一个文本节点中 pre.appendChild(text); // 将文本添加至<pre> log.appendChild(pre); // 将<pre>添加至log }使用js来进行css样式操作,通常使用到HTML元素的style和class属性
function hide (e,reflow){ if(reflow){ // reflow为true e.style.display = "none" // 隐藏这个元素，其所占空间也随之消失 } else{ e.style.visibility = "hidden"; // 隐藏这个元素，但保留其所占的空间 } } function highlight(e){ if(!e.className) e.className = "hilite"; else e.className += " hilite"; }客户端js代码,点击发生用到了事件，他给一个很重要的事件–“load”
// load事件只有在文档加载完成后才触发，通常需要等待load事件发生后才开始执行js代码 window.onload-function(){ // 找到文档中的所有的<img>标签 var images = document.getElementsByTagName("img"); for(var i=0;i<images.length;i++){ var image = images[i]; // 遍历images,给每个节点的click事件添加事件处理程序 if(image.addEventListener) image.addEventListener("click",hide,false) else // 兼容IE8及以前的版本 image.attachEvent("onClick",hide) } // 注册事件的处理函数 function hide(event){ event.target.style.visibility = "hidden"; } }jQuery简单例子,重写上文中debug()函数
function debug(msg){ var log = $("#debuglog"); // 找到要显示msg的元素 if(log.length == 0){ log = $("<div id="debuglog"><h1>Debug Log</h1></div>"); log.appendTo(document.body); // 将其追加到body里 } log.append($("<pre/>").text(msg)) // 将msg包装在<pre>中，再追加到log里 }