Zero to Full Stack: The JavaScript Masterclass A comprehensive Builder’s Toolkit to master the language of the web. Curriculum based on HuXn WebDev ‘Code is a skill, not just knowledge.a ‘The Roadmap & Philosophy THE PATH Se G6 You don't learn by ae watching. You learn Eolas Seater 4 | by building 100 +) af a aoe and solving STEPS OOPBAsyne (| y= challenges. : ‘STEP 4: The Ecosystem React > Nodejs > Express > MongoD2‘The Workshop: Setup & Output ‘THE TOOLBOX ey 2/90 SN ) Extensions: Prettier, Live Server ©) Developer Tools THELINK oe ‘THE CONSOLE VISUAL eae : TD © clearconsole ¥ | @ Filter > [Link]("HeLlo World"); © Hello Worté : Pro-Tip: Use | ¢ [Link] | for Arrays & © [Link]("This is an error”); Obiects. < This is an error > console. table({nane: "HuXn", age: 204); Gndex) Value rane ageRaw Materials: Variables & Declaration Think of a variable as a box where we store data. t 4 F 5) IF 5] var |[Met const a 5] FF 7 Function Scoped. Mutable. Immutable. Ba ld Standard. Value can change. Reference cannot [Y~) t change. AVOID. Use for updates. eS 5 a r A |. let age = 257), a const birthYear = 1999; , i Naming Conventions No Reserved Keywords No starting with numbers @ case Sensitive @ Se AstNané > FirstName - Wh cameicase class, 2 A el. name # Name a youtubec!Data Types: Strings & Template Literals DECLARATION & FEATURE SPOTLIGHT © |' Template Literals (Backticks) const name = "HuXa"; const msg = “Hello, ay nane is (RBI Interpolation Pocansicer rext’ | Double: “Text" | Backtick: METHOD CHEAT SHEET (COMMON OPERATIONS) ¢ ip TUNE | ee al Length . toUpperCase() -Slice(start, end) Returns character count |_| Converts to ALL CAPS Extracts a section | r A TE a Th el .split(separator) -trim() .includes("text") _ String > Array | | Removes whitespace _ True/False check aThe Logic Gate: Operators & Math’ Inter Font inky eee) The Equality Trap | : Rees Inter | JetBrains Mono + | Addition == (Loose Equality) - Subtraction Checks Value Only. Jetbrans Mono %* | Multiplication "5" // true 1 Division ‘ BS % | Modulus/Remainder ——— Checks value / remainder === (Strict Equality) of premaraton. | Checks Value AND Type. *e Jetbrains Mono Exponentiation Exponentiaion and from many provalen: // false Falsy Values List false 9 """ (empty string) null undefined NaNControl Flow: Making Decisions: DECISION PATH DIAGRAM Twe (Truth pion a False (Faisy) Action B COMPARISON: IF/ELSE vs. SWITCH ‘SWITCH STATEMENT EXAMPLE {=} Dea | Cee! If/Else Switch ‘Standard Best for multiple decision tree, a & specific cases Truthy/Falsy (eg, Days of checks. ‘the Week). Ideal for binary Optimized for or simple value matching. branching. L [e a) ie a Expression switch(day) {— Evaluated Once [Pease "Monday": [Link]("Start work"); break; // Critical Ledefault: > Prevents Fal-through! console. tog("ReLax"); } * Fallback Action Value Matching ie gy I Ba Micro-Challenge: Write logic to check a password. If length > 8, | print “Welcome”, else print “Too Short”. «The Loop: Automating Repetition For Loop Al Known iteration count. Jeterains Hono: for (let i = 0; i < 16; it+) While Loop Al Unknown duration, condition based. JetBrains Mono: while (condition) { ... } ey | Do-While Al Run at east once do { ... } while (condition) do { } while (condition) The In ite Loop Danger: Always ensure your loop has an exit condition (increment/decrement) or you will crash the browser.Data Structures I: Arrays | sunshift(, (Add) shift (Remove) ont [oe] ‘lt [2] "Apple" "Banana" "Cherry" const list = ["Apple", "Banana", "Cherry"]; List[0]; // Accessing Apple push) (Aca) -pop() (Remove)Data Structures II: Advanced Array Methods MODIFICATION Slice Splice »"|| | Concat al JetBrains Mono) JetBrains Mono) JetBrains Mono) e Cut a copy Remove or Replace wh Merge two L || (non-destructive). (destructive). arrays. - e UTILITY alter Fl 5 Reverse .7.| | Join A ‘Includes || | Sort JetBrains Mono) Flip order. = | JetBrains Mono) | Array to = JetBrains Mono) = | | Check exister String. =o bias poe coll [pe sor Sort. = JetBrains Mono) Alphabetical [ea Né=>Data Structures Ill: Objects THE MODEL. Name: 2] Contact Card Age: Location: Name: __HuXn Age: 19 Location: Earth Dot Notation [Link] <== Clean. Use 95% of the time. THE CODE Javascript % Object Dectaration age: 19, {key-value Pars) Location: "Earth" ACCESS WARS eo Bracket Notation A person["name"] == Use for dynamic keys or spaces.JSON (JavaScript Object Notation) The Universal Language of Data Interchange. JS Object JS Object [Link]() ‘[Link]) name: ‘HuXn' age: 19, location: ‘Earth’ z "name": "Huxn", name: ‘Huxn', age: 19, Vocation: ‘Earth’ + "Location": "Earth" F Rule #1: JSON keys must be double-quoted strings.The Engine: Functions 4 ANATOMY OF A FUNCTION function greet(name) {<— // name is the Parameter return “Hello ${name}*;{ React |—>{ __Backend Code is a skill. Start building your 100 projects now.