js笔记(个人随笔，很不全。。。)

# 三句话 #
- alert(“内容”);
效果：在页面中弹出一个提示框，提示信息从alert后面的引号中的文本来的。
注意：如果页面上出现弹出框以后，页面的位置不能改变，并且不能关闭。
- console.log(“内容”);
向浏览器的控制台输出一句话。
作用：用来进行代码调试。
- prompt(“内容”);
弹出一个输入框，给用户提供输入信息的位置。

# 数据类型 #
- Undefined
- Null
null值表示一个空对象指针

alert(null == undefined);  //true

• Boolean

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	“”(空字符串)
Number	任何非零数字值（包括无穷大）	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

- 字符串：String
特点：用引号引起来的文本的串。
字符串是不可变的。一旦被创建，值就不能改变
注意：
1) 这个引号既可以是单引号，也可以是双引号。
2) 如果要在字符串输出引号应该怎么办
a. 如果字符串有双引号，可以将字符串的引号改变为单引号
b. 可以使用转译符。
常用的转译符：

\'  单引号
\"  双引号
\n  换行
\t  缩进
\b  空格
\r  回车
\\  斜杠

• 数值类型：Number

var octalNum1 = 070;   //八进制的56
var octalNum2 = 079;   //无效的八进制，解析为79
var hexNum1 = 0xA;    //十六进制的10
var hexNum2 = 0x1f;   //十六进制的31

不推荐用 .1 来代替 0.1

特点：表达的是一种数据的量
加号的作用：

1) 两个字符串用加号连接，那么将来加号起到的作用是连接这两个字符串。
2) 两个数值用加号连接，那么将来加号起到的作用是加法运算符的作用。
3) 加号连接的两个直接量中有一个是字符串，那么加号的作用是连接。

• 判断数据的类型：
  typeof: 判断数据类型
  返回值：
  “undefined”——如果这个值未定义；
  “boolean”——如果这个值是布尔值；
  “string”——如果这个值是字符串；
  “number”——如果这个值是数值；
  “object”——如果这个值是对象或null；
  “function”——如果这个值是函数。
  用法：
  typeof(直接量)

console.log(typeof("abd")); //string
console.log(typeof(123)); //number

typeof 直接量

console.log(typeof "abd"); //string
console.log(typeof 123); number

• Math对象

    Math.pow(2,53)            2的53次幂
    Math.round(.6)            => 1.0 四舍五入
    Math.ceil(.6)             => 1.0 向上求整
    Math.floor(.6)            => 0.0 向下求整
    Math.abs(-5)
    Math.max(x,y,z)
    Math.min(x,y,z)
    Math.random()             生成一个大于等于0小于1.0的伪随机数
    Math.PI
    Math.E
    Math.sqrt(3)
    Math.pow(3,1/3)
    Math.sin(0)
    Math.log(10)              10的自然对数
    Math.log(100)/Math.LN10   以10为底100的对数
    Math.log(512)/Math.LN2    以2为底512的对数
    Math.exp(3)               e的3次幂

• 数据类型转换

强制转换：

var a = "123";
var b = Number(a) + 1;
console.log(b);           //124
console.log(typeof b);    //number
var c = parseInt(a);
console.log(c);     //number

var a = "abc";
var b = Number(a);
console.log(b);         //NaN
console.log(typeof b);    //number

Number
1. 如果是数字值，返回本身
2. 如果字符中包含有效的浮点格式，将其转换为浮点数值
3. 如果是空字符串，将其转换成0
4. 如果字符串中包含非以上格式，则将其转换成为NaN

parseInt
1. 忽略字符串前面的空格，直至找到第一个非空字符
2. 如果第一个字符不是数字符号或者负号，返回NaN
3. 如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
4. 如果是小数，会转成整数（向下取整）

var num1 = parseInt("10", 2);  //2  （按二进制解析）
var num2 = parseInt("10", 10);  //10  （按十进制解析）
//建议无论在什么情况下都明确指定基数

parseFloat
与 parseInt 一样，唯一区别是可以保留小数。

注意：
parseFloat只解析10进制，因此没有第二个参数

转字符串

• .toString()

var a = 123;
a = a.toString();

• String()

var a = 123;
a = Srting(a);

第一个方法是直接调用这个变量对象中的方法，第二个就是直接使用强制转换的方法。

