学习JavaScript之——第1章 JavaScript概述

学习目标:

因工作需要,今日起学习JavaScript并记录在此,希望大家共同进步
参考数《JavaScript权威指南》第6版

学习内容:

1、 JavaScript调试工具的安装和使用
2、 JavaScript语言核心

1、 JavaScript调试工具的安装和使用

https://getfirebug.com/进入firebug官网下载Firefox浏览器

javascript 下载按钮 javascript下载教程_javascript


javascript 下载按钮 javascript下载教程_javascript 下载按钮_02


javascript 下载按钮 javascript下载教程_javascript_03


在左侧编写代码,右侧显示执行结果

javascript 下载按钮 javascript下载教程_javascript 下载按钮_04


在左侧Ctrl+S保存代码,生成JS文件

javascript 下载按钮 javascript下载教程_javascript_05


直接将JS文件拖入左侧即可打开JS文件

2.JavaScript语言核心

//所有在双斜线之后的内容都是注释

//变量是通过var关键字声明的
var x;//声明一个变量

//值可以通过等号赋值给变量
x = 0;

//JavaScript支持多种数据类型
x = 1;//数字
x = 0.01;//整数和实数共用一种数据类型
x = "hello world";//由双引号内的文本构成字符串
x = 'JavaScript';//由单引号内的文本构成字符串
x = true;//布尔值
x = false;//布尔值
x = null;//空
x = undefined;//undefind和null非常类似

JavaScript中最重要的类型就是对象,对象是名/值对的集合,或许字符串到值映射的集合。
对象是由花括号括起来的,属性"topic"的值是"JavaScript";属性"fat"的值是true,右花括号标记了对象的结束。
通过".“或”[]"来访问属性

var book = {
  topic:"JavaScript",
  fat:true
};
book.topic; //"JavaScript",获取属性值
book["fat"];//true,获取属性值
book.author = "Flanagan";//通过赋值创建一个新属性
book.contents = {};//是一个空对象,它没有属性

JavaScript同样支持数组

var primes = [2,3,5,7];//拥有4个值的数组
primes[0];//2:数组的第一个元素,索引为0
primes.length;//4:数组中的元素个数
primes[primes.length - 1];//7:数组的最后一个元素
primes[4] = 9;//通过赋值来添加新元素
primes[4] = 11;//通过赋值来改变已有的元素
var empty = [];//[]是空数组,它有0个元素
empty.length;//0

数组和对象中都可以包含另一个数组或对象

//具有两个元素的数组,每个数组都是一个对象
var points = [
  {x : 0 , y : 0 },
  {x : 1 , y : 1 }
];
//具有两个属性的对象,每一个属性都是数组,数组的元素也是数组
var data ={
  trial1 : [ [1 , 2] , [3 , 4] ],
  trail2 : [ [2 , 3] , [4 , 5] ]
};

运算符

3 + 2;//5:加法
3 - 2;//1:减法
3 * 2;//6:乘法
3 / 2;//1.5:除法
points[1].x - points[0].x//1:复杂的操作数也能运算
"3"+"2";//"32": + 可以完成加法运算也可以连接字符串
//简写的运算符
var count = 0;
count++;//count = count + 1:自增1
count--;//count = count - 1:自减1
count+=2;//count = count + 2:自增2
count*=3;//count = count * 3:自乘3
count; //6:变量本身也是一个表达式

相等关系运算符用来判断两值是否相等,其结果是true或false

var x = 2 , y = 3;//给变量x和变量y赋值
x == y;//false:相等(这里不满足相等)
x != y;//true:不等(这里满足不等)
x < y;//true:小于(这里满足x<y)
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:或,两个比较值不是true
!(x == y);//true:求反

函数:函数是一段带有参数的JavaScript代码,可多次调用

function plus1(x){   //定义一个名为plus1的函数,带有参数x
  return x + 1;      //返回比参数大1的值
}					 //函数的代码块是由{}包起来的部分
plus1(3);			 //4:传入的参数为3,结果为3+1

var squre = function(x){  //函数是一种值可以赋给变量
  return x * x;           //计算函数的值
};  					  //分号标识了赋值语句的结束
squre(plus1(3)); 		  //调用函数plus1(),结果为(3+1)*(3+1)

当函数和对象合写在一起时,函数就变成了"方法"(method)
当函数赋值对对象的属性,我们称为“方法”,所有的JavaScript对象都含有方法

var a =[];				//创建一个空数组
a.push(1,2,3);			//push()方法向数组中添加元素
a.reverse();			//Array(3) [ 3, 2, 1 ]:将数组元素的次序反转

我们可以定义自己的方法,"this"关键字是对定义方法的对象的引用

points = [
  {x:0,y:0},
  {x:1,y:1}
];
points.dist = function(){//定义一个方法来计算两点之间的距离
  var p1 = this[0];	//通过this方法获得对当前数组的引用,并取得调用的数组前两个元素
  var p2 = this[1];
  var a = p2.x - p1.x;	//X坐标轴上的距离
  var b = p2.y - p1.y;	//Y坐标轴上的距离
  return Math.sqrt(a*a + b*b);//勾股定理,用Math.sqtr()来 计算平方根
};
points.dist();			//1.4142135623730951:求得两点之间的距离

这些JavaScript语句使用包含条件判断和循环
求绝对值的函数

function abs(x){
  if(x>0)
    return x;
  else
    return -x;
}
abs(-3); //3

计算n的阶乘函数:方法1

function factorial(n){
  var product = 1;
  while(n>1){
    product = product * n;
    n--;
  }
  return product;
}
factorial(3);//6:product=1*3 --> product = 3*2
factorial(4);//24:product=1*4 --> product = 4*3 --> product = 12 *2
factorial(1);//1:直接输出,不进入循环

计算n的阶乘函数:方法2

function factorial2(n){
  var i,product =1;
  for(i = 2; i <= n; i++){
    product = product * i;
  }
  return product;
}
factorial2(5);//120:product=1*2 -->product=2*3 -->product=6*4 -->product=24*5

构造函数

function Point(x,y){//构造函数均以大写字母开始
  this.x = x;//关键字this指代初始化的实例
  this.y = y;//将函数的参数存储为对象的属性
}//不需要return
//使用new关键字和Point给构造函数创建一个实例p
var p = new Point(1,1);//平面几何中的点(1,1)
Point.prototype.r = function(){
  return Math.sqrt(
    this.x*this.x + this.y*this.y//this指代调用这个方法的对象
  );
};
//1.4142135623730951:Point的实例对象p(以及所有Point的实例对象)继承了方法r()
p.r();