JavaScript教程-从入门到精通 (一)

2020-5-28

第一章,什么是JavaScript

在学习JavaScript之前,我们先要了解什么是JavaScript

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页 面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支 持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合 作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015, 但通常被称为ECMAScript 6 或者ES6。

--此内容摘自百度百科

总而言之js主要为用于web页面的脚本语言

第二章,如何使用JavaScript

<script>标签

在html中js代码需位于<script>和</script>标签之内,例如:


<script>
    alert('hello world')
</script>

除此之外还可以引用外部文件
例如:你之前写了一个名为lablog.js的文件
然后可以在html里通过 <script src="lablog.js"></script>在标签里加上scr属性来指定文件的地址
当然scr后面也可以写网址,来引用网站中的js文件
下面是三种不同方式来引用js例子:


第一种,直接在<script>标签中写js代码:
<script>
    alert('hello world')
</script>

第二种,创建一个js文件,通过scr来引用:
<script src="js/main.js"></script>

第三种,引用网站上面的js文件
<script src="https://lablog.net/js/jquery.min.js"></script>

在这里本人推荐第二种方法,创建一个单独的js文件然后通过src属性指向该文件,这样可以使浏览器更快地加载页面


第三章 JavaScript语法

3.1语法

英语是一种解释性语言,在我们日常用英语表达时,你就相当于一个英语解释器。在语言结构方面的规则,我们就称之为“语法”


3.2语句

JavaScript和其他脚本语言一样,都有一系列指令构成,这些指令叫做语句,换言之JavaScript 程序就是一系列的编程语句。


3.3注释

注释语句JavaScript解释器是不会去执行的,但是它能有效的帮助你了解程序的流程及作用
有时需要在注释中写一些参考或提醒自己的信息

注释有两种写法,一种是两个斜线,为单行注释:


//js注释

另一种注释则是多行注释,由 /* 和 */ 组成 ,即/*内容*/


/*JavaScript多行注释
我是注释
我是注释*/

3.4变量

JavaScript 变量是存储数据值的容器。

不妨举个例子,我们每天上班都会乘坐交通工具,假设有一个变量vehicle(意思是交通工具)

我们可以把每天上班所乘坐的交通工具以值的形式放在这个变量中,比如说公交车,出租车,地铁。

但不管这个变量的值是什么,他的名字始终是vehicle,但是这个变量的值是可以随时改变的


同样我们还可以再创建一个变量time用于记录每天上班乘车所花费的时间

此时我们有变量vehicle和变量time

在JavaScript中我们可以用Var关键词来声明变量


var vehicle;
var time;


假设今天做公交车去上班,坐车所需时间为30分钟,则将变量vehicle的值设定为bus,time设定为30,这个过程叫做赋值


在JavaScript中我们可以这样赋值


var vehicle="bus";
var time=30;

此时vehicle则被赋值为bus,time被赋值为30

我们可以弹出式警告框来显示vehicle和time


alert(vehicle);
alert(time);

完整示例如下


var vehicle="bus";
var time=30;
alert(vehicle);
alert(time);

创建一个html文档,把上面那一段代码放在<script></script>标签之间
再用浏览器打开文档,执行效果如下:


你也可以点击此处查看效果


当然你也可以一行声明多个变量:


var vehicle , time

也可以这样:


var vehicle="bus" , time=30

说道这里,我相信细心的朋友已经发现了,变量vehicle的值bus两边加了引号,而变量time的值30却没有加引号,这是为什么?

原因和JavaScript 数据类型有关


3.5JavaScript 数据类型

JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象、布尔值等等


vehicle的值bus属于字符串,字符串前后需要加上引号

变量time的值30属于数值,数值无需加引号


除此之外,还有数组、对象等等:


var vehicle = ["bus", "car", "metro"];  //数组
var vehicle = {firstVehicle:"bus", second:"metro"};  // 对象

更多数据类型再次就不一 一介绍了 有兴趣的可以点击此处百度搜索


3.6数组

数组可以理解为将多个值储存在一起


var 变量名 = [值1 , 值2 , 值3];

值写在[ ]方括号里,每个值用逗号隔开,例如:


var vehicle = ["bus","metro","car",30,45,20]

创建完数组,我们可以访问数组元素,例如:


alert("vehicle")  //以警告框的形式显示数组

也能指定访问数组中的某一项


var firstVehicle = vehicle[0]

这样会访问vehicle数组的第一项内容并将其存储在firstVehicle变量内

这里需要注意的是0对应的是数组的第1项,而1则对应的是数组的第2项,以此类推,例如:


var firstVehicle = vehicle[1]

这样会访问vehicle数组的第2项,并非第1项




与此同时,我们还可以改变数组内容


vehicle[0] = "car";  //将vehicle数组的第一项更改为car



本期教程先到这里,下一期为大家讲解对象、算数、条件语句等,感谢大家的支持。点击此处前往下一期教程







版权声明:本文为原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://lablog.net/text/javascript/text1.html