• boolean转换

var a = "true";
a = Boolean(a);

注意：
false “”(空字符串) 0 NaN undefined null 会转换成false，其余转换成true

• 隐式转换
  
  1. 隐式转换成Number:
     直接在要转换的内容前加上”+” “-” “*” “/” “%”;

var a = "123";  ===>  a =+a;
var a = "123";  ===>  var b = a * 2;  ===>   246;

1. 隐式转换成字符串：

var a = 123;  ===>  a = a + "";

3.隐式转换成boolean：

var a = 123; ===> a = !!a;

• script标签属性
  type
  type=”txt/javascript”
  可以省略
  async
  async=”async”
  值可以省略，立即异步下载外部js，不影响页面其它的操作，js下载完毕立即执行
  defer
  defer=”defer”
  值可以省略，脚本延迟到文档完全被解析和显示后再执行，只有外部脚本可以使用
• 数值
  最小值：Number.MIN_VALUE 5e-324
  最大值：Number.MAX_VALUE 1.7976931348623157e+308
  无穷大：Infinity
  无穷小：-Infinity

• 数值检测
  NaN 非数值 （Not a Number）
  – console.log(“abc”/18); //结果是NaN
  – NaN 与任何值都不相等，包括NaN本身
  isNaN()： 任何不能被转换为数值的值都会导致这个函数返回 true
  – isNaN(NaN); //true
  – isNaN(“blue”); //true
  – isNaN(123); //false

• 逻辑运算符
  &&
  如果第一个操作数为假，返回第一个操作数，第二个操作数不执行
  如果第一个操作数为真，则返回第二个操作数
  ||
  如果第一个操作数为假，返回第二个操作数
  如果第一个操作数为真，返回第一个操作数，第二个操作数不执行 （常用）
  没有重载
  重载：函数的名字相同，但是参数个数不同
  JavaScript中没有重载的概念，下面的相同名称的函数会把上面的函数覆盖，所以不允许出现同名的函数（大多数情况下）
  函数的两种定义方式

1.函数声明
function f(a,b) {
    return a + b;
}
console.log(f(5,6));
2.函数表达式
//myFun和f等价
var myFun = function (a,b) {
    return a + b;
}
console.log(myFun(6,7));

变量的作用域
不使用var声明的变量是全局变量，不推荐使用
变量作用域只有两种，全局变量和函数内的变量
js中没有块级作用域
在其他语言中，在代码块中定义的变量，外部是访问不到的，比如在for循环中定义的变量。
但是在js中没有块级作用域
典型题目1

var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}

输出结果：undefined
js是解释型语言，由解析器执行
解析器解析过程，
预解析：
先找var，function和参数（函数参数）
找到var和function之后，会把var和function函数提前（var仅提前声明，不提前赋值）
从上到下一行一行执行代码

var num;               //全局预解析
function fun() {
    var num;           //局部预解析
    console.log(num);
    num = 20;
}
num = 10;
fun();

典型题目2

var a = 8;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

输出结果：undefined 9
预解析后：
//全局预解析时只把函数提前，在函数要被调用前才对函数内部进行局部预解析

var a;
function f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 8;
f1();

典型题目3

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

输出结果：9 9 9 9 9 报错
预解析后：

