JavaScript 基础

JavaScript 基础

1. 基本用法

​ JS 需要和HTML一起使用，可以通过直接或间接的方式将JS代码嵌入在HTML页面中。分为三种方式：

​ 行内 JS：写在标签内部的js代码

​ 内部 JS：定义在script标签内的代码

​ 外部 JS：单独的js文件，在HTML中通过script标签引入

可以将js的代码放在html文件中的任何位置，但一般放在网页的head或者body部分，建议放在body的末尾。

行内 JS：

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

内部 JS：

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

外部 JS 文件：

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

<!--在需要使用js的html页面中引入 -->
<script src="js文件路径" type="text/javascript" charset="utf-8"></script>

注意：如果script标签设置了src属性，则在script双标签中写的js代码不会生效。

2. 基础语法

2.1 变量的声明

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

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

2.2 变量的注意点

​ （1）若变量只声明而没有赋值，则1变量值为undefined.

var a;
console.log(a);

​ （2）若用 var 重新声明一个已经存在的变量，是无效的。

var box = 1;
var box;

​ （3）JavaScript 是一种动态类型、弱类型语言，变量的类型没有限制，可以赋予各种类型的值。

var box = "hello everyone!";
box = 1;

2.3 变量提升

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

console.log(msg);
var msg = "so happy";

//变量提升，相当于下面的代码
var msg;
console.log(msg);
msg = "so happy";
//显示结果是undefined

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

3. 数据类型

​ JavaScript中共有6种数据类型，其中五种简单的数据类型：Undefined、Null、布尔类型、数值、字符串；一种复杂数据类型：Object。

3.1 undefined

出现undefined的常见情况：

​ （1）当声明了一个变量而没有初始化时，这个变量的值就是undefined

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

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

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

​ （3）函数没有返回值时，默认返回undefined

//方法没有返回值
function noDate()
{
    console.log("hello");
}
var s = noDate();  //定义变量接受方法的返回值，是undefined

3.2 null

使用null类型时注意以下几点：

（1）使用typeof操作符测试null返回的是object字符串.

（2）undefined派生自null，所以等值比较返回值是true.

var a;
var b = null;
console.log(a == b)  //返回值是true
typeof b；           //返回值是object

3.3 布尔类型

​ 布尔类型只有两个值：true or false. 用来作为判断和循环的条件居多。

3.4 数值型

​ 数值型包括两种数值：整型和浮点型。

（1）所有数字（整形和浮点型）都是以64位浮点数形式存储。所以JS中 1 与 1.0 相等，而且1 加上1.0 得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。

（2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0);   //true
console.log(1 + 1.0);    //2
var num = 8.0;
console.log(num);        // 8

3.5 字符串

​ 使用’’ 或者"" 引起来，如：“hello,world” , ‘good’.

​ 使用+进行字符串的拼接，如：console.log(“hello” + “good”);

---

4. 类型转换

4.1 自动类型转换

​ 转字符串：所有值转字符串都是加引号；

​ 转布尔类型：有值为true，无值为false，0是false，非0是true

​ 转数值型：空值是0，非空的数值型字符串能转换，非数值字符串转换为数值型时是NaN.

4.2 函数转换

​ JS 提供了parseInt（）和parseFloat（）两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，才能生效；对其他类型返回都是NaN（Not a Number ）。

​ parseInt（）

在转换前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非数字为止。

parseInt("123abs");    //  123
parseInt("11.1")       //  11
parseInt("yellow")     //  NaN

​ parseFloat（）

从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个函数，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，只会把这个小数点之前的字符串转换为数字。

parseFloat("123.22.33");     //   123.22
parseFloat("123red");        //   123
parseFloat("123");           //   123
parseFloat("blue");          //   NaN

4.3 显示转换

​ （1）toString() 将值转换为字符串

var a = 1;
console.log(a.toString());     //  字符串"1"

​ （2）toFixed() 保留指定小数位，会四舍五入

var b = 1.38;
console.log(b.toFixed(1))     //  1.4

注意这两种转换的值都不能是null

​ （3）Number 强制将其他类型的数据转换成数字类型，操作对象是全部数据，不是部分。

Number (false)				// 0
Number (true)				// 1
Number (null)				// 0
Number ("5.6")				// 5.6
Number ("5.6.7.8")			// NaN
Number (undefined)			// NaN
Number (new Object())		// NaN

​ （4）Boolean 强制将其他类型的数据转换布尔类型，操作对象是全部数据，不是部分。

Boolean ("a")				// true
Boolean (0)					// false
Boolean (1)					// true
Boolean (null)				// false
Boolean (new Obiect())		// true

​ （5）String 强制将其他类型的数据转换字符串类型，操作对象是全部数据，不是部分。

String (111)				// "111"
String (undefined)			// "undefined"
String (Null)				// "Null"

🐏:快去试试ba~~