- Objective: Ensure students understood the pre-read.
- Quickly quiz 2-3 students: What is
typeof
? Name a primitive data type. - Clarify any doubts from the pre-read.
- Quickly quiz 2-3 students: What is
- Objective: Familiarize students with JavaScript's data types and their use cases.
- Content:
- Overview of Primitive Data Types:
Number
,String
,Boolean
,Undefined
,Null
,Symbol
,BigInt
. - Overview of Non-Primitive Data Types:
- Object: A collection of key-value pairs.
- Example:
{ name: "Alice", age: 25 }
- Access properties:
console.log(person.name); // "Alice"
- Example:
- Array: An ordered list of values.
- Example:
[1, 2, 3, 4]
- Access elements:
console.log(numbers[0]); // 1 console.log(numbers[numbers.length - 1]); // 4
- Example:
- Object: A collection of key-value pairs.
- Relate to Python equivalents (e.g.,
dict
≈ Object,list
≈ Array). - Interactive console demo:
console.log(typeof 42); // "number" console.log(typeof "hello"); // "string" console.log(typeof undefined); // "undefined" console.log(typeof { key: "value" }); // "object"
- Overview of Primitive Data Types:
- Activity: Ask students to predict the output of
typeof
for different values.
- Discuss the use of
let
,const
, and avoidingvar
. - Interactive quiz: "What is the type of..."
- Example question: What is the type of
[]
? ("object"
)
- Example question: What is the type of
- Students write 3 variables of different types (primitive and non-primitive) and use
typeof
to check them.
- Objective: Teach common arithmetic operations.
- Examples:
+
,-
,*
,/
,%
,**
. - Relate to Python equivalents.
- Demo:
console.log(5 + 2); // 7 console.log(5 % 2); // 1 console.log(5 ** 2); // 25
- Examples:
- Activity: Quick exercise for students to calculate expressions.
- Objective: Differentiate between
==
and===
.- Explain loose vs strict equality (
5 == "5"
vs5 === "5"
). - Discuss other operators:
<
,>
,<=
,>=
,!=
,!==
. - Demo:
console.log(5 == "5"); // true console.log(5 === "5"); // false
- Explain loose vs strict equality (
- Activity: Predict and verify the output of comparison expressions.
- Objective: Introduce
&&
,||
,!
.- Demo:
console.log(true && false); // false console.log(true || false); // true console.log(!true); // false
- Demo:
- Activity: Students create conditions using logical operators.
- Objective: Understand operations at the binary level.
- Examples:
&
(AND):5 & 3
→1
|
(OR):5 | 3
→7
^
(XOR):5 ^ 3
→6
~
(NOT):~5
→-6
<<
(Left Shift):5 << 1
→10
>>
(Right Shift):5 >> 1
→2
>>>
(Unsigned Right Shift):-5 >>> 1
→2147483645
- Demo:
console.log(5 & 3); // Output: 1 console.log(5 | 3); // Output: 7 console.log(~5); // Output: -6
- Examples:
- Activity: Practice combining bitwise operations.
- Quick quiz to reinforce:
- Data types
typeof
- Operator precedence
- Bitwise operators
- Students solve coding problems:
- Create variables with different data types.
- Write expressions using arithmetic, logical, and bitwise operators.
- Use
typeof
to validate data types.
- Recap key concepts:
- Data types (primitive and non-primitive) and
typeof
- Arithmetic, comparison, logical, and bitwise operators
- Data types (primitive and non-primitive) and
- Address any remaining questions from students.