话不多说,让我们正式开启 JS 的学习之旅!
认识 JS
你可以简单理解成 JavaScript 是因特网上最流行的脚本语言,它存在于全世界所有的Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。
比如在静态页面上做出的绝大多数动画效果(轮播banner、跑马灯),交互行为(表单验证),都是由JavaScript编写而成的。
复制代码
除此以外,你还需要了解JavaScript是由ECMAScript、文档对象模型(Document Object Model: DOM)、浏览器对象模型(Browser Object Model:BOM)三部分构成。
ECMAScript:它描述了该语言的语法和基本对象;
DOM:描述了处理网页内容的方法和接口,通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性,可以对其中的内容进行修改和删除,同时也可以创建新的元素;
BOM:描述了与浏览器进行交互的方法和接口,BOM提供了独立于内容而与浏览器窗口进行交互的对象,例如可以移动,调整浏览器窗口大小的window对象,可以用于导航的location对象和history对象,可以获取浏览器,操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等;
复制代码
JS 引入
外部引入:
<script src="引用的代码路径"></script>
复制代码
内嵌标签:
<script>相关代码</script>
复制代码
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--写在html结构的 尾部-->
<script src="引用的代码路径"></script>
<script>
// 相关代码
</script>
</body>
</html>
复制代码
<script></script>可以有多个,按顺序执行。
通常采用外部引入的方式,确保 结构、样式、行为相分离。
复制代码
JS 变量
变量(variable):程序可操作的内存空间,程序运行期间可以进行改变。
简单理解成:存储数据的容器。比如要在很多地方使用同一个字面量,不如事先定义一个变量,用来储存字面量。
复制代码
命名规则:
1.字母、数字、_、$ 组成
2.不能以数字开头
3.不能是js中的关键字和保留字
4.严格区分大小写
5.驼峰命名
6.见名知意
复制代码
声明(定义)变量
通过 var 关键字声明变量,所谓关键字,就是有特殊功能的小词语。关键字后面一定要有空格隔开。
等号表示赋值,将等号右边的值,赋给左边的变量。
复制代码
// 声明单一变量
var a;
// 声明变量并赋值(初始化)
// 推荐
var b = 20;
// 声明多个变量
var c = 100,
d = 200,
str = 'hello thewall';
// 变量要先声明 再使用 如果未声明就使用 控制台会报错
console.log(f);
复制代码
JS 数据类型
数据类型: 基本数据类型(原始数据类型) 和 复杂数据类型(引用数据类型)
基本数据类型:存放在 栈内存(stack) 中,可以直接访问。
String
字符串需要使用引号引起来,使用双引号或单引号都可以,但是不要混着用。
引号不能嵌套:双引号里不能再放双引号,单引号里不能再放单引号。但是单引号里可以嵌套双引号。
复制代码
Number
整数和浮点数(小数)
由于内存限制,最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308,Number.MIN_VALUE,这个值为: 5e-324
无穷大(正无穷):Infinity,无穷小(负无穷):-Infinity
NaN:是一个特殊的数字,表示Not a Number,非数值。
isNaN() :任何不能被转换为数值的值,都会让这个函数返回 true。
复制代码
console.log("abc" / 18); //结果是NaN
console.log("abc" * "abcd"); //按理说,字符串相乘是没有结果的,但如果你非要让JS去算,它就一定会给你一个结果。结果是NaN
isNaN(NaN);// true
isNaN("blue"); // true
isNaN(123); // false
复制代码
Boolean
true 和 false。主要用来做逻辑判断
复制代码
Undefined
声明了一个变量,但是没有赋值,此时它的值就是undefined。
复制代码
Null
专门用来表示一个为空的对象
复制代码
Symbol
// String类型 字符串类型
var str = '不凡学院,分享知识和快乐';
var str = '' //空字符串
// Number类型 数字类型
var age = 20;
// Boolean类型 true 和 false 两个值
var sex = false;
// Undefined 只声明,未赋值的变量
var a; // a的数据类型为undefined
// null 空
var b = null;
// Symbol ES6新增,按下不表
复制代码
引用数据类型:存放在 堆内存(heap) 中,变量在栈内存中实际保存的是一个指针,这个指针指向堆内存当中对应的数据。
Object
Array
Function
这里边,内置对象function、Array、Date、RegExp、Error等都是属于Object类型
复制代码
// Array 数组
var arr = [1,2,'hello',undefined,true,{age:30},[3,4]];
// Function 函数
function wheel () {
}
// Object 对象
var person = {
name:'张三',
age:30,
like:[
'篮球',
'足球',
'看书'
]
}
复制代码
栈内存和堆内存的区别
var a = 10;
var b = a; // 相当于 在栈内存中 开辟了内存空间 b 存值 为 10,和 a 没有关系了
a = 20 // 当修改 a 的值时,b 并不会受到影响.
console.log(b); // 10
var obj1 = {
name:'张三'
}
// 在栈内存中开辟了内存空间 obj1 ,存放了指向堆内存中 对象{name:'张三'} 的指针(地址)
var obj2 = obj1; // 相当于在栈内存中开辟了内存空间obj2 ,存放了指向堆内存中对象{name:'张三'} 的指针
// 修改一
obj1.age = 30;
// 相当于修改了 堆内存中保存的数据,obj2的指针 也指向这个对象
console.log(obj2); // {name:'张三',age:30}
// 修改二
obj1 = {
name:'李四'
}
// 相当于 将堆内存存放的{name:'李四'}的引用地址,赋值给了变量obj1 ,并不影响obj2的指针指向的对象
console.log(obj2); // {name:'张三'}
复制代码
数据类型判断
typeof 变量名(表达式)
isNaN(变量名)
复制代码
数据类型的转换
------>String类型
var a = 123;
// 1.通过 变量+''
console.log(a +''); // 转换成String类型
// 2.toString()
// 该方法不会影响到原变量,它会将转换的结果返回。当然我们还可以直接写成a = a.toString(),这样的话,就是直接修改原变量。
// 需要注意的是 null 和 undefined 没有toString()方法,所以不能使用
console.log(a.toString()
// 3.String()
console.log(String(null) // 'null'
console.log(String(undefined) // 'undefined'
复制代码
------>Number类型
Number()
字符串--->数字
1.字符串若是纯数字,转换为数字
2.字符串中有非数字内容,转换为NaN
3.空字符串或者全是空格的字符串,转换为0
复制代码
布尔值--->数字
true 为 1
false 为 0
复制代码
其他情况
null 为 0
undefined 为 NaN
复制代码
parseInt()
parseInt()的作用是将字符串中的有效的整数内容转为数字。
复制代码
// 1.只保留字符串最开头的数字,后面的中文自动消失。例如:
console.log(parseInt("2019准备写6篇文章")); //打印结果:2019
console.log(parseInt("2019.04在掘金上写了6篇文章")); //打印结果仍是:2019 (说明只会取整数)
console.log(parseInt("aaa2019.04在公众号上写了6篇文章")); //打印结果:NaN
// 2.自动带有截断小数的功能:取整,不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a); // 9
var a = parseInt(5.8 + 4.7);
console.log(a); //10
// 3.如果对非String使用parseInt()或parseFloat(),它会先将其转换为String然后再操作。
var a = true;
console.log(parseInt(a)); //打印结果:NaN (因为是先将a转为字符串"true",然后然后再操作)
var b = null;
console.log(parseInt(b)); //打印结果:NaN (因为是先将b转为字符串"null",然后然后再操作)
var c = undefined;
console.log(parseInt(c)); //打印结果:NaN (因为是先将b转为字符串"undefined",然后然后再操作)
var d = 168.23;
console.log(parseInt(d)); //打印结果:168 (因为是先将c转为字符串"168.23",然后然后再操作)
// 4.带两个参数时,表示进制转换。
复制代码
parseFloat()
parseFloat()的作用是:将字符串转换为浮点数。
复制代码
// parseFloat()可以获得有效的小数部分。
var a = '123.456.789px';
console.log(parseFloat(a)); // 打印结果:123.456
复制代码
------>Boolean类型
Boolean()
数字 --> 布尔。除了0和NaN,其余的都是true。
字符串 ---> 布尔。除了空串,其余的都是true。
null和undefined都会转换为false。
情况四:对象也会转换为true。
复制代码
到这里,就已经简单介绍了JS最基本的变量和数据类型,但这并不是全部,和其相关的知识点还有很多,暂且按下不表(毕竟只是带你入门),之后的事?当然要靠自己去不断探索学习了!