c 运行js脚本语言 Javascript脚本语言

Javascript脚本语言

本教程不对Javascript详细讲解，与WebGL相关的会进行简单总结。Javascript语言可以开发前端，可以开发网站后端，也可以和Python、C语言一样开发客户端程序。

WebGL应用开发相比前端在Javascript、HTML、CSS方面没有太大区别，可以看做特定领域的前端，当然并不属于传统意义上的前端。

解析程序“WebGL绘制一个点”语句

1.Javascript的语句都是写在script开始、结束标签之间，当代码多的时候，会把Javascript语言单独封装成一个.js文件

然后在关联到html总文件，后面教程会用到。

2.第14行代码表示的就是getElementById方法返回的对象赋值给var声明的canvas变量，其它出现var的地方同理。

变量声明符号在ES6版本中又增加了let、const，

var能定义的，let也能够定义，详细语法可以关注其它Javascript教程。

3. 字符串的定义可以再用如下形式var str = "字符串"，也可以使用单引号。着色器语言是以字符串的形式出现在js代码中，第19、28行的着色器代码，呈现出的形式和普通代码一样，

每一个着色器语句都有单引号包裹，并用+号连接。事实上整个着色器语言代码可以写在一行，但是为了更好的呈现出，采用每一个语句采用换行处理，因为行与行之间有空格符号，为了避免

编码错误，所以用+号连接。Javascript语法中只有字符串，没有C语言中的字符型数据，Javascript中的字符串也可以理解为对象，也就是说字符串有很多的操作方法和属性，+号可以把

两个字符串，连接为一个字符串。

4.关键字function，声明的是一个函数，程序第40行声明的是一个名为initShader的初始化着色器函数，第35行进行了调用，并把返回值赋值给program。

版本

Javascript有不同的版本，一般每年会发布一个一个版本，添加更改一些细节，当然后，间隔6年才有新的版本ECMAScript，也可以简称ES6,更新较大，发布了

ECMAScript版标准，也可简称ES7.建议大家去学习ES6或ES7。

着色器函数封装为一个单独.js文件夹

文件下载

Webstorm新建一个js文件program.js，把初始化着色器函数initShader,赋值粘贴到里面就可以

在html文件夹head开始、结束标签之间添加代码

src的属性值是program.js文件地址，如果两个文件在同一个文件下，可以直接使用文件名字，部署在网站网一般称为URL地址，当有客户访问时，网页会把.html和.js文件都加载下来，然后运行解析

也可以把加载program.js文件的代码放在body里面，并位于最后，不同的位置加载时机不同，具体可以了解网络通信的知识，WebGL相比OpenGL的项目开发就是多了一层通信对三维场景的延迟影响因素

类型数组

Float32Array

Uint8Array

类型数组 一般的前端开发中都是使用普通数组Array，不需要定义数据类型，而WebGL开发需要处理大量的顶点数据，Javascript引入了Float32Array、Uint8Array等类型数组，

主要是为了提高图像的处理效率。当然可能大家会认为Javascript语言刚开始为什么不引入类型数组，最初Javascript语言主要是为了增强网页设计的灵活性，又不增加语言的

学习难度，对语言尽可能封装，比如不需要定义数据类型。随着时间的发展浏览器往平台的方向靠拢，和客户端一样是一个生态，需要修改Javascript语言，最明显的标志就是

大量单页面应用的出现，继OpenGL、OpenGL ES之后诞生了WebGL标准，图形学也开始登上了互联网的舞台，很多人会问WebGL有前途吗？其实你应该问互联网有前途吗？大量的应

用云端化是必然的。这里不做过多的解释，在后面的课程用到，后详细解释类型数组。