Tony学前端:JS开篇,新的征程!

本文共有2800字,预计阅读时间:20分钟

本系列累计57100字

在文章末尾可以观看本课的视频

我们先来复习一下上次学习了哪些知识:

垂直对齐:

vertical-align、对行内元素有效。

溢出设置:

overflow、滚动条的设置。

颜色:

RGB颜色、HSL颜色、十六进制、透明。

单位与尺寸:

rm的使用、最小宽度的使用。

到目前为止,我们已经学习了HTML与CSS。在第一讲的时候,曾经说过前端三要素:HTML、CSS与JS。

我们曾经用造房子来形容做网页,HTML负责结构、CSS负责装饰、而 JS则让房子与你可以互动起来,譬如按下开关灯就亮了,打开水龙头就来水了。

而在网页上总离不开人与页面的互动,点击商品加入购物车、保存信息时进行信息验证、甚至是小游戏,这些都是JS实现功能的范畴。

现在,我们就开始学习JS。

首先,我们来说下JS是什么,能做什么?

JS的全称是JavaScript,是一种脚本语言,是一种可插入HTML页面的编程代码。这里有两点要注意:

该语言与Java语言毫无关系。

脚本这个词源自于表演戏剧、拍摄电影等所依据的底本,或者是剧本。这意味着写好的JS会像剧本一样被浏览器按照预定的逻辑执行,如果剧本写错的话,那自然整个剧就表演砸了,就出bug啦!

js能实现的功能很多,譬如:

改变HTML元素、以及其样式。

对事件作出反应。

能做逻辑处理、计算。

图形显示与处理。

能与后台交互。

全世界各处的前端开发者都在用JS,每天都有大量的新功能被开发,因此JS可以说是十八般武艺样样精通。

既然我们要编写JS,那自然就得知道JS写在哪里?

JS代码必须写在

在正式学习JS之前,我们还有几个概念要预先了解。

1、JS语句

JS代码是JS语句的序列,浏览器会按照语句顺序来执行,通常我们在每个语句结尾处加分号(;)表示结束。如以下两句JS语句用分号结束:

alert("Hello JS!");

alert("你好,JS!");

当然也可以不加分号表示结束,但是这种写法不推荐。

另外,JS语句是区分大小写的

2、JS代码块

在一些结构中,我们会用到代码块,代码块是多条语句的组合,写在花括号内,如以下的两句语句组成了代码块:

function show()

{

alert("Hello JS!");

alert("你好,JS!");

}

function的用法我们会在以后详细学习,此处只是演示代码块。

3、JS注释

我们在HTML的时候学习过注释,有时我们编写代码时要记录一些信息,例如算法、出处、为什么要这样写等等,此类信息不需要浏览器来执行,那么便需要写成注释。

