JavaScript基础入门,

JavaScript组成

• 核心语法(ECMAscript)
• 文档对象模型 (DOM Docuemtn Object Model) ，JS与HTML文档交互。
• 浏览器对象模型（BOM Browser Object Model)，JS与游览器交互。

JavaScript特征

JavaScript是一种解释型脚本语言，或者动态语言。是一种弱类型语言，意味着里面的类型可以变化。

• 编译型语言，需要经历编写-编译-链接-运行。比如java、c++等。

• 解释型语言，解释型语言没有编译结果

JavaScript基础语法

Js的引入

HTML中有3种方式写入JS代码。

• 写在标签属性

<a href="#" onclick="alert('hello world')">点击我</a>

• 写在script标签中

<script type="text/javascript">			
    alert("hello world...");			
</script>

• 写在外部的JS文件中
  ‘js/hello.js’

alert("hello world...");	

'index.html'

<!-- 注意：即使标签中没有内容也不能写成自闭合的 -->
<script src="js/hello.js" type="text/javascript"></script>

注释

//单行注释 /* */多行注释

变量

变量是用来存储数据的，操作变量来间接操作内存中空间的数据。由于JS是弱类型语言，变量类型是动态的，故定义的时候不需要定义变量类型，使用var即可。

• 变量命名规范：
  • 不允许使用js关键字和保留关键字
  • 可以包含字母、数字、下划线_以及$
  • 变量名不能以数字开头
  • 可以用中文，但是不推荐使用
  • 见名知意（驼峰）

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

数据类型

基本数据类型

number

数字类型，既可以表示整数，也可以表示小数。

123 //整数
123.1 //小数
1.1e3 // 科学计数法
-9 // 负数
NaN // not a number 
Infinity // 无穷大
-Infinity // 负无穷大
0x11a // 16进制
0755 // 8进制
0b10101 // 2进制

• NaN不等于任何值，包括它自身。所以只能通过全局函数isNaN()来判断。
• Infinity比任何数字都要大。
• -Infinity比任何数字都要小。

string

• 字符串表示一段文本符号数据。由字符、数字、符号、特殊字符等组成。JS中的字符串可以用单引号也可以使用双引号。

  "hello"
  'hello \n world'
  

• 字符串模板：模板字符串是ES6增加的用于定于字符串的新特性，支持字符串直接换行而不需要转义，且支持插值 ${}

  var name = "seven";
  		   
  var msg = ` 你好，
  	${name} `;
  

boolean

• 布尔类型，只有true跟false2个值，表示结果是真还是假。
• boolean也可以进行算术运算，true当做1，false当做0。

undefined

表示未定义。

null

表示空，不存在。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。

运算符

算术运算符

+ - * / % ++ --``**

• +用在字符串上表示字符串的拼接。

• 可以通过（）改变运算的优先级。

• 浮点数也有小尾巴的问题(0.1 + 0.2 )，尽量避免。可以使用number的toFixedf方法来四舍五入。

• ++ -- 只能作用在变量上，不能作用在值上面。

• /除数为0，结果是无穷

  console.log(-1/0); // -Infinity
  console.log(1/0);  // Infinity
  console.log(0/0)   //  NaN
  console.log(isNaN(0/0))  // true
  

• **表示计算幂，优先级比较高

  console.log(3**4); // 81
  console.log(-3**3); // 报错
  console.log((-3)**3); // -27
  console.log(-(3**3)); // -27
  

比较运算符

比较运算符的结果是一个boolean类型。

> < >= <= 用法同JAVA

• ==

  等于，js中==只判断2个值是否相等，不考虑类型。

  "1" == 1  // true
  1 == true   // true
  0 == false   // true
  null == undefined // true
  NaN == NaN // false
  

• ===

  绝对等于，js中用来判断值跟类型都必须相同。

  "1" === 1  // false
  "1" === "1"  // true
  NaN === NaN // false
  

逻辑运算符

逻辑运算符同java中逻辑运算符，也具有短路功能。结果是一个boolean类型。

&&  2个都为真则为真
||  有一个为真则为真
！  真即假，假即真

函数

JS中通过函数来把一段逻辑封装用来重复使用。函数式通过关键字function来定义的。

• JS中的函数不需要定义返回类型，直接返回结果即可
• JS中的函数参数列表不需要定义类型以及var，只需定义变量名
• 函数需要调用才会执行，不调用是不会执行的
• 函数没有重载，只要方法名相同就会去执行，不管参数列表匹配与否
• 如果定义了多个方法名相同，后面覆盖前面的

函数的定义

定义方式一

/* 语法
function 函数名(参数列表){ 
    函数体；
}*/

function study（）{
    console.log("好好学习，天天向上。");
}

定义方式二

/* 语法
var  函数名 = function(参数列表){ 
    函数体；
}*/

var study = function(){
    console.log("好好学习，天天向上。");
}

定义方式三(不推荐)

/*
	语法：参数跟函数体都必须在字符串内，Function的F必须大写
new Function(arg1, arg2, ..., argN, function_body);
*/

var study = new Function("name", "time","console.log(name+'每天学习'+time+'分钟');console.log('继续保持')");

函数的调用

函数的调用（方式一）

/* 
语法： 函数名(参数值)
*/
study("seven",180);

函数的调用（方式二）

/*
语法： 函数名.call(调用对象，参数值)
*/
study.call(this,"seven",180 );

函数的调用（方式三）

/*  
参数需要封装到数组中
语法： 函数名.apply(调用对象，参数值数组)
*/
study.apply(this,['seven',120]  );

函数的调用（方式四）

/*
bind会返回新的函数，需要调用才会执行，所以后面需要(),其它跟call用法一样。
语法： 函数名.bind(调用对象，参数值)()
*/
study.bind(this,"seven",180 )();

函数参数

JS中的参数都会封装到arguments中，在函数体中可以通过这个参数拿到定义参数以外的参数值。

var study = function(name , time){
    // 传统方式只能拿到定义的参数
    console.log(name);
    console.log(time);
    // 通过arguments可以定义参数以外的参数
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
    
    console.log(name+'每天学习'+time+'分钟');
}

study("zhangsan",180,1,"a");

ES6也支持类似Java中的可变长度参数

var study = function(name , time ,  ... args){
    console.log(args);
}