JavaScript学习
1.系列介绍
此系列的内容由自己从网上各大学习网站从中抽取精髓,简化知识更易于理解再加上自己对这些知识的理解,如有不准确请各位大神指正!
2.第一章
2.1 介绍JavaScript
JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。
- js可以让你动态的设置html元素的属性和css属性
- 可以完成许多css做不到的动画
- 完善了网站的功能,如网络请求,canvas绘画,事件监听
- 等...
如果是HTML是人体的骨架,css是人体的肉体,那JavaScript就是人体的各器官,js的各个功能都统筹着各自的骨骼,皮肤同时联络着全身的器官和骨骼,可以说js赋予了网站活力.
2.2 初体验JavaScript
在学习js之前,我们设置HTML元素的样式通常是通过css来设置.
<html>
<style>
div{
background-color:black;
}
</style>
<body>
<div>
</div>
</body>
</html>
上面那个div的背景颜色就会被设置黑色,当然你需要给它一个宽高否则div的高度将为0这些都是基础知识我这里就不赘述了.
在学习js之后我们就通过js动态的来设置HTML元素的css属性.如下
<html>
<body>
<div>
</div>
</body>
<script>
// 首先获取HTML元素
var divEl = document.getElementByTagName("div")[0]
// 设置div元素的css属性
divEl.style.backgroundColor = "black";
</script>
</html>
这样上面的div元素的背景颜色就会被设置成black黑色了,现在让我来解释里面的代码意思
var是js里面的声明变量的关键字,我们声明就会要用到这个关键字
document这个是js里面的文档模型,也就是我们书写的HTML文件被解析后的模型,里面提供了很多获取元素的方法.我们可以把它看成就是我们html标签里面的内容.
getElementByTagName这个方法的意思是通过标签名获取一个HTML元素,这里我们获取了div元素,后面的[0]是因为这个方法获取的是一个元素数组使用索引0获取该数组的第一项.
divEl.style.backgroundColor = "black";我们通过获取html元素来设置他的style样式,其中backgroundColor对应的就是css属性background-color,在以后我们为这样的css属性赋值也是通过字母大写来链接,这里涉及到变量名的命名方法,以后我会介绍.
2.3 JavaScript中的变量类型
在js中变量的类型只有三种分别是var let和const那它们有什么区别呢?
在学习它们的区别之前我们还需要普及一个知识,就是在js中,所有我们定义的变量和函数都会在运行的时候提前运行,也就是变量提升,是什么意思呢?
变量提升是指js脚本在浏览器的运行过程中会把我们定义的变量和函数放到js最上方先定义一下但不赋值,在代码运行到我们定义这个变量并给它赋值的时候这个变量就会被赋值.如下
// 我们自己书写的代码
console.log(name)
var name = "zr";
// js运行的时候
var name = "zr";
console.log(name)
js会自动的把变量提到最前,但这样说其实并不准备变量本身的位置是没变的只是js在编译过程中把变量提前存到了内存中,这与js的编译有关.我们把上面的情况当成js会把变量放到最前面执行就行便于理解.
2.3.1 var
用来声明变量的最基本形式,此变量会受到变量提升的影响.
var name = "zr"
2.3.2 let
也是用来声明变量的但不会受到变量提升的影响,同时拥有自己的块级作用域.
let name = "zr"
2.3.3 const
用来声明一个常量,也就是不会被改变的变量,也拥有自己的块级作用域
const name = "zr"
2.3.4 块级作用域
在上面我们总是提到了块级作用域,那块级作用域到底是什么呢?
我们首先看一个例子
{
let a = 0;
}
console.log(a);
以上代码会输出什么呢?答案是报错会提示你找不到a这个变量,也就是变量a==undefined==,但我们如果换成var就不会报错了.这是因为var有变量提升会把变量放到代码最前面执行而let是没有变量提升的我们只能先定义再使用.
console.log(a)
let a = "zr"
以上代码也会报错.会说变量a没有定义.
2.4 JavaScript中的数据类型
2.4.1.js中的8大数据类型
- 五种基本数据类型：String,Number,Undefined,Boolean,Null
- 两种复杂数据类型：Object,Symbol
其中Object是引用数据类型，其余的都是基本数据类型。
2.4.2.基本数据类型与引用数据类型的区别
基本数据类型由于占据的空间大小固定且较小，会被存储在栈当中，也就是变量访问的位置，引用数据类型存储在堆当中，变量访问的其实是一个==指针==，它指向存储对象的内存地址
在赋值时，基本数据类型是把值复制给变量，而引用数据类型则是把==内存地址==赋值给了变量所以会导致两个变量使用同一个数据的情况发生 。
示例代码：
// 这是一个引用数据类型
const obj = {
name:'zr',
age:16;
}
const newObj = obj; // 把obj的内存地址赋值给了newObj
newObj.name = 'zz'; // 等同于修改obj.name的值
console.log(obj);// {name:'zz',age:16}
console.log(newObj) // {name:'zz',age:16}
在函数传参时，如果传递的参数是引用数据类型也会导致两个变量共享一个值的情况，所以在传引用数据类型的值的时候，我们需要通过Object.assign方法复制一个值出来。在面对多层对象的参数时需要手动编写深层拷贝方法来拷贝对象。
结语
这个系列我会一直更新学习JavaScript的文章,谢谢大家支持
