HTML5+CSS3+JS【ES6】属于前端三剑客

HTML：基于标签编写网页文档结构，版本是HTML5，简称H5

CSS：基于选择器和属性美化，布局排布网页，版本是CSS3

JS：嵌入在网页中的编程语言，也称为“脚本（script）语言”负责编写网页交互操作

变量，流程控制，对象，数组，函数

Java和Javascript的区别

1.java是强类型语言，静态类型语言

2.JavaScript是弱类型语言，动态类型语言

<script >
var a=10;
var b=10.5;
var c="abc";
var d='abc';
var e=true;
var f={};
var g=[];
var h=function (){

}
//typeof关键字可以在运行时检查出变量的类型
console.log(typeof a)//numnber->(short,byte,int,long,float,double)
console.log(typeof b)
console.log(typeof c)//string->String(js没有char类型，双引号，单引号都是字符串)
console.log(typeof d)
console.log(typeof e)//boolean->boolean
console.log(typeof f)//object 对象类型（Java需要定义类，用类构造对象，js直接在大括号中构造对象）
console.log(typeof g)//object 数组也是对象类型（js的数组=Java的ArrayList和LinkedList）
console.log(typeof h)//function函数类型（js支持函数也可以声明为变量，并且函数可以作为另一个函数的参数）
</script>

js的继承依靠的是原型链

1.同一个构造方法构造出来的对象拥有一个__proto__指针，指向同一个原型对象

2.构造方法身上有一个prototype指针，与该构造方法构造出来的所有对象的__proto__指向同一个原型对象

3.通过指针.__proto__.成员或者构造方法.prototype.成员可以设置一个所有该构造方法构造出来的对象都可以继承的成员

4.通过Object.prototype.成员可以设置一个任意构造方法构造出来的对象都可以继承的成员

试题1.什么是原型对象，什么是对象原型

是同一种东西，2.构造方法身上有一个prototype指针，与该构造方法构造出来的所有对象的__proto__指向同一个原型对象

试题2.什么是原型链

所有的对象和构造函数身上都有指针指向一个原型对象，原型对象身上有指针指向其所继承的构造函数的原型对象，最顶层是Object的原理对象，这种由子构造函数及其父辈构造函数的原型对象组成的单向链表称为原型链，在对象身上访问成员的时候，会沿着原型链一直向上追溯，如果追溯到顶层Object的原型还是找不到，返回undefined

构造方法的原型对象组成的单向链表是原型链

数据类型和变量

Number

JavaScript不区分整数和浮点数，统一用Number表示

numnber->(short,byte,int,long,float,double)

Number可以直接做四则运算，规则和数学一致

字符串

字符串是以单引号'或双引号"括起来的任意文本

string->String(js没有char类型，双引号，单引号都是字符串)

JavaScript的字符串就是用''或""括起来的字符表示。

如果'本身也是一个字符，那就可以用""括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。

如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：

'I\'m \"OK\"!';
表示的字符串内容是：I'm "OK"!

转义字符\可以转义很多字符，比如\n表示换行，\t表示制表符，字符\本身也要转义，所以\\表示的字符就是\。

布尔值

boolean->boolean（true，false）

运算

&&运算是与运算，只有所有都为true，&&运算结果才是true

||运算是或运算，只要其中有一个为true，||运算结果就是true

!运算是非运算，它是一个单目运算符，把true变成false，false变成true

要特别注意相等运算符==。

JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数： isNaN（NaN）

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false
这不是JavaScript的设计缺陷。

浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

数组

数组 - 廖雪峰的官方网站

对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

JavaScript的对象用于描述现实世界中的某个对象。

var xiaoming = { name: '小明' };

console.log(xiaoming.name);
console.log(xiaoming.age); // undefined

由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString' in xiaoming; // true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

函数定义和调用

定义函数

在JavaScript中，定义函数的方式如下：

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

上述abs()函数的定义如下：

function指出这是一个函数定义；
abs是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

方法

在一个对象中绑定函数，称为这个对象的方法。

在JavaScript中，对象的定义是这样的：

var xiaoming = {
    name: '小明',
    birth: 1990
};

但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了

本文含有隐藏内容，请开通VIP 后查看

【JavaScript】轻松入门