JavaScript in Half an Hour (Without jQuery!)

Поділитися
Вставка
  • Опубліковано 26 лис 2024

КОМЕНТАРІ • 765

  • @sanjaybhatikar
    @sanjaybhatikar 4 роки тому +5

    This is one of the most elegant tutorials on Javascript on the web. Thank you for the cat.

  • @Douglaswebdesigns
    @Douglaswebdesigns 8 років тому +4

    Cannot iterate how well your tutorials are. Exactly the right amount of information, placed at the exact time needed without any bloated nonsense or self-hype. Great work, you are constantly refining your obvious gift for teaching.

  • @mrchedda
    @mrchedda 5 років тому +1

    Finally. A no frills tutorial where the dude doesn't feel the need to put his face on the screen! You show the 'dumb' way and then the 'smarter' way. Teaching the basic rudimentary syntax, then prudently refactor. I think that's a great way for people to learn. Keep it up! You've gained a sub!

  • @PSGirl23
    @PSGirl23 6 років тому +14

    You’re a phenomenally concise and friendly teacher! Thank you!

  • @Clifton100
    @Clifton100 6 років тому +1

    I've never seen a javascript tutorial so easy to understand. This guy is a teaching genius.

  • @techtipsuk
    @techtipsuk 8 років тому +43

    Really love your tutorials. Not just saying this but they're some if the best I've watched. You just make everything super easy to understand.
    Perfect pacing for me.

  • @michaelolz
    @michaelolz 7 років тому +1

    I'm a bit blown away because you really did explain all the basic JavaScript elements in about half an hour. Thanks for doing this! Really helpful.

  • @nishad3445
    @nishad3445 8 років тому +45

    excellent video man. kept everything consice and to the point. We need more tutors like you!

  • @inthetube9682
    @inthetube9682 5 років тому +7

    this was the best JS beginner tutorial I seen so far, you make it interesting since you show what can be done with JS. Keep up the good work.

  • @CanadianPenny
    @CanadianPenny 2 роки тому +1

    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.

  • @DanielKhoe
    @DanielKhoe 7 років тому +1

    Here's the css:
    .active {
    background-color: beige;
    }
    #our-button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    }
    h1 {
    font-family: sans-serif;
    }
    li {
    width: 420px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid lightgrey;
    }

  • @ga7853
    @ga7853 7 років тому +27

    Your tutorial was great, you have a unique way of explaining JavaScript, you should mention your name, because it will be remembered and people will really be mentioning it.
    Thanks for great tutorial, and wish you produce more.

  • @clozeone
    @clozeone 6 років тому

    I had studied js, html and css before coming to this video and I just couldnt't quite connect how they worked together. This was explained from exactly the right angle. Thank you very much.

  • @cosyspot
    @cosyspot 5 років тому

    This is the kind of video I would mark as 100% , very clean , bright, and easy to follow . WELL DONE.

  • @kavon9748
    @kavon9748 3 роки тому

    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 :D
    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.

  • @edwardjelliffe1154
    @edwardjelliffe1154 7 років тому

    You're the first person who's been able to explain this in a way that makes sense to a total beginner, good work, and thanks!

  • @philipeleanya9244
    @philipeleanya9244 5 років тому

    Very clear, clean and precise teaching. Just wow. If you don't understand his teaching then coding is not for you.

  • @danielsantucci1494
    @danielsantucci1494 4 роки тому +1

    finally i found a Js. Tutorial that is easy to watch and friendly to my ears. good job. Hello from Venezuela

  • @General_Aladeen
    @General_Aladeen 7 років тому +1

    Thank you, this is what beginners need to learn first instead of bulky frameworks. Native JS is awesome.

  • @warrenmoore135
    @warrenmoore135 7 років тому +1

    "whatever...let's get it...*click* another one...*click* another one" lol idk why this was so funny to me. subscribing. suuuuper simple in how this is explained. he has a gift

  • @cristianmiranda4938
    @cristianmiranda4938 6 років тому +2

    I'm not really a cat person but that cat in the intro was the cutest thing i've seen in all day. Sorry for my english. Hi from Chile.

  • @robertb7362
    @robertb7362 7 років тому +2

    Hey Sir. Just would like to drop a note here for you to let you know that you have been helping me a lot with your videos. Please keep it up this channel. I really appreciate the time and effort you put it in. I believe teaching others is not always about the money but the feeling of doing something good for others.

  • @Jaydeeofficial
    @Jaydeeofficial 7 років тому

    i never understood coding and always avoided it. but after watching this video, i feel like maybe i can code too. thank you so much. you're a great teacher.

  • @scudmcfox9415
    @scudmcfox9415 5 років тому +3

    one of the best tutorials if ever seen 👍 really good description and step by step with all necessary hints 👍

  • @angeliquefm
    @angeliquefm 2 роки тому

    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.

  • @EvaRadio
    @EvaRadio 7 років тому +1

    You did such a great job. I took Java last year but that was horrible so going towards webdev has been more fun. Thank you for having a mini project and not just endless information. More please

  • @masterkrpto
    @masterkrpto 8 років тому +2

    Subscribed and bought your Udemy course! Your explanations are so amazingly easily explained, even my toddler would understand (lol) Thanks Brad!

  • @artham20
    @artham20 5 років тому +2

    I purchased a bunch of courses but your tutorial cleared so many questions I had, excellent way to explain the principles thank you very much.

  • @ClayAsbury122
    @ClayAsbury122 6 років тому

    You are really gifted at explaining this. Never seen a practical JS tutorial presented so clearly. Thank you!

  • @selenewaide8994
    @selenewaide8994 7 років тому +7

    Brilliant tutorial, I love the style, really thorough and well planned lesson.

  • @d.brilliant5092
    @d.brilliant5092 7 років тому +1

    I like your simple and clear language, and most of all, I REALLY LOVE YOUR CREATIVITY!!!!!!!

  • @alevanpa1
    @alevanpa1 8 років тому

    I second Fernando Goya's emotion. Great stuff. I have used JavaScript in the past, and this refreshed some forgotten things. Thanks for posting.

  • @block_chain
    @block_chain 4 роки тому

    The way you explain makes it so easy to understand. I watched a couple of JS videos, some of them are great as well, but it is just that yours is the easiest one for me to follow along. Thanks!

  • @nonchalant8473
    @nonchalant8473 8 років тому +27

    Awesome tutorial. Your explanation was really easy to understand. Please make some more vanilla JavaScript tutorials. Thanks

  • @fvgoya
    @fvgoya 8 років тому +137

    Very simple, clear and helpful explanation! Really well done!
    Indeed, knowing the basis will be easier to make things more complex.
    Thank you!

    • @LearnWebCode
      @LearnWebCode  8 років тому +7

      Thanks so much Fernando!

    • @amrfoda7619
      @amrfoda7619 7 років тому +4

      hello there LearnWebCode thank you a lot for your support but i need your help someway i want to achieve a double function or a function to do two act change background color to black and when so the text will be invisible iwant to change its color to yellow

    • @CuongNguyen-xw8qu
      @CuongNguyen-xw8qu 7 років тому

      agreed, thanks you, teacher

    • @MrDadcard
      @MrDadcard 7 років тому

      You should be able to find that on the net but it should be one function add a click listener or onMouseOver listener and something like this
      function myFunction() {
      document.body.style.backgroundColor = "black";
      document.body.style.color="yellow";
      }

    • @lanoparaisofamilia8036
      @lanoparaisofamilia8036 7 років тому

      Agora é eu sei porá

  • @heatherp1410
    @heatherp1410 8 років тому

    This was the best JS tutorial I have come across so far. Thanks for taking the time to share this with us all - really appreciate the clear details and the cat clips!

  • @claudiustefan8831
    @claudiustefan8831 2 роки тому

    One of the best tutorials on beginers JavaScript. Loved it!

  • @jayconnelly4664
    @jayconnelly4664 8 років тому

    Very nice ! I am new to javascript but have programmed in many different languages. Just the right pace and right amount of examples to get me to a point where I can be dangerous :)
    Thanks a bunch!

  • @jwyzio
    @jwyzio 7 років тому

    Even having knowledge about what you were teaching on the video, i couldn't stop watching till the end 'cause of the amazing way that you explain every single step.
    Thanks!

  • @essammustafa9761
    @essammustafa9761 8 років тому +2

    !Your voice is so friendly, Brad
    !You've a big fan here

  • @yogeshjjr
    @yogeshjjr 3 роки тому

    You're one of the best instructors I've ever been taught by

  • @PhilipHarperGraphicDesign
    @PhilipHarperGraphicDesign 7 років тому +11

    …started to get a bit lost around 28:13 with the e.target bit, but a really good JS tut overall. I've been putting JS off for a while but this is a really nicely explained vid 🎉

    • @keplerpierre7783
      @keplerpierre7783 5 років тому +1

      The "e" is to show more info about the event. It can tell you what someone submit in an input tag and what-not

  • @benzflynn
    @benzflynn 5 років тому +1

    Good idea to teach by useful example. Keeps learners interested and shows them how to (as you put it so well) recycle code elements for their own later examples. Video pace is about right for beginners and the vox is very clear. A good production.

  • @randawg8712
    @randawg8712 5 років тому

    This was super helpful, because I'm a visual learner. Watching you do it instead of reading about Javascript, makes it much easier! Thanks man! 😎

  • @BoogWeed
    @BoogWeed 4 роки тому

    I was doing everything I can to avoid JS.... but this brilliant video has changed my mind! Subscribed!

  • @octavianc.2569
    @octavianc.2569 6 років тому

    Absolutely well done. I like the fact that you anticipated the problems a person will encounter and how to refactor the code so that they can mitigate them in the future.

  • @stonemassiman
    @stonemassiman 4 роки тому

    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.

  • @thegeek8079
    @thegeek8079 7 років тому

    Awesome tutorials. I had seen countless sources teaching JavaScript and I found yours the best so far. Thanks for your time and efforts to share this with people.

  • @zubairzafar480
    @zubairzafar480 3 роки тому

    You are just an Excellent Teacher. Thank you for clearly explaining everything.

  • @MelindaElaine
    @MelindaElaine 7 років тому

    Thank you, finally a video about code where every action is explained step by step. So easy to listen to and understand.

  • @grahambrown7073
    @grahambrown7073 7 років тому

    Nicely explained, without being expecting the viewer to be either an expert or an idiot. Thank you!

  • @kolby9655
    @kolby9655 8 років тому

    i really enjoyed this a lot. it helped me to understand javascript a lot more. I am only 12 years old and i've been working with HTML, CSS ,and JAVASCRIPT for about 10 months i've gotten a lot down so far but this video made me understand even more about javascript. thank you

  • @alfonzomckinzee8906
    @alfonzomckinzee8906 7 років тому

    Awesome! I have watched many javascript video tutorials. This one is the best. So much easier to understand by example than just learning the individual parts and trying to figure out how the hell to use them. Thanks.

  • @Prash1c
    @Prash1c 5 років тому

    One of the best teachers for web development on youtube! :) Thank you! :)

  • @syedaanna7858
    @syedaanna7858 5 років тому +8

    Me : watching it ,Oh I got this
    Also me : While applying, what did I watch 🤔

  • @webstuff56
    @webstuff56 7 років тому +2

    Hello Brad. I was ok until you used the "this" keyword. would you mind explaining please what "OBJECT" "this" is referring to? As it stands, it appears to point to either a function parameter of the event listener or the variable ourList, in any case how do either of those become an OBJECT.

  • @rahulghatkar5748
    @rahulghatkar5748 5 років тому

    Hands down..... the best tutorial for JS....

  • @MsMelanie117
    @MsMelanie117 3 роки тому

    😲 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!!!

  • @dwaynerobare1153
    @dwaynerobare1153 4 роки тому

    Great video... I'm a beginner, however I do appreciate and like your approach to learning this... I am learning Python right now, but JavaScript is next and on to the next. Lost about 28 minutes, but I'm determined to continue to learn by solving real-world problems.
    Thanks again.

  • @RockstahRolln
    @RockstahRolln 7 років тому

    This was absolutely Fun and Brilliant! Well taught! I believe this is the BEST Javascript tutorial on the UA-cam! More of such tutorials please!

  • @practiquemos
    @practiquemos 3 роки тому +9

    Excellent! Thank you 👏

  • @VatsalChauhan12
    @VatsalChauhan12 7 років тому

    Nice Video Man!!.....Easy to Learn ... I always thought that JavaScript is very hard and i didn't understood it till now...but now i clearly understood how it works!!!......
    Very Nice and Clear Explanation...Keep up the good work!!!

  • @johnny_pilot
    @johnny_pilot 7 років тому

    Awesome teacher! I struggled to keep up for the last 7 minutes or so - when you said you were "stepping up a gear" - but I've learned a lot and now need to practice with this until I store these new capabilities in my memory. Thank you for an awesome video on JS. I subscribed immediately and now looking forward to learning more from you. :-)

  • @gouthamanvlog5376
    @gouthamanvlog5376 5 років тому +1

    Wow! Really your way of explanation is quite easy to understand. Way of teaching also different. one of my best tutorial video I ever seen before. Thanks a lot...

  • @GokuHindustani
    @GokuHindustani 3 роки тому

    Your way of teaching is best I was tired of the java tutorials you made my mind very clear
    Thank you very much😊

  • @SelmaDelgado
    @SelmaDelgado 8 років тому +19

    Great video!! It would be very helpful to post the css mentioned at 23:33 to follow along.

    • @justinweigle7220
      @justinweigle7220 7 років тому +9

      The css code for those just now coming across this tutorial:
      .active { /* This is the name of the class */
      background-color:beige; /* This is just saying if something is part of the "active" class that it will have a background color of beige */
      }
      You can also use your own choice of color such as red, green, blue or a hexadecimal color by putting "background-color:#xxxxxx" where the 6 x's are hex numbers of a color which you can pick out by googling "hex color selector" and clicking the first link.
      Happy coding!

    • @claychester3228
      @claychester3228 7 років тому

      its not doing anything. my list items are not changing color

    • @justinweigle7220
      @justinweigle7220 7 років тому +4

      If you copied and pasted my code into a .css file and linked it properly, it should work as long as you have the html correct. This is done using a line in head like this:
      Alternatively, you can put the code I commented into your head section with tags. Such as:
      .active {
      background-color:beige;
      }
      I also posted the entire .css file of the code that I used in the comment section of the video here if you'd like your entire page to look like his, or at least very similar.

    • @droidguy1571
      @droidguy1571 7 років тому

      i did the same and does not work. Which element do we give the class to?

    • @justinweigle7220
      @justinweigle7220 7 років тому +2

      If you post your activateItem class I can maybe help you, but I know it isn't a problem with the css if you copied what I posted

  • @MrBenjjj6
    @MrBenjjj6 8 років тому

    JS is something I have been putting off for ages, glad to see you teaching it :)

  • @svvramprasad
    @svvramprasad 5 років тому

    This is the most interesting way to explain fundamentals of JavaScript that I have ever come across. Just awesome!!!

  • @BabyRevealParty
    @BabyRevealParty 6 років тому

    This is brilliant !! there are so few videos that show JavaScript being practically used with HTML/CSS it helps make sense of it. Thank You.

  • @akibsaifi7890
    @akibsaifi7890 7 років тому

    probably the best js tutorial on youtube..
    gonna share your channel on my facebook group..

  • @bach5369
    @bach5369 6 років тому +1

    every single thing in your code is explained perfectly, thank you and subbed :)

  • @SL-ey2wl
    @SL-ey2wl 5 років тому

    This bloody rocks...This is awesome to remind yourself about basics of JavaScript!!!This is awesome down to a detail JavaScript tutorial!!!

  • @slavi3d
    @slavi3d 6 років тому

    Really that's the best JS tutorial for beginners. Well done.

  • @Zwwiter
    @Zwwiter 7 років тому

    Super awesome quality content! I started coding a few months ago with python which took me a lot time doing the basics, till now still got a lot to learn, I just want to know how JS works , your video is a great intro, with python knowledge, I find JS is not so difficult to understand. Thank you, my friend!

  • @n_fan329
    @n_fan329 7 років тому

    ohhh man that was amazingly helpful for my project, I know that Thanks a lot doesn't cover the whole things but dude, you are ROCK !!!

  • @volatilityclustering5706
    @volatilityclustering5706 4 роки тому +1

    That's the most concise JS introductory video I've watched! One question though:
    When activateItem is passed as an argument to addEventListener, no argument seems to be passed to activateItem. How does it actually work under the hood? also can one write activateItem() inside addEventListener method?

  • @007jayy
    @007jayy 3 роки тому

    This video taught me a lot... Even after 4 years I still find it useful!

  • @jackdavenport5011
    @jackdavenport5011 6 років тому

    Just a quick tip:
    unless you're actually putting HTML code inside an element, you should ALWAYS use element.innerText not element.innerHTML, *ESPECIALLY* if you're putting user input in there. This ensures your site isn't vulnerable to XSS.

  • @vexmd1112
    @vexmd1112 4 роки тому +1

    3 and a half years later and this tutorial is still amazing

  • @charlesbovalis6591
    @charlesbovalis6591 5 років тому

    Silly question: By including our javaScript source code at the end of our html page through the use of tags just before the ending tag, is it safe to assume that we no longer need to specify in our javaScript file the: window.onLoad ... statement ? Simply because, by including our javaScript file at the end of our html page, it is "as if" the whole html page has already "loaded" - thus we don't need that statement ? Thank you for your time - I realize it's a simple question but I don't want to make any assumptions either. Thank you again

  • @dwmaldonado
    @dwmaldonado 8 років тому

    Wow! Really enjoyed this. Hope to see more like this in the future... TIL how querySelector and querySelector all "actually" work and will definitely be using this moving forward! Ty!

  • @desert6120
    @desert6120 7 років тому

    Bro you have explained it so perfectly that even a baby can understand. Your Awesomeee.......

  • @MrPonchovie
    @MrPonchovie 6 років тому

    omg, so im working on a game and i needed a description given when you select a gamemode, and then i find this, haha very happy

  • @tahirusman2600
    @tahirusman2600 7 років тому

    This is the video: I have been searching for many days. you are the best tutor I have ever seen on this topic. I can't do many likes, Why youtube?

  • @jemay3299
    @jemay3299 7 років тому

    Hey man! In your 31 minutes video tutorial, I just want to say that i really enjoyed listening and following your instructions. I like the way how you explained because it makes me easy to understand those codes. I thank you coz i leared more about javascript now. I hope that i get more learnings from you :)
    Thanks and GOD BLESS!
    jeremie

  • @nasirkamal5963
    @nasirkamal5963 7 років тому +3

    Can we take a look at your class "active" from which it gets the background color.

    • @kia.hadipour
      @kia.hadipour 5 років тому +1

      Yeah, that one definitely begs clarification!

  • @rujalacharya6789
    @rujalacharya6789 5 років тому

    Thanks a lot. That was the great intro of Javascript to me.
    Just a small comment. In the if statement ie. e.target.nodeName you wrote LI in uppercase and didn't say it was mandatory. So I carelessly wrote it in lowercase and the code didn't work. So I spent about 30 minutes finding out the error. Finally the code worked. (What I basically did was shared my experience :) ).
    Thanks a lot for this great tutorial. Now I am eager to learn more JavaScript. Cheers

  • @rajucherian
    @rajucherian 7 років тому

    Clear & Simplest of all tutorials. It would have been even better if you explained the css used a little bit.

  • @MrDadcard
    @MrDadcard 7 років тому +11

    I love the way you explained things and the fact that you showed the new way of selecting stuff at the end. However, I did not like the fact I couldn't see your css files

  • @vinobajohn2393
    @vinobajohn2393 4 роки тому

    You gave new perception on JS.. love you man

  • @html5conq
    @html5conq 6 років тому +1

    Hello! Your lecture show JavaScript basic mechanism behind the scene very well. Thank you very much. I have a question what is your font name you use in code editor. As for me, this font may very awesome to tell each characters. Would you tell your font family name?

  • @thomashuntsman9566
    @thomashuntsman9566 7 років тому

    Brad - Thank you! Wrote my first for loop. You should keep teaching vanilla JS. Very useful fundamentals.

  • @jlat96
    @jlat96 7 років тому

    Awesome tutorial. As someone who knows a little bit about programming (I'm a CS student), this was super clear and helpful. I do have one question though: How does JS know what to use as a parameter if you don't have to enter () with params. when calling a function?

  • @rameshkrishna7867
    @rameshkrishna7867 7 років тому

    excellent video !! this is the one needed for non-programmers like me. I will suggest this channel to my friends (y)

  • @Limpuls
    @Limpuls 8 років тому +6

    27:42 Hey, great tutorial, really! I just have a question, why do you type capital "LI" and not just "li", coz usually in html we type lowercase "li" too. I tested lowercase and it seems not to be working. Just curious. Thanks.

    • @Bernd2023
      @Bernd2023 7 років тому +3

      Hi, some time went by and maybe you already know it, but this post nicely explains it: ejohn.org/blog/nodename-case-sensitivity/

    • @technobree3803
      @technobree3803 5 років тому

      Go to your console.log while inspecting your ourItems list and see that node name is LI, the browser recognizes only that.

  • @BILLKUBA
    @BILLKUBA 6 років тому

    Thanks, bloke have seen quite a few tutorials about Javascript and will say you were very good in your explanations and what if's. Great job looking forward to more :).

  • @MahmudulHasan-fn5lk
    @MahmudulHasan-fn5lk 7 років тому +2

    You are more than awesome, Sir. Loved your tutorial.

  • @eadigwe
    @eadigwe 7 років тому

    Fantastic. Best tutorial I've ever had on UA-cam. Thanks a lot!

  • @MAA86.
    @MAA86. 7 років тому

    I am a beginner and i learnt more with this JS tuto thanks for the effort

  • @imonw3b
    @imonw3b 8 років тому +1

    This is great basic js tutorial! Can you please tell me how I can target id's and classes inside the table? (I'm using bootstrap framework)... Thanks
    Click a list item to replace this text.
    Add new item




    First item


    Second item


    Third item


    Fourth item


    Fifth item

    • @techtipsuk
      @techtipsuk 8 років тому

      Doesn't matter that its in a table. The ID is still there. Just like CSS.

    • @imonw3b
      @imonw3b 8 років тому

      How? This is easy when using jQuery. But where talking vanilla JS.
      I tried to execute this in console:
      > document.getElementsById("our-list")
      and the output:
      Then I tried to target the li
      > document.getElementsById("our-list").querySelectorAll("li")
      and the output is only array of Nodelist:
      > [ ]

    • @imonw3b
      @imonw3b 8 років тому

      @Microphunktv
      Jade doesn't exist anymore. Due to some copyright stuff with the name.

    • @LearnWebCode
      @LearnWebCode  8 років тому

      Try "getElementById" instead of "getElementsById" - it shouldn't be plural. Then your code should work. Also, you could use solely "document.querySelectorAll("#our-list li");"

    • @imonw3b
      @imonw3b 8 років тому

      HI Brad, Thanks for the reply.
      Sorry just got a typo here, of course if I type getElementsById the result will be:
      > Uncaught TypeError: document.getElementsById is not a function(...)
      But you see I got a result:
      Please check:
      prntscr.com/dame53
      codepen.io/imon/pen/aBWWGW
      BTW, I bought your course on udemy! and it looks great!