Module 17: JavaScript

JavaScript for Snake People

JavaScript is a popular, high-level, general-purpose programming language primarily used for implementing interactive web applications and other information systems. JavaScript shares many structural (and even some syntactical) similarities with Python; the places where it differ often draws from other major major languages like Java and C (and thus are good styles to be familiar with). Overall, this makes JavaScript a useful second language to learn: programs will utilize similar structures, but demonstrate how code syntax can be abstracted in more general programming practices.

This module introduces the basic syntax of the JavaScript language, including variables, control structures, and functions. Note that this introduction assumes familiarity with Python, and introduces concepts in contrast to that languages. For more general purpose introductions, see the below resources.

Contents

Resources
Programming with JavaScript
- History and Versions
- Running JavaScript
JavaScript Basics
- Strict Mode
Variables
Control Structures
- Conditionals
- Loops
Functions
- Functional Programming
  - Array Loops

Resources

As the language used for web programming, JavaScript may have more freely available online learning resources than any other language! Some of my favorites include:

A Re-Introduction to JavaScript a focused tutorial on the primariy language features
You Don't Know JS a free textbook covering all aspects of the JavaScript language. Very readable and thorough, with lots of good examples.
JavaScript for Cats a gentler introduction for "Scaredy-Cats"
w3Schools JavaScript Reference a super-friendly reference for the language
MDN JavaScript Reference a complete documentation of JavaScript, including tutorials

Programming with JavaScript

Like Python, JavaScript is a high-level, general-purpose, interpreted programming language. The biggest difference is where it is most commonly used: while the Python interpreter is installed on a computer and is usually accessed through the command-line (or through the Jupyter program), JavaScript interpreters are most commonly built into web browsers (such as Chrome or Firefox). Browsers are able to download scripts written in JavaScript, executing them line-by-line and using those instructions to manipulate what content is displayed.

It is also possible to execute JavaScript code via the command-line by using Node.js, allowing JavaScript to be a fully general language. However, it is still most commonly used inside the browser, which is how we will utilize it in this class.

History and Versions

The JavaScript language was developed by Brendan Eich (the co-founded of Mozilla) in 1995 while he was working for Netscape. The original prototype of the language was created in 10 days... a fact which may help explain some of the quirks in the language.

Despite the names, JavaScript and the Java language have nothing to do with one another (and are in fact totally separate programming languages used in drastically different contexts). JavaScript was named after Java as a marketing ploy to cash in on the popularity of the latter.

Like Python, JavaScript continues to be developed through multiple versions, though unlike Python these versions are all forwards compatible. Each new version of JavaScript includes additional syntax shorts, specialized keywords, and additional core functions. The main limitation on utilizing new JavaScript features is whether the interpreters found in web browsers are able to support them. This module will use syntax and styles based on ES5 (JavaScript 5), which was introduced in 2011 and is supported by all modern browsers.

ES6 was introduced in 2015 and provides features that work on some browsers, while ES7 was finalized in 2016 but is not reliably supported
Technically, JavaScript is an implementation of the the ECMAScript specification (which defines the structure and behaviors of multiple programming languages). Hence the ES in the version names.

Running JavaScript

JavaScript scripts are executed in a web browser as part of the browser rendering a web page. Since browsers render HTML content (in .html files), JavaScript scripts are specified witin that HTML by using a <script> tag and specifying the relative path to the script file (usually a .js file) to execute. When the HTML rendered (reading top to bottom) gets to that tag, it will download and execute the specified script file using the JavaScript interpreter:

<script src="path/to/my/script.js"></script>

The <script> tag can be included anywhere in an HTML page. Most commonly it is either placed in the <head> in order for the script to be executed before the page content loads, or at the very end of the <body> in order for the script to be executed afer the page content loads (and so can interact with that content).
IMPORTANT: note that if you edit the .js script file, you will need to reload the page so that the browser can execute the script again (starting from the beginning, as if the page were viewed for the first time).

A webpage can include multiple <script> tags, each specifying their own script file. These scripts will be executed by the interpreter whenever they are encountered, top to bottom. And since variables and functions are usually defined globally, this means that any variables or functions created in one script will be available for use in the next (just like how variables created in one Jupyter cell are available in the next).

Thus additional JavaScript modules can be "imported" by including their script file as a <script> tag before the script that need to use them (no explicitly import statement is necessary). These scripts will then make additional global variables available for use by later scripts.

