First JavaScript tutorial

This assignment takes you through an introduction to JavaScript, and culminates with these questions on Gradescope:

https://www.gradescope.com/courses/443607/assignments/2322534

Note that all of the answers to the questions are embedded in the tutorial material below, plus the tutorials linked to below.

Getting Started with JavaScript

To get started with JavaScript, we’ll do a few exercises that are not connected with any web browser at all; just exploring JavaScript as a programming language.

While JavaScript was originally developed to be a scripting language for web browsers, with the introduction of Node in 2009, JavaScript began to be used outside of web browsers.

So, we’ll use node as our tool to interact with JavaScript.

Step 1: Getting Started with Node

In this section, there are some exercises that I encourage you to work through.

There is nothing for you to turn in. But if you skip over them, you may find that you are stuck on some of the later steps. These are each here to help you understand something you need later in the assignment.

I encourage you to read through this section, try the examples for yourself on CSIL or you own machine, and experiment with the code.

Step 1.1: Finding the node REPL

On CSIL, you can type node to enter a REPL (Read/Eval/Print Loop) for JavaScript. If you have node installed on your local machine, this will likely work there as well:

[pconrad@csilvm-03 ~]$ node
Welcome to Node.js v17.4.0.
Type ".help" for more information.
> 2 + 3
5
> "ucsb".toUpperCase()
'UCSB'
> const schools=["UCSB","UCSD","Stanford"]
undefined
> schools.length
3
> schools[0]
'UCSB'
> schools[2]
'Stanford'
> schools[3]
undefined
> 
[pconrad@csilvm-03 ~]$ 

To exit the node REPL, use Control-D.

Step 1.2: Hello World in JavaScript.

The “Hello World” program in JavaScript would look like this. Put this in a file called hello.mjs:

console.log("Hello, World!");

The m in mjs stands for Module. It allows us to use the import statement, and avoids errors such as following that we may get if we try to use import in a file that ends in plain old .js:

SyntaxError: Cannot use import statement outside a module

You’ll see later on that we don’t need the .mjs extension when working with front-end code in our web-apps; this appears to just be a standalone node thing. But we’ll keep it for now.

To run it, you can type: node hello.mjs:

[pconrad@csilvm-03 ~]$ cat hello.mjs 
console.log("Hello, World!");

[pconrad@csilvm-03 ~]$ node hello.mjs
Hello, World!
[pconrad@csilvm-03 ~]$ 

Step 1.3: Getting command line arguments

As you may know:

In C/C++, we can access command line arguments through the variables argc and argv as in:
```
int main(int argc, char *argv[]) { 
```
In this case, argv[0] is the name of the file being run, and the arguments start with argv[1]. The value argc tells us how the length of the argv array, which is always at least 1.
In Python, we can access command line arguments through sys.argv as in:
```
import sys
print(sys.argv[0], sys.argv[1], sys.argv[2])
```
In this case, sys.argv[0] is the name of the file that is being run, similar to how C/C++ argc/argv works. We use len(sys.argv) to determine the size of the sys.argv list.
In Java, we can access command line arguments through the variable args as in:
```
public static voic main (String [] args) {
```
In this case, args are all the actual command line args; there is no special meaning for args[0] as in C/C++ and Python

What about JavaScript under node.js? In this case, we access command line arguments thorugh the process.args.

Executing this one line program will show us how this works:

console.log("process.argv=",process.argv)

Let’s try passing in three command line arguments:

[pconrad@csilvm-03 try-node]$ node args.mjs foo bar fum
process.argv= [
  '/usr/bin/node',
  '/cs/faculty/pconrad/try-node/args.mjs',
  'foo',
  'bar',
  'fum'
]

As you can see:

We can print out an entire array with console.log; the array starts with [, ends with ] and each value is separated by a comma.
process.args[0] is the full path to the node interpreter (/usr/bin/node)
process.args[1] is the full path the script that we are executing (/cs/faculty/pconrad/try-node/args.mjs)
The actually command line arguments start with process.args[2] which is foo.

Step 1.4: Classic for loops in JavaScript

The classic for loop in C/C++ and Java both is:

  for (int i=0; i<n, i++) {
     // do something with i
  }

Let’s use a JavaScript for loop to print all of the command line arguments. Note that in place of int we have let.

Let’s put this into loop.mjs and try running it with and without command line arguments:

for (let i=0; i<process.argv.length; i++) {
  console.log("process.argv[" + i + "]=", process.argv[i]);
}

Here’s what it looks like when we run it:

[pconrad@csilvm-03 try-node]$ node loop.mjs foo bar fum
process.argv[0]= /usr/bin/node
process.argv[1]= /cs/faculty/pconrad/try-node/loop.mjs
process.argv[2]= foo
process.argv[3]= bar
process.argv[4]= fum
[pconrad@csilvm-03 try-node]$ 

Step 1.5: JavaScript string interpolation

Let’s focus on this line for a moment:

  console.log("process.argv[" + i + "]=", process.argv[i]);

There’s an easier way to write this using a feature called string interpolation. In any string that is delimited with backticks instead of double quotes, we can insert values by putting a dollar-size followed by an expression in braces, like this:

  console.log(`process.argv[${i}]=${process.argv[i]}`);

Same result, but much easier to read the code.

Try modifying your loop.mjs code in this way and run it again.

Step 2: Basic JavaScript tutorials

Please read through this JavaScript tutorial, designed specifically for React beginners.

https://blog.appseed.us/10-javascript-concepts-for-react-beginners/

Now, please read though this additional JavaScript tutorial:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

Also read these shorter tutorials on specific topics:

These tutorials contain all of the information you should need to answer the questions in the Gradescope assignment:

https://www.gradescope.com/courses/443607/assignments/2322534