JavaScript Primer
CSCI 344: Advanced Web Technologies
Fall 2024
Announcements
Before starting with JavaScript…
Some HW2 hints
Fixed (they don’t move when the page scrolls)
TIP: Use position: fixed for these elements
Note that the “Suggestions for You” panel is hidden on mobile
TIP: Use display: none for this element inside of the media query
Download Today’s Lecture Files
JavaScript Time!
JavaScript Readings & References
Outline
Outline
JavaScript Data Types
There are 8 basic data types in JavaScript:
12
number | For numbers of any kind: integer or floating-point | 1.4, 33, 99999999 |
bigint | For storing very large integers that can’t be represented by the number datatype | BigInt("123456789012345678901234567890") |
string | For strings (text). A string may have one or more characters - no 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 | A way to generate 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
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
14
Outline
Declaration keywords
In JavaScript, there are three keywords for declaring variables: let, const, and var
16
Naming Variables: Case Sensitivity
JavaScript is case-sensitive.
let a = 3;
let A = 33;
console.log(a);
console.log(A);
17
Naming Variables: Conventions
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:�
Tl;dr: same general conventions as Java
18
See 02_variables.js
19
Outline
If / Else Statement
21
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
See 03_operators.js
22
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
26
Outline
Functions
Function Declarations
function add(a, b) {
return a + b;
}
Arrow Functions (new in ES6)
const add = (a, b) => a + b;
Function Declarations
Function declaration that add two numbers:�
function add(a, b) {
return a + b;
}
Note that no return or parameter types are explicitly defined. That said, TypeScript extends JavaScript by adding types...and is then compiled into JavaScript.
Arrow Functions
Arrow Functions
// verbose syntax:�const add_two_nums = (num1, num2) => {� return num1 + num2;�};
�// condensed syntax (if statement only 1 line):�const add_two_nums = (num1, num2) => num1 + num2;
// condensed syntax, (if only 1 argument; statement only 1 line:�const square_number = num1 => num1 ** 2;
Demo: 04_functions.js
Outline
Iteration and Looping
34
05_loops_and_iteration.js
1. For and While loops (“Classic” Loop Structures)
// 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);�}
35
05_loops_and_iteration.js
2. For .. Of Syntax
36
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
2. For .. Of Syntax
const fruit = ['apple', 'orange', 'banana', 'mango', 'peach'];
// for…of loop
for (const item of fruit) {
console.log('The item is:', item);
}
// “traditional” for loop�for (let i = 0; i < fruit.length; i++) {� console.log('The item is:', fruit[i]);�}
Demo: 05_loops_and_iteration.js
Practice