JavaScript基础模块（一）

一、JavaScript介绍

1、js的历史

    网景公司 Netspace liveScript   为了打开市场与sun公司合作    更名为--JavaScript
    发明人：布兰登·艾克
    JavaScript：运行在浏览器端的编程语言
    Java：运行在服务器端的语言

2、JavaScript是什么？

    JavaScript是一门脚本语言、是一门解释性语言、动态类类型的语言、是一门基于对象的语言。（不是面向对象）、一门弱性语言
    1.脚本语言：直接解释执行，缩短了编写-编译-链接-运行过程而创建的计算机编程语言
    2.解释性语言：解释执行不需要编译过程，直接由解释器（js引擎）解析并执行代码。
    3.动态类类型的语言：静态类型语言在编译时已确定变量的类型，而动态类型语言的变量类型要到程序运行的
    时候，待变量被赋予某个值之后，才会具有某种类型。
    4.基于对象的语言：JavaScript不是一门面向对象的语言，或者只是部分具备一些面向对象的特征

3、JavaScript的组成：（面试经常提到）

    ECMAScript:定义基本语法、如：变量、数据类型、运算、流程控制、函数、数组等
    DOM：Document Object Model  文档对象模型                
    BOM：Browser Object Model  浏览器对象模型

4、JavaScript作用：

    1.表单的验证，交互
    2.动画效果，轮播图、tab切换、显示隐藏、返回顶部、文字颜色变化等
    3.服务器端(node.js)
    4.实现与APP的交互，调用摄像头、获取系统版本
    5.桌面程序（c/++/c#/js）

二、变量和字面量

变量

1、什么是变量？

	变量：是计算机内存中存数据的标识符
	变量名：
            变量的名称，作用：根据变量名称可以获取到内存中存储的数据
        变量的作用：
            使用变量可以方便的获取或者修改内存中的数据
        变量的定义：
            1.变量的声明
            2.变量的初始化

        通过var关键字声明+空格+变量名
        在js中，每条语句以;结尾

2、变量的声明

	var a;	//变量的声明
	a=1;	//初始化，变量的赋值
	var b = 2;	//简写：声明并初始化
	var num1 = 10, num2 = 20, num3 = 30;	//同时声明并初始化多个变量

3、变量名命名规则

            1.由数字、字母、下划线或者$符组成，不能以数字开头
            2.不能是关键字和保留字，例如：for、while.
            3.区分大小写

4、变量名命名规范

		    1.见名知意
            2.驼峰命名法，如：navFirst

字面量：一个固定值的表示法

示例：var test="hello world!";

"hello world!"就是字符串字面量，test是变量名。

三、js代码写法

 		1.行内写法

<div style="height: 100px;background-color: red;" onclick="window.alert('cb')"></div>

        2.内部写法     在内部Script标签中书写
        3.外部写法      在外部Script文件中书写，然后引入
        4.控制台书写  

四、JavaScript数据类型

1、数据类型

基本数据类型：数字类型（Number）、字符串类型（String）、布尔类型（Boolean）、
空类型（Null）、未定义（Undefined）

引用数据类型：Object（数组、函数、对象）

通过typeof 关键字判断一个变量的数据类型

var a = '好好学习';
console.log(typeof a); 	//String

（1）Number

八进制

 var num_two1 = 011;
 var num_two2 = 001;
console.log(num_two1 + num_two2);

十六进制

var num_sixt1 = 0xA;	//10
console.log(num_sixt1);
var num_sixt2 = 0xF;	//15
console.log(num_sixt2);
var num_sixt3 = 9;
console.log(num_sixt3);

数字：整数、浮点数（小数）

由于0.1转换成二进制时是无限循环的，所以在计算机中0.1只能存储成一个近似值

0.1+0.2很特殊

console.log('0.1 + 0.1');	//0.2
console.log('0.1 + 0.2');	// 0.30000000000000004

科学计数法

console.log(1e5)	//1*10^5
console.log(1e-5);	//1*10^-5

js中的最大值和最小值

console.log(Number.MAX_VALUE)	//最大值1.7976931348623157e+308
console.log(Number.MIN_VALUE);	//5e-324

正无穷和负无穷

console.log(Infinity);	//Infinity 正无穷
console.log(-Infinity);	//-Infinity 负无穷

