简介-P5.JS，JAVASCRIPT和STRING

我们将在此课中探讨的第一件事是git，github和github页面。 绝不是托管项目所需的github页面。 它是免费且快速的，可以在github上使用。 因此，至少在作业/实验阶段/项目中，有理由考虑使用它们。 这里有一些入门资源。

Git and Github
Steve Klise的Git和命令行介绍
初学者的Git工作流程
“尝试” Git教程
Github页面：
Github页面指南

JavaScript

该课的核心语言是JavaScript。如果您不熟悉JavaScript，建议您从Eloquent JavaScript的前四章开始。而且，还有更多的在线学习资源。

p5.js

我们将探索的框架是p5.js。这里是一些入门的链接。

p5.js概述

HTML和CSS

该课程将假定您具备HTML和CSS的基本知识。 当然，我很乐意回答问题并讨论这些主题，但是除了在JavaScript DOM操作的上下文中，它们不会在课程中明确涉及。 为了进行回顾，我建议阅读p5.js HTML和CSS概述。 HTML和CSS书籍也很出色。

基本的HTML和CSS示例，源代码

用JS操作DOM

我将演示的第一个JavaScript任务是“ DOM操作”，即使用编程来动态更改页面的HTML和CSS。 对于原生JavaScript以及许多不同的JS框架和库，这是有可能实现的，最著名的可能是JQuery。 在课上，我们将主要使用p5.js DOM库，并在必要时使用原生JS和其他框架。

p5.js DOM库教程

我将在课堂上讨论的主要函数和主题是：

核心的“创建”功能-createElement（），createP（），createDiv（），createImg（）。
在DOM中移动内容— parent（），child（）
制作接口元素-createButton（），createSlider（），createInput（），createSelect（），createCheckbox（）。
事件— mousePressed（），mouseOver（），mouseOut（），changed（）等？那么addEventListener（）呢？
何时使用create vs select — select（）和selectAll（），id vs class vs tag
应用CSS样式— style（）（以及何时使用CSS文件）。

例子

创建HTML元素，源代码
使用select和父/子源代码
带有style（）的动态CSS，源代码
DOM元素的绝对定位，源代码
处理事件：mousePressed，源代码
处理事件：mouseOver，mouseOut，源代码
动画DOM元素，源代码
建立一个简单的界面，源代码
怪异的滑块实验，源代码

JavaScript对象

JavaScript对象将是本学期几乎所有工作的关键。 我们将使用用于DOM操作的对象，例如p5.Element和原生JS Element。 我们将探索以JSON（“ JavaScript对象符号”）形式出现的数据。 我们将重点关注JS String对象以及其他库中的对象。 然后，我们将编写自己的对象来分析和生成文本。 这些示例将使用ES6类。

处理文本

loadStrings —源代码
带回调的loadStrings —源代码
“选择文件”按钮-源代码
“拖放”文件-源代码
文本输入元素-源代码
带画布的文本输入元素—源代码
Textarea元素—源代码
许多加载选项—源代码
Flesch Index Calculator —源代码
Cut-Up Machine —源代码
删诗机—源代码
Diastic Machine —源代码
简单的Rita测试-源代码

loadStrings（）和preload（）

这周的重点是在浏览器中使用程序化文本混搭。 看一下William Burroughs的Cut-Up示例。 我们在这里需要两项基本技能-如何加载文本（从文件或用户）以及如何使用JavaScript字符串。 首先让我们从文件中加载文本开始。 在p5中最简单的方法是使用loadStrings（）。 它加载一个本地文件（通过其到html文件的相对路径访问）。 获取数据的最简单方法是使用preload（），该方法可确保在setup（）触发之前读取数据。

var lines;

function preload() {
lines = loadStrings(‘path/file.txt’);
}

注意变量行的命名。 loadStrings（）的奇怪之处之一是它将所有文本加载到一个数组中，文本的每一“行”都作为数组的一个单独元素，即文本文件：

one
two
three

出现为：

[‘one’, ‘two’, ‘three’]

在许多情况下这很方便，但是对于我们来说，我们只是希望将所有文本作为一个大字符串。 因此，我们可以使用join（）函数将其放回原处。 但是只有在setup（）之前，这种情况才会发生，因为不能保证直到那时才加载数据。

var lines;
var txt;

function preload() {
lines = loadStrings(‘path/file.txt’);
}

function setup() {
// join() joins the elements of an array
// Here we pass in a line break to retain formatting
txt = join(lines, ‘\n’);
}

loadStrings和回调

虽然使用preload（）是获取文本的一个不错，快速且容易的技巧，但通常您并不是以这种方式看到JavaScript代码的。 JavaScript中的程序流通常是一系列事件，函数可以充当某些事件发生时触发的代码块。 这些功能称为“回调”，触发事件时称为“回调”。 您可能已经通过p5.js dom函数mousePressed（），mouseOver（），mouseOut（）等看到了这一点。

详情参阅http://viadean.com