js入门学习
1.JavaScript概述
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*5
JavaScript是一种面向对象的编程语言，以下为简单示例，以后会详细介绍
//定义一个构造函数以初始化一个新的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中的一些重要全局函数，例如：
扫描二维码关注公众号，回复：
8485896 查看本文章
<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里
}
