JavaScript精粹（一）

JavaScript（简称为JS）是一种广泛应用于网页开发的脚本语言，具有以下几个主要作用：

网页交互 ：JavaScript 可以用于创建动态的网页效果，例如响应用户的操作，实现页面内容的动态更新，以及验证用户输入等。
与用户交互 ：通过 JavaScript，网页可以与用户进行实时的交互，例如表单验证、响应点击事件、实现动画效果等，从而提升用户体验。
操作 DOM ：JavaScript 可以通过 DOM（Document Object Model 文档对象模型）来操作网页的结构、样式和内容，使开发者能够动态地修改页面元素，实现页面的动态效果。
异步数据请求 ：JavaScript 可以通过 AJAX 技术（Asynchronous JavaScript and XML 异步 JavaScript 和 XML）向服务器发送异步请求，获取数据并动态更新页面内容，实现无需刷新页面即可加载新数据的功能。
构建 Web 应用：JavaScript 还可以用于构建复杂的 Web 应用，例如单页应用（SPA，Single Page Application）和动态网站，通过 JavaScript 的框架和库（如React、Angular、Vue.js等），开发者可以更高效地构建现代化的 Web 应用程序。

总的来说，JavaScript 在网页开发中扮演着至关重要的角色，它使得网页不再是静态的展示页面，而是可以实现丰富的交互和动态效果，从而提升用户体验和网站的功能性。

这里写自定义目录标题

一、JavaScript发展史
- [1.1 JavaScript用途](#1.1 JavaScript用途)
- [1.2 JavaScript非常好学](#1.2 JavaScript非常好学)
[二、Hello Word！](#二、Hello Word！)
- [1.1 js代码的书写](#1.1 js代码的书写)
- - [1.1.1 javascript标签的书写：](#1.1.1 javascript标签的书写：)
  - [1.1.2 放置位置，执行顺序](#1.1.2 放置位置，执行顺序)
  - [1.1.3 console.log() 控制台](#1.1.3 console.log() 控制台)
  - [1.1.4 alert()](#1.1.4 alert())
  - [1.1.5 prompt()](#1.1.5 prompt())
- [1.2 一个简单的js过程](#1.2 一个简单的js过程)
- - 1.2.1获取元素
  - [1.2.2 绑定事件](#1.2.2 绑定事件)
  - 1.2.3写js代码需要注意什么？
- [1.3 不同位置的js代码](#1.3 不同位置的js代码)
- - [1.3.1 当js代码放在获取的元素之前的时候](#1.3.1 当js代码放在获取的元素之前的时候)
  - [1.3.2 将js代码放在标签内](#1.3.2 将js代码放在标签内)
- [1.4 事件](#1.4 事件)
- [1.5 在标签中添加或者获取内容](#1.5 在标签中添加或者获取内容)
- - [1.5.1 innerHTML](#1.5.1 innerHTML)
  - [1.5.2 innerText](#1.5.2 innerText)
[三变量和字面量初步](#三变量和字面量初步)
- [1.1 变量和初步认识this](#1.1 变量和初步认识this)
- - [1.1.1 定义变量](#1.1.1 定义变量)
  - [1.1.2 变量要先申明才能用](#1.1.2 变量要先申明才能用)
  - [1.1.4 变量的运用](#1.1.4 变量的运用)
  - [1.1.2 this的简单认识](#1.1.2 this的简单认识)
- [1.2 数字的字面量](#1.2 数字的字面量)
- - [1. 八进制举例：](#1. 八进制举例：)
  - [2. 16进制举例：](#2. 16进制举例：)
  - [3. NaN](#3. NaN)
- [1.3 字符串](#1.3 字符串)
- [1.4 变量类型](#1.4 变量类型)
- - [1.4.1 数据类型(5种)](#1.4.1 数据类型(5种))
  - [1.4.2 引用类型](#1.4.2 引用类型)
四、数学运算符
- [1.1 数学运算符](#1.1 数学运算符)
- - [1.1.1 string → number （显示类型转换）](#1.1.1 string → number （显示类型转换）)
  - [1.1.2 number → string](#1.1.2 number → string)
  - [1.1.3 toString()](#1.1.3 toString())
  - [1.1.4 隐式转换](#1.1.4 隐式转换)
  - [1.1.5 取余 %](#1.1.5 取余 %)
- [1.2 关系运算符](#1.2 关系运算符)
- - 1.2.1关系运算符的正统，number和number进行数学运算，得到的答案boolean
  - [1.2.2 不正统的关系运算，为了面试](#1.2.2 不正统的关系运算，为了面试)
- [1.3 逻辑运算符](#1.3 逻辑运算符)
- - [1.3.1 && 与运算符](#1.3.1 && 与运算符)
  - [1.3.2 || 或运算符](#1.3.2 || 或运算符)
  - [1.3.3 ! 非运算符](#1.3.3 ! 非运算符)
- [1.4 赋值运算符](#1.4 赋值运算符)
- [1.5 Math对象方法](#1.5 Math对象方法)

一、JavaScript发展史

1.1 JavaScript用途

前端三层：

结构层 HTML 从语义的角度描述页面的结构
样式层 CSS 从审美的角度装饰页面
行为层 JavaScript 从交互的角度提升用户体验
说白了，JavaScript用来制作web页面交互效果，提升用户体验

1.2 JavaScript非常好学

好学的点是什么：

JavaScript是有界面效果：不像C语言，黑底白字，很枯燥的。
JavaScript的语法来源于C和Java：有C和Java的经验同学好学很多。
JavaScript是弱变量类型的语言，动态数据类型语言。
JavaScript运行在宿主环境中，不关心内存，垃圾回收。

不好学的点是什么：

兼容性问题： IE8是个怪胎，很多东西都不一样，所以就要写兼容写法，不怕造轮子，多写几遍
花式写法很多，抽象：从简单入手，细细品味代码
太多细节：为知笔记认真写自己的笔记，自己做实验; 老师的课程已经精挑细选了细节，并不盲目堆砌

二、Hello Word！

1.1 js代码的书写

1.1.1 javascript标签的书写：

三种写法都是对的

javascript 复制代码

<script></script>
<script type="text/javascript"></script>
<script language="javascript"></script>

JavaSript程序，要写在HTML页面中，运行页面的时候，这个页面上的JS也就一起运行了。也就是说，js的运行必须有宿主环境，最最常见的宿主环境，就是浏览器

1.1.2 放置位置，执行顺序

可以放置在页面中任何位置，但是，我们通常放在body或者head结束之前，且要注意加载顺序，从上到下依次加载

就像css一样，js还可以引入外部js文件,通常放在head结束之前

javascript 复制代码

<script src="index.js"></script>

1.1.3 console.log() 控制台

javascript 复制代码

console.log("内容");

在控制台输出内容，字符串需要加引号（单双引号不区分，成对出现就好）

1.1.4 alert()

javascript 复制代码

alert("内容");

1.1.5 prompt()

javascript 复制代码

var a = prompt("请输入用户名：");

会把用户输入的值返回，存到a里面

1.2 一个简单的js过程

我们想要用js操作元素，和我们的css一样，需要选择到这个元素，当然，我们的css是通过选择器，那么js是通过什么呢？

1.2.1获取元素

我们来学习第一个获取元素的方法

javascript 复制代码

document.getElementById("id名");
        //通过ID选择器获取元素
//document代表整个HTML页面

1.2.2 绑定事件

当我们获取到元素以后，我们可以操作元素了，我们来给他绑定一个点击事件,通常也叫做添加监听。

javascript 复制代码

document.getElementById("box").onclick = function () {
    alert("Daniel好帅！Daniel好帅！");
};

1.2.3写js代码需要注意什么？

通过上面的一段简单的js代码，我们可以总结出一些js的代码规范

代码要缩进，缩进要对齐
js严格区分大小写
语句字符都要半角符号
每条完整语句后面要写分号
JavaScript对空格和换行不敏感，因此，语句后面的分号就显得尤为重要，分号代表一个语句执行完毕

1.3 不同位置的js代码

1.3.1 当js代码放在获取的元素之前的时候

这个时候由于代码是由上到下执行的，因此js找不到box,这个时候就会报错，这个时候我们可以用

javascript 复制代码

window.onload = function(){}

将我们的代码包裹起来，这个代码的意思是：页面加载完成（标签、图片、框架...）后，执行代码。

但是，一个页面只能出现一次

javascript 复制代码

<script>
window.onload = function(){
    document.getElementById("box").onclick = function(){
        alert( '这是我的第一段JavaScript代码~' );
    };
};
</script>
<body>
<div id='box'></div>
</body>

1.3.2 将js代码放在标签内

神奇的是，我们还能将js的代码放在标签里面，但是，写法有所不同

html 复制代码

<div id='box' onclick='alert("这是我的第一段JavaScript代码~")'></div>

我们可以发现，少了function方法，好比我们有onclick这一个属性一样直接用等号加引号接上他的属性值

但是，这样子写没办法维护，代码一多久杂乱无章，可读性差因此我们不会这样写js

1.4 事件

JS里面有很多的事件，刚刚我们讲的onclick就是其中的左键点击事件。

我们可以讲这些事件大致分为几类：鼠标事件、键盘事件、表单事件、系统事件。此处做简单认识，暂时无需全部掌握。

鼠标事件：

javascript 复制代码

onclick 鼠标点击事件
onmouseover/onmouseout 鼠标被移入/移出(会冒泡，暂时不需要理解)
onmouseenter/onmouseleave 鼠标移入/移出（常用）
ondblclick 鼠标双击事件
onmousedown 鼠标按键按下事件（按下不弹起）
onmousemove 鼠标移动事件
onmouseup 某个鼠标抬起事件

表单事件：

javascript 复制代码

onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变表单的内容 （发生在失去焦点之前）
用户改变表单内容：当失去焦点的时候表示改变完成，但是又在失去焦点事件之前执行
onreset 重置按钮被点击（注意：要给form表单设置该事件）
onsubmit 提交按钮被点击

键盘事件：

javascript 复制代码

onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开

系统事件：

javascript 复制代码

onload 某个页面或图像被完成加载
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onerror 当加载文档或图像时发生某个错误（xss跨站脚本攻击时使用）

1.5 在标签中添加或者获取内容

我们先来做一个小小的案列，当我们鼠标移入box盒子的时候显示一段文字：

1.5.1 innerHTML

我们又学习到一个新的属性：innerHTML 获取元素里面的内容或者添加内容

javascript 复制代码

document.getElementById('box').onmouseover = function(){
    document.getElementById('box').innerHTML = '大家好，我是Daniel';
};

当然也可以获取内容

javascript 复制代码

console.log(document.getElementById('box').innerHTML);

这个时候我们可以获取里面的内容，是获取到里面所有的内容，包括标签

1.5.2 innerText

此外，还有一个innerText也可以添加内容

javascript 复制代码

document.getElementById('box').onmouseover = function(){
    document.getElementById('box').innerText = '<p>大家好，我是Daniel。</p>';
};
document.getElementById('box').onmouseover = function(){
    document.getElementById('box').innerHTML = '<p>大家好，我是Daniel。</p>';
};

但是我们可以看出来，innerText不能解析标签，而innerHTML可以。

注意：这两个属性都是可读可写的，也就是既可以修改也可以获取.

三变量和字面量初步

1.1 变量和初步认识this

变量（Variables），和高中代数学习的x、y、z很像，它们不是字母，而是蕴含值的符号。

它和直接量不同，直接量5，就是数字5；直接量"你好"就是字符串"你好"。现在这个变量不一样了，你看见一个a，实际上它不是字母a，而是里面蕴含的不同的值。

1.1.1 定义变量

javascript 复制代码

<script type="text/javascript">
    //定义一个变量
    var a;
    //赋值
    a = 100;
    //输出变量a
    console.log(a);
</script>

我们使用var关键字来定义变量，所谓的关键字就是一些有特殊功能的小词语，关键字后面要有空格。var就是英语variables变量的缩写，表示定义一个变量。一旦你

javascript 复制代码

var a

你的电脑内存中，就会开辟一个空间，来存储这个变量a。现在就可以给这个变量赋值，JS中给变量赋值用等号，等号右边的值赋给左边

javascript 复制代码

a = 100

现在a变量的值就是100。所以我们输出

javascript 复制代码

console.log(a)    //100

1.1.2 变量要先申明才能用

使用一个变量，必须先进行一个var，才能使用。var这个过程可以叫做声明declaration，也可以叫做定义definition。

现在我们直接运行语句：

javascript 复制代码

console.log(b);   //这个b没有被var过，所以要报错

因为b没有被定义，所以b现在不是一个变量，系统不认识这个b的。抛出引用错误。而且

如果一个变量，仅仅被var了，但是没有被赋初值呢，此时这个变量的值就是undefined 未定义

javascript 复制代码

var a;
console.log(a);  //undefined

变量也可以一边定义一边赋值

javascript 复制代码

var a = 10;

还可以同时定义多个变量

javascript 复制代码

var a = 10,b = 20;

变量的名称是标识符（identifiers），任何标识符的命名都需要遵守一定的规则：

在JavaScript语言中，一个标识符(identifier)可以由字母、下划线（_）、美元（$）符号、数字（0-9）组成，但不能以数字开头。也就是说，一个标识符必须由字母、下划线、美元符号开头，后续可以有字母、下划线、美元符号、数字。因为JavaScript语言是区分大小写的，所以A和a不是同一个变量。并且不能是JavaScript保留字、关键字。

1.1.4 变量的运用

之前我们设置了一个js事件，鼠标移入会显示内容，那么，当移出的时候我们也给他设置事件，让里面的内容清空

javascript 复制代码

document.getElementById('box').onmouseover = function(){
    document.getElementById('box').innerHTML = '大家好，我是Daniel。';
};
document.getElementById('box').onmouseout = function(){
    document.getElementById('box').innerHTML = '' ";
};

这个时候，我们可以看到我们的页面中有一大串重复的语句document.getElementById('box') ，这时候我们就可以用变量把他给存起来。

javascript 复制代码

var oBox = document.getElementById('box');
oBox .onmouseover = function(){
    oBox .innerHTML = '大家好，我是Daniel。';
};
oBox .onmouseout = function(){
    oBox .innerHTML = ''";
};

这个时候，我们可以发现，我们的代码量少了很多，优化了代码，也提升了运行速度,但是，我们却不能这样子，

javascript 复制代码

var oBox = document.getElementById('box');
var x= oBox .innerHTML
oBox .onmouseover = function(){
    x = '大家好，我是Daniel。';
};
oBox .onmouseout = function(){
    x = ''";
};

这个时候是什么情况呢，是我们把oBox的内容复制给了x，再将'大家好，我是Daniel。复制给x，这时候，等价于给x新赋值了内容，把之前的覆盖了。在js里面 '='是赋值的意思，'=='才是等于的意思

1.1.2 this的简单认识

this指向触发这个事件的对象

javascript 复制代码

oBox1.onmouseenter = function () {
    this.innerHTML = "我爱Daniel！";//在js里面=是赋值
};
oBox1.onmouseleave = function () {
    this.innerHTML = "Daniel好帅！";//在js里面=是赋值
};

字面量：英语叫做literals，有些书上叫做直接量。

我们先来学习数字的字面量，和字符串的字面量。剩余的字面量类型，我们日后遇见再介绍

1.2 数字的字面量

数字的字面量，就是这个数字自己，并不需要任何的符号来界定这个数字。

JavaScript中，数字的字面量可以有三种进制：

10进制：普通的数字就是十进制
8进制：如果以0开头、或者以0o开头、或者以0O开头的都是八进制，八进制只能用0~7来表示
16进制：如果以0x 或0X开头的都是十六进制。

1. 八进制举例：

以0开头，所以就是八进制；显示的时候会以十进制显示 036 = 3*8+6=30

javascript 复制代码

    console.log(036);  //30
    console.log(044);   //36
    console.log(010);   //8
    console.log(0o36); //30
    console.log(0O36); //30
    console.log(010);   //8

注意，八进制只能出现0~7这8中字符，如果表示不合法，那么JS将自动的认为你输入错了，从而用十进制进行显示：
console.log(088);//88 以0开头，按理说是八进制，但后面的数字错了，所以以十进制显示

但是以0o开头、0O开头的数字，如果后面写错了，控制台报错

2. 16进制举例：

十六进制数：0 1 2 3 4 5 6 7 8 9 a b c d e f

javascript 复制代码

console.log(0xff);   //255
console.log(0x2b);  //43
console.log(0x11);  //17

小数的字面量也很简单，就是数学上的点。计算机世界中，小数称为"浮点数"，允许使用e来表示乘以10的几次幂：

javascript 复制代码

console.log(5.6e5); //560000
console.log(1e-4); //0.0001
console.log(.1e-3); //0.0001

只有十进制有小数的字面量，八进制、十六进制没有小数的字面量

最后学习两个特殊的字面量：

javascript 复制代码

Infinity 无穷大

试图输出一个非常大的数字：

javascript 复制代码

console.log(3e45645645645645);  //infinity

至于多大的数字能生成无穷大，不同浏览器不一样，不要管，当然也可以是负无穷大

3. NaN

英语全名叫做not a number，不是一个数。比较哲学的是，这个"不是一个数"是一个数字字面量

javascript 复制代码

console.log(0/0);

简单得说就是用不是数字字面量或数字字符串参与运算，或者不符合运算法则的结果就是NaN

总结一下，数字字面量有整数字面量（十进制、16进制、八进制），浮点数字面量（要记住e），Infinity，NaN

1.3 字符串

字符串是一个术语，就是人类说的语句、词。字符串的字面量，必须用双引号、单引号包裹起来。字符串被限定在同种引号之间；也即，必须是成对单引号或成对双引号。

javascript 复制代码

console.log("今天天气很好")

或者

javascript 复制代码

console.log('今天天气很好')

但是绝对不能

javascript 复制代码

console.log('今天天气很好")

无论什么类型，只要用引号引起来以后就是字符串

如果在字符串里面要使用引号，那么必须用转义符号""转义：

javascript 复制代码

console.log("老师说你像\"考拉\"一样漂亮");

1.4 变量类型

这个变量是什么类型，和赋的值有关系，而和定义的时候是没有关系的。定义的时候，都是用var关键字定义的

检测数据类型用typeof

javascript 复制代码

var a = 10;
console.log(typeof a);

1.4.1 数据类型(5种)

基本类型5种：

number 数字类型
string 字符串类型
undefined undefined类型，变量未定义时的值，这个值自己是一种类型
boolean 布尔类型，仅有两个值true 和 false，讲if语句时我们细说
null null类型，空对象这个值自己是一种类型，遇见时我们细说

（1） number 数字类型

javascript 复制代码

var a = -100;

（2）string 字符串（无论什么类型，用引号引起来就是字符串）

javascript 复制代码

 var a = '100';

注意：空字符串，也是字符串。
（3） undefined

javascript 复制代码

var a;
console.log(a);   //undefined

（4） boolean 布尔值（true/false）

javascript 复制代码

var a = false;

1.4.2 引用类型

所谓的引用类型就是在进行比较的时候比较的不仅是值，还有内存地址
（1）function 函数类型

javascript 复制代码

var a = function () {
        console.log("Daniel！");
    };
    var b = function () {
        console.log("Daniel！");
    };
    console.log(typeof a); // function
    console.log(a === b); //false
    };

我们可以发现虽然这两个函数长得一模一样，但是却不相等，这就是因为在定义的时候开辟了两个不同的内存，导致他们的内存地址不相等，所以值不等。

还有json，数组也是引用类型，不过，function是独立的function类型，json和数组是object类型

（2）object对象（元素节点、数组、JSON、null）

元素节点：

javascript 复制代码

var oBox = document.getElementById('box');
console.log(typeof oBox); //object

数组：

数组（数组里面可以放任意的数据类型，包括数组）

javascript 复制代码

var a = [1,2,3,'Daniel','好帅'];

可以通过下标的方式获取数组里面的内容，数组的下标从0开始

javascript 复制代码

console.log(a[2]);    //3

通过.length获取数组的长度

javascript 复制代码

console.log(a.length)   //5

类型：object

javascript 复制代码

var a = [1,2,3,4];
var b = [1,2,3,4];
console.log(typeof a); //object
console.log(a === b); //false

JSON：

JSON,里面放置键值对，由逗号隔开，最后一个可以不加逗号
键值对：由引号引起的属性冒号值构成
就属性而言：可以不用引号，但有些后台语言不认识没有冒号的JSON，因此我们统一要求加冒号
就值而言：可以是任意语句，但是一般传到后台的是字符串数据，在js自身去使用的话可以是任意类型

javascript 复制代码

var a = {
            "name" : 'Daniel',
            "sex" : '男',
            "age" : 18,
            "fn" : function () { console.log("哈哈");}
        };
        console.log(a.name); //调用里面的属性 值
        console.log(a.fn());

但是，和数组不一样的是，json里没有长度这个属性，除非你定义了

javascript 复制代码

console.log(shuaiGe.length); //undefined

类型：object

javascript 复制代码

    var a = {
        "name" : "Daniel"
    };
    var b = {
        "name" : "Daniel"
    };
console.log(typeof a); // object
    console.log(a === b); //false

null：

在一个节点元素没有添加事件的时候，他的事件就是null

javascript 复制代码

var oBox = document.getElementById('box');
console.log(oBox.onclick); //null
console.log(typeof oBox.onclick); //object

所以我们在绑定一个事件的时候想要解绑，就可以用null

javascript 复制代码

var oBox = document.getElementById('#box');
    oBox.onclick = function (ev) {
        console.log("你好！");
    };
    oBox.onclick = null;

四、数学运算符

运算符（Operators，也翻译为操作符），是发起运算的最简单形式。运算符的分类见仁见智，我们的课程对运算符进行如下分类：

数学运算符(Arithmetic operators)
比较运算符(Comparison operators)
逻辑运算符(Logical operators)
赋值运算符(Assignment operators)
按位运算符(Bitwise operators)
条件 (三元) 运算符(Conditional operator)

1.1 数学运算符

数学运算符的正统，是number和number的数学运算，结果是number。出于面试的考虑，有一些奇奇怪怪的数学运算：

数学运算中，只有纯数字字符串、布尔值、null能够帮你进行隐式转换
- + - * / % ()

1.1.1 string → number （显示类型转换）

（1）parseInt()

parseInt就是将一个string转为一个整数，不四舍五入，直接截取整数部分。如果这个string有乱七八糟的东西，那么就截取前面数字部分。如果两个数字之间有字符串，那么只截取第一个数字。

javascript 复制代码

var a = "123.12px123";
var b = parseInt(a);
console.log(typeof b); //number
console.log(b); //123

（2）parseFloat()

会截取小数点

javascript 复制代码

var a = "123.12px123";
var b = parseFloat(a);
console.log(typeof b); //number
console.log(b); //123.12

1.1.2 number → string

将一个数字，与一个空字符串进行连字符运算，那么就是自动转为字符串了,不仅是数字适用，其他类型要转换成字符串也适用

javascript 复制代码

var a = 123;
var b = a + "";
console.log(b); //123
console.log(typeof b);  //string

1.1.3 toString()

将其他类型转换为string类型

javascript 复制代码

var str4 = 100;
console.log(typeof str4.toString()); //string

1.1.4 隐式转换

就是没有写parseInt()、parseFloat()自己帮你转格式

javascript 复制代码

console.log(3 * "8"); //24
console.log("3" * "8"); //24
console.log("48" / "2"); //24
console.log("24" % 55); //24
console.log(3 * null);  //0   隐式转换的时候null将被转为0
console.log(3 * false);  //0  隐式转换的时候false将被转为0
console.log(3 * true);  //3  隐式转换的时候true将被转为1
// 不纯的字符串和undefined是不能帮你进行隐式转换的，结果都是NaN
console.log(3 * "8天"); //NaN 数学运算中，不纯的字符串没法隐式转换
console.log(3 * undefined); //NaN  数学运算中，undefined不能进行隐式转换

加号比较特殊，加号两边都是数字类型或者数字类型的字符串的时候，那么就是数学加法；两边不都是数字或者数字类型的字符串的时候，那么就是字符串的拼接，结果是字符串。

javascript 复制代码

var sum = 3 + 4; //7

以上是运算

javascript 复制代码

console.log("你" + "好"); //你好
var sum = "3" + "4"; //34

这种就是字符串的拼接，所以，加号没有隐式类型转换

总结：

无论哪种运算，只要出现了undefined参与运算，结果都是NaN。
然后"4"、false、true、null都能进行隐式转换。
加号比较特殊，面对"4"没有隐式转换的

1.1.5 取余 %

两个值相除的余数

javascript 复制代码

var a = 13 % 5;
console.log(a);   //3

13除以5 商 2 余3，所以结果为3

1.2 关系运算符

javascript 复制代码

<img src="img/1.jpg" alt="Daniel的媳妇儿，你们的师娘！" id="box" width="200" >
  >   大于
  <   小于
  >=  大于等于
  <=  小于等于
  ==  等于
  !=  不等于
  === 全等于
  !== 不全等

1.2.1关系运算符的正统，number和number进行数学运算，得到的答案boolean

javascript 复制代码

console.log(8 > 5);
console.log(7 < 4);

（1）= 等号赋值

javascript 复制代码

var a = 10; //将10赋值给a

（2）== 等等等于

javascript 复制代码

var a = 10;
var b = "10";
console.log( a == b );  //true

（3）=== 全等数据类型判断值和类型引用类型判断内存地址和值

javascript 复制代码

var a = "3",var b = 3;
console.log( a === b );  //false

1.2.2 不正统的关系运算，为了面试

（1）string 和 string 比较的就是字符编码顺序

字符编码顺序 à 数字、大写字母、小写字母

javascript 复制代码

"a" < "b" //true
"A" < "B" //true
"A" < "a" // true ，大写字母在字符集里面是在小写字母前面
"1" < "A"   //true ，数字在字母前端
"blank" < "blue"   //true   因为一位一位比，直到比出大小
"25678" < "111111111"    //false  因为是string和string比，比的是字符编码顺序 所以一位一位的比

（2）与数字进行关系运算时，纯数字字符串被转为数字，null转换为0，true转换转为1， false转换为0 （隐式类型转换）

注意的是：null不能进行和0的相等判定

javascript 复制代码

null < 0.00001   //true
null > -0.0001   //true
null == 0   //false  
false == 0   //true
true == 1 //true

NaN不等于自己，不全等于自己

javascript 复制代码

NaN == NaN   //false
NaN === NaN   //false
NaN != NaN //true
NaN !== NaN //true

string 和 number比，string会被隐式转换为number

javascript 复制代码

console.log( "234" < 235 ); //true

要注意的是，不要出洋相，不能连续使用关系运算符！！
2 > 2 > 1

的值是多少？

解：原式=(3>2) >1 = true > 1 = false (因为true会被当做1来与1进行比较)

也就是说，不能连续使用关系运算符！！因为一旦连续使用了，实际上还是从左至右计算，所以就有上一步的boolean参与了下一步的运算。

如果想要使用连续关系运算:
1<2 && 2<3

1.3 逻辑运算符

逻辑运算符就三个：

&& 逻辑与运算
|| 逻辑或运算
! 逻辑非运算

正统来说，参与逻辑运算的是boolean和boolean，得到的结果也是boolean

1.3.1 && 与运算符

都真才真有假就假 "短路语法"：a&&b a真抛出b a假抛出a

javascript 复制代码

console.log(1 && 2); //2
console.log(false && 2); //false

1.3.2 || 或运算符

有真就真，都假才假 "短路语法"： a || b a真抛出a a假抛出b

javascript 复制代码

console.log(1 || 2); //1
console.log(false || 2); //2

1.3.3 ! 非运算符

取反

javascript 复制代码

console.log( !1 ); //false
console.log( !false ); //true

1.4 赋值运算符

= 赋值
+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 模等于
++ 加加
-- 减减

赋值运算的参与者，一定是变量

（1）+=

javascript 复制代码

var a = 1;
a += 2;        //这行语句等价于a = a + 2;
console.log(a);   //3

（2）/=

javascript 复制代码

var b = 6;
b /= 3;   //等价于b = b / 3
console.log(b); //2

（3）%=

javascript 复制代码

var c = 100;
c %= 10; //等价于c = c % 10;
console.log(c); //0
 
var a = false + true && 13;
原式 = 0 + 1 && 13
     = 1 && 13
     = 13

（4）++

javascript 复制代码

var e = 10;
e++; //等价于e=e+1
console.log(e); //11

++可以与输出语句写在一起，++写在变量前和写在变量后不是一个意思

javascript 复制代码

var a = 10;
var x = a++ ； // 先赋值 再加1
var y = ++a ： // 先加1 再赋值

++有花式玩儿法，仅面试有用：

javascript 复制代码

var a = 8;
console.log(4 + a++);   //12  ， 先使用原来的a的值，就是4+8，输出12.然后a加1  a为9
console.log(a);     //9

（5）运算符的计算顺序：
++ -- !贴身的 →→→ 比较 →→→ 逻辑 →→→ 赋值

javascript 复制代码

var a = 3 < 6 && 7 < 14; //true
原式 = true && true
    = true

javascript 复制代码

var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7;
原式 = 3 < 6 && 7 < 14
     = 上一题
     = true

javascript 复制代码

var a = false + true && 13;
原式 = 0 + 1 && 13
     = 1 && 13
     = 13

javascript 复制代码

var a = 15;
false + a++ + true > 8 && 13 || 6
原式 = false + 15 + true > 8 && 13 || 6
     = 16 > 8 && 13 || 6
     = true && 13 || 6
     = 13 || 6
     = 13

1.5 Math对象方法

Math.pow(x,y) x的y次幂
Math.pow(3,4) //81
Math.sqrt(x); x的根号
Math.sqrt(81); //9
Math.floor() 向下取整
Math.floor(3.14) //3
Math.ceil() 向上取整
Math.ceil(3.14) //4
Math.max() 取最大值参数没有个数限制
Math.max(3,4) // 4
Math.max() 取最小值参数没有个数限制
Math.min(3,4); //3
Math.random() 随机数 [0,1) 之间，取得到0，取不到1
要取到[a,b]之间的随机整数，公式：Math.floor(Math.random()*(b-a+1) + a),比如要取[2,4]之间的整数
Math.floor(Math.random()*(4-2+1) + 2);
Math.abs() 取绝对值
Math.abs(-2) // 2
Math.round() 四舍五入
Math.round(3.14) //3

JavaScript精粹（一）

这里写自定义目录标题

一、JavaScript发展史

1.1 JavaScript用途

1.2 JavaScript非常好学

二、Hello Word！

1.1 js代码的书写

1.1.1 javascript标签的书写：

1.1.2 放置位置，执行顺序

1.1.3 console.log() 控制台

1.1.4 alert()

1.1.5 prompt()

1.2 一个简单的js过程

1.2.1获取元素

1.2.2 绑定事件

1.2.3写js代码需要注意什么？

1.3 不同位置的js代码

1.3.1 当js代码放在获取的元素之前的时候

1.3.2 将js代码放在标签内

1.4 事件

1.5 在标签中添加 或者 获取内容

1.5.1 innerHTML

1.5.2 innerText

三 变量和字面量初步

1.1 变量和初步认识this

1.1.1 定义变量

1.1.2 变量要先申明才能用

1.1.4 变量的运用

1.1.2 this的简单认识

1.2 数字的字面量

1. 八进制举例：

2. 16进制举例：

3. NaN

1.3 字符串

1.4 变量类型

1.4.1 数据类型(5种)

1.4.2 引用类型

四、数学运算符

1.1 数学运算符

1.1.1 string → number （显示类型转换）

1.1.2 number → string

1.1.3 toString()

1.1.4 隐式转换

1.1.5 取余 %

1.2 关系运算符

1.2.1关系运算符的正统，number和number进行数学运算，得到的答案boolean

1.2.2 不正统的关系运算，为了面试

1.3 逻辑运算符

1.3.1 && 与运算符

1.3.2 || 或运算符

1.3.3 ! 非运算符

1.4 赋值运算符

1.5 Math对象方法

1.5 在标签中添加或者获取内容

三变量和字面量初步