p5.js 编程基础学习合集【2】
之前在《 p5.js 和 Processing 的恩怨情仇》曾提及 p5.js 与 Processing 的不同点之一就是：
在 JavaScript 中，变量没有类型。使用 var 而不是 float、int、double、long、char、String、Array 等。我们不需要为函数指定返回类型或参数类型。
var 可以是任何东西——任何提到的类型，也可以是函数。
本文内容
- HTML 文档中的脚本设置。学习在 HTML 外部的文件中编写 JavaScript，并在脚本标记中指向该文件。
- 调试程序的第一步—— JavaScript 控制台。
- 变量的基础知识：定义、特征、使用缘由、创建与赋值、数据类型……
本文主要包含一些 JavaScript 基础知识。我尽可能地采用更贴近自然文字，来简要带过这一枯燥过程。我怀着学习的心态编写本文，因为在我看来，JavaScript 基础知识的理解对后续 p5.js 的学习的帮助是十分明显的。
##HTML 中的脚本设置
首先，明晰一点，驱动 web 发展的核心三技术分别指的是：HTML，CSS 和 JavaScript。
有个形象的比喻——HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉。
就功能而言，HTML 展示内容，CSS 美化页面，JavaScript 让页面动起来。
而现在，你所要做的即让骨架长出肌肉——网页中的 JavaScript 代码可以放在 HTML 文档中的任何位置，尽管它通常包含在 HTML 的 <head>部分中。你将使用<script>标签指定它：
<html> <head> <script type="text/javascript"> // 开始编写 JavaScriptvar str = "This is my first message"; console.log(str);</script></head>
<body>
</body>
</html>
你还可以在 HTML 外部的文件中编写 JavaScript，并在脚本标记中指向该文件。
< script type = “ text / javascript ” src = “ myProcessingCode.js ” > </ script > <！ -这是一个HTML注释- >
< script type = “ text / javascript ” src = “ libraries / p5.js “ > </ script > <！ -我们的p5库！- >
< script src = “ https：//ajax.aspnetcdn。> </ script > <！ - JQuery，一个流行的实用程序库- >
而有一点需要注意的是，在最新的浏览器中，你不需要写type=“text/javascript”，因为 JavaScript 是现在默认的脚本类型。
##JavaScript 控制台
编程有一件咄咄怪事：我们不仅不从错误中学习，我们也不从成功中学习。所以我们需要做的一件事，就是获得一些调试输出。你可以将内置的 console.log() 方法写入浏览器的 JavaScript 控制台：
console.log("hello");
console.log("variables x, y values", x, y);
接着，即在 Chrome 上查看控制台。请选择菜单序列——
View / Developer / JavaScript Console。
Remember，remember！ Use it often!
倘若你使用其他浏览器上，那只需搜索“如何在叉叉浏览器中打开JavaScript控制台”的办法。值得一提的是，Processing 的 print() 函数与 console.log() 执行类似的工作。
##变量
关于变量，我希望你知道的是：
- 定义： 变量就是存储在内存中并能被程序反复使用的一个值。
- 特征：在一个程序中，变量可以被使用多次。在程序运行过程中，变量的值可以被修改。
- 使用缘由：我们使用变量的首要原因即其可以减少代码中的重复输入。如果你想输入一个相同的数字超过一次，那么使用变量会使你的代码变得更通用、更易修改。
######变量的创建与赋值
当你创建变量时，你需要指定变量的名字。名字就是你决定这个变量叫什么，最好选取一个与你变量存储的数据相关的但又不冗长的名字。举个例子，当你看代码时，一个名字叫做 “radius”（半径）的变量一定比叫 “r” 变量名更容易让你理解。变量必须事先声明，这样电脑才会在内存中为你申请一块空间用来存储信息。当你要声明变量时，你需要使用 var 来表明你正在创建一个新的变量，然后你需要在 var 后面加上变量的名字。当名字确定以后，你就可以为变量赋值了：
var x = 5 ;
var y = x + 7 ; // y 的值为 12
######p5.js 的内置变量
有句话叫什么来着，我为天堂开了个后门，还不赶快上车？ p5.js 内置了一系列的特殊变量用来存储程序运行时与其相关的一些信息。
举个例子，存储画布（canvas）的宽和高的变量就是width和height。这两个变量的值是由 createCanvas() 函数设定的。你可以使用它们绘制一些与画布尺寸相关的元素。
##一项枯燥的工作——数据类型
JavaScript是一种“松散的”或“动态的”编程语言，这意味着你不必事前声明变量的数据类型。其他语言（如Java，C，C++）则必须严格声明变量类型，这有利于编译时的查错。至于JavaScript，计算机会在编译程序时自动确定变量类型。这似乎是福音!可即使你不必声明类型，JavaScript也有不同的数据类型。
为让这一过程尽可能轻松地过渡，我会以列表的形式完成陈述。
######数字
JavaScript将所有数字存储为64位的浮点数。你通常会得到精度为15至17位的十进制数字，因此你可以安全地编写x= 1.23456789012345。- 这非常准确但仍然有限制。有时它会导致非常小的不准确性。比如，在JavaScript控制台中试试这个：
0.1+0.2你应该0.30000000000000004。 - 虽然
JavaScript没有特定的整数类型，但它使用特殊措施尽可能保持整数100％准确
######字符串 - 是什么？顾名思义，一串字符。这里的字符包括文字、符号、字母……
- 怎么用？字符串类型的变量可以使用单引号或双引号定义。倘若你想包含引号字符，请在字符串内使用其他类型的引号。又或者使用反斜杠来标识。
var x = 'hello';
var y = "maybe tomorrow";
var fancy = "we need some 'single quotes' in here";
var fancy2 = "strings can have \' and \" quotes inside";
接着，我们学习一些实用的内置 JavaScript 属性和方法，借此来操作字符串：
①length ：得到字符串的长度；
var str = "I like to eat pickles"
console.log(str.length); // 21
②indexOf(str) ：返回字符串中第一次出现指定文本的索引（即位置）。 如果找不到搜索字符串，则返回 -1。
var str = "I like to eat apples.";
var pos = str.indexOf("eat"); // pos is 10
pos = str.indexOf("pears"); // pos is -1
③lastIndexOf(str) ：返回字符串中最后一次出现指定文本的索引。
var str = "long.complicated.filename.txt";
var suffixPosition = str.lastIndexOf("."); // 25
④includes(str) ：天意昭炯，我自独行，天地容我否？True or Fasle?
var str = "reallycrazylongstring";
var maybe = str.includes("zylo"); // returns true
⑤substring(start, end) ：来来来，见面分一半！
var str = "I like to eat apples.";
var newStr = str.substring(2, 6); // "like", ie. characters 2,3,4,5
⑥substr(start, length) ：拿去拿去，莫跟哥哥客气！
var str = "Bananas are yellow";
var newStr = str.substr(2, 5); // "nanas"
⑦toLowerCase(), toUpperCase() ：
var str = "I like to eat apples.";
var lowerStr = str.toLowerCase();
console.log(lowerStr); // "i like to eat apples."
var upperStr = str.toUpperCase();
console.log(upperStr); // "I LIKE TO EAT APPLES."
⑧split(separator) ：根据分隔符将字符串拆分为子字符串数组，分隔符可以是一个字符或几个字符；
var str = "a.multi.part.filename";
var result = str.split("."); // result is a 4 element array, ["a", "multi", "part", "filename"]
console.log(result[2]); // prints "part"var str = "some; data; structured; like; this";
var result = str.split("; "); // result is a 5 element array, ["some", "data", "structured", "like", "this"]
console.log(result[3]); // prints "like"
⑨join(separator) ：英语的句子无论多么复杂，都是通过一些语法手段和逻辑手段连接起来的结构。
var str = "cool.image.jpg";
var result = str.split("."); // result is a 3 element array, ["cool", "image", "jpg"]
var newstr = result.join("-"); // newstr is a string "cool-image-jpg"
var newstr = result.join("..."); // newstr is a string "cool...image...jpg"
⑩trim() ：从字符串的两端修剪空格；
var str = " string with spaces around ";
var result = str.trim(); // result is "string with spaces around" (not any more)
⑪trimLeft(), trimRight() ：仅从字符串的左侧或右侧修剪空白；
if (!String.prototype.trim) { // we don't have trim(), ratsString.prototype.trim = function () { // add a local versionreturn this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); // trim all crazy whitespace off both ends// this.replace(/^[\s\uFEFF\xA0]+/g, ''); // for trimLeft// this.replace(/[\s\uFEFF\xA0]+$/g, ''); // for trimRight};
}
⑫repeat() ：生成重复的字符串；
var dot = '.';
var dots = dot.repeat(8); // dots is "........"
var pad = 'x'.repeat(3); // pad is "xxx"
var deco = 'OX'.repeat(10); // deco is "OXOXOXOXOXOXOXOXOXOX"
######布尔
True or False? Life or Die? Make you chioce.
var drawBackground = true;
var drawDebugInfo = false;
######数组
数组用于在一个变量中存储多个对象或值，并通过数字索引访问它们。创建数组，我们需要使用方括号。请看下面的三个示例来学习数组的创建方法：
示例一：
var arr = []; // empty array
var fruits = ["apple", "dragonfruit", "banana", "starfruit"];
var ages = [10, 21, 89, 3, 68];
var misc = ["pumpkin", 10.4, "dog", false, -1]; // arrays can have items of different datatypes
var more_misc = ["dustpan", "k", fruits, misc]; // arrays can contain other arrays. Works fine, but be careful !
console.log(more_misc[2][2]); // prints banana
console.log(more_misc[3][1]); // prints 10.4
示例二：
var arr = [];
arr[0] = "moss";
arr[1] = "sludge";
arr[2] = "mold";
console.log(arr); // ["moss", "sludge", "mold"]
console.log(arr[1]); // "sludge"
示例三：
var arr = ["mushrooms", "cheerios", "sparkling water"];
for (var i = 0; i < 3; i++) {arr[i] = "I love " + arr[i];
}
console.log(arr); // ["I love mushrooms", "I love cheerios", "I love sparking water"]
关于方法：
array.length：数组长度；array.push(), array.pop()：将一个新元素添加（推送）到数组的末尾；array.shift(), array.unshift()：从数组的开头添加或删除元素；array.indexOf(elt，[start])：返回给定元素的索引，如果未找到则返回-1；array.reverse()：反转元素的顺序；array.slice(start, end)：与 String.substring() 类似，截取部分，end 是提取的最后一个元素之后的索引值；array.splice(start, end)：从数组中删除或插入一个或多个元素。- ……
######对象
对象可以被认为是属性的集合。这些属性可以是任何类型的值，包括数字、字符串、数组、其他对象和函数，它们可以构建复杂和动态的数据结构。
######简单对象
在基本级别，JavaScript对象是一种类似于 Array 的数据类型，我们可以使用数字或字符串“key”来访问数据。在其他语言中，它们有时被称为关联数组或哈希表。
var obj = { 1: 1, "twos": 22, 333: "threes", "name": "Fred Nurk" }; // all the combos of number & string
console.log(obj); // 1: 11 33: "threes" twos: 22 name: "Fred Nurk"
console.log(obj.twos, obj.name); // 22 "Fred Nurk"
console.log(obj[1], obj[333]); // 1 "threes" (have to use [] notation for numeric keys)
console.log(obj["twos"], obj["name"]); // 22 "Fred Nurk" (string keys can use the [] notation as well)
##END…
p5.js 编程基础学习合集【2】相关推荐
- p5.js 编程基础学习合集【1】
不知道你是否了解过 Processing 语言的家谱(如下图所示).与人类语言一样,编程语言同样属于相关语言的家族.而今天,我要引出的,即其家族成员之一的 p5.js(官网). ###Introduc ...
- cad布局教程_「推荐收藏」室内设计师进阶视频教程学习合集 私聊我定期更新...
[推荐收藏]室内设计师进阶视频教程学习合集 私聊我定期更新 选你比较需要或感兴趣的教程类别即可~!如果不想投票,可直接下拉看目前已有教程哦~ 看好需要的教程或素材,关注点赞转发以后私聊我即可 官方每月 ...
- CTF 六大方向基础工具合集
本文中提到的所有工具在ctf部落中均有,加入方式见文末. CTF 六大方向基础工具合集 今天来为大家分享CTF 六大方向基础工具简介集合. 一.MISC方向 杂项往往是不能被归到其他类别里的题目,所以 ...
- hystrix 源码 线程池隔离_Spring Cloud Hystrix 源码学习合集
# Spring Cloud Hystrix 源码学习合集 **Hystrix: Latency and Fault Tolerance for Distributed Systems** 获取(年月日,秒戳,毫秒戳,) - 综合篇 官方解说:JavaScript Date 对象 W3CSchool教程: JavaScript Date 对象 一.js获取北京时间 ...
- 【C#编程基础学习笔记】6---变量的命名
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...
- 【C#编程基础学习笔记】4---Convert类型转换
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...
- 蓝桥杯基础练习合集一(C语言) 1.A+B问题2.数列排序3.十六进制转八进制4.十六进制转十进制5.十进制转十六进制
目录 1.A+B问题 2.数列排序 3.十六进制转八进制 4.十六进制转十进制 5.十进制转十六进制 1.A+B问题 问题描述 输入A.B,输出A+B. 输入格式 输入的第一行包括两个整数,由空格分隔 ...
最新文章
- Windows下Nginx的安装及开机启动
- RASPBERRY PI PICO 树莓派PICO开发板双核高性能低功耗RP2040芯片
- Codeforces 41D Pawn 简单dp
- Asp.Net_Mvc_IgnoreRoute
- gin ajax 获取请求参数,go的gin框架从请求中获取参数的方法
- 一样入职的应届生工资不一样_刘涛入职阿里：为什么阿里要招聘明星？明星入职和普通人一样吗...
- python开发视频播放器_Python应用03 使用PyQT制作视频播放器实例
- 用STATSVN统计公司SVN代码修改
- ntr模式_ntr什么意思？
- 微型计算机系统中传感器的作用,一文读懂传感器原理、作用及技术特点
- 【 Redis开发与运维】第3章 读书笔记
- echarts图表应用
- js加密php解密---jsencrypt
- 锐龙R3 4100 性能怎么样 相当于什么水平
- 我们问了人工智能ChatGPT十个运维问题，结果发现...
- gtest测试框架使用详解_【python】新手小白必看，教你如何使用全功能Python测试框架 - python秋枫...
- 2021年中科院接收毕业生统计！哪些高校最多？
- 中国录音制品出版情况分析：2020年中国共出版录音制品5312种，出版数量共计12194.67万盒（张）[图]
- AdapterView的使用与getView函数详解
- 应用型本科计算机课程,应用型本科《计算机基础》课程教学改革探索