Hello小可爱们,今天我们又要回到学习主题咯,前面学习了HTML和CSS的用法,今天我们就要为Web页面注入生命啦,那就是JavaScript,通过JavaScript我们可以让我们的页面动起来,这也是Web开发中的一座大山。
首先我们要了解一下什么是JavaScript,它在Web开发中的作用是什么,然后再去了解它是怎样工作的。JavaScript是一种可插入HTML的轻量级编程语言,并能够由现代浏览器所执行。Web前端的三座大山中,HTML定义了网页的内容,CSS描述了网页的样式,JavaScript则是定义了网页的行为。
为了更好的了解JavaScript的知识,我把JavaScript的知识大体总结成为了一下几个模块,这样子也是方便大家对JavaScript有一个整体的认识。(这个总结的也不是很全,但是最开始我们所需要了解的都在这里了,一步一步迈向更高峰嘛~)后面呢,我们也是按照模块来一一为大家分享~~一定要持续关注哟
我们今天就从JavaScript的创建聊起。后面对JavaScript简称为js,在HTML中,js脚本必须放在<script></script>之间,至于<script>标签对的位置就相对比较随意了,可以放在head中,body中,位置较为随意,保证被<script>包裹就好,因为这样浏览器才知道js从哪里开始哪里结束,要解析哪一部分语言。举个?
这个例子中,js被插入在了body里面,运行的时候会弹出框,写着“萌兔IT”,是不是很有意思呢~
与CSS相同,js也有着不同的引入方式,如上图则是在HTML中直接插入js语言,我们也可以将js语言单独放置在一个文件中,并引入HTML。这时候我们用到的还是<script>标签,<script src="mengtu.js"></script>即可实现将同一级文件夹下的mengtu.js引入html中。有小伙伴一定会奇怪,在不同地方引入js有什么区别呢,这里就涉及到了js的加载顺序问题,因为js是单线程的,所以当没有特殊处理时,会按照页面的引入顺序进行加载,如果前面的js加载时间过长,就会引发阻塞了(这里我们后面会讲到),因此引入js的位置也是很重要的!
下面要开始介绍详细的JS代码咯,准备好了吗?无论什么语言最开始要了解就是变量、数据类型、运算符和表达式了,今天我们就主要介绍这一部分。
1. 变量:大家还记得代数嘛?小学的那个,x=1;没错,这就是这个。JS的变量也是用来存放值和表达式的,但是表达式的命名也有一些限制,为了代码更容易阅读,最好起变量名时与具体情境相关,当然这不是硬性要求,硬性要求是以下几个:(1)变量必须以字母或$符号或_符号开头,变量名称是大小写敏感的。(2)JS的所有变量都是对象,当声明一个变量时,就创建了一个新的对象。
2. 数据类型:JS的数据类型可以分为两大类,即值类型和引用数据类型。按照我的理解来说,值类型就是简单的一个数据,一对一的一个数据关系,包括字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)和Symbol(ES6引入的新原始数据类型);引用类型则是通过值类型组成的复杂数据结构,包括对象(Object)、数组(Array)和函数(Function)
这里有个注意的地方,null类型代表空值,代表一个空对象指针,使用typeof运算得到“object”(说人话就是还没有定义);undefined当一个声明了一个变量未初始化时,就会得到undefined(说人话就是声明了,但是没有赋值)。
3. 运算符:JS中运算符主要分为算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符、其它运算符。
(1)算术运算符主要用来进行计算,包括加法(+)、减法(-)、乘法(*)、除法(/)、取余(%)、自增(++)、自减(--)等;
(2)赋值运算符则用于给JS变量赋值,如x=y, x+=y, x-=y, x*=y, x/=y, x%=y等;一个特殊的地方是,当“+”用于字符串中时,则是将两个字符串进行拼接;当“+”前后是不同类型的时候,输出结果有时也会出乎人的意料,当字符串与数字相加的时候浏览器会将数字自动转化为字符串类型,并输出字符串。
(3)比较运算符:通过比较运算符测试得出true或false
等于(==)、绝对等于(===)这大概是JS独有的吧,这个保证数据不会被自动转换格式而得出相等的结论、不等于(!=)、不绝对等于(!==)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)
(4)逻辑运算符:用于测定变量或值之间的逻辑:和(&&)、或(||)、非(!)
(5)条件运算符:类似于Java中的三目运算:
variablename=(condition)?value1:value2
(6)typeof运算符:用来判断变量类型,但是不能明确的判断出对象是什么对象,问题来了怎么判断对象是不是数组,用的是instanceof
(7)delete运算符:删除对象属性或数组元素
(8)void运算符:出现在操作数之前,忽略计算结果并返回undefined
4. 表达式:表达式也可以理解为包含运算符,表达式分为很多类型:
(1)原始表达式:包含直接量、常量、关键字和变量
(2)对象和数组的初始表达式:var arr = [];
(3)函数定义表达式:var func = function(){...}
(4)属性访问表达式:运算得到一个对象属性或一个数组元素的值:expression.identifier; expression[expression]
(5)调用表达式:f(0), a.sort()
(6)对象创建表达式:创建一个对象并调用一个函数初始化新对象的属性。new Object()
(7)运算符表达式:如算术表达式、关系表达式、逻辑表达式、赋值表达式等
今天就写到这里吧,JS是个大工程还要慢慢吸收。另外,CSS也是个水很深的东西,但是考虑到首先是能够快速上手开发项目,我们前面讲到的也只是怎样简单使用,它还有更加强大的作用,还有待我们后面慢慢解锁。另外不知道有没有细心的小伙伴们发现我们的公众号变样子了,是的,因为小编发福利了,为大家提供了免费的书籍资源。后台回复html和css有惊喜哟,后面我们也会逐渐发出更多书籍的~~喜欢兔妞的文章请点击好看让更多人看到哟~~么么哒!