第五次前端培训（JavaScript的基础语法（一））

1.JavaScript简述

1.1 简介

  JavaScript是运行在客户端的脚本语言，不需要编译，由js解释器(js引擎)逐行解释执行。
Node.js也可以用于服务器端编程。

1.2 JavaScript组成

ECMAScript(JavaScript语法)、DOM(文档对象模型)、BOM(浏览器对象模型)
ECMAScript(基础语法)
JavaScript的核心语法ECMAScript—―描述了该语言的语法和基本对象
DOM(文档对象模型)
文档对象模型(DOM) ——描述了处理网页内容的方法和接口
BOM(浏览器对象模型)
浏览器对象模型(BOM)—―描述了与浏览器进行交互的方法和接口

1.3 JavaScript的作用

表单动态校验(密码强度检测)
网页特效
服务端开发(Node.js)
桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)

2. JavaScript的基本使用

  JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。
  行内JS : 写在标签内部的js代码
  内部JS : 定义在script标签内部的js代码
  外部JS : 单独的js文件，在 HTML中通过script标签引入
  我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的 head或者body部分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。
  放在head部分，最常用的方式是在页面中head部分放置script元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
  放在body部分，JavaScript代码在网页读取到该语句的时候就会执行。

行内JS：

<button onclick="alert( ' you clicked hered! ! ! ' )">click here</button>

内部JS：

<script type="text/javascript" charset="utf-8">
	alert( ' this is inner js code ' )
</script>

外部JS文件：

hello.js

alert ( 'this is a outter js document ' );

hello.html

<! --在需要使用js的html页面中引入-->
<scriptJrc="js/hello.js" type="text/javascript" charset="utf-8"></script>

3. 基础语法

3.1 语句和注释

  JavaScript程序的执行单位为行（line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。

  语句(statement)是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内（不建议这么写代码)，但是一行写多条语句时，语句必须以分号结尾。
  表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。
  单行注释:用//起头;
  多行注释:放在/**/之间。
  兼容html注释方式:（<!~~~~>)中间

3.2 标识符和关键字

「标识符」指开发人员为变量、属性、函数、参数取得名字。标识符不能是关键字或保留字。

「关键字」指 JS本身已经使用了的字，不能再用它们充当变量名、方法名

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

「保留字」实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

3.3 变量

3.3.1 变量的声明

JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。变量声明和赋值:

//先声明再赋值
var a ;
a = 10 ;
//声明同时赋值
var b = 20;

3.3.2 变量的注意点

(1）若只声明而没有赋值，则该变量的值为undefined。

var box ;
console. log ( box ) ;

(2）变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。

console. log(box2);

(3)可以在同一条var命令中声明多个变量。

var a, b, c = 10;
console . log ( a , b, c);

(4）若使用var重新声明一个已经存在的变量，是无效的。

var box = 10;
var box;

(5）若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

var box = 10;
var box = 25;

(6) JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。

var box = 'hello world ' ;
box = 10;

3.3.3

  JavaScript 引擎的工作方式是,，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语可，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg) ;
var msg = "so easy" ;
//变量提升，相当于下面的代码
var msg;
console. log(msg) ;
msg = "so easy " ;
//说明:最后的结果是显示undefined，表示变量msg已声明，但还未赋值。

注意: 变量提升只对var命令声明的变量有效，如果变量不是用var命令声明的，就不会发生变量提升

console.log(msg);
msg = "error" ;

3.4 数据类型

3.4.1 undefined

undefined类型的值是undefined。
undefined是一个表示"无"的原始值，表示值不存在。出现undefined的常见情况:
(1）当声明了一个变量而没有初始化时，这个变量的值就是undefined

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

(2）调用函数时，该函数有形参，但未提供实参，则该参数为undefined。

function noData(str) { // js函数形参只需要变量名即可
	console. log( str) ; // undefined
}
noData(); //调用方法时，未传递参数

(3）函数没有返回值时，默认返回undefined。

//方法没有返回值
function noData( ) {
console . log ( "He1lo" );
}
var re = noData();//定义变量接收无返回值的方法

3.4.2 null

null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。
使用Null类型值时注意以下几点:
1）使用typeof 操作符测试 null返回object字符串。
2) undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null 的变量相等。

console. log ( undefined == null);
var box = null; //赋值为null的变量
var a; //未初始化的变量
console. log(a == box); //两个的值相等

3.4.3 布尔类型

true 和 false

3.4.4 数值型

数值型包含两种数值:整型和浮点型。
1）所有数字（整型和浮点型）都是以64位浮点数形式储存。所以，JS中1与1.0相等，而且1加上1.o得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。
2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0);// 2
var num = 8.0;
//自动将可以转换为整型的浮点数转为整型
console.log(num); // 8

3.4.5 字符串

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

3.4.6 对象

对象是一组数据和功能的集合。
说明:
{}:表示使用对象字面虽方式定义的对象。空的大括号表示定义包含默认属性和方法的对象。

3.5 类型转换

3.5.1 自动类型转换

3.5.2 函数转换

JS提供了parselnt()和 parseFloat()两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
parselnt()
在转换之前，首先会分析该字符串，判断位置为o处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符。

parseInt( "1234blue " ); // returns 1234
parseInt("22.5"); // returns 22
parseInt( "blue" ) ; // returns NaN

parseFloat()
该方法与parseInt()方法的处理方式相似，从位置О开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的,parseFloat()方法会把这个小数点之前的字符串转换成数字。

parseFloat( "1234blue " ); // returns 1234.0
parseFloat( "22.5"'); // returns 22.5
parseFloat( "22.34.5" ); // returns 22.34
parseFloat( "blue" ) ; // returns NaN

3.5.3 显示转换

几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。
Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入

//将内容转换为字符串形式
var data = 10
console . log( data . toString( ))
//根据小数点后指定位数将数字转为字符串，四舍五入
data = 1.4;
console. log ( data.toFixed(0) );
data = 1.49;
console .log( data.toFixed( 1 ) );

不能对null和undefined使用

JS为Number、Boolean、String对象提供了构造方法，用于强制转换其他类型的数据。此时操作的是整个数据，而不是部分。

最后一种强制类型转换方法string()是最简单的因为它可把任何值转换成字符串。要执行这种强制类型转换，只需要调用作为参数传递进来的值tostring()方法，即把1转换成"1"，把true转换成"true "，把 false转换成"false "，依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于，对null或undefined值强制类型转换可以生成字符串而不引发错误:

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won't work, causes anerror

最为简单的一种转换为字符串的方式，直接在任意数据后面+""即可。