Unit III: JavaScript Fundamentals
Course Notes & Reference Architecture • ACP222N
1. Introduction & Execution Environments
JavaScript (JS) is a lightweight, cross-platform, interpreted, or Just-In-Time (JIT) compiled object-oriented
scripting language. It serves as the behavior layer of core frontend web architectures.
Approaches to Embedding JavaScript
1. Inline JavaScript: Written directly within HTML event attributes.
<button onclick="[Link]('Clicked!')">Click Me</button>
2. Internal JavaScript: Placed inside a structural <script> element within either the <head> or <body>
sections.
<script>
function greet() { [Link]("Hello from inside!"); }
</script>
3. External JavaScript: Code is maintained in a distinct file with a .js extension and linked via the src
attribute. This separates concerns and optimizes browser caching.
<script src="assets/js/[Link]"></script>
2. Lexical Grammar & Syntax Tokens
• JS Identifiers: Names given to variables, functions, and loops. They must begin with a letter, underscore
( _ ), or dollar sign ( $ ). Subsequent characters can include numbers. They are explicitly case-sensitive
( userAge and userage are separate identities).
• Reserved Words: Tokens reserved by the language specification that cannot be utilized as identifier
names (e.g., break , case , catch , class , const , debugger , default , delete , do ).
• Optional Semicolons: ECMAScript uses an Automatic Semicolon Insertion (ASI) mechanism to imply
statements have ended. However, explicitly using semicolons ( ; ) avoids subtle runtime errors during
minification.
• Comments:
// Single-line comment notation
/* Multi-line/Block comment notation
*/
• Literals: Constant data values hardcoded directly into the program script (e.g., Numeric: 1024 , String:
"Data Line" , Boolean: false , Array: [1, 2, 3] , Object: {id: 1} ).
ACP222N: Unit III - JavaScript Fundamentals 1
3. Variables, Data Types & Values
JavaScript handles variables as dynamically-typed pointers capable of tracking varying data classifications
across execution lifecycles.
Declaration Scopes (var vs. let vs. const)
Keyword Scope Type Hoisting Behavior Re-assignable
var Function Scope Hoisted (Initialized as undefined ) Yes
let Block Scope Hoisted (Uninitialized in Temporal Dead Zone) Yes
const Block Scope Hoisted (Uninitialized in Temporal Dead Zone) No (Immutable Binding)
Primitive Data Types
• Number: Double-precision 64-bit binary format IEEE 754 values (handles integers and floating-points).
• Text (String): A sequence of 16-bit unsigned integer values representing UTF-16 code units.
• Boolean: Truth values representing logical flags: true or false .
• Null: Explicit assignment representing an intentional absence of any object value.
• Undefined: Auto-assigned primitive indicating a variable has been declared but has not yet received a
value.
4. Type Conversions & Expression Operators
Type Conversion Types
• Implicit Conversion (Coercion): Automated casting performed by the JavaScript runtime (e.g.,
"20" + 5 // Results in "205" ).
• Explicit Conversion: Manual type casting via built-in constructor mechanisms (e.g., Number("42") ,
String(true) , Boolean(1) ).
Operators Matrix
• Arithmetic: Addition ( + ), Subtraction ( - ), Multiplication ( * ), Division ( / ), Modulus ( % ),
Exponentiation ( ** ).
• Relational/Comparison: Loose equality ( == ) checks values with coercion. Strict equality ( === ) verifies
both value matching and data type matching without coercion. Also includes: > , < , >= , <= .
• Logical: Logical AND ( && ), Logical OR ( || ), Logical NOT ( ! ).
• Assignment: Simple assign ( = ) and compound expressions ( += , -= , *= , /= ).
ACP222N: Unit III - JavaScript Fundamentals 2
5. Control Flow Structures & Loops
Conditionals
Manages execution branching via if , else if , and else frameworks, or multi-case switch
evaluations:
switch(statusCode) {
case 200: [Link]("Success"); break;
case 404: [Link]("Not Found"); break;
default: [Link]("Unknown Status");
}
Loops & Flow Alteration
• for : Count-controlled loop framework.
• while : Condition-controlled execution framework.
• Loop Modifiers: break immediately terminates the enclosing loop structure. continue skips the
remaining statements in the current iteration and re-evaluates the loop's condition. yield pauses
execution inside custom generator functions.
6. Functions Architecture
Functions isolate and wrap reusable blocks of statements. In JavaScript, functions are **First-Class
Citizens**, meaning they can be assigned to variables, passed as arguments, and returned from other
functions.
// Defining a function with parameters
function evaluateArea(width, height) {
return width * height;
}
// Invoking a function with actual arguments
let roomSize = evaluateArea(12, 15);
ACP222N: Unit III - JavaScript Fundamentals 3