Speaker 1: Welcome to the deep dive. Today, we're taking a really
Speaker 1: focused look at JavaScript, specifically for web developers. We're pulling
Speaker 1: everything from this one pretty comprehensive book. But hey, even
Speaker 1: if you're not a coder, stick around. Yeah, definitely understanding
Speaker 1: JavaScript basics. It's kind of like getting a peek under
Speaker 1: the hood of you know, all those interactive websites who
Speaker 1: use every single day exactly.
Speaker 2: Think of it as uncovering the essential mechanics our source.
Speaker 2: It's aimed at web developers, but the core ideas right,
Speaker 2: and you know some of the let's say, surprising ways
Speaker 2: JavaScript works. That's interesting for anyone curious about webtech.
Speaker 1: So our mission today is well, pretty straightforward but important. Yeah,
Speaker 1: pull out the key building blocks of JavaScript, demystify how
Speaker 1: it makes websites actually do things, and hopefully you'll have
Speaker 1: a few of those aha.
Speaker 2: Moments we should. The book covers a lot, from basic
Speaker 2: syntax writing the code, to making page elements react, even
Speaker 2: server communication loads to cover.
Speaker 1: Let's just dive right in chapter one the basics.
Speaker 2: Okay, so first off, the book really emphasizes using the
Speaker 2: browser's developer tools, specifically the console. Ah.
Speaker 3: The console.
Speaker 1: Yeah, it can look a bit intimidating candidate, it.
Speaker 2: Can, but it's actually a fantastic place to just try
Speaker 2: stuff out, like a sandbox.
Speaker 1: Okay. The book gives an example, right like three plus five.
Speaker 2: Yep, type three plus five hit ender and boom eight.
Speaker 2: Makes perfect sense.
Speaker 1: But then it shows console dot log hello, and that
Speaker 1: gives you hello, but then also undefined. Okay, what's up
Speaker 1: with the undefined there? Why does that show up?
Speaker 2: Well, it's about what console dot log is designed to do.
Speaker 2: Its main job is to display something like the text hello, okay,
Speaker 2: and it does that, but the function itself doesn't really
Speaker 2: return a useful value back to the program in the
Speaker 2: way three plus five returns eight.
Speaker 1: Ah.
Speaker 3: I see.
Speaker 2: So in JavaScript, if a function doesn't explicitly say return
Speaker 2: this value, it just automatically returns undefined.
Speaker 1: So console dot log does its job displaying hello, but
Speaker 1: the result of running the function is just nothing useful,
Speaker 1: hence undefined.
Speaker 2: Exactly like think of a printer at printer document, right,
Speaker 2: but the act of printing itself doesn't like create a
Speaker 2: new document as its output.
Speaker 1: It just performs the action that printer analogy actually helps
Speaker 1: a lot.
Speaker 2: Okay, action versus result.
Speaker 1: Got it, and the book also sets the stage, you know,
Speaker 1: explaining that JavaScript is basically just text plain text files, right, and.
Speaker 2: The browser reads those files and interprets the instructions.
Speaker 1: Yeah, it executes the code. And these files are made
Speaker 1: up of statements individual instruction.
Speaker 2: Like console do log Hello, that's one statement precisely.
Speaker 1: And you can group statements together in blocks using curly braces,
Speaker 1: sometimes optional for single lines, but the book uses them
Speaker 1: consistently for clarity.
Speaker 2: Good practice probably, And semicolons.
Speaker 1: At the end of statements. The book says they're often
Speaker 1: optional if you use line breaks.
Speaker 2: Yeah. JavaScript tries to be clever and insert them. Sometimes
Speaker 2: it's called automatic semicolon.
Speaker 1: Insertion, but the book uses them anyway.
Speaker 2: It does for consistency and to avoid you know, potential
Speaker 2: weird edge cases where the automatic insertion might guess wrong.
Speaker 2: It's generally seen as safer.
Speaker 1: Okay, good to know. Then variables super fundamental.
Speaker 2: Absolutely. Think of them as labeled boxes storage locations in memory.
Speaker 1: And you use the equals sign the assignment operator to
Speaker 1: put something in the box.
Speaker 2: Right, the book uses a three, then plus one, then
Speaker 2: console dot log.
Speaker 1: Which shows four, so you put three in a set.
Speaker 1: Then you take what's an eye, which is three, add one,
Speaker 1: and put the result four back into exactly that.
Speaker 2: A plus one looks a bit strange mathematically, but it's
Speaker 2: standard in programming. Update the variable based on its current value.
Speaker 1: And for those common plus one and opus one operations,
Speaker 1: there are shortcuts.
Speaker 2: Yep, the increment plus plus and decrement operators just shorthand
Speaker 2: for adding or subtracting one very common.
Speaker 1: And there are other assignment shortcuts too, like plus.
Speaker 2: Rate plus a ten is just a shorter way to
Speaker 2: write A plus.
Speaker 1: Ten makes sense, like the example A five plus equals
Speaker 1: ten results in fifteen. Keeps the code a bit tidier.
Speaker 2: It does, especially when things get more complex, saves it.
Speaker 2: A typing makes the intent clear once.
Speaker 1: You know them now, something that can trip people up.
Speaker 3: Case sensitivity, oh yeah, hugely important to JavaScript.
Speaker 1: The book stresses that thing with a lowercase T is
Speaker 1: totally different from thing with an uppercase.
Speaker 2: T, completely different variables as far as JavaScript is concerned,
Speaker 2: and that difference it can lead to some really really
Speaker 2: hard to find bugs.
Speaker 1: Because you defined it one way and try to use
Speaker 1: it another and suddenly it's undefined or not what you
Speaker 1: expect exactly.
Speaker 2: You've got to be precise with spelling and capitalization like
Speaker 2: library call numbers.
Speaker 1: Okay, how do we actually declare these variables? The book
Speaker 1: introduces var, let, and const.
Speaker 2: Right. So var is the older way if you just
Speaker 2: say var my variable. Its initial value is undefined.
Speaker 1: Until you assign something to it, yep.
Speaker 2: Whereas let and const are newer constants or values you
Speaker 2: don't intend to change later.
Speaker 1: Constants you have to give a const of value when
Speaker 1: you declare it, right. You can't just say const x correct.
Speaker 2: Yeah, you can't reassign it later either. Lit is for
Speaker 2: variables that you do expect to change.
Speaker 1: And var it has some quirks, something about hoisting.
Speaker 2: Yeah. Var declarations get sort of mentally moved to the
Speaker 2: top of their scope by the JavaScript engine. It can
Speaker 2: sometimes cause confusing behavior if you're not aware of it.
Speaker 1: Whereas let and const don't do that.
Speaker 3: They have what's called block scope exactly.
Speaker 2: They're generally considered safer and lead to fewer surprises. The
Speaker 2: book also warns about just using variables without declaring them
Speaker 2: at all.
Speaker 1: Oh right, in non strict mode.
Speaker 2: Yeah, JavaScript might just create a global variable for you,
Speaker 2: which is usually a bad idea can cause conflicts and bugs.
Speaker 1: So always declare your variables, use let or const preferably.
Speaker 2: That's the modern best practice.
Speaker 1: Yes, okay, to keep code readable, we use.
Speaker 2: Comments crucial for single line comments and followed by for
Speaker 2: multiline comments. Yeah. Great for explaining why you did something
Speaker 2: or for temporarily disabling code during testing. Just remember you
Speaker 2: can't nest the multi lined comments.
Speaker 3: Good tip.
Speaker 1: And finally for this section, strict mode.
Speaker 2: Ah, yes, you strict You put that string is the
Speaker 2: very first thing in your script or the top of
Speaker 2: a function.
Speaker 1: And what does it do? Make JavaScript stricter?
Speaker 2: Pretty much? It tells the browser, hey, be less forgiving
Speaker 2: about errors and enforce stricter rules.
Speaker 1: So it catches potential problems that regular JavaScript might just.
Speaker 2: Ignore exactly, things that are considered bad practices or ambiguous code.
Speaker 2: Strict mode often turns those into actual errors, making them
Speaker 2: easier to find and fix. Highly recommended for new code.
Speaker 1: Right helps you write cleaner, more reliable code from the start.
Speaker 2: Okay, Moving on from the basics of writing code, the
Speaker 2: book gets into the actual types of data. JavaScript works
Speaker 2: with data types. Right starts with numbers, and the key
Speaker 2: thing here is that JavaScript doesn't really distinguish between whole numbers, integers,
Speaker 2: and numbers with decimal points floating point number. It's calls
Speaker 2: of all number yep one single number type, which leads
Speaker 2: us to a classic.
Speaker 1: Issue ah the point one plus point two problem.
Speaker 2: The very same console dot log zero zero zero zero
Speaker 2: zero zero zero zero doesn't give you point.
Speaker 1: Three, it gives you point three zero zero zero zero
Speaker 1: zero zero zero zero zero zero zero zero zero zero
Speaker 1: zero zero zero zero zero zero zero four are something
Speaker 1: ridiculously long.
Speaker 2: Like that exactly. It's because computers use binary base two internally,
Speaker 2: and just like thirteens that are repeating decimal in our
Speaker 2: base ten system, some simple base ten fractions don't have
Speaker 2: an exact finite representation in binary.
Speaker 1: So tiny rounding errors creep. In the book mentions this
Speaker 1: isn't just a JavaScript thing, right.
Speaker 2: No, it happens in many languages. JavaScript just doesn't hide
Speaker 2: it as much. It's something to be aware of, especially
Speaker 2: if you're doing precise financial calculations for example good point.
Speaker 1: So, besides that quirk, you can write numbers normally with
Speaker 1: decimals or using exponential notation like one point two three
Speaker 1: E four four twelve fo hundred.
Speaker 2: Right and briefly it mentions binary notation with zero bo okay.
Speaker 1: Then operators for numbers we saw, but the arithmetic ones.
Speaker 2: The usual suspects plus for edition, subtraction, multiplication, division.
Speaker 1: And the crucial part operator precedence the order they happen in.
Speaker 2: Yes, just like math class parentheses first, then multiplication and division,
Speaker 2: then addition and subtraction.
Speaker 1: And if they have the same precedence like Warren.
Speaker 2: Evaluated left to right. The books example twelve to two
Speaker 2: to three really shows this right.
Speaker 1: It's twelve two which is six, then sixty three which
Speaker 1: is eighteen, not twelve two three exactly.
Speaker 2: Understanding precedents avoids surprises.
Speaker 1: And there's the remainder operatorcent shit, the.
Speaker 2: Percent sign one hundred perc seven gives you two because
Speaker 2: one hundred divided by seven is fourteen with the remainder
Speaker 2: of two.
Speaker 1: And the book says it's useful for things like cyclic patterns.
Speaker 2: Yeah, figuring out days of the week, or maybe alternating
Speaker 2: styles in a list, anything where you need to know
Speaker 2: the remainder after division, or just checking if a number
Speaker 2: is even or odd number percent two okay.
Speaker 1: Next, data type strings text.
Speaker 2: Sequences of characters. You enclose them in either single quotes
Speaker 2: or double quotes.
Speaker 1: The book uses single quotes mostly, but the console often
Speaker 1: shows double yeah.
Speaker 2: Either's fine. Just be consistent within a project, and importantly
Speaker 2: use the straight quotes, not the curly typographic ones. Some
Speaker 2: word processors like to.
Speaker 1: Use gotcha, and a key property of strings immutable.
Speaker 2: Yes. Immutable means once a string is created, you cannot
Speaker 2: change its contents directly.
Speaker 1: So I five Hello and I want jello. I can't
Speaker 1: just swap the H.
Speaker 3: For a J.
Speaker 2: Nope. Any operation that seems to modify a string actually
Speaker 2: creates a brand new string in memory with the changes.
Speaker 2: The original Hello is untouched.
Speaker 1: Okay. Good to know, especially for performance. If you're doing
Speaker 1: lots of string changes.
Speaker 2: It can be yeah. The book also mentions escape characters
Speaker 2: using the backslash.
Speaker 1: Right, like if you want a single quote inside a
Speaker 1: single quoted string.
Speaker 2: Don't exactly or end for a newline character T for
Speaker 2: a tab, et cetera.
Speaker 1: And joining strings together concatenation.
Speaker 2: Just use the plus operator. Hello plus plus world gives
Speaker 2: you Hello World.
Speaker 1: Careful if you mix strings and numbers, very careful.
Speaker 2: Five plus ten is fifteen, but five plus ten is
Speaker 2: five to ten. JavaScript sees the string and decides to
Speaker 2: do concatenation converting the number ten to the string ten.
Speaker 3: Ah.
Speaker 1: Okay, potential, gotcha.
Speaker 2: There definitely strings also have built in properties and methods.
Speaker 2: The book mentions.
Speaker 1: Length absdef dot length would be six easy.
Speaker 2: Enough, yep. And then parcent and pars float for converting
Speaker 2: strings to numbers.
Speaker 1: Right, so parsent one two three gives the number one
Speaker 1: twenty three? What about parsent one towiny three guys.
Speaker 2: Still gives one twenty three? It reads the numbers from
Speaker 2: the start until it hits a non numeric character.
Speaker 1: And parcent reygo ze one two three.
Speaker 2: That would return nan, not a number, because it couldn't
Speaker 2: find any valid number at the very beginning.
Speaker 1: Okay, so nan is this special value indicating an invalid number?
Speaker 2: Result exactly, and there's a function is nan to specifically
Speaker 2: check if value is nan useful.
Speaker 1: The book also quickly mentions booleans.
Speaker 2: True and false the logical values fundamental for decisions in
Speaker 2: statements loops.
Speaker 1: Though not much detail in this chapter. And then null
Speaker 1: and undefined.
Speaker 2: Right two ways of representing nothing. Null is usually an
Speaker 2: intentional assignment of no value, like saying this variable should
Speaker 2: currently hold nothing.
Speaker 1: Whereas undefined often means it hasn't been given a value.
Speaker 2: Yet, often yes, or it's the default return value from
Speaker 2: a function that doesn't explicitly return anything crucially undefined itself
Speaker 2: isn't an error.
Speaker 1: State, just means no value assigned.
Speaker 3: Okay, all right?
Speaker 2: That leads nicely into functions.
Speaker 1: Reusable blocks of code. The book gives an example of
Speaker 1: function twice in return number two.
Speaker 2: Yeah, so twice is the function name. Number inside the
Speaker 2: parentheses is a parameter, a placeholder for the input.
Speaker 1: And when you call it like twice five, the five
Speaker 1: is the argument passed in exactly, The.
Speaker 2: Value five gets assigned to the number parameter inside the
Speaker 2: function for that specific call, and the return keyword that
Speaker 2: specifies the value the function should output or send back.
Speaker 2: It also immediately stops the function's.
Speaker 1: Execution, so twice five would return ten.
Speaker 2: Correct. And here's the connection back to undefined. If a
Speaker 2: function doesn't have a return statement, or if it reaches
Speaker 2: the end without hitting.
Speaker 1: One, it implicitly returns undefined, just like console dot log.
Speaker 2: Precisely, all functions return something if you don't specify it's undefined.
Speaker 1: Okay, makes sense now. The book briefly touches on those
Speaker 1: pop up dialogue boxes alert prompt confirmed.
Speaker 2: Yeah, the old school ways to interact directly alert shows
Speaker 2: a message, prompt asks for text input, confirm asks the
Speaker 2: yes no question.
Speaker 1: But they're kind of limited, right They block everything else totally.
Speaker 2: They freeze the browser until the user interacts, and you
Speaker 2: can't style them. Modern web apps use better techniques, like
Speaker 2: Htmail's dialogue element, but the book uses these for simplicity
Speaker 2: in early examples.
Speaker 1: Gotcha, Now, how does this JavaScript code actually get onto
Speaker 1: a web page?
Speaker 2: Two main ways described Inline scripts You put your JavaScript
Speaker 2: code directly inside script tags within your htmail.
Speaker 3: File file, often in the head section often yeah.
Speaker 2: Or the second way, external scripts, You put your code
Speaker 2: in a separate JS.
Speaker 1: File and link to it from the ADSTML using script
Speaker 1: src pathworre your script adscript.
Speaker 2: Exactly and a crucial point. If a script tag has
Speaker 2: a src attribute pointing to an external file, any code
Speaker 2: you write between the opening and closing script tags is ignored.
Speaker 1: Okay, so it's either in line or external with src,
Speaker 1: not both in the same tag.
Speaker 2: Correct, And the scriptags can have other attributes type textuscript
Speaker 2: used to be commer but it's mostly default.
Speaker 1: Now what about async and defer ah?
Speaker 2: Those control how the script loads and runs relative to
Speaker 2: the HTML page being parsed. By default, when the browser
Speaker 2: hits a script tag, it stops parsing, HTML, downloads the script,
Speaker 2: runs it, and then continues parsing. This can slow down
Speaker 2: page rendering.
Speaker 1: Right makes the page feel slow to load.
Speaker 2: ACYNC tells the browser download the script in the background
Speaker 2: while parsing and run it as soon as it's downloaded,
Speaker 2: which might interrupt parsing briefly. Order isn't guaranteed if you
Speaker 2: have more ultiple ACNC scripts and defer. Defer also downloads
Speaker 2: in the background, but it guarantees the script will only
Speaker 2: run after the HTML parsing is completely finished and in
Speaker 2: the order the Defer scripts appear in the HTML.
Speaker 1: So defer is often preferred for scripts that need the
Speaker 1: whole page structure to be ready.
Speaker 2: Generally yes, especially for scripts that manipulate the page content.
Speaker 2: The book also mentions cross.
Speaker 1: Origin right for loading scripts from different domains can cause
Speaker 1: issues if you're testing locally without a web server.
Speaker 2: Yes, browsers have security rules about that. You might need
Speaker 2: to remove frosts origin anonymous if you're just opening HTML
Speaker 2: files directly from your computer, okay.
Speaker 1: Error handling JavaScript used to be quiet about errors.
Speaker 2: Historically, yes, sometimes things would just break silently, making debugging
Speaker 2: and nightmare.
Speaker 1: But strict mode helps immensely.
Speaker 2: It makes JavaScript throw more explicit errors for common mistakes,
Speaker 2: much better for catching bugs early.
Speaker 1: And the book provides a basic template comments strict mode, and.
Speaker 2: A simple window a function. It's like a safety net.
Speaker 2: If any uncaught error happens, this function runs and the
Speaker 2: template just uses alert to display the error message. Very basic,
Speaker 2: but a.
Speaker 1: Starting point okay, that covers the foundational theory. Chapter two
Speaker 1: jumps into a project YEP.
Speaker 2: A simple number guessing game, putting the basics into practice.
Speaker 1: Starts with HTML just a button with egged start.
Speaker 2: Game right, and the JavaScript uses document dot query selector
Speaker 2: button Halftag's start game to grab that button.
Speaker 1: Query selector is the modern way using CSS selector exactly.
Speaker 2: Hashtag start game means find the element with the id
Speaker 2: start game. Very powerful, and then.
Speaker 1: It attaches an on click listener, so when you click the.
Speaker 2: Button, it runs the play game function. That function contains
Speaker 2: the game's logic.
Speaker 1: How does it get the user's guess using prompt again.
Speaker 2: Yes, prompt guess a number. Remember Prompt returns the typed
Speaker 2: string an empty string or null if they cancel right.
Speaker 1: And the game needs to check if the guess is right,
Speaker 1: too high, or too low using if statements yep.
Speaker 2: If guess answer too low. So on basic conditional logic and.
Speaker 1: To let the user keep guessing, a loop a do.
Speaker 2: Wile, loop dot do bake it's guests give feedback. Wild
Speaker 2: guests answer the do.
Speaker 1: Dot wile runs the code inside the do block at
Speaker 1: least once before checking the condition.
Speaker 2: Correct, which makes sense here. You always want the user
Speaker 2: to make at least one guess.
Speaker 1: And the book stress is testing trying different inputs.
Speaker 2: Crucial test guessing too high, too low, the right number,
Speaker 2: canceling the prompt, entering non numbers. See how it behaves.
Speaker 1: To get the secret number, it uses math dot random.
Speaker 2: Yeah, that gives a random decimal between zero and almost one.
Speaker 1: So you need to scale it and make it a
Speaker 1: whole number.
Speaker 2: Right, You multiply by the maximum number you want example max,
Speaker 2: usemath dot floor to top off the decimal part and
Speaker 2: then add one to get range from one to max.
Speaker 1: And the book puts this logic into a reusable.
Speaker 2: Function exactly function random max retunemath dot floor math lot
Speaker 2: ran plus one. Good practice to encapsulate logic like.
Speaker 1: That, and it warns you could accidentally overwrite built in
Speaker 1: functions if you name yours the same, like if you
Speaker 1: called your function math dot random.
Speaker 2: Well, not quite math dot random because math is an object.
Speaker 2: But if there was a global random function, Yeah, naming
Speaker 2: collations can happen, so choose descriptive names.
Speaker 1: Okay, what about when the user clicks cancel in the
Speaker 1: prompt it returns null. How does the game handle that gracefully?
Speaker 2: Using the oer operator for default values like let guess
Speaker 2: prompt guests zero.
Speaker 1: Ah, So if prompt returns null, which is falsey, the
Speaker 1: operator makes guests become zero instead.
Speaker 2: Exactly prevents trying to compare null to a number later,
Speaker 2: which would cause errors.
Speaker 1: Nice trick. Then organizing code, putting random into a separate
Speaker 1: library dot js file.
Speaker 2: Yep, creating a function library for reusable code.
Speaker 1: Good structure at comments, link it in the HTML with
Speaker 1: scripts src scriptslibrary, dot.
Speaker 2: Js and remember that cross origin attribute again if testing
Speaker 2: locally right?
Speaker 1: And the chapter ends by summing up comments, organization, loops, conditional.
Speaker 2: Dialogues, all applied in a simple working game.
Speaker 3: Okay.
Speaker 1: Chapter three and moves into manipulating the web page itself,
Speaker 1: the DOM.
Speaker 2: The document object model super important. It's the browser's internal
Speaker 2: representation of the HTML page like a structured tree, and JavaScript.
Speaker 1: Can interact with this tree change things absolutely.
Speaker 2: That's how you make pages dynamic. First step is finding
Speaker 2: the elements you want to change.
Speaker 1: We saw document dot. Query selector already finds the first
Speaker 1: match for a CSS selector.
Speaker 2: Yes, like query selector gets the first paragraph. Query selector
Speaker 2: hashtag my ideald gets the element with that id, Query
Speaker 2: selector dot my class gets the first element with that.
Speaker 1: Class, and document dot.
Speaker 2: Query selectoral that finds all matching elements and returns them
Speaker 2: as a collection a notalist.
Speaker 1: So query selectoral gets you all the paragraphs on the
Speaker 1: page direct.
Speaker 2: The book also mentions older methods like get element by eyed,
Speaker 2: get elements by tag name, get elements by.
Speaker 1: Class name, less used now, but might see them in
Speaker 1: older code.
Speaker 2: Pretty much. Query selector and query selectoral are generally or
Speaker 2: flexible because they use CSS selectors. Notice the elements plural,
Speaker 2: and the older ones often returned collections too.
Speaker 1: Okay, So if qreer selectoral gives you a collection, how
Speaker 1: do you work with all those elements?
Speaker 2: Two main ways shown A standard for loop using the
Speaker 2: length property of the noted list and accessing elements by
Speaker 2: index number. My nodalisty for the.
Speaker 1: Four each method.
Speaker 2: Yeah, often cleaner my nod list dot four each that
Speaker 2: uses an aero function as the callback. Okay.
Speaker 1: Once you found an element, how do you change its content?
Speaker 2: Two main properties dot text content and dot inner html.
Speaker 1: What's the difference.
Speaker 2: Text content gets or sets only the raw text inside
Speaker 2: an element, ignoring any HTML tags, and inner HTML gets
Speaker 2: or sets the entire HTML markup inside an element. If
Speaker 2: you set it, the browser parses the string as HTML.
Speaker 1: The book warns about security with intern HTML. Right if
Speaker 1: the content comes from a.
Speaker 2: User, big time. If a user can inject malicious HTML
Speaker 2: or script tags via inner HTML, it's a security rip.
Speaker 2: Cross site SCRIPTINGXSS. Use dots content whenever you just need
Speaker 2: to change text.
Speaker 3: Got it?
Speaker 1: Intertext is also mentioned, but text content is preferred.
Speaker 2: Yeah. Text content has more predictable behavior regarding spacing and
Speaker 2: hidden elements.
Speaker 1: Okay. What about changing attributes like the src of an
Speaker 1: image or the hrafh of a link.
Speaker 2: Often you can access them directly as properties of the
Speaker 2: element object my image dot src e wal goals new
Speaker 2: dot jpg, my link, dot HRAF equals newpage dot HTML.
Speaker 1: Simple enough. What about CSS classes?
Speaker 2: There's the older dot class name property setting. It replaces
Speaker 2: all existing classes on the element with a new string.
Speaker 1: You provide, which might not be what you want.
Speaker 2: Usually not. The modern way is dot class list. It's
Speaker 2: an object with methods like dot.
Speaker 1: Ad new class, dot remove old class, dot toggle active
Speaker 1: class exactly.
Speaker 2: Toggle adds to the class if it's missing, removes it
Speaker 2: if it's present, and dot contains some class checks if
Speaker 2: the class exists. Much more precise control.
Speaker 1: Why dot class name and class list. Why not do
Speaker 1: dot class.
Speaker 2: Because class is a reserved keyword in Javacript, its self
Speaker 2: used for defining JavaScript classes, so they had to use
Speaker 2: slightly different names for the HTML attribute.
Speaker 1: Ah okay. Now what if you want to create entirely
Speaker 1: new elements and put them on the page.
Speaker 2: You use document dot create element. For instance, document dot
Speaker 2: create element creates a new carerograph element in memory.
Speaker 1: It's not on the page yet not yet.
Speaker 2: Then need to insert it somewhere. The book shows inserted
Speaker 2: Jason element position new element.
Speaker 1: And the position can be like before begin, after begin,
Speaker 1: before and after end relative to an existing element.
Speaker 2: Correct gives you fine grain control over where the new
Speaker 2: element goes.
Speaker 1: There's also inserted Jason HTML.
Speaker 2: Yeah, that's a shortcut. You give it the position and
Speaker 2: an HTML string. It purses the string and inserts the
Speaker 2: resulting elements directly. Convenient, but you don't get a direct
Speaker 2: reference to the newly created elements like you do with
Speaker 2: create element.
Speaker 1: Key takeaway. Creating an element isn't enough. You have to
Speaker 1: explicitly add it to the dom to make it.
Speaker 2: Visible absolutely from the metal.
Speaker 3: All right.
Speaker 1: Four applies this dom stuff to build a slide show.
Speaker 2: Yeah. A practical example basic HTML, a DIFP container, maybe
Speaker 2: id slides and emptymg tag inside.
Speaker 1: JavaScript links the library dot js from before and a
Speaker 1: new slideshow dot js.
Speaker 2: And slideshow dot gs has the defer attribute on its script.
Speaker 1: Deech, meaning it runs after the HTML is parsed. Library
Speaker 1: dot js doesn't have differ.
Speaker 2: Right, implying the library needs to be ready earlier. Maybe
Speaker 2: because slideshow dot j as depends on functions in it. Yeah,
Speaker 2: and again that cross origin note For.
Speaker 1: Local testing inside slideshow dot js, first step is grabbing
Speaker 1: the container dive and the MG element using query.
Speaker 2: Selector standard practice get references to the elements you'll manipulate.
Speaker 1: Then timing, set time out and set interval.
Speaker 2: Setting out my function five thousand runs my function once
Speaker 2: after five seconds five thousand doll.
Speaker 3: Second, and set interval.
Speaker 1: My function two thousand runs my function repeatedly every two
Speaker 1: seconds exactly.
Speaker 2: Set interval is key for the automatic slide changing.
Speaker 1: So the basic slideshow logic have an array of image
Speaker 1: file names. You set interval to call a function every
Speaker 1: few seconds. That function updates the src attribute of the
Speaker 1: imag tag to the next file name in the array.
Speaker 2: Right, you need a variable, say slide number, to keep
Speaker 2: track of which image index you're currently on and increment
Speaker 2: it each time. Looping back to zero.
Speaker 3: At the end makes sense.
Speaker 1: The book then suggests making the delay configurable.
Speaker 2: Yeah, adding a delay parameter to the function that starts
Speaker 2: the slide show like does slides three thousand. Give it
Speaker 2: a default value too, So old code still works good
Speaker 2: for backward compatibility.
Speaker 1: How do you stop and start it? Like a pause button?
Speaker 2: Set interval returns a unique ID number. You store that
Speaker 2: ID in a variable. Okay, to stop it, you call
Speaker 2: clear interval the stored ID.
Speaker 1: Ah, So a toggle function could check if the ID
Speaker 1: variable holds a number, meaning it's running. If yes, call
Speaker 1: clear interval and set the variable to null exactly.
Speaker 2: And if the variables null it means it's starved, so
Speaker 2: you call set interval again to start it and store
Speaker 2: the new ID.
Speaker 1: And you'd hook this toggle function up to a button
Speaker 1: using either dot on click or event listener click.
Speaker 2: Tuggle sisely ad. Event listener is generally more flexible if
Speaker 2: you need multiple listeners on the same element to make.
Speaker 1: It feel smoother. The book suggests prefetching the next image yeah.
Speaker 2: While when image is showing, you create a new image
Speaker 2: object in JavaScript in the background like.
Speaker 1: Let next image in a new image yep.
Speaker 2: Then set it's src to the next slides url nextimage
Speaker 2: dot src images next line number. This tells the browser
Speaker 2: to start downloading it.
Speaker 1: So when set interval fires and you actually change the
Speaker 1: main images src, the image data is likely already cashed.
Speaker 2: Hopefully leading to a faster, smoother transition. Improves perceived performance. Cool.
Speaker 1: What about keyboard control?
Speaker 2: You can listen for keypresses on the whole document document
Speaker 2: dot on keypress sec event.
Speaker 1: And the event object tells you which key is pressed yes.
Speaker 2: The event dot keep property is the modern reliable way
Speaker 2: it gives you strings like body for spacebar, aerolaft, biahm,
Speaker 2: et cetera.
Speaker 1: And you might use event dot prevent default, like to
Speaker 1: stop a space bar from scrolling the page if you're
Speaker 1: using it to pause play.
Speaker 2: Exactly take control away from the browser's default action for that.
Speaker 2: Key errol functions work nicely here too, Document dot onkeypress
Speaker 2: event to make it more informative.
Speaker 1: Add captions.
Speaker 2: Yeah, change the images array instead of just file names,
Speaker 2: making an array of objects. Each object has image dot
Speaker 2: jpg caption a lovely photo.
Speaker 1: So when you change the image, you update the mg
Speaker 1: dot src, but also find a caption element like p
Speaker 1: tag and set its dot text content.
Speaker 2: Perfect, and also update the img dot alt and maybe
Speaker 2: mg dot title attributes for accessibility and tooltips.
Speaker 1: Okay, so Chapter four summary timing, set time out, set interval,
Speaker 1: controlling intervals, clearinterval, event listeners on click at, event listener
Speaker 1: on keypress, and enhancing with prefetching and captions.
Speaker 2: Putting dominipulation to work with timing and user interaction.
Speaker 1: Chapter seven then shifts focus a bit, looking specifically at
Speaker 1: interacting with CSS and event listeners more deeply.
Speaker 2: Right starts with a quick reminder CSS controls the visual appearance, colors, sponts,
Speaker 2: layout visibility, the.
Speaker 1: Animations, and it mentions that CSS handles a lot more
Speaker 1: visual stuff now than it used to, less need for
Speaker 1: JavaScript for symple effects.
Speaker 2: Definitely things like hover effects, basic animations, often pure CSS now.
Speaker 2: The chapter revisits how CSS gets included external link tags,
Speaker 2: internal style tags, or inline style attributes.
Speaker 1: Inline styles being generally less.
Speaker 2: Manageable usually yeah, harder to maintain consistency. It also teases
Speaker 2: creating style tags with JavaScript itself, which comes later.
Speaker 1: Event listeners again the bridge between user actions and JavaScript.
Speaker 1: Mentions event bubbling.
Speaker 2: Yeah, the idea that an event like a click starts
Speaker 2: with the specific element clicked the target and then bubbles
Speaker 2: up the dom tree to its parent, its parent's parent,
Speaker 2: and so on up to the document.
Speaker 1: And on click and default AD event listener listen during
Speaker 1: this bubbling phase.
Speaker 2: Correct. There's also a capture phase where the event travels
Speaker 2: down the tree first, but bubbling is more commonly used.
Speaker 2: You can listen in capture phase with AD event listener
Speaker 2: type listener.
Speaker 1: True okay, and clarifies event dot current target versus event.
Speaker 2: Dot target crucial difference. Event dot target is the element
Speaker 2: where the event originated ug The specific thing clicked event
Speaker 2: dot current target is the element the listener is actually
Speaker 2: attached to, which might be a parent element if you're
Speaker 2: using event delegation. Got it?
Speaker 1: How can JavaScript change CSS directly.
Speaker 2: Through the element's style property my element dot style dot color.
Speaker 2: It kills red my element dot style dot margin top
Speaker 2: equals ten px.
Speaker 1: So you access CSS properties as JavaScript object properties. What
Speaker 1: about properties with hyphens like background color.
Speaker 2: You can't use dot notation because the hyphen isn't valid
Speaker 2: and JavaScript identifies there.
Speaker 1: Yeah.
Speaker 2: Two ways, either use CamelCase my element dot style dot
Speaker 2: background color equals blue, or bracket notation my element dot
Speaker 2: style background color equals blue.
Speaker 1: CamelCase seems common, but the more recommended way is often
Speaker 1: using classes right via dot class list.
Speaker 2: Generally, yes, it keeps your styling rules neatly in your
Speaker 2: CSS files. Script just toggles classes on and.
Speaker 1: Off like the example. Add a listener to an H
Speaker 1: one on click event dot target dot class.
Speaker 3: List dot toggle different color.
Speaker 1: And you'd have a CSS rule like H one dot differentcolor,
Speaker 1: dot blue or whatever. Much cleaner separation of concerns.
Speaker 2: Can you remove listeners to remove event listener?
Speaker 1: Yes, but you need to pass the exact same function
Speaker 1: reference that you used with ad event listener.
Speaker 2: So if you use anonymous function like element dot ad
Speaker 2: event listener, you can't easily remove it. Not easily, you
Speaker 2: usually need to define the listener as a separate named function.
Speaker 2: First function handle click element dot ad event listener look
Speaker 2: at a handleclick, Then you can do element dot remove
Speaker 2: event listener clickcandleclick okay.
Speaker 1: CSS transitions for smooth changes.
Speaker 2: Yeah. Instead of style snapping instantly, they animate over time.
Speaker 2: You define the transition in CSS which property how long
Speaker 2: it takes duration, maybe a timing function like ease in out.
Speaker 1: Then JavaScript just changes the property value.
Speaker 2: Yep. If you have transition background color point five's ease
Speaker 2: on an element and JavaScript changes element dot style dot
Speaker 2: background color, the browser animates the color change over half
Speaker 2: a second.
Speaker 1: Can you set the transition itself?
Speaker 3: With JavaScript?
Speaker 2: You can set element dot style dot transition of course
Speaker 2: opacity ones linear and then change element dot style dot opacity.
Speaker 1: What if you change a property multiple times quickly before
Speaker 1: a transition finishes, it.
Speaker 2: Can get complicated the browser might skip intermediate steps. The
Speaker 2: book introduces the transition.
Speaker 1: Event with fires when when a.
Speaker 2: CSS transition completes, you can listen for it element dot
Speaker 2: ad event list function to run code after the animation
Speaker 2: is done.
Speaker 1: Useful for chaining animations or cleaning up. Finally, creating CSS
Speaker 1: rules dynamically advanced stuff.
Speaker 2: You can create a style element in JavaScript let style
Speaker 2: l document dot, create element style, depend it to the
Speaker 2: head yep document dot head dot a pin child style call.
Speaker 2: Then you can access its sheet property style l dot
Speaker 2: sheet and use methods like insert rule dot dynamic class
Speaker 2: coolor dot green to add CSS rules as strings.
Speaker 1: Wow. Okay, so programmatic control over styles.
Speaker 2: Powerful, but use with care. Usually managing classes is simpler.
Speaker 1: Chapter eight focuses on showing and hiding content. Uses an
Speaker 1: example page showing hiding dot HTML.
Speaker 2: Right with sections initially hidden by CSS.
Speaker 1: How do CSS hide things the display.
Speaker 2: Proper displayed none. It's the common way. It completely removes
Speaker 2: the element from.
Speaker 1: The layout, and to show it again, display dot block
Speaker 1: for block elements or display dot inline exactly.
Speaker 2: The example uses CSS rules like hide the div right
Speaker 2: after an H two, but if the H two also
Speaker 2: has the class open, then show the following div using
Speaker 2: display dot block.
Speaker 1: So JavaScript's job is just to toggle that open class
Speaker 1: on the H two when it's.
Speaker 2: Click precisely get all the h twos with query selectoral,
Speaker 2: add a click listener to each inside the listener dot event,
Speaker 2: dot target, dot class list dot toggle open, Simple and effective.
Speaker 1: The chapter then detours briefly into variable hoisting.
Speaker 3: Again just a.
Speaker 2: Reminder, var declarations and function declarations are hoisted conceptually moved up,
Speaker 2: let and com okay.
Speaker 1: Then a more complex example highlighting nested lists inside an
Speaker 1: open section.
Speaker 2: Yeah, if you click an H two to open its div,
Speaker 2: maybe you also want any o inside the parent lie
Speaker 2: of that div. To get a highlight class.
Speaker 1: Requires navigating the dom tree using parent note to go up,
Speaker 1: then query selector to find the full yep.
Speaker 2: Bit a dom traversal. Then toggle the highlight class on
Speaker 2: the nested doll.
Speaker 1: And it addresses fixing the logic so highlighting is removed
Speaker 1: correctly when the section is closed.
Speaker 2: Right, making sure the state is managed properly on toggle.
Speaker 1: Then it suggests putting this toggle logic into a reusable
Speaker 1: toggless function in library dot JS.
Speaker 2: Good practice abstracting common patterns.
Speaker 1: The chapter finishes by enhancing radio buttons, making them de selectable.
Speaker 2: Yeah, normally you can only switch radio buttons, not turn
Speaker 2: the current one off.
Speaker 1: How do you make it de selectable.
Speaker 2: Get all the radio buttons in the group agmform dot
Speaker 2: elements group name, add a click listener to each one.
Speaker 1: Inside the listener, check of.
Speaker 2: The button you just clicked event dot target was already
Speaker 2: checked before the click event fully processed. This is slightly tricky.
Speaker 2: Might need to store previous date briefly or check within
Speaker 2: the listener carefully if it was already checked. Set its
Speaker 2: jecked property to false.
Speaker 1: Ah okay allows toggling off, and this logic also gets
Speaker 1: moved to a reusable de selectable radio function in the
Speaker 1: library YEP.
Speaker 2: The chapter summary mentions using CSS display, but also maybe
Speaker 2: max height or opacity for transitions and JavaScript class toggling
Speaker 2: for show heid effects cool.
Speaker 1: Chapter nine another big project a light box gallery wreck.
Speaker 2: A thumbnail see a larger version in an overlay.
Speaker 1: Basic htmail gallery of thumbnail images, probably wrapped in anchor
Speaker 1: a tags. The A graph of the anchor points to
Speaker 1: the large image URL and.
Speaker 2: Maybe some CSS to style the thumbnails like desaturate them.
Speaker 1: Initially, the JavaScript starts with a dawn light box function.
Speaker 1: First step find all those thumbnail anchor tags using query
Speaker 1: selectorol YEP.
Speaker 2: Then dynamically create the light box elements in Java.
Speaker 1: Script a background div hashtag, light box background to dim
Speaker 1: the page.
Speaker 2: Right and a container. Maybe have a figure eyed light
Speaker 2: box to hold a big MG, and maybe.
Speaker 1: A caption u CSS to style these fixed position centered
Speaker 1: semi transparent background exactly.
Speaker 2: Then appen these new elements to the document body.
Speaker 1: How does clicking a thumbnail trigger it?
Speaker 2: Attach a click listener to each thumbnail anger inside the.
Speaker 1: Listener first event dot, prevent default to stop the link
Speaker 1: navigating crucial.
Speaker 2: Then get the ape ref from the clicked anchor, which
Speaker 2: is the URL of the large image.
Speaker 1: Set the ASRC of the light box's MG element.
Speaker 3: To that r right.
Speaker 2: Maybe set the alt attribute to Then make the lightbox
Speaker 2: visible by setting the display style of the background and
Speaker 2: the container to block.
Speaker 1: How do you close it?
Speaker 2: Add a click listener to the background div when clicked,
Speaker 2: set the display of the background and container back to none.
Speaker 1: Keyboard navigation, escape key to clothes, arrow keys to go next,
Speaker 1: previous listen for.
Speaker 2: Key up on the document, use event dot key.
Speaker 1: In a switch statement case escape dot hide, light box,
Speaker 1: break case arrow left, show previous image, break.
Speaker 2: Like that exactly. Home key for first image and key
Speaker 2: for last How does.
Speaker 1: Show previous image. Work needs refactoring.
Speaker 2: Yeah, The book suggests storing a reference to the currently
Speaker 2: shown thumbnails anchor tag. Let's call it current anchor okay,
Speaker 2: and create a separate load image anchor to show function.
Speaker 2: This function takes an anchor element, gets its ATRAF, sets
Speaker 2: the light box image src, maybe updates.
Speaker 1: A caption so the errorkey listeners just figure out the
Speaker 1: next or previous anchor element in the dom.
Speaker 2: Using things like current anchor dot parent, noode dot, previous
Speaker 2: elements sibling, or next element sibling to find the sibling
Speaker 2: a's parent, say maybe, then the next prey sibling then
Speaker 2: it's child A.
Speaker 1: And then call load image with that new anchor element.
Speaker 2: Precisely need to handle wrapping around at the start ten
Speaker 2: of the gallery. Two.
Speaker 1: What about ensuring the image is loaded before showing mg dot.
Speaker 2: Onload Yes inside load image before setting the light box
Speaker 2: displayed a block, You could set the mmg dot src
Speaker 2: that attach an onload listener to the image inside the
Speaker 2: onload handler. You then make the light box visible prevents
Speaker 2: showing an empty box.
Speaker 1: Adding fade effects CSS transitions on opacity.
Speaker 2: Yeah, add a CSS transition rule for opacity to the
Speaker 2: light box container. Or image.
Speaker 1: Then in JavaScript, when showing, after setting the iss and
Speaker 1: maybe inside the onload, add a class like open that
Speaker 1: sets opacity one.
Speaker 2: Right, and when hiding, maybe add a closed class that
Speaker 2: sets opacity zero. Wait for the transition using transition door,
Speaker 2: set time out, and then set display none.
Speaker 1: Nice. The chapter also revisits the slide show to add
Speaker 1: a cross fade.
Speaker 2: Briefly, yeah, more complex. Setup two mm and tags one
Speaker 2: on top of the other. Hashtag cross fade absolutely positioned
Speaker 2: inside a relative container.
Speaker 1: CSS transition on the opacity of the top image.
Speaker 3: Hashtag crossfait right, triggered.
Speaker 2: By a class, say fading, which sets opacity the JavaScript logic,
Speaker 2: copy the current images src to hashtag crossfade, make sure
Speaker 2: hashtag cry sat opacity is one, then add the fading
Speaker 2: class to start the fade out of the top image.
Speaker 1: Okay, revealing the main image underneath.
Speaker 2: Well almost. After adding fading, you wait for the transition
Speaker 2: duration for example using set time out. Then you update
Speaker 2: the main underlying mag tag with the next slide's src,
Speaker 2: and finally reset the hashtag cross fade image, Remove fading,
Speaker 2: maybe copy the new main image src to it ready
Speaker 2: for the next fade. It's a bit fiddly, might need
Speaker 2: to force a reflow sometimes too.
Speaker 1: Sounds complex but creates a nice effect.
Speaker 3: Okay.
Speaker 1: Last chapter covered Chapter ten introduction to.
Speaker 2: AJX, a syncretist JavaScript and XML. They're now mostly Jason.
Speaker 1: The key idea fetching data from a server without a
Speaker 1: full page reload.
Speaker 2: Exactly makes web apps feel much more responsive like desktop applications,
Speaker 2: think dynamic updates, loading content on demand. The previous projects
Speaker 2: already did a simple version by fetching images.
Speaker 1: It mentions the shift from the old XML HTTP request object.
Speaker 2: To the modern fetch API, using the fetch function much
Speaker 2: cleaner syntax.
Speaker 1: The big challenge is handling the asynchronous part. JavaScript doesn't wait.
Speaker 2: Right fetch and JavaScript immediately moves on to the next line.
Speaker 2: The server response arrives later.
Speaker 1: How do you handle that delayed response?
Speaker 2: Promises Yes, fetch returns a promise object. A promise represents
Speaker 2: the eventual result of an asynchronous.
Speaker 1: Operation, and you use dot then to say what should
Speaker 1: happen when the promise resolves, I e. In the server response.
Speaker 2: Exactly fetch my data dot Jason that handle response. Handle response.
Speaker 2: The function inside only runs after the response arrives, and.
Speaker 1: The response object isn't the data itself, yet no, it.
Speaker 2: Represents the HTTP response. You need to call methods on
Speaker 2: it to extract the body data like response dot text
Speaker 2: or response.
Speaker 1: Dot json, and those methods also return promises because reading
Speaker 1: the body can also take time.
Speaker 2: Correct so you often chain dot then calls dot fetch
Speaker 2: data dot json, dot evil, then data out out data
Speaker 2: holds the part Jason objectory.
Speaker 1: Okay, that structure makes sense, and Jason is the common data.
Speaker 2: Format very common JavaScript object notation, human readable text format
Speaker 2: that looks just like JavaScript objects in arrays, easy for
Speaker 2: JavaScript to parse, easy for servers to generate.
Speaker 1: The chapter shows fetching a slides dot json file an
Speaker 1: array of image objects.
Speaker 2: YEP src, MMG one dot jpg caption. First netch uses
Speaker 2: fetch and json to get this array into a JavaScript variable,
Speaker 2: and then.
Speaker 1: Uses this data to dynamically build the light box gallery exactly.
Speaker 2: Instead of having the HTML hard coded, it loops through
Speaker 2: the fetched deray. For each object, it creates the A
Speaker 2: and MG elements using maybe insert adjason HTML.
Speaker 1: Puts them into a containertiv hashtag catalog.
Speaker 2: And then calls the do light box hashtag catalog function
Speaker 2: we discussed earlier to make the newly created thumbnails.
Speaker 1: Interactive, so the gallery content comes from the server on demand. Cool.
Speaker 1: Final example populating a form with fetch data.
Speaker 2: Yeah, an HTML form with outputs and a select drop down.
Speaker 1: Step one fetch a list of countries, maybe IDs, and
Speaker 1: names from the server as JSON.
Speaker 2: Right loops through the fetched de array and dynamically create
Speaker 2: option elements, adding them to the select dropdown.
Speaker 1: Step two add an event listener to the select element.
Speaker 1: When the user chooses a country.
Speaker 2: The listener triggers another fetch request, this time asking the
Speaker 2: server for detailed data about the selected country using its ID.
Speaker 1: Step three. When that detailed data arrives, another promise resolution.
Speaker 2: The JavaScript updates the output fields in the form output, span, etc.
Speaker 2: With its specific details continent, currency, whatever.
Speaker 1: So the form populates dynamically based on user selection, fetching
Speaker 1: only the data needed.
Speaker 2: Exactly, a very common pattern in modern web applications.
Speaker 1: Wow okay, So wrapping this up, we've really gone from
Speaker 1: the absolute basics variables syntax.
Speaker 2: Through manipulating the page with the DOM, handling user.
Speaker 1: Events, interacting with CSS for styling and transitions.
Speaker 2: All the way to asynchronously fetching data from a server
Speaker 2: using ajax and fetch. It's quite a journey.
Speaker 1: It really lays the groundwork for understanding how modern interactive
Speaker 1: websites are built. JavaScript is just everywhere under the hood.
Speaker 2: It's incredibly powerful and versatile. This teep dive gives you,
Speaker 2: hopefully a really solid conceptual map.
Speaker 1: Absolutely and if you want to go deeper, definitely experiment
Speaker 1: play with the code. The book mentions resources like MDM,
Speaker 1: webdocs and stack.
Speaker 2: Overflow indispensable resources for any web developer.
Speaker 1: Cannot recommend them enough for sure, So as we finish,
Speaker 1: here's something to think about. This ability for a webpage
Speaker 1: to change itself dynamically, to talk to servers without reloading
Speaker 1: it fundamentally changed the Internet, didn't it completely.
Speaker 2: It's the foundation of web applications as we know them.
Speaker 1: So consider how this power continues to evolve. What new
Speaker 1: kinds of interactions, what new online experiences might this dynamic
Speaker 1: capability make possible in the future.