Moreover, rather than downloading third-party modules as part of a package like Anaconda, the path to third-party JavaScript modules are specified as an internet URI so that the module is downloaded along with the rest of the web page. For example:
```
<script src="https://d3js.org/d3.v4.min.js"></script>
```
will "import" (download and include) the D3 library and provide a global d3 variable for later scripts to use—similar to import d3 in Python.

While JavaScript most commonly is used to manipulate the web page content and is thus pretty obvious to the user, it also can produce "terminal-like" output—including printed text and error messages. This output can be viewed through the JavaScript Console included as a developer tool in the Chrome browser (other browsers include similar tools):

Important: You should always have the JavaScript Console open when developing JavaScript code, since this is where any error messages will appear!

Finally, while a web browser is able to open any local .html file and run its included .js scripts, certain interactions (e.g., downloading data from the internet via an HTTP request) requires a web page to be provided from a web server via the http:// protocol, rather than the file:// protocol. Luckily Python 3 provides a simple web server through the http.server module which you can use to "serve" the files to yourself:

# on the command-line:
cd path/to/project
python -m http.server

The served webpage will be available at http://localhost:8000/ ("localhost" means "this machine").

Be sure to cd to the directory that contains the index.html file—otherwise you will be serving from a different folder so will need to adjust the URL's path.
The -m option mean to run the built-in module as script, instead of just importing it.
I highly recommend you run a local web server whenever you are doing web development!

JavaScript Basics

JavaScript scripts (.js files) have a similar overall structure to Python scripts: these files contain lines of code, each of which is a statement (instruction). The JavaScript interpreter executes each statement one at a time, top to bottom (responding to control structures and function calls of course).

Like Python, JavaScript code can include comments, which is text that is ignored by the interpreter. JavaScript includes two kinds of comments:

