JavaScript in Half an Hour (Without jQuery!)
- December 25, 2023
- Posted by: MainInstructor
- Category: BASIC Go Java JavaScript Node
Video Title: JavaScript in Half an Hour (Without jQuery!)
Green’s hello everyone in this video we are going to learn the very basics of JavaScript there’s no prerequisite knowledge required other than maybe an ounce of HTML and an ounce or two of CSS but anyways let’s get started by taking a look at a demo of the finished product
That we will be building together so here’s my example page we see this headline reads click a list item to replace this text and if I click on the first item we see that that updated the headline text and it selected the first item with a beige background and we can
Click on any of the other items and the same thing happens this next part of the video is for when you’re adding new items to a list with this button whatever let’s get it another one another one another one and another one and as you might expect we can then
Click on any of those dynamically generated items and they behave the same way this example project may not seem very impressive but it should give us the basic building blocks of front-end JavaScript and then you can recycle those building blocks to create anything you want anyways let’s get started let’s
Get height so behind the scenes I just deleted all of the JavaScript from the page so now all I have is a bare-bones super basic HTML file with just a tiny bit of CSS applied to it which means at this point you can create a simple HTML
File on your computer and follow along now before I even jump to my text editor let’s begin by writing a bit of JavaScript directly in our web browser so to do that we can just right click anywhere on the page and click inspect that will open your developer tools and
Then I want you to click on the console tab now I’m using Google Chrome for my web browser but Firefox and pretty any other modern browser will have these same developer tool features anyways from this console screen we can begin typing or writing JavaScript so for
Example if I type 2 plus 2 and hit Enter or return JavaScript will do the math for us Thank You JavaScript you’re a genius or we could type 5 times 5 and hit enter you get the idea now nothing we write in the console here will be saved permanently
It just runs in the browser’s memory and will be lost as soon as we refresh the page so we tried two plus two now let’s try something a bit more interesting so the web browser itself has a bunch of features and abilities and we can access all of them with JavaScript for example
The web browser has an object named window and the window object basically contains everything that the web browser is capable of doing so if you think of Russian stacking dolls the window object is like the largest outermost doll everything is contained within it now in this lesson we’re interested in another
Object that lives inside window that is named document to access the document object we could type window and then go within it with a period and then type document but because window is the root object it’s basically assumed it kind of goes without saying so we don’t need to
Actually type window we can just type document now the document object contains all of the info about the current web page that we’re viewing it’s a programmatic model of the page so we can click on this to inspect it or analyze it and here we see the HTML
Skeleton of the page and manipulating this document object with JavaScript is how we make our pages come to life so for example notice the title of this web page in the tab for this page we see that the title is JavaScript we can double check that in my text editor here
We see the title that I have specified now we can programmatically access that title with JavaScript by typing document dot title and we can even take things one step further and change the title so we could say document dot title equals testing one two three and now
Notice the title of the page all right now let’s try something a bit more advanced let’s try to do something with this h1 headline element so let’s begin by jumping into our HTML and giving that element a unique ID so that we can easily select it with JavaScript so
Let’s give it an ID of our headline and now if we jump back to the console and refresh the page we can select that headline element by starting with the document object and then looking inside it for a method named get element by ID and then open up a pair of parentheses
And then open up a pair of quotes and within the quotes we just list the name of the ID that we’re looking for so our headline and then press Enter so the console responds by echoing out that h1 element but you’ll notice that if I hover over it in the background
Chrome is highlighting the relevant element okay so now that we know how to select an element with JavaScript let’s go one step further and once an element is selected let’s do something with it so let’s select the element again document get element by ID our headline and then we can simply adjust that
Elements enter HTML property so we can set it to equal this is a test and when I hit enter we see that the headline is updated now let’s imagine we want to change this headline text again now I don’t know about you but I’m sick of typing out document.getelementbyid our
Headline that’s a lot of typing and it’s getting repetitive so what we can do instead is create a variable that we can reuse to create a variable we just type var for variable and then we come up the variable name we can name anything we’d like let’s call it our and then
Uppercase H headline and let’s say that this variable equals document and then let’s just select it so get element by ID our headline okay so now whenever we want to do anything to the headline element instead of manually typing out the selector we can just type out our
Variable name so if we want to change this headline text once again we can just say our headline and then adjust its inner HTML property and let’s say testing once again and there we have it so at this point we have a general understanding of how Java Script can
Manipulate the page I think now is a good time to move out of the console and into our text editor where we can actually create and save a Java Script file so within this example folder that I’m working in I’ll create a new folder you don’t need to do this I’m doing it
Just to stay organized but I’ll name this new folder js4 JavaScript and then within that new folder I’ll create a new file you can name the file anything you’d like I will name my file main jas and then back in our HTML file right before the closing
Body tag let’s say script and let’s give the opening script tag a source attribute just point towards that new file so in my case go into the J’s folder and grab main jas alright let’s begin by writing code that will watch for any of these list items being
Clicked on and when they are clicked on will update this headline text to use the text from the item that got clicked on so to do that we’ll need to begin by selecting all of the list items so in our JavaScript file why don’t we create a variable that will save the selection
Of all of the list items so var and let’s name the variable list items now we know how to select a single element by ID we say document.getelementbyid e but how do we select multiple elements well instead of this method name there’s another one named get elements plural by
Class name but then we need to go into our HTML and give each of these list items a class and I think we can find a cleaner way of handling this so instead why don’t we just give the parent unordered list item a unique ID let’s go
With an ID of our list and then back in our JavaScript we can begin by selecting the unordered list parent element so get element by ID our list and then we can chain on another method that will look within this element we can say get
Elements by tag name and look for any Li list item elements okay so now we have a variable that is a collection of all of our list item elements so this single variable contains all five of these elements so in the console we can type our variable name list items and we can
See that it’s an array like object or a collection of elements and we can access individual items in this collection by typing the variable name so list items and then open up a pair of square brackets and if we want to access the first item in the collection we enter a
Zero because arrays are zero based so we say zero instead of one so that returned the first item and if we wanted to return the second item we would just say one if we wanted the third item we would say two so on and so forth so the
Question now is how can we do something to each item in our collection so just as an example let’s say we want to change the text for all five items to simply be hello world well we can’t just type list items and then change its inner HTML property so we see that that
Didn’t do anything and that’s because our list items variable isn’t pointing towards an element instead it’s a Co action of references to five different elements so instead we would need to access each item in the collection individually so we would need to say list items and select the first item in
The collection and then adjust its innerhtml so we see that that did work and then we would need to do the same thing for the second item so change that to a one you get the idea but we need to ask ourselves do we really want to do
That five times and the answer is no we don’t want to do that it’s too much typing and it’s really repetitive instead we can have Java Script loop through our collection automatically and do something for each item in the collection so to set that up we can use something called a for loop
So let’s jump back to our text editor and in our JavaScript file let’s write our first for loop so on a new line let’s say for and then open up a pair of parentheses we will write a bit of code within these parentheses in just a
Moment but for now let’s leave it blank and then let’s add a pair of curly brackets and in between the brackets let’s drop down to a new line to stay organized now we know that we can access an element in our collection by saying list items and then if we wanted the
First item we would say brackets 0 if we wanted the second item we would say 1 if we want the third item we would say 2 so wouldn’t it be nice if instead of hard-coding a number here we could just include a dynamic variable that gets incremented by 1 each time the loop
Repeats itself so check this out once we select a hypothetical element in our collection then let’s just say that we want to adjust its inner HTML to say hello world so now all we would need our for loop to do is have I equals 0 at first and execute this code and then
Increment the I variable to be 1 and then run through the code again and then increment I variable to be 2 and then 3 and then 4 you get the well that’s exactly what we do within the parentheses of the for-loop so let’s begin by saying that our dynamic I
Variable should start out as 0 and then add a semicolon and now we want to tell our for loop how long it should run or in other words how many times should it repeat itself so we could just say we want it to run as long as our I’ve area
Belleza 5 because we know that there are 5 elements in our collection but what if down the road there was 6 or 7 or 8 or 9 so instead of hard-coding this number value here instead we can have javascript count how many items are in this collection so we can just say that
The for loop should keep repeating as long as I is less than list items dot length let’s add a semicolon and then remember how we said that we want this eye to increment by 1 each time the for loop repeats so first it would be 0 and
Then 1 2 3 4 well towards the end of our parentheses here we just say I plus plus which will increment the I variable by 1 each time the loop runs so let’s go ahead and save this and refresh in the browser and we see that our for loop
Worked perfectly this is great but remember that this was just an example we didn’t actually want to change the text to hello world what we really wanted to do was have each item be on the lookout for being clicked on so let’s make that happen now back in our
Text editor so we don’t want to edit the HTML for each item in our collection so this code will select each element in our collection and to tell the element to be on the lookout for incoming clicks we can use a method named add event listener now within these parentheses
This method takes two arguments the first argument is the name of the event that we’re looking for so in this case that is click and the second argument is what we want to happen once the element is clicked on so we just type out the
Name of a function that we want to run in response to the click let’s call a function named activate item alright now I just made this function name up as of now this function doesn’t exist so now let’s create it so down on a new line if
We want to create our own new custom function we begin the line by saying function and then the name of the function we want to create so activate item pair parenthesis and then a pair of curly quotes and anything within these curly quotes is the body of the function
So it’s what will actually happen when this function runs so just as a test let’s simply alert out a popup message that says click detected so let’s check this out in the browser so when I click on one of these items here is the click detected pop-up and I can click on
Another one so I’ll click on the last item and once again it’s working as expected okay so now we’re successfully detecting clicks on these list items now let’s remember what we actually want to do when they are clicked on so we want to update this headline text with the
Text from the list item that just got clicked on so let’s jump over to our JavaScript and make that happen so up at the very top of our file let’s create a variable that selects the headline element so let’s say var our headline we could have named the variable anything
That we’d like but then we just select the element so let’s say document get element by ID and if I jump over to my HTML remember that that element had an ID of our headline all right so with this variable in place now let’s work on
The body of this function so when a list item gets clicked we don’t want to alert a popup message instead we want to do something to the our headline element and what we want to do is adjust its inner HTML so let’s set it to equal the
Inner HTML of the list item that just got clicked on now JavaScript makes our lives very easy here because JavaScript has a keyword named this and JavaScript automatically populates the this keyword with a reference that points towards the specific element that got clicked on and
Then we just want to find its inner HTML property all right let’s save this and test it out in the browser so if I click on the second item perfect and if I click on any of the others it works just as expected excellent now next let’s set up this button so
That when we click on it it actually adds a new item to our list so to make that happen back in our JavaScript let’s begin by creating a variable up at the top that selects that button element so var let’s name the variable our button and before we actually select the
Element why don’t we jump in to our HTML and give that button element a unique ID so we can select it our button okay so this is the ID that we’re looking for so back in our JavaScript we can just say document get element by ID our button
Alright so with this variable in place now down on a new line we can begin with our button and tell it to be on the lookout for any incoming clicks so we know that we can use the method named add event listener and it takes two arguments remember the first is the
Event that we’re looking for or listening for so in this case that’s a click event and then the second argument is the name of the function that we want to run in response so in just a second here we’ll create a new function let’s name it create new item alright and now
Let’s drop down to a new line and actually create this function so function create new item and what do we want this function to actually do well we just want to add new HTML to this unordered list so if we want to manipulate this unordered list we should
Probably create a variable that selects it so before we write this function let’s go back up to the top of this file and let’s create a variable and name it our list and if we jump to our HTML we will remember that we gave our unordered list an ID of our list so
Let’s just select that so document get element by ID our list all right so with this in place now let’s actually build out the function that runs when we click on the button so we want to begin with the our list element and we want to manipulate its inner HTML property now
We don’t just want to set its HTML to equal something new because that would erase or wipe out all of the existing list items so instead of resetting this inner HTML property with an equal sign we can append something new to it we can
Add on to the end of it by saying plus equal sign so let’s save this and test it out in the browser so when I click on the button we see something new and we can click on it again and again and again let’s go back to our JavaScript
And fine-tune things a bit so we want to make sure that this text we’re adding is wrapped in a list item tag so that looks a little bit better and just for fun why don’t we have it increment and say something new one something new tube
Something new 3 so to do that back in our JavaScript up at the top why don’t we create a variable and name it new item counter and just set it to equal 1 and then down within our function that creates each new list item after we output the opening list item tag and
Something new let’s add a closing quote and then in JavaScript we can concatenate additional content to this string by using the plus symbol and then let’s just output our new item counter variable and then we want to add on our closing list item so another plus symbol
Opening quotes and then once this line of code completes we can simply increment our new item counter variable by 1 so you can just say new item count plus plus so let’s save this and test it out something new one something new to something new three it looks like we’re
Missing a space in between new and the number so let’s just add a space here perfect all right and finally let’s make it so when we click on a list item it becomes highlighted with the yellow or beige background color we saw in the demo so back in our JavaScript remember
This is the function that runs when a list item gets clicked on so after this line of code let’s drop down to a new line and remember we can access the element that just got clicked on by using the this keyword and if we want to give this element a beige background
Let’s just give it a CSS class that adjusts the background color so we start with this element and then we can use a method named class list and then we want to add a class so we say dot add I already have a CSS class named active that includes a beige background
Declaration so let’s save this and test it out perfect but you’ll notice that if I click on other items now they’re all beige so we want it so that when you click on one item it becomes the only highlighted or active item so back in our JavaScript before we add the class
Of active to the element that just got clicked on we should first remove the class of active from all of its sibling elements now we already have a variable that is a collection of all of the list item elements so if we want to do something to each element in that
Collection if we want to remove the class of active from them we can use a for loop now we’ve already written a for loop that iterates over the list items collection so let’s just copy and paste this for loop and then let’s paste our clipboard on this new line only in this
Case instead of adding an event listener we just want to remove a CSS class from each element so we start with the element and then we will adjust its class list and we want to remove a class named active so let’s save this and test it out in the browser perfect
So now only the item that I just clicked has the beige highlight let’s change gears a bit now so I purposely saved a problem for our final topic in this video so notice if I use this button to add a new item and then click on that new item nothing happens
This is because the new item that I’m clicking didn’t exist when the page first loaded and we initially created our variable that’s a collection of all of the list items so in other words the new items that are dynamically generated by JavaScript they didn’t exist when we created this variable this collection of
List item elements and so that means they never had any event listeners assigned to them they don’t know to be on the lookout for incoming clicks now this act of event handling for hypothetical elements that might exist in the future is commonly referred to as event delegation there are many
Different ways to handle this situation but let me show you how I would do things so instead of looping through our list items collection and adding an event listener for each and every item let’s actually go ahead and delete this for loop and instead let’s just add one
Single event listener for the parent unordered list element so we already saved a selection to that element in our our list variable so we have that now let’s add on an event listener so add event listener we want to be on the lookout for any click events and when a
Click is detected we want to fire the activate item function so now clicking anywhere within the entire unordered list element will trigger this function but we only want this code to run if we actually clicked on a list item element so what we can do is wrap this code that
I have highlighted within an if statement the easiest way to do that would probably be to just cut and paste this content to our clipboard so let’s cut it and let’s create an if statement we will write a bit of code in these parentheses in just a few
Seconds but after the parentheses we’ll open up a pair of curly brackets drop down to a new line between the brackets and now we can paste back in our clipboard all right now within these parentheses we’re going to say that only if the actual specific element that was
Clicked on was a list item element only if that is the case do we want any of the code within these brackets to run now our event listener passes along all sorts of information about the click event that just happened and all we need to do to access that information within
Our function is just add a parameter within our functions parentheses we can name the parameter anything we’d like I’ll just call it E and now within our if statement we can say only if the target of the event that just occurred and the target is the specific element
That got clicked on so only if that had an element type or a node name of list item do we want any of this code to fire and we will also want to update this highlighted code a bit because the this keyword in this context will point
Towards the element that we assigned the event listener to which is now our parent unordered list so on this line right here if we want to refer to the actual element that got clicked on instead of the this keyword we can use a target and we’ll want to do the same
Thing on this line so instead of this we’ll say e dot target and finally this bit of code that removes the active class from all sibling elements we want to update it a bit because we don’t want to rely on our list items variable because the collection of elements in
This variable becomes outdated as soon as we use our button to add new elements to the page so we can just swap out list items here with a reference to the element that got clicked on so e dot target and then we want to select that elements parent element the unordered
List so dot parent node and then we want to select all children of element because that will give us all of the list item elements and then again on our next line of code we want to replace this reference to the list items variable so to avoid extra typing let’s
Just copy and paste this selector that will give us all sibling list item elements so copy that to my clipboard and then delete list items and then just paste in my clipboard all right now let’s save this and test it out in the browser so things are working as
Expected and if we add several new items and then click on them things are still working as expected perfect and that’s going to bring this lesson to a close but before I go I want to share a really quick tip for selecting elements in JavaScript so if your website’s audience
Primarily uses modern web browsers instead of using these cumbersome get element by ID and get elements by tag name modern browsers offer methods named query selector and query selector all so for example if we wanted to select the element that has an ID of our list instead we could say document dot query
Selector and this method allows for selectors that look like simple CSS or jQuery selectors so we can just add a pound sign to indicate that we’re looking for an ID and that’s it if you were looking for a class you would use a period instead of the pound sign so
Query selector lets us select a single element what if we want to select multiple elements or collection of elements well we ended up not using our list items variable but let’s just try this as an example so instead of first selecting the element by ID and then
Narrowing it down by tag name you know that’s a bit verbose and cumbersome instead you could just say document query selector all include a pound sign to look for an ID say our list and then you can create a descendant selector by just adding a space just like in CSS and
Then find any list item elements anyways that’s just a quick tip at the end here about query selector and query selector all if your audience primarily uses modern web browsers I would go ahead and start using these today all right that’s going to bring this lesson to a close in our next JavaScript
Video we’ll learn about object-oriented JavaScript we’ll learn more about what an object really is how to create our own objects and blueprints for objects and we’ll learn why object-oriented programming is so useful in the first place thank you so much for watching I hope you feel like you’ll learn something
And I’ll see you in a new video next Tuesday if you haven’t already be sure to check out my brand new get a web developer job mastering the modern workflow course as always there’s a link to it in the description
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Hi man am a not native english and what amuse me that i Can understund you than othor i like your english and speaking slowly and choosing simple word instead prasal verb or slang tank in advance and i want to bé a killer JavaScript full stack
Hi. Can you make a video teaching about crud calendar with WordPress
Another great video that has helped me tremendously, thank you so much.
there is a cat at the beginning so this oughta be good
One of the best tutorials on beginers JavaScript. Loved it!
Cheers mate!
wow great video :))
Very concise. Excellent
You are an amazing gifted teacher!!! Subscribed.
What I really like about this tutorial is that it shows how JS interacts with HTML/CSS. Some tutorials have you just writing JS and it's hard to imagine how it applies to an actual website; you end up feeling like you're just learning party tricks.
This video needs update. … Great explaination.
As a new student of web dev, I WISH I had found this before starting Javascript a few weeks ago! You make it so clear. Thank you.
This is exactly what I was looking for.
Man, this is a great explanation of how to manipulate html with Javascript, but for Me, who have solved complex algorithms with javascript,I know object-oriented programming and I've made 5 projects with react, but never used vanilla Js for Html manipulation. What do you mean 'You can know only Html and Css' to watch this tutorial? If i didn't have solid programming background I would think I am stupid with this tutorial. You believe someone who knows only 'Html and CSS' as you say knows for example what Arrays and loops are? He will believe that he is stupid!! AGAIN, I have to say that the tutorial is perfect for me who knows programming and thank you for that, my point is that it is not for noobs.
Really like the tutorial videos. Only thing on this video you could have done is explain how to add to the array, instead of just adding to the HTML list items. Based upon my programming experience you were not adding to the array in the function, just adding to the list. If you had added to the array (at the point where you said "I purposely saved a problem… (24:41)" , it seems it would have made changing all of the other code unnecessary.
@ 16:29 how that event listner inside the for loop is executing multiple times it should work only once an when javascript first loads . sir pls help
your videos are enjoyable. good job
Thanks boss
Aren't you the one, who also runs the channel 'Stated clearly' ? (Your voice sounded familiar) 🙂
Great teaching
You are just an Excellent Teacher. Thank you for clearly explaining everything.
😲 wooww!! I found the perfect instructor!!. Thank you so much!! I enjoy your video. I was having issues learning JavaScript and after watching your video everything seems a little clear. I can see the horizon of opportunities. Thank you!!!
I appreciate your teaching style. I've been looking for practical examples of using javascript and how that looks in real time as opposed to simply going through tutorials with no resl life reference to tie them back to.
thank you, nice.
Amazing tutorial! Thank you.
At 10:09… array only lists actual “li” and not actual list items. What am I missing?
{2021-09-07}
How does one jump from the Console to the Html page? (3:55) I am just using the Chrome start up page.
You're one of the best instructors I've ever been taught by
This is called real knowledge. Thanks a lot.
Just paused the video to tell you that you are really good. The way you explain is so easy to follow. And this particular tutorial teaching how javascript works by showing us on the console is huge. This is the first tutorail i have seen doing this parallel with the console, making it so cristal clear, even the console make sens now 😀
For 7 minutes I have learned more than I did for 3 months. THANK YOU!!!
Please, do more videos – SQLite, PHP, I saw you don't have those; if you can of course.
Actually this tutorial must be named as , Javascript in 15minutes (without Jquery)…
just kidding good explaination Brad thank for this wonderful tutorials.
Thanks for sharing knowledge… 👍
I love your way of your teaching technology from back to advanced ✅
This video taught me a lot… Even after 4 years I still find it useful!
You are so good at teaching – you need a noble peace prize! 😀
it would be great if you could let us take a peek at the CSS. It's what makes the page look nice.
Very nice explained… ❤️
Your way of teaching is best I was tired of the java tutorials you made my mind very clear
Thank you very much😊
Dude, I just subscribed to your channel. You're great, thank you!
great tutorial! simple and good for first steps in js! THX
18:37 why you declare variable always at the top of document? is that some js rule?
I want to run JavaScript file placed within the script tag inside HTML file.
I want to use VS code and google Chrome.
Please list down the steps?
Windows 10
Thanks
Thanks so much.
Excellent! Thank you 👏
which editor you are using?
You might be the best teacher, I have listened so far, you got a very good method of explaining or teaching and I will be very happy to subscribe to your channel, thanks.
Please expound on modern browsers.