数字类型：数值、非数值（NaN）

		console.log(NaN);		//NaN
	    console.log(typeof NaN);	//Number
	    console.log(NaN == 10);		//false
	    console.log(NaN == -10);	//false
	    console.log(NaN == Number.MAX_VALUE);	//false
	    console.log(NaN == -Infinity);	//false
	    console.log(NaN == 6e4);	//false
	    console.log(NaN == NaN);	//false
	   

NaN与任何值都不相等,包括它本身
数值判断方法：isNaN():判断一个变量是否是非数值，数值返回false，非数值返回true

隐式转换

隐式转换：语言具有隐式转换，隐式类型转换就是指，数据的类型在不用人工干预的情况下进行转换的行为
原因：js是一门弱类型（动态类型）的语言，
 他在声明变量的时候不需要指定类型，对变量赋值也没有类型的检测，所以js是非常的灵活的
 console.log("第一个：" + isNaN("哈哈"));	//true
 console.log( isNaN("12A"));	//true
 console.log( isNaN("12"));	//false 字符串为全数字会发生隐式转换
 console.log isNaN(""));	//false 字符串内容为空或者空字符串	会发生隐式转换 0
  console.log isNaN("    "));		//0
 console.log( isNaN(true));	//false 会发生隐式转换

练习题

console.log(isNaN(NaN))	//true 原因：isNaN判断是否为非数值，NaN为非数值，
console.log(isNaN(10))	//false 原因：10是数值，返回false
console.log(isNaN("11"))	//false 字符串为全数字会发生隐式转换,返回false
console.log(isNaN("NaN"))	//true 原因：“NaN”是字符串，非数值，返回true
console.log(isNaN("12.35a"))	//true 原因：“12.35a”是字符串，非数值，返回true
console.log(isNaN(12.35))	//false 原因：12.35是数值，返回false
console.log(isNaN("blue"))	//true 原因：“blue”是字符串，非数值，返回true
console.log(isNaN(true)) 	//false 原因：发生隐式转换，转换为数字1，返回false
console.log(isNaN(undefined))	//true 原因：undefined是未定义类型，返回true
console.log(isNaN(null))	//false 原因：null是空值，会被转换成0，所以返回false

(2)字符串类型 string

1、用双引号或者单引号包起来的
var str3 = "null", str4 = "undefined", str5 = "true";
console.log(typeof str3, typeof str4, typeof str5);	//string string string

2、字符串的长度 length:字符的个数
	var str1 = "100";
	var str2 = '我是汉字也 是英文one听我.';
	console.log(str1.length);//3
	console.log(str2.length);//13
	
3、空字符串：引号中没有任何的内容，长度必定为0
	var str1 = '';
	console.log(str1);	//没有值
	console.log(typeof str1);	//string
	console.log(str1.length);	//0
4、字符串的拼接  +
	  console.log("13" + 23);	//1323
	  console.log("13" + true);	//13true
	  console.log("13" + null);	//13null
	  console.log(45 + 46);	//91
	  
	  结论：1、+号两边只要有一个是字符串，那么就是字符串的拼接功能
		   2、+号两边都是数字就是计算功能

(3)布尔类型 boolean

true /false
在计算机的内存存储中，true以1存储，false以0存储。
	console.log(12 + true);	//13

(4)null/Undefined

console.log(typeof null);	//obejct 遗留下来的bug,
var un1;
// 只声明并没有初始化
console.log(un1);//undefined  没有报错
// console.log(un2);//un2 is not defined  报错了

2、数据类型转换

1、数字、布尔类型转化为字符串类型   变量.toString()
	  var num1 = 10;
      console.log(num1);
	  console.log(typeof num1);
	  var str1 = num1.toString();
	  console.log(str1);
	  console.log(typeof str1);
	  var bool1 = false;
	  console.log(bool1.toString());
	  console.log(typeof bool1.toString());
2、null/undefiend转换为字符串类型 String(变量)
	  var nu1 = null;
      console.log(String(nu1));
	  console.log(typeof String(nu1));
	  var un1;
	  console.log(String(un1));
	  console.log(typeof String(nu1));