function f1() {
    var a;           //a是局部变量
    a = b = c = 9;   //b和c是全局变量
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

命名函数
匿名函数
没有命名的函数
一般用在绑定事件的时候

function () {}

自调用函数
只能执行一次

(function () {
    console.log("test");
})();

函数是一种数据类型

var myFun = function () {
    console.log("hello");
};
console.log(typeof myFun);

输出结果：function
函数可以作为另一个函数的参数

//求两个数的数学运算的结果
function getResult(a, b, fn) {
    return fn(a,b);
}
var n = getResult(5,6,function (a,b) {
    return a + b;
});
console.log(n);           //11
console.log(typeof n);    //number

function f1(a,fn) {
    fn(a);
}
var n = 5;
var myFun = function (a) {
    console.log(a);
}
f1(n, myFun);

创建对象

var hero = new Object();
//属性--特征 名词
hero.name = "xiaoming";
hero.level = 0;
hero.diamond = 0;
//方法--行为 动词
hero.moveLeft = function() {
    console.log("left");
};
hero.attack = function(name) {
    //只有在当前hero对象的方法中，this才是当前hero对象
    //this 当前这个对象
    console.log(this.name + "攻击" + name);
};
//获取对象的属性值
console.log(hero.name);
console.log(hero.level);
//调用对象的方法
hero.attack("xjj");

构造函数
构造一个对象，并且返回的函数

//1 内存开辟空间，存储新创建的对象new Object();
//2 会把this设置为当前对象
//3 执行函数内部的代码，设置对象的属性和方法
//4 返回新创建的对象


//定义构造函数
function Student(name, age, sex, score) {
    //对象的属性
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.score = score;
    //对象的方法
    this.sayHi = function() {
        console.log("大家好，我是" + this.name);
    }

//调用构造函数
var s1 = new Student("zhangsan", 18, 1, 10);

this
谁调用this就是谁

//1--------------------
function test() {
    console.log(this);
}
test(); //window.test();  两者等价
//上面的this是window， 实际是window调用test()
//2--------------------
p1.sayHi();
//sayHi()中的this，是p1，此时是p1调用sayHi()
//3--------------------
构造函数中的this，始终是new的当前对象

对象字面量

var arr = [];              //数组的字面量
var arr = new Array();     //使用构造函数创建数组
var o = new Object();      //使用构造函数创建对象
var o = {                  //对象的字面量，等号右边的是对象的字面量，把字面量赋值给o
    name: "xjj",    //键值对
    age: 18,
    sex: "未知",
    salary: 100,
    dog: {},
    cats: [],
    sayHi: function() {
        console.log("大家好，我是" + this.name);
    }
};

JSON
什么是JSON
JavaScript Object Notation（JavaScript对象表示形式）
JavaScript的子集

//json   与对象字面量唯一的区别在于，键值对中的值需要用引号引起
//json是描述数据的一种标准规范
var o = {
    "name": "xjj",
    "age": 18,
    "sayHi": function() {
        console.log("大家好，我是" + this.name);
    }
};

输出对象的属性和方法forin

//有些系统提供的对象的属性和方法无法遍历，原因是属性和方法被设置为不可遍历。。。
var arr = new Array();
for(var key in arr) {
    //key对象的属性 键
    console.log(key);
    console.log(o[key]);  //输出属性key对应的值
}

数据类型————简单（基本）类型和复杂（引用）类型
基本类型：直接存储值，直接在栈中存储数据
-Number、String、Boolean
-Undefined、Null
引用类型：存储引用，在栈中存储地址，地址指向堆
-Object、Array、Date、函数
两种类型作为函数的参数
当基本类型作为函数的参数的时候，函数内部对参数的修改，不会影响外部的变量
复杂类型作为函数的参数，函数内部对参数的修改，会影响外部变量
数组常用的方法
1.检测数组
instanceof 关键字 是否是谁的对象

var o = [];  //o是数组类型
console.log(o instanceof Array);  //true
console.log(o instanceof Date);  //false

Array.isArray() HTML5中新增
2.转换数组
toString 把数组转换成字符串，每一项用,分割
valueOf() 返回数组对象本身
3.join

var array = [3,4,5,6,7,8];
console.log(array.toString());  //输出字符串3,4,5,6,7,8
console.log(array.join("|"));   //输出字符串3|4|5|6|7|8
//toString()内部调用了join()

4.栈方法
push（）方法，接收任意数量的参数，把他们逐个加到数组末尾，返回修改后的数组长度。
pop（）方法，从数组末尾移除最后一项，减少数组的length值，并返回移除的项。
5.队列方法

typeof和instanceof的区别
typeof可以获取任意变量的类型
instanceof只能判断对象的类型
typeof在获取对象的类型的时候，不管什么时候对象获取的都是object
instanceof可以判断具体的类型
DOM
DOM：文档对象模型（Document Object Model），又称为文档树模型。是一套操作HTML和XML文档的API。
DOM可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。
文档（Document）：就是指HTML或者XML文件
节点（Node）：HTML文档中的所有内容都可以称之为节点
元素（Element）：HTML文档中的标签可以称为元素
文档元素（根元素）：文档中的第一个元素，HTML文档元素就是
获取页面元素
getElementById() //根据id属性获取一个DOM对象，区分大小写，符合代码规范
getElementByTagName() //根据标签返回多个DOM对象

var img = document.getElementById("image");