Anything written after two slashes (//) until the end of the line is treated as an inline comment and ignored.
Anything written between /* and */ is treated as a block comment and ignored. Block comments can span multiple lines.

/* This is a block comment
   It can span multiple lines */
console.log('Hello world!');  //this is an inline comment (like # in Python)

The above example code demonstrates the console.log() function, which is JavaScript's equivalent to print()—the output will be shown in the JavaScript console (in the Developer Tools). Thus we talk about "logging out" values in JavaScript, instead of "printing" values in Python.

The console.log() function is technically a log() method belonging being called on a global console object

Also notice that the example statement ends in a semicolon (;). All JavaScript statements end in semicolons, marking that statement as being finished (like a period in an English sentence). Unlike in Python, statements that do not end in semicolons can be allowed to continue onto the next line.

Note that JavaScript tries to helpful and will often assume that statements end at the end of a line if the next line "looks like" a new statement. However, it occassionally screws up—and so best practice as a developer is to always include the semicolons.

Strict Mode

ES5 includes the ability for JavaScript to be interpreted in strict mode. Strict mode is more "strict" about how the interpreter understands the syntax: it is less likely to assume that certain programmer mistakes were intentional (and so try to run the code anyway). For example, in strict mode the interpreter will produce an Error if you try and use a variable that has not yet been defined, while without strict mode the code will just use an undefined value. This working in strict mode can help catch a lot of silly mistakes.

You declare that a script or function should be executed in strict mode by putting an interpreter declaration at the top:

'use strict';

This is not a String, but rather a declaration to the interpreter about how it should be behave.

ALWAYS USE STRICT MODE! It will help avoid typo-based bugs, as well as enable your code to run more efficiently.

Variables

JavaScript variables are declared using the var keyword. This is like creating the "nametag"; once it has been declared, new values can be assigned to that variable without further declaration. Declared variables have a default value of undefined—a value representing that the variable has no value (similar to None in Python).

var x = 4;  //declare and assign value
var y = x;  //declare and assign value
x = 5;      //assign value to existing variable

console.log(x+', '+y);  //5, 4

var z;  //declare variable (not assigned)
console.log(z);  //undefined

JavaScript variables are conventually named using camelCase: each word in the variable name is put together (without a separating _), with the first letter in subsequent words capitalized:

var myVariable = 598;
var numberOfDaysInAYear = 365.25;

Basic Data Types

JavaScript supports the similar basic data types as Python:

Numbers are used to represent numeric data (JavaScript does not distinguish between integers and floats). Numbers support most of the same mathematical and operators as Python (you can't use ** to raise to an exponent, and // is a comment not integer division). Common mathematical functions can be accessed through in the built-in Math global.

var x = 5;
typeof x;  //'number'
var y = x/4;
typeof y;  //'number'

//numbers use floating point division
console.log( x/4 );  //1.25

//use the Math.floor() function to do integer division
console.log( Math.floor(x/4) );  //1

//other common Math functions available as well
console.log(Math.sqrt(x));  //2.23606797749979

Strings can be written in either single quotes (') or double quotes ("), but most style guidelines recommend single quotes. Strings can be concatenated (but not multiplied!)
```
var name = 'Joel';
var greeting = 'Hello, my name is '+name; //concatenation
```
Strings also support many methods for working with them. Note that like Python, JavaScript strings are immutable, so most string methods return a new, altered string.

Booleans in JavaScript are written in lowercase letters: true and false. Booleans can be produced using the same relational operators. However, the logical operators used on booleans are written using symbols rather than words: two ampersands (&&) mean "and", two pipes (||) mean "or", and an exclamation point (!) means "not":

//conjunction
boolOne && boolTwo //and (two ampersands)

//disjunction
boolOne || boolTwo //or (two pipes)

//negation
!boolOne //not (exclamation point)

//combining
P || !Q       //P or not Q
!P && Q       //not P and also Q
!(P && Q)     //not (P and Q both)
(!P) || (!Q)  //not P or not Q

3 < x && x < 5  //not as cool as Python

Type Conversion

JavaScript is very flexible about applying operators across multiple types. When asked to operate on two disaprate types, the interpreter will convert one of the operands (usually the second) into a type that "best fits" the operation. This is called typecasting (the value has been "cast" as a different type):

'40' + 2  //402, the 2 is cast to a string
'40' - 4  //36, the '40' is cast to a number

var num = 10;
var str = '10';

num == str  //true, 10 and '10' can be cast into the same type
num === str  //false, 10 and '10' do not also have the same type
'' == 0   //true, both "falsey" values
0 == false  //true, both "falsey" values

The moral of the story: be careful about the types of your variables!

Arrays

Arrays are ordered, one-dimensional sequences of values—very similar to Python lists. They are written as literals inside square brackets []. Individual elements can be accessed by (0-based) index using bracket notation.

var names = ['John', 'Paul', 'George', 'Ringo'];
var letters = ['a', 'b', 'c'];
var numbers = [1, 2, 3];
var things = ['raindrops', 2.5, true, [5, 9, 8]];
var empty = [];

console.log( names[1] );  // "Paul"
console.log( things[3][2] );  // 8

letters[0] = 'z';
console.log( letters );  // ['z', 'b', 'c']

Note that it is possible to assign a value to any index in the array, even if that index is "out of bounds". This will grow the array (increase its length) to include that index—intermediate indices will be given values of undefined. Note that the length of the array (accessed via the .length attribute) will always be the index of the "last" element + 1, even if there are fewer defined values within the array.

var letters = ['a', 'b', 'c'];
console.log(letters.length);  // 3
letters[5] = 'f';  //grows the array
console.log(letters);  // [ 'a', 'b', 'c', , , 'f' ]
                       //blank spaces are undefined
console.log(letters.length);  // 6

Arrays also support a variety of methods that can be used to easily modify their elements. Common functional programming-style methods are described below.

Objects

Objects are unordered, one-dimensional sequences of key-value pairs—very similar to Python dictionaries. They are written as literals inside curly braces {}, with keys and values separated by colons :. Note that in JavaScript, string keys do not need to be written in quotes (the quotes are implied—the keys are in fact strings).

var ages = {sarah:42, amit:35, zhang:13};
var englishToSpanish = {'one':'uno', 'two':'dos'};
var numWords = {1:'one', 2:'two', 3:'three'};
var typeExamples = {integer:12, string:'dog', list:[1,2,3]};
var empty = {}

Object elements are also known as properties. For example, we say that the ages object has a sarah property (with a value of 42).

Object values can be access via bracket notation, specifying the key as the index. If a key does not have an explicit value associated with it, accessing that key produces undefined (the key's value is undefined).

var favorites = {music: 'jazz', food: 'pizza', numbers: [12, 42]};

//access variable
console.log( favorites['music'] ); //'jazz'

//assign variable
favorites['food'] = 'cake';
console.log( favorites['food'] ); //'cake'

//access undefined key
console.log( favorites['language'] ); //undefined
favorites['language'] = 'javascript'; //assign new key and value

//access nested values
console.log( favorites['numbers'][0] ); //12

Additionally, object values can also be accessed via dot notation, as if the properties were attributes of a class. This is often simpler to write and to read: remember to read the . as an 's!

var favorites = {music: 'jazz', food: 'pizza', numbers: [12, 42]};

//access variable
console.log( favorites.music ); //'jazz'

//assign variable
favorites.food = 'cake';
console.log( favorites.food ); //'cake'

//access undefined key
console.log( favorites.language ); //undefined
favorites.language = 'javascript'; //assign new key and value

//access nested values
console.log( favorites.numbers[0] ); //12

The one advantage to using bracket notation is that you can specify property names as variables or the results of an expression. Thus the recommendation is to use dot notation unless the property you wish to access is dynamically determined.

It is possible to get arrays of the object's keys calling the Object.keys() method and passing in the object you wish to get the keys of. Note that an equivalent function for values is not supported by most browsers.

var ages = {sarah:42, amit:35, zhang:13};
var keys = Object.keys(ages); // [ 'sarah', 'amit', 'zhang' ]

Control Structures

JavaScript supports control structures (conditional if statements, while and for loops) in the same way that Python does, just with a slightly different syntax.

Conditionals

A JavaScript if statement is written using the following syntax:

if(condition){
  //statements
}
else if(alternativeCondition) {
  //stateements
}
else {
  //statements
}

The condition can be any expression that evaluates to a Boolean value, and is placed inside parentheses. Note that in JavaScript all values are either "truthy" or "falsey", meaning that when treated as a condition they are either considered "true" or "false". For example, undefined is considered a "falsey" value, so an undefined variable would be treated as a "false" condition. This allows for the following JavaScript idiom:
```
if(myVariable){ //check if variable exists (is defined)
    //do stuff with myVariable
}
```
In JavaScript, a block of statements (e.g., to conditionally execute) is written inside curly braces {}. JavaScript doesn't use intentation to designate blocks, though you should still indent blocks for readability.
As in Python, the else if and else clauses are optional.

While the syntax may be different, the control flow impacts are the same as in Python: conditional statements can be nested, and subsequent if statements are not necessarily mutually exclusive!

Loops

JavaScript supports while loops just like Python, with the syntactic change that conditions are listed in parentheses and blocks are written in curly braces:

var count = 5;
while(count > 0){
   console.log(count);
   count = count - 1;
}
console.log("Blastoff!");

JavaScript also provides a for loop used for definite iteration, such as when you know how many times you want to continue through the loop. To understand the for loop, consider the below loop for iterating through an array:

var i = 0;
while(i < array.length){
   console.log(array[i]);
   i++; //shortcut for i = i+1
}

This loop has somewhat generic parts:

It initializes the loop control variable (var i=0)
It checks the condition each time through the loop (i < array.length)
It increments the loop control variable at the end of the block (i++). The ++ is a short cut for "add 1 and reassign" (since statements such as i=i+1 are so common)

The JavaScript for loop combines these three steps into a single statement:

for(var i=0; i<array.length; i++){
  console.log(array[i]);
}

Thus JavaScript makes it easy to keep track of a loop control variable (a counter), though you need to write out the initialization, condition, and update yourself.

This is equivalent to the Python for i in range(len(array)):

WARNGIN: JavaScript does have a for ... in syntax. However, it doesn't work as you would expect for arrays (it iterates over "enumerable properties" rather than the specific indices). Thus, best practice is to not use that construction, and instead use the above for loop (or better yet: the forEach() method described below).

If you need to iterate over the keys of an object, use the Object.keys() method to get an array to loop through!

Functions

And of course, JavaScript includes functions (named sequences of statements used to abstract code) just like Python. JavaScript functions are written using the following syntax:

//A function named `makeFullName` that takes two arguments
//and returns the "full name" made from them
function makeFullName(firstName, lastName) {
  //Function body: perform tasks in here
  var fullName = firsName + " " + lastName;

  // Return: what you want the function to output
  return fullName;
}

// Call the makeFullName function with the values "Alice" and "Kim"
myName = makeFullName("Alice", "Kim")  // "Alice Kim"

Functions are defined by using the function keyword (placed before the name of the function).
As with control structures, the block that is the function's body is written in curly braces {}.

Like Python, JavaScript variables are scoped to functions: any variables declared within a function will not be available outside of it. Functions are able to access, modify, and assign variables that are at a higher scope (e.g., global variables).

This includes the arguments, which are implicitly declared local variables!

JavaScript does not support named keyword arguments. However, in JavaScript all arguments are optional. Any argument that is not (positionally) passed a specific value will be undefined. Any passed in value that does not have a variable defined for its position will not be assigned to a variable.

function sayHello(name) {
    return "Hello, "+name;
}

//expected: argument is assigned a value
sayHello("Joel");  //"Hello, Joel"

//argument not assigned value (left undefined)
sayHello();  //"Hello, undefined"

//extra arguments (values) are not assigned to variables, so are ignored
sayHello("Joel","y'all");  //"Hello, Joel"

If a function has an argument, that doesn't mean it got a value. If a function lacks an argument, that doesn't mean it wasn't given a value.

Functional Programming

JavaScript functions ARE values. This means that, as in Python, each function you define is in fact an object that can be assigned to other variables or passed around to other functions.

function sayHello(name){
  console.log("Hello, "+name);
}

//what kind of thing is `sayHello` ?
typeof sayHello;  //'function'

//assign the `sayHello` value to a new variable `greet`
var greet = sayHello;

//call the function assigned to the `greet` variable
greet("world");  //prints "Hello world"

Just like arrays and objects can be written as literals which can be anonymously passed into functions, JavaScript supports anonymous functions (similar to Python's anonymous lambdas):

//Example: an anonymous function (no name!)
//(We can't reference this without a name, so writing an anonymous function is
//not a valid statement)
function(person) {
   console.log("Hello, "+person);
}

//anonymous function (value) assigned to variable
//equivalent to the version in the previous example
var sayHello = function(person) {
   console.log("Hello, "+person);
}

You can think of this structure as equivalent to declaring and assigning an array var myVar = [1,2,3]... just in this case instead of taking the anonymous array (right-hand side) and giving it a name, we're taking an anonymous function and giving it a name!

Using anonymous callback functions are incredibly important in JavaScript programming. Many common built-in functions use callback functions to specify some type of behavior, and these callbacks are normally specified as anonymous functions (rather than clutter the namespace).

Array Loops

As a common example, arrays support a variety of methods for performing functional looping—in fact, this is the recommended way to loop through an array!

We loop through an array by calling the [forEach(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)] function on that array. This function takes in a callback function specifying what block of code to execute "for each" element:

var array = ['a','b','c'];  //an array
var printItem = function(item) {  //something to do to an array item
   console.log(item);
}

array.forEach(printItem);  //do the "printItem" thing to EACH array item

//it is much more common to use anonymous function
array.forEach(function(item) {
   console.log(item);
});

This is the (admittedly verbose) equivalent to Python's for ... in syntax.
In the last line, we basically take the anonymous function assign to printItem and "copy-paste" that literal definition as the argument to forEach(), instead of refering to the value by its name. This statement can be read as "take the array and forEach thing run this function on the item".
Be careful about the closing braces and parentheses at the end of the anonymous function version: the brace is ending the anonymous function's block (and so ending that value), and the parenthesis is closing the argument list of forEach()!
Fun fact: ES6 provides a syntactical shortcut for specifying anonymous functions that is less verbose called arrow functions.

Arrays also provide map(), filter() and reduce() functions (similar to those in Python) that can be used to do functional-style programming and mirror the functionality provided by Python list comprehensions

var array = [3,1,4,2,5];

//map: return a new array of transformed items
array.map(function(item) {
   return item*2;   //transform each item into its double
});  // [6, 2, 8, 4, 10]

//filter: return a new array of items that meet the criteria
array.filter(function(item){
   return item >= 3;  //keep if large
});  // [3, 4, 5]

//reduce: aggregate array elements into a single value
//reduce() also takes a second argument which is the starting value
array.reduce(function(runningTotal, item){
  var newTotal = runningTotal + item;
  return newTotal;
}, 0);

This type of functional programming is incredibly important when developing JavaScript programs (and especially using it for interactive applications)!

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
demo		demo
exercise-1		exercise-1
exercise-2		exercise-2
exercise-3		exercise-3
exercise-4		exercise-4
exercise-5		exercise-5
img		img
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Module 17: JavaScript

Resources

Programming with JavaScript

History and Versions

Running JavaScript

JavaScript Basics

Strict Mode

Variables

Basic Data Types

Type Conversion

Arrays

Objects

Control Structures

Conditionals

Loops

Functions

Functional Programming

Array Loops

About

Uh oh!

Releases

Packages

Languages

License

tpbansal/module17-javascript

Folders and files

Latest commit

History

Repository files navigation

Module 17: JavaScript

Resources

Programming with JavaScript

History and Versions

Running JavaScript

JavaScript Basics

Strict Mode

Variables

Basic Data Types

Type Conversion

Arrays

Objects

Control Structures

Conditionals

Loops

Functions

Functional Programming

Array Loops

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages