JavaScript is a powerful language that stems from C and Java. It is a very popular language among web developers because all modern web browsers can run JavaScript code.
Prerequisite
This lesson assumes you have completed the system setup as shown on the main JavaScript page.
Objective
This lesson is a quick introduction to JavaScript. The goal at the end of this lesson is to write a program that counts 0 to 7. And then we’ll modify the program to print 0 to 7 but skip number 4.
Case Sensitive
Both C# and Python are case-sensitive like most coding languages, but what does that mean?! This means the language cares greatly on how things are spelled. For example, pRint() and Print() are not the same.
Comments
A comment is a group of words or sentences we can add to our code that don’t affect how it runs. The computer will ignore the comment and run the code only. We use comments to tell us what’s happening in the code we’ve written or how something is done so others can understand the code we’re creating. JavaScript uses // to start comments.
Comments can also be useful for testing different sections of code by commenting and uncommenting lines and viewing the results.
// This is a comment.
// Comments are useful to remind us of what our code is doing.
// The computer will ignore comments completely.
console.log("Hello");JavaScript also supports block of comments that start with /* and end with */. We will only use // throughout the lessons.
Print Output
Going forward, we will use a special Print() PrintLn() method that does two things, print to the output window and also to the display if available.
await BrainPad.System.Println("Hello");
If you are using BrainPad Edge and have a supported display connected, you can add this line to configure the system to use an external display. You need the appropriate display address. More on this in the drawing lesson.
await BrainPad.Display.Config(1,address)Going forward, we will only only show the code that uses BrainPad and not the initial code that sets up BrainPad since this code will always be the same. This is the code you need to add on your own:
import {SerialUSB} from './serialusb.js';
import * as due from './duelink.js';
let BrainPad = new due.DUELinkController(new SerialUSB());
await BrainPad.Connect();The following code will assume you have added the code above.
await BrainPad.System.Println("Hello");Variables
A variable is a spot in the computer memory to help the program in memorizing something. We can give the variable any name, but the name can’t contain spaces, can’t start with a number, and can’t contain a symbol. Say we have a variable to keep track of a count and the count now is 5.
let count = 5;
await BrainPad.System.Println(count);
Can you guess why PrintLn() showed the value of count, which is 5, instead of printing the word count?
Let’s make a program that takes two numbers and then adds them up. The two numbers will be stored in variables a and b.
let a = 5;
let b = 4;
await BrainPad.System.Println("The sum of a and b is:");
await BrainPad.System.Println(a+b);
More on variables in other lessons.
White Space
White space does not mean anything to JavaScript, making it optional. White space does make the code easier to spot though. The following two code examples are both identical and are both completely valid. Which one would you rather use?
let count = 0; while(count<
8){
await BrainPad.System.Println(count
); count =
count + 1;}let count = 0;
while(count<8){
await BrainPad.System.Println(count)
count = count + 1;
}Loops
So far, all of our programs have executed a small program and then terminated. However, most programs will continue to run, handling specific tasks repeatedly. This happens in a loop that executes a specific block over and over.
We will use a while loop that will run the code inside its block as long as a condition is true, “while” a condition is true.
In this example, the while loop will run as long as the variable count is less than 8. Inside our block, we increment count by 1 in every loop. We do so by taking the count value, add 1 to it and then assign the result back into count. So, if count was 3 before that line, we add one to it making it 4 and then assign it back to the same variable itself.
let count = 0;
while(count<8){
await BrainPad.System.Println(count)
count = count + 1;
}
More on loops in other lessons.
Operators
Operators are used for assigning values, like when we used = symbol, and for evaluating/comparing two values, like when we used the > symbol. There are other operators to help us mathematically, like the + symbol, and others to help with logic checks.
More on Operators in other lessons.
Flow Control
The while loop used earlier automatically checked for a condition and kept looping as long as that condition was true, which was count is less than 8 (count<8). But what if we want to check for something without using a while loop? The answer is exactly what you may have guessed, an if statement! You simply have a block, like the loop, but in this case the block will run only once if a condition is true.
This code will print count if count does not equal to 4. In most programing languages, “not” is the ! symbol. And the != means “does not equal”.
if (count != 4){
await BrainPad.System.Println(count);
} Let’s now combine the earlier while loop with the if statement, say we want to print numbers 0 to 7, but this time we want to skip 4! Meaning, we will Print() the number if count does not equal 4.
let count = 0;
while (count<8){
if (count != 4){
await BrainPad.System.Println(count);
}
count = count + 1;
}Something new happened in the code. We have a nested block. This is where a block goes inside a block. Note how the if statement is inside the while loop. This is called nesting. It is important to note how Python requires 2 indentations for the code inside the if statement.
The results? All numbers show except for 4.
More on flow control in other lessons.
Functions
Functions are tasks a computer has learned to execute. When someone asks you to sleep, you wouldn’t just lay down in place and fall asleep. The “sleep” function (task) will internally handle many tasks, like go to bedroom, turn lights off, lay in bed, shut eyes…etc. However, instead of commanding all the above separately, you simply combine it all into “sleep”.
You can create your own functions that handle multiple tasks, and you can also use some of the built-in functions that we have pre-created for you. Our favorite is BrainPad.System.PrintLn(). By the way, we will always add () to indicate a function.
await BrainPad.System.Println("Hello World!");
Go ahead and try this code. You can change it to print your name, and even add multiple lines.
await BrainPad.System.Println("Hello, my name is:");
await BrainPad.System.Println("BrainPad");
BrainPad.System.Println() can also print numbers or the results of a mathematical calculation. The first line will print 55 and the second will print 10.
await BrainPad.System.Println(55);
await BrainPad.System.Println(5+5);
What do you thin this code will produce?
await BrainPad.System.Println("55");
await BrainPad.System.Println("5"+"5");JavaScript is an object-oriented language. This has a great advantage as functions live inside an object. That function define how a task is handled for that objects. In our examples, we have an object named BrainPad, yet it has another object in it called System. The object System handles “system” function for the BrainPad to provide several functions. Two of these functions are Print() and PrintLn().
The Intellisense feature in Visual Studio gives you a list of available options as soon as a period is entered.
Same for the system:
More on functions/methods in other lessons.
BrainStorm
Computers are not as smart as we may assume. They run instructions step-by-step. But if so, how does a computer play music while surfing the web and checking emails? They do so by running billions of instructions per second. It feels like things are happening simultaneously, but it’s just a very fast simple machine.
How do computers compare to our brains? Do you think we process one instruction at a time? How about feelings? Computers always have an answer, but how come we are sometimes unsure? How do we make decisions that we feel confident about, but then we regret those decisions later? Would a computer regret a decision? What is “regret” to a computer if all it knows is a yes or no?