JS注释分为单行注释与多行注释,单行注释以双斜杠(//)开头,多行注释以单斜杠星号(/*)开始,以星号单斜杠结束(*/),以下分别演示单行注释与多行注释:

alert("Hello JS!");//此处弹出信息

/*

以下代码弹出两个信息

第一个为英文

第二个为中文

*/

alert("Hello JS!");

alert("你好,JS!");

接下来我们学习变量的概念,在任何编程语言中都会存在变量,JS也不例外。

什么是变量?简单来说变量就是数据存储的容器,这个说法有些抽象,我们用数学知识来举个例子。

假设有以下这个方程组,相信大家都能解出未知数Z的值为7。

x=3

y=4

z=x+y

仔细思考一下我们的解题过程。首先这个方程组里有三个未知数:x、y、z,其中设置了x等于3,y等于4。那么从编程的角度来理解的话,就是我们声明了三个变量:x、y、z,随后把3赋值给x,把4赋值给y,那么此时x就存储了数字3、而y存储了数字4。

接下来我们计算x与y的和,此时是等于7,随后把7赋值给z,因此最后z就存储了数字7,也就可以说z等于7。

因此,对于变量有很重要的两个概念:声明赋值

声明变量:

声明变量实际上就是创建变量,在JS中使用关键字var加变量名称来实现,如刚才的方程组有三个变量,那我们在JS中可以这样声明:

var x;

var y;

var z;

在JS中,变量名的使用是有一定要求的:

要以字母开头。

也可以使用$_开头,但是不建议。

变量名大小写敏感,因此y和Y是两个不同的变量。

另外,我们在实际项目中尽量使用有实际意义的名称来为变量命名,千万别到处都是a1、a2、a3。。。之类的变量名。

多个变量的声明可以在一个语句中,中间用逗号隔开,因此刚才的变量声明我们可以这样写:

var x,y,z;

赋值:

让变量等于某个特定值称为赋值,JS里用等号(=)来进行赋值,等号左侧为变量名,右侧为值,因此之前方程组的例子,赋值部分可以这样写:

var x,y,z;

x=3;

y=4;

z=x+y;

在大多数编程语言中,变量必须先声明再使用,而JS则可以不声明变量便使用,因此可以直接写:

x=3;

y=4;

z=x+y;

但是这种方法非常不推荐!我们还是要养成先声明变量再使用的习惯。

我们还可以在声明变量的同时变赋值,这样可以进一步减少代码的行数:

var x=3,y=4,z;

z=x+y;

甚至在声明的时候就可以直接计算:

var x=3,y=4,z=x+y;

此句执行完毕后,z已经被赋值为7。但是这样写会破坏代码的结构,因此并不建议这样写。另外要注意的是,以下的语句是错误的:

var z=x+y,x=3,y=4;

因为当计算z时,x与y还并未赋值,自然就无法计算出x+y。

我们不但可以把数字赋值给变量,还可以把其他类型的数据赋值给变量,这样就使得变量具有不同的数据类型,因此接下来我们学习数据类型。

在之前的例子中,x、y和z这三个变量均被赋值为数字,因此这三个变量都是数值型。我们也可以将变量赋值为其他类型,譬如一个字符串:

var x='你好';

此时x就是一个字符串,因此x的数据类型便是字符型了。不同的数据类型会有不同的操作方法。譬如数值型就有很多计算方法,而类似于将内容全部变成大写字母的方法则肯定只属于字符型了。

在js中,支持的数据类型有:

数值型

字符型

布尔型

Undefined

Null

以上几种称之为基本数据类型或者值类型

数组

时间类型

正则表达式

函数

对象

以上几种称为复杂数据类型或者引用类型

数据类型是任何一种编程语言的基础,因此接下来我们将会详细学习每一种数据类型。

要注意的是,js的变量是在赋值后决定其数据类型的,并且还会随着赋值的变化而改变其数据类型,如以下代码:

var x;

x=0;

x='你好';

我们声明了一个变量x,首先让其等于0,由于0是一个数字,那么此时x就是数值型。随后又将x设置为“你好”,由于“你好”是一个字符串,因此x又改变为字符型。

由于变量的数据类型是可以改变的,因此这被称为动态类型。JS是一门动态类型的编程语言。

与动态类型相对的是静态类型,静态类型的编程语言在声明变量的时候就得指定其数据类型,随后赋值的时候也只能赋予该数据类型给变量。很多编程语言(尤其是早期的)为静态类型的。

后面暂时没有了,我们来总结一下,今天主要学习了:

JS概念:

什么是JS、JS能做什么、JS的书写位置。

JS代码:

JS语句、代码块、注释。

变量:

什么是变量,变量的声明、变量的赋值。

数据类型:

多种数据类型、静态类型与动态类型。

今天我们开始学习JS,JS是一种编程语言,学好JS也可以为学习其他编程语言打好基础。JS内容很多,而且也比HTML与CSS更有难度,只有熟练掌握了JS,才能编写出真正的网页。娃娃们加油,我们的目标是星辰大海!

点击观看本课视频,也可以在腾讯视频上搜索“Tony学前端”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180506G15WUV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券