3、转换成数字类型 Number()/parseInt()/parsefloat()
（1）Number()转化规则：
 a. 如果字符串中只包含数字时，将其转换为十进制数值，忽略前导0
 b. 如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导0
 c. 如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值
 d. 如果字符串为空，或者是空内容，将其转换为0
 e. 如果字符串中包含除上述格式之外的字符，则将其转换为NaN

  var str_1 = "0564654";
  console.log(Number(str_1)); //564654
  var str_2 = "012.3";
  console.log(Number(str_2));	//12.3
  var str_3 = "0xE";
  console.log(Number(str_3));	//14
  var str_4 = "      ";
  console.log(Number(str_4));	//0
  var str_6 = "";
  console.log(Number(str_6));	//0
  var str_5 = "545dddsd";
  console.log(Number(str_5));	//NaN

(2) parseInt()转化成整型数字，遇到第一个小数点或者是非数值就返回

  var str_1 = "0564654";
  console.log(parseInt(str_1)); //564654
  var str_2 = "012.3";
  console.log(parseInt(str_2));	//12
  var str_3 = "0xE";
  console.log(parseInt(str_3));	//14
  var str_4 = "      ";
  console.log(parseInt(str_4));	//NaN
  var str_6 = "";
  console.log(parseInt(str_6));	//NaN
  var str_5 = "545dddsd";
  console.log(parseInt(str_5));	//545

(3) parseFloat()转化成浮动型数字，遇到第二个小数点或者是非数值就返回
console.log(parseFloat("45.3.5"));	//45.3
var str_5 = "545dddsd";
console.log(parseFloat(str_5));	//545

4、转换成布尔类型  Boolean()
  console.log(Boolean(1));	//true
  console.log(Boolean(Number.MAX_VALUE));	///true
  console.log(Boolean("dslkdjlksdjskl39485409re"));	//true
  console.log(Boolean(0));	//false
  console.log(Boolean(null));	//false
  console.log(Boolean(undefined));	//false
  console.log(Boolean(""));	//false
  console.log(Boolean(" "));	//true
  
  结论：null/undefined/数字0/空字符串返回false,其余都返回true

五、JavaScript运算

js运算：算数运算、一元运算、逻辑运算、关系运算、赋值运算

1、算数运算  + - * /  %

	  var num1 = 100;
	  var num2 = 200;
	  var sum1 = num1 + num2;
	  console.log(sum1);
	  console.log(12 - 8);
	  console.log(14 * 8);
	  console.log(12 / 4);
	  console.log(14 / 4);
	  console.log(14 % 4);

2、一元运算

var a = 1;
//前置++：++a	先加1再赋值
console.log(++a);	//2
//后置++：a++	先赋值再加1
console.log(a++);	//1
// 前置--
 var b = 10;
 console.log(--b);	//9
 // 后置--
 console.log(b--);	//10

3、逻辑运算
&&:与 and  两个都为true返回true,如果其中有一个为false，返回false
||：或 or   两个都为false返回false,如果其中有一个为true，返回true
!:非  not   取反

  console.log(isNaN(12) && false);	//false
  console.log(isNaN(NaN) || true);	//true
  console.log(!isNaN("12"));	//true

4、关系运算   > < ==  === !=  ！==

  console.log(15 > 2);
  console.log(15 < 2);
  console.log(15 >= 15);
  console.log(15 <= 16);
  // ==  只判断值相等
  console.log(20 == 20);	//true
  console.log(20 == "20");	//true
  // ===  恒等、全等 不仅要判断值相等，还要判断数据类型
  console.log(20 === "20");	//false
  console.log("20" === "20");	//true
  console.log(1 == true);	//true
  console.log(1 === true);	//false
  console.log(1 != 2);	//true
  console.log(1 != true);	//false
  console.log(1 !== true);	//true
  

5、赋值运算   = +=  -= *= /=

var a = 10;
var b = 20;
//目的：交换a和b的值 a = 20; b = 10;
var c;
c = a;
a = b;
console.log(a)	//a = 20;
b = c；
console.log(b);	//b = 10;

  m += 10;	//m = m + 10
  console.log(m)
  m -= 10	//m = m - 10
  console.log(m)
  m *= 10	//m = m * 10
  console.log(m)
  m /= 10	//m = m / 10
  console.log(m)

优先级

优先级从高到底
1.有()的优先级最高
2.带.运算符
3. 一元运算符  ++   --   !
4. 算数运算符  先*  /  %   后 +   -
5. 关系运算符  >   >=   <   <=
6. 相等运算符   ==   !=    ===    !==
7. 逻辑运算符 先&&   后||
8. 赋值运算符 =