• Was created to make web pages come alive
• Full integration with HTML & CSS
• Originally named LiveScript, but was then positioned as a "younger brother" of Java.
• However, it has no relation to Java at all.
• Programs in JavaScript are often called scripts.
• Every browser has a JavaScript Virtual Machine (JVM) that runs the Javascript code. Similar to how a Python IDE (like Thonny) runs your Python program.
• In the browser JavaScript is able to do things like
• react to user actions - e.g. mouse clicks, key presses
• get and set cookies, ask questions, show messages
• send requests to remote servers, download & upload

JavaScript

Although they are quite different, they share many similarities

​

• Both are interpreted languages
• Both are heavily used in web development
• Both are dynamically-typed - making them easier to learn

​

Javascript & Python Similarities

Python

• Python has many more applications than JavaScript making it a popular choice for developers in many fields
• JavaScript is used mainly in web development

​

• In web development,
• JavaScript is primarily used in front end development (client-side code that runs in your browser to produce web pages and apps). Used in conjunction with HTML & CSS.
• Python is primarily used in back end (or server-side) development.

​

Applications

Python uses indentation to indicate blocks of code

def myFunc(aVar):� if (aVar == "test"):� return 0 # comment� else:� return -1�

JavaScript uses { } to indicate blocks of code

​

function myFunc(aVar) {� if (aVar == 'test') {� return 0; // comment� } else {� return -1;� }� }

Semi-colons are mostly optional in Javascript, but omitting them can lead to dire consequences on rare occasions.

Blocks of Code

In JavaScript this code

White Space does not Matter

Is the same as this code

​

function myFunc(aVar) {� if (aVar == 'test') {� return 0;� } else {� return -1;� }� }

function myFunc(aVar) {�if (aVar == 'test') {�return 0;�} else {�return -1;�}�}

or even this code

​

function myFunc(aVar){if(aVar=='test'){return 0;}else{return -1;}}

​

By all means use indenation and spacing to improve the readability of your JavaScript programs.

JavaScript Readability

function myFunc(aVar) {� if (aVar == 'test') {� return 0;� } else {� return -1;� }� }

JavaScript Beautifier

http://jsbeautifier.org/

Variables must be declared before being used

var price1;�var price2 = 6;�var total = price1 + price2;

​

​

​

​

let price1;�let price2 = 6;�let total = price1 + price2;

​

​

​

​

JavaScript Variable Declaration

var age; // declare variable�var myName = "Jay"; // declare & initialize variable

Variables can be declared with var or let or const (next page)

The difference is scoping - i.e. which parts of your program can see or use the variable

• var is scoped to the nearest function block function abc( ) { }
• let is scoped to the nearest enclosing block { } - e.g. inside an if, else, for loop, while loop, …

const taxRate = 8.25;�const pi = 3.141592;�const favorite = 'tuna';

​

​

​

​

JavaScript Variable Declaration

A variable declared with const cannot be reassigned a new value and is therefore referred to as a constant.

JavaScript comparison operators

Given that x = 5

== equal to x == 8 false

x == 5 true

x == "5" true (would be False in Python)

=== equal value and equal type

x === 5 true

x === "5" false (just like in Python)

!= not equal x != 8 true� x != "5" false

!== not equal value or not equal type

x !== 5 false

x !== "5" true

x !== 8 true

> < greater than, less than

>= <= greater than or equal to, less than or equal to

Logic Operators

Given that x = 6 and y = 3

&& logic and (x < 10 && y > 1) true

|| logic or (x == 5 || y == 5) false

! logic not !(x == y) true

​

Very similar to Python.

another common way to format

JavaScript if statements

if (time < 10) {

x = "Good morning";

} else if (time < 20) {

x = "Good day";

} else {

x = "Good evening";

}

​

if (time < 10) {

x = "Good morning";

}

else if (time<20) {

x = "Good day";

}

else {

x = "Good evening";

}

Very similar to Python.

Also has

While loops

while (condition) {� statement;

statement;�}

do {� statement;

statement;

} while (condition)

for loops

for loops in JavaScript look like for loops in a lot of of other languages (Java, C, and C++), but are quite different than in Python.

for( init; condition; upd) {� statement;

statement;

}

for loops

for( init; condition; update) {� statement;

statement;

}

• init the initialization code is executed once at the beginning of the loop.
• condition is evaluated every time the loop repeats, and the statements in the loop are only executed if TRUE.
• update is executed at the end of the loop and is typically used to increment/decrement a counter.

for loops

Starting Point

for( init; condition; upd )

{

statement1;

statement2;

…

statementn;

}

True

False

for loops

for (var j = 0; j < 5; j = j+1)�{� console.log("j is: " + j)�}�

• The log() method prints to the console
• What is the "console"? A place to print information, show errors, etc that is not on the web page (or Google doc/sheet).
• The console.log() statement executes 5 times, with j equalling 0,1,2,3, and 4. After the 5th execution, the j=j+1 update is done, and then the j < 5 condition is evaluated to FALSE, so console.log() does not execute when j = 5.

A JavaScript array is similar to a Python list in that it lets you store multiple values in a single variable.

JavaScript Arrays

let countries0 = ['Nigeria', 'Canada', 'England'];

let countries1 = new Array('Nigeria', 'Canada', 'England');

let countries2 = new Array()

countries2[0] = 'Nigeria';

countries2[1] = 'Canada';

countries2[2] = 'England';

var mixed = [10,"hello",true,{name:"John"},[1,2,3]];

Javascript array vs Python list

Python.v.JavaScript

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(1, 3); // citrus = ["Orange","Lemon"]

​

Tutorialspoint JavaScript Arrays

CodeAcademy Learn JavaScript

free lessons

Optional

Javascript

Tutorial