JavaScript is a scripting language that is typically used on web pages where it runs client-side (within the web browser). It is a general purpose language with a lot of built-in functionality for interacting with elements on a webpage and responding to actions initiated by the user.
Although the JavaScript has "Java" in it's name, it isn't related other than by the fact that it looks something like Java. JavaScript's official name is ECMAScript (ECMA is the European Computer Manufacturers Association, a standards body). It was initially created by Netscape Communications.
More Information:
JavaScript - Wikipedia
JavaScript can be placed anywhere within an HTML document, although it is typically included in the "head" section of the HTML, and is specified by the use of <script> tags:
<html> <head> <script type="text/javascript"> //JavaScript goes here </script> </head> </html>
You can also write JavaScript in file external to the HTML and point to that file in a "script" tag.
<script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript"> // Single Line Comment /* Multiple Line Comment */ </script>
console.log("Hello");
In order to see the console on Chrome, select "View", "Developer", "JavaScript Console". Use it often!
Variables are containers for data. Essentially a variable is something that can hold a value and that value can be changed (They can vary):
var something = "Hello"; console.log(something);
Since JavaScript is loosely typed, you can do this:
var anothervariable = "My Name Is Shawn"; console.log(anothervariable); anothervariable = 15; console.log(anothervariable);More Information:
<script type="text/javascript"> var avariable = 0; // Assigns 0 to be held by a variable named "avariable". The name can be anything you want it to be. avariable = "something else"; // Changes what "avariable" holds by assigning it to be "something else". Also switches it's type. Don't need to use "var" again as avariable is already declared. console.log(avariable); // This is a function which we can use to display something in a pop-up alert box. We'll get to functions more next week but this is one we need for now. </script>
alert("My Name Is Shawn");
One of the more interesting things about the alert function is that it pauses program execution until the user responds to the alert. This can be useful in development but probably not so useful in production.
var myname = "shawn";
This isn't always required but the rules can sometimes be confusing so it is easiest to just include them at the end of a statement.
More Information:
var anumber = 0;
anumber = anumber + 1;
console.log("anumber = " + anumber);
anumber = anumber + anumber;
console.log("anumber = " + anumber);
anumber = anumber/2;
console.log("anumber = " + anumber);
anumber = 7 * 8;
console.log("anumber = " + anumber);
anumber++; // Short-cut for adding one, called "increment"
console.log("anumber = " + anumber);
anumber--; // Short-cut for subtracting one, called "decrement"
console.log("anumber = " + anumber);
Relational Operators:| Or | True | False |
| True | true | true |
| False | true | false |
| And | True | False |
| True | true | false |
| False | false | false |
var anint = 1;
if (anint >= 0)
{
// Execute some code
}
var anint = 1;
if (anint >= 0)
{
// Excute some code
}
else
{
// Execute some other code
}
var anint = 1;
if (anint >= 0)
{
// Execute some code
}
else if (anint < -1)
{
// Execute some other code
}
else
{
// Execute this code if none of the other conditions are true
}
You can use the boolean operations to use boolean logic on multiple expressions.
var anint = 1;
var anotherint = 2;
if (anint > 0 && anotherint <= 2)
{
// Execute some code
}
var x = 0;
while (x < 10)
{
console.log(x + " is less than 10.<br />");
x++;
}
for (var x = 0; x < 10; x++)
{
console.log(x + " is less than 10.<br />");
}
You can read this as, create variable x and set it to 0, while x is less than 10, do the following. Increment x by 1 at the end.
function aFunctionName()
{
// Some code to execute
}
Begin with the word "function" and then name it. The parenthesis allow you to take in "arguments" which are variables that can be used within the function.
function writeAndAlert(whattowrite)
{
alert(whattowrite);
console.log(whattowrite);
}
You can call this function anywhere in your code (after you have defined it):
writeAndAlert("Hello Hello");
Creating your own functions
function dosomething(somedata)
{
var whattosay = "Hi there " + somedata + " , nice to meet you!";
alert(whattosay);
}
As you can see, the + symbol string concatenation.
dosomething("shawn");
You can also write a function like this, assigning it to a variable to illustrate the fact that it is a variable.
var dosomethingelse = function(somedata) {
var whattosay = "Hi there " + somedata + " , nice to meet you!";
alert(whattosay);
};
var aGlobalVariable = "Global";
function globalLocalTest()
{
var aLocalVariable = "Local";
alert("Inside Function Global: " + aGlobalVariable);
alert("Inside Function Local: " + aLocalVariable);
}
globalLocalTest();
alert("Outside Function Global: " + aGlobalVariable);
alert("Outside Function Local: " + aLocalVariable); // This may not even appear
p5.js is a sort of port of Processing to JavaScript. It isn't strictly a port as it has some differences and of course works more like JavaScript in a browser than a straight port of Processing would. This is a good thing!
The p5.js Get Started page is a great place to do just that. In short, we need to download the library and then include it with script tag in our HTML:
<script type="text/javascript" src="p5.min.js"></script>Once we do that, we can use another script tag to create our sketch. There are two functions that we should implement to work with p5.js, "setup" which is run once when the page loads and "draw" which is run over and over again in a loop:
<scipt type="text/javascript">
// Runs once at the start
function setup() {
}
// Runs in a loop, over and over again
function draw() {
}
</script<
p5.js is great for drawing on the page. It uses the HTML5 Canvas element under the hood.