Javascript从零基础到精通——JS基础

1. Javascript是一门面向对象的，跨平台的脚本语言

• 什么是面向对象？
  对象：属性和方法

• 什么是跨平台？
  可以在多平台使用: window/Linux/Unix/Android/IOS

• 什么是脚本语言？
  HTML文件必须在浏览器里执行。
  JS文件嵌入到HTML文件里才能执行。
  凡是不能独立执行需要依赖其他程序的，通常都叫做脚本，也叫动态语言。（宿主语言）

2. JS历史

• 1995, 最初由Netscape（网景公司）的Brendan Eich设计 为Netscape Navigator 2.0开发LiveScript

• 就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript

• 因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript

3. JS特点

• 解释性脚本语言

• 运行在浏览器（浏览器内核带有js解释器，Chrome v8引擎）

• 弱类型语言（松散型）

• 事件驱动（动态）

• 跨平台

4. JS用途

• 嵌入动态文本于HTML页面
• 对浏览器事件做出响应
• 读写HTML元素
• 在数据被提交到服务器之前验证数据
• 检测访客的浏览器信息（可以使用js代码判断浏览器类型）
• 控制cookies，包括创建和修改等
• 基于Node.js技术进行服务器端编程

视觉交互、数据交互、node.js（后台）

5. JS和H5的关系

• 页面三要素
  结构：HTML
  表现：CSS
  行为：JS
  H5是一种新的技术，就目前而言，我们所知的H5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。
  比如video标签；我们对其理解为一个简单的标签；但是实际上，video标签还有更深层次的扩展功能；

6. JS书写位置

内部js

<script>  document.write('hello world')  </script>

外部js

console.log('hello world');

内部引入

<script src="path:to/index.js"></script>

内联js

<a href="alert('hello world')">超链接</a>
<div onclick="alert('hello world')">box</div>

注意：

      1. script标签可以放在页面任何位置

      2.下面这样写是错误的！！！
            <script src="path:to/index.js">  
                 document.write("hello world")  
            </script>

7. 向页面输出内容

document.write("hello world");

document.write("<strong>我很man</strong>");

转义字符:

&lt; || &gt;

document.write("&lt;strong&gt;我很man&lt;/strong&gt;");

8. 变量

变量声明:

    var a = "hello world"；

变量的类型:

• 数字类型(number)：1234567890 int（integer）：整型 float：浮点型（小数）

• 字符类型(string)：‘123456’,“字符串类型”,…（有单引号或者双引号）

• 未定义类型(undefined)：这是一种特殊类型，当变量被声明但是没有被赋值的时候，那么该变量的类型为undefined；

• 布尔值类型（boolean）：true，false；

• 对象类型：object；

• 数组类型（array）；

• 函数类型：Function；

• symbol — ES6新增

区分数据类型:

关键字 typeof

typeof返回有六种值： number、string、boolean、undefined、object、function

• js有五（六）种基本数据类型：number、string、boolean、undefined、null、（symbol）
• 两种引用类型：object、function

从另外一个角度来说：JS有两种特殊数据类型： null、undefined

变量使用小技巧: 声明一串变量:var a=1,b=2,c=3;

变量命名规范：（驼峰命名法）

规则：

 变量名首字符必须为字母(a-z A-Z)，下划线( _ )，或者美元符号( $ )开始  
 
 余下的字符可以是下划线、美元符号或任何字母或数字字符

 变量名大小写敏感（var a 和  var A 是不一样的两个变量）

关键字&保留字:

• 这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。
  

9. 运算符

程序：数据结构 + 算法

算数运算符

 加、减、乘、除、求余/取模（+ 、- 、* 、/ 、%）

余数： a/b整除之外的剩余的数字
10 / 3 = 3 … 1
10 % 3 = 1

3 % 10 = 3

取余：大数对小的那个数取余结果为整除之后的余数
小的那个数对大数求余的结果就是小的那个数本身

var a = 1, b = 2;
a + b == 3
a - b == -1
a * b == 2
a / b == 0.5

关系运算符

 ==（相等） 、!=（不等于）、<（小于） 、>（大于） 、<=（小于或者等于） 、>=（大于或者等于）

判断运算符两侧的结果是否满足规则，满足结果即为true，否则false

	5 != 3     true
	5 < 3      false
	5 <= 5   true

= 和 == 以及 === 的区别

• 一个等号是赋值，将等号右边的值赋给左边

• 两个等号是判断相等，相等结果为true，不等为false，不考虑数据类型，只判断值

• 三个等号要求全等，不仅值要相等，类型也必须相等

var a = 2, b = “2”;
a == b  // true
a === b // false
a + b  == ？？？

逻辑运算符

• 逻辑与：&&

    “和”的意思
    必须两个条件均为true结果才为true
  

• 逻辑或：||

    “或”的意思
      只要有一个条件为true结果就为true
      必须两个条件均为false结果才为false
  

• 逻辑非：!

    “不”的意思
    对本身的结果取反
  

与逻辑在两个条件均为true时结果才为true，其余情况均为false
或逻辑在两个条件均为false时结果才为false，其余情况均为true

10. 变量类型转换

隐式转换

var a = "2", b = 2;
console.log(a + b  )        // 22
console.log(a == b)       //  true
console.log(a * b)          // 4
console.log(a - 0 + b)   // 4
console.log(a / b)          // 1
console.log(a % b)          // 0

显式转换

parseInt()、parseFloat()、Number()、toString()、String()

NaN：Not a Number

NaN是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字（本来期望得到一个数字，但是结果没有计算成功）。方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值

isNaN(num)函数，该函数判断num变量的值是否是NaN，是NaN返回true，数字返回false

ECMAScript 中可用的 3 种强制类型转换如下：

• Boolean(value) - 把给定的值转换成 Boolean 型；
• Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
• String(value) - 把给定的值转换成字符串；

运算符的简写
赋值运算简写

+=、-=、*=、/=

a = a + 1 a += 1
a = a - 1 a -= 1
a = a * 1 a *= 1
a = a / 1 a /= 1

a++    a += 1     a = a + 1

a-- a -= 1 a = a - 1

++a --a

var a = 10;
console.log(a++);     // 10
console.log(a);       // 11 
console.log(++a);     // 12

自增自减前置后置是不一样的，前置是先加后用，后置的先用后加。

— var k=0; console.log(k++ + ++k +k +k++); console.log(k);

进制

什么是进制？

我们接触的数字一般都是十进制，比如 iPhoneX价格8868，默认就是10进制，因为我们习惯了他的贵。
再比如：1小时等于60分钟，那这就是60进制，逢60进一
一天等于24小时，24进制，每24小时就是一天，小时数清零

十进制： 0123456789 123 —> 3 * 10^0 + 2 * 10^1 + 1 * 10^2
二进制： 01 101 —> 1 * 2^0 + 0 * 2^1 + 1 * 2^2
八进制： 01234567 147 —> 7 * 8^0 + 4 * 8^1 + 1 * 8^2
十六进制：0123456789abcdef 1fa —> 10 * 16^0 + 15 * 16^1 + 1 * 16^2

• 进制转换----> toString(进制数)

var a = 072;  //八进制      58
var b = 0xAF; //十六进制    175
// 将数字转换为指定的进制格式
alert(a.toString(16));   //3a

var str = "3a";   
parseInt(str, 16);   //第二个参数，指定字符串的进制形式，结果为58

JS小数运算

JS的小数运算有时候并不是那么精确，但是损失的精度一般也在可承受范围之内

alert(0.7+0.1);  //输出0.7999999999999999
alert(0.6+0.2);  //输出0.8；