JavaScript Primer
CSCI 344: Advanced Web Technologies
Spring 2025
Announcements
Some HW2 hints
Intro to JavaScript
JavaScript Readings & References
Outline
Outline
JavaScript Data Types
There are 8 basic data types in JavaScript:
8
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 |
Which data type? Use the typeof operator
typeof 'hello world!';
typeof true;
typeof null;
typeof undefined;
typeof 23.4;
typeof [1, 3, 4, 6];
typeof { name: 'Lester', species: 'dog', age: 15};
�Demo: see 01-datatypes.js
9
Functions that convert between data types
JavaScript has built-in functions to convert between types:�
�
// Examples
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
10
Outline
Declaration keywords
In JavaScript, there are three keywords for declaring variables: let, const, and var
12
Naming Variables: Case Sensitivity
JavaScript is case-sensitive.
let a = 3;
let A = 33;
console.log(a);
console.log(A);
13
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:�
Same general conventions as Java
14
See 02-variables.js
15
Outline
If / Else Statement
17
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
18
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
22
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 addTwoNums = (num1, num2) => {� return num1 + num2;�};
�// condensed syntax (if statement only 1 line):�const addTwoNums = (num1, num2) => num1 + num2;
// condensed syntax, (if only 1 argument; statement only 1 line:�const squareNumber = num1 => num1 ** 2;
Demo: 04-functions.js
Outline
Iteration and Looping
30
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);�}
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
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