JavaScript教程-从入门到精通 第一期

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

---

---

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

此文章来源于本人的博客网 https://lablog.net/