JavaScript Primer
CS 396: �Introduction to Web Development
Winter, 2022
Announcements
A Note on Heroku
1. Client requests a resource from a specified route
Your Flask App�port: 5000
Database Server
port: 5432
2. Python does some validation checks, then issues SQL query to request data (using TCP port; often 5432)
3. Database receives request; performs requested operation
5. Python transforms the data as JSON and sends it back to the client.
4. Database sends a response back to the caller
Your Laptop
1. Client requests a resource from a specific route on a publicly accessible web server
Flask App in Heroku�port: 80
Database Server on AWS
port: 5432
2. Python does some validation checks, then issues SQL query to another box (using TCP port; often 5432)
3. Database receives request; performs requested operation
5. Python transforms the data as JSON and sends it back to the client.
4. Database sends a response back to the caller
With Heroku
What is Heroku?
Heroku is a Cloud Platform that allows you to deploy applications in the cloud, using “containers.” The basic process:
Setting up your DB
What is a container?
Containers allow you to create self-contained apps that interact with the “host computer’s” operating system.
Heroku’s containers are called “dynos”
“ Dynos are isolated, virtualized Linux containers that are designed to execute code based on a user-specified command”
https://www.heroku.com/dynos
Quick Demo
Outline
Outline
JavaScript Data Types
There are 7 basic data types in JavaScript:
12
number | For numbers of any kind: integer or floating-point | 1.4, 33, 99999999 |
string | For strings (text). A string may have one or more characters, there’s no separate single-character type | ‘hello world!’ |
boolean | for true/false. | true, false |
null | for unknown values – has a single value null | null |
undefined | for unassigned values – has a single value undefined | undefined |
object | for more complex data structures. | { name: 'ralph', species: 'dog' } |
symbol | for unique identifiers | |
Figuring out what data type you have
typeof 'hello world!';
typeof true;
typeof false;
typeof null;
typeof undefined;
typeof 23.4;
typeof [1, 3, 4, 6];
typeof { name: 'Lester', species: 'dog', age: 15};�
See 01_datatypes.js
13
Objects
Objects are collections of data and functionality. There are several ways to create them (see 01_datatypes.js for additional examples). Here is one way:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
getFullName: function () {
return this.firstName + " " + this.lastName;
}
};
console.log(person.getFullName(), person.age);
Functions that convert between data types
// String(), Number(), Boolean()
console.log(123, typeof 123, String(123), typeof String(123));
console.log('123', typeof '123', Number('123'), typeof Number('123'));
console.log('true', typeof 'true', Boolean('true'), typeof Boolean('true'));
See 01_datatypes.js
15
Outline
Naming Variables: Case Sensitivity
JavaScript is case-sensitive.
let a = 3;
let A = 33;
console.log(a);
console.log(A);
17
Naming Variables
Although JavaScript doesn’t care what you name your variables (beyond the rules specified in the previous slide), there are some conventions that most people follow:�
18
Declaration keywords
In JavaScript, there are three keywords for declaring variables: let, const, and var
19
const and let demo (console)
02_variables.js
20
Outline
If / Else Statement
22
if (a === 5) {
console.log('a is 5');
} else if (a > 5) {
console.log('a greater than 5');
} else {
console.log('a is less than 5');
}
Comparison Operators
= Assignment
== Equality
=== Strict Equality (both values and data types match)
!=, !== Not Equal
>, >= Greater than; greater than or equal to
<, <= Less than; Less than or equal to
03_operators.js
23
Operator Quiz
const num1 = "50";
const num2 = 50;
Will this statement evaluate to true or false?
num1 == num2;
Operator Quiz
const num1 = "50";
const num2 = 50;
Will this statement evaluate to true or false?
num1 === num2;
I. OPERATOR QUIZ
const num1 = "50";
const num2 = 50;
What will be stored in the “result” variable?
const result = num1 + num2;
Logical Operators
&& AND
|| OR
! NOT
27
Outline
Iteration and Looping
29
Iteration and Looping
30
05_loops_and_iteration.js
1. For and While loops
The classics...
// while loop�let i = 0;�while (i < 5) {� console.log('The counter is:', i);� i++;�}
// for loop�for (let i = 0; i < 5; i++) {� console.log('The counter is:', i);�}
31
05_loops_and_iteration.js
2. For .. Of Syntax
32
for (const item of array) {
// do something� // with item
...
}
For item in array�assigns each item in the array to a variable name of your choice
BLOCK�If the statements that will repeat for each item in the array
05_loops_and_iteration.js
3. forEach, map, filter, and reduce
See demo!
05_loops_and_iteration.js
If time...
34