Like SystemiConnectFri 15 Oct 2021, 04:50
Auto Save MessagesLGforumFri 26 Feb 2021, 13:31
New tutorial questionTheCrowMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)LGforumSun 14 Feb 2021, 01:25
LGforum (2806)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Mr.Easybb (1587)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Bloodbath (745)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Rukiafan (533)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Dom (513)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
puppycheese (446)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
pedro (330)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Neymar (301)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Hitsu (281)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 
Flora (275)
jQuery? No more! Vote_lcapjQuery? No more! Voting_barjQuery? No more! Vote_rcap 


jQuery? No more!

gillgill
Status : Syntax highlighter's colors are nice.

Posts : 78
Join date : 2014-04-05
Sat 19 Sep 2015, 06:58
I've written this topic to help you all cleanse your code from jQuery, if you'd hate jQuery that much. I'll write lists of jQuery functions and converting it to original JavaScript Wink the content of the topic was still coming soon because I'm a little busy managing stuff here and there. Be back in a hour, probably.
Ange TuteurAnge Tuteur
Status : No status yet...

Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Sat 19 Sep 2015, 13:01
Anything jQuery can do, you can do natively because it's written in JavaScript. jQuery is just a library of methods or "JavaScript helpers" to make things easier. There's efficient was of using it and not so efficient ways. Y'know like querying the same tags over and over again without caching them to a variable, or using each() when you can use a for loop.

I think the only things I use it for often would be for the document ready execution. Even then, if you're just modifying a specific element you can poll for that element until it exists.

There's also the fade and slide methods, but now with CSS transitions you can pretty much make the same effects with 0% jQuery.

Also : http://needsmorejquery.com/
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Sat 19 Sep 2015, 19:39
I am writing a weekly article that'll explain nearly every jQuery and how its basically done in jQuery but natively. It will progress every week.
Ange TuteurAnge Tuteur
Status : No status yet...

Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Sun 20 Sep 2015, 15:02
That'll be interesting to read. ^^ Speaking of which I did see a site which offers some examples. It was this one : http://youmightnotneedjquery.com/ ( not so much explanation-wise )

jQuery is so big though, it'd take awhile to go over everything. Not to mention there's multiple ways to achieve the same result, browser incompatibilities, etc.. Although today, browsers aren't as bad, so you don't have to worry about that. Smile
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 16:13
Yeah we won't be really going to browser incompatibility especially with release of Microsoft Edge. And it gives them a rough idea, we won't be going over every single jQuery function since some are duplicates. Such as Ajax get post and load. Or show hide and toggle.
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 16:28
I think the way the new Avacweb JavaScript is built is a fine example of how you can give yourself all the necessary tools for the job very quickly without jquery. Depending on how you feel about it Mr.Easybb, I'd be happy enough sharing bits of the simple Avacweb framework for educational purposes. I mean I know I still have jquery here and there in it, but its included in our forum header anyway so sometimes I give in and use it at times.
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 17:21
Yeah if you want to share that is fine with me. My articles which you can see since you're still an admin is simple going through and showing how each function works and whats the Vanilla equivalent it's basically like the site ange tutuer showed except I go into detail about it.
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Sun 20 Sep 2015, 20:54
ok, i work in hospitals, i'm a doctor, codes is just for do better my forum,just for fun, it's a hobby, jQuery is more easy to learn than pure javascript or vanilla, in the last 3 years i made my own codes all i jquery, now i try to understand de pure form of javascript , i know, my english sucks, i think all you guys started use easy ways, i see old code in your olds boards using jquery, please be patient with us.


ok y use this line several timer in a global variable:

$("#profile-advanced-right").find(".module").eq(0).find("strong").eq(0).text();

how convert in pure javascript??

thanks
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 21:13
I agree to an extent @Ch@lo Valdez you are right that Jquery is easy to learn for beginners. However I think that's the very issue with it, it sends beginners down a bad path where they don't fully understand JavaScript itself, so they end up writing jQuery with very little understanding of it.

I know myself personally took the route to learning JavaScript properly and correctly and whilst learning, jquery certainly helped me with more advanced stuff at the time, but ultimately it became less and less convenient for me as I learnt more and more about JavaScript and I think that's possibly the perfect way.

I think the main problem is that beginners forget that jquery is JavaScript, so it surely makes sense to learn JavaScript first.
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Sun 20 Sep 2015, 21:48
Ch@lo that code is converted to
Code:
[panda=js]var ele = document.getElementById("profile-advanced-right");
var mod = ele.getElementsByClassName("module")[0];
var strong = mod.getElementsByTagName("strong")[0];
var text = strong.innerText;

// or

var text = document.querySelector("#profile-advanced-right .module strong").innerText;



Of course we'd check if the elements exist and everything. And I agree I started with jQuery as well and LG taught me better lol.
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Sun 20 Sep 2015, 21:56
Code:
[panda=js]
var ele = document.getElementById("profile-advanced-right");
var mod = ele.getElementsByClassName("module")[0];
var strong = mod.getElementsByTagName("strong")[0];
var text = strong.innerText;
// or
var text = document.querySelector("#profile-advanced-right .module strong").innerText;

what option is better?
LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Sun 20 Sep 2015, 22:11
In this instance, neither are better on their own. It depends on the situation; if you are going to be manipulating any of the other elements any further then the first option is better since you have everything you need in variables already. For a short and concise way of simply grabbing the text then the second is better. It's all relative really.

I want to share here am absolutely tiny function I use on a Avacweb and other places which prevents me having to do any of the above.
Code:
[panda=js]_.getby = function(selector, context) {
      context = context || document;
         
      switch(selector.charAt(0)) {
         case '#' :
            return context.getElementById( selector.substr(1) );
         case '.' :
            return context.getElementsByClassName( selector.substr(1) );
         default :
            return context.getElementsByTagName( selector );
      }
};
It's basically just a shortcut function for all the annoying getElementsBy functions.
Here's how I'd do it:
[ic]_.getby('strong', _.getby('.module', _.getby('#profile-advanced-right')[0])[0].innerText[/ic]
It may look a little confusing for this specific example, but ultimately the _.getby function has been a favourite of mine for a while.
[ic] _.getby('.classname') _.getby('#id') _.getby('tagname')[/ic]
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Mon 21 Sep 2015, 00:50
Always check if the element exist though or else your whole site could crash of course. I use simple functions such as

Code:
[panda=js]function byID(ele,context) {
  context = context || document;
 
  return context.getElementById(ele);
}

Btw my last post was while i was at the balloon festival on my phone lol. So if anything is wrong please don't whip me Wink You can do test to see which is faster for anything at http://jsperf.com it's what I use to show people who love jQuery the difference it makes not using a library that clogged. Some of the clogged functions to me are

get, post, and load. These are all $.ajax functions.


hide, show, toggle. These are all display functions.

You can easily create a simple display function like so

Code:
[panda=js]function Display(ele,sty) {
    if(!ele)
        return false;
 
    ele.style.display = sty;
}

Though the problem with this function to jQuery users is you can put a NodeList in there, it has to be one element.Also the repaints and redraw factor which I go on a rant here. http://www.avacweb.com/t2481-simple-javascript-questions


Once you start learning vanilla javascript you start seeing why we use it more and more.
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Mon 21 Sep 2015, 14:02
ok how do this in vanilla?

Code:
[panda=js]$("#profile-advanced-right").find(".h3").find("em").html('<span><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/actions/signal-1.png" style="border-radius:0;border:none;margin-bottom:-1px;height:12px"/></span>');

Code:
[panda=js]document.getElementById("profile-advanced-right").getElementsByClassName("h3")[0].getElementsByTagName("em")[0]

.html(insert here new span???? )
Ange TuteurAnge Tuteur
Status : No status yet...

Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Mon 21 Sep 2015, 16:33
It would look something like this :
Code:
[panda=js]$(function() {
  // start up variables
  var right = document.getElementById('profile-advanced-right'), em;

  // check exisitence
  if (right) {
    em = right.getElementsByClassName('h3')[0].getElementsByTagName('em')[0]; // get children

    // check and set content
    if (em) em.innerHTML = '<span><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/actions/signal-1.png" style="border-radius:0;border:none;margin-bottom:-1px;height:12px"/></span>';
  }
});

Get the element by id, check the existence, find the children you want, and set the innerHTML. You can add more "ifs" here if you want, but if you know the elements will always be there you don't need to. It's good practice to check though, because the DOM is unpredictable.

FYI You can use innerHTML to set or return the HTML content of an element.

Mr.Easybb wrote:And I agree I started with jQuery as well and LG taught me better lol.
Same here, when I look back on some of my first scripts they're HORRID. Razz

But yeah, I think that many start with it because it's easier to understand for beginners ( and maybe some other reasons ). That is, they can use CSS selector style ways to manipulate elements and so on. I actually didn't get into native JavaScript until early last summer, thanks to that I have a better understanding now.
Mr.EasybbMr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!

Posts : 1587
Join date : 2013-01-04
Mon 21 Sep 2015, 17:43
jQuery made an uproar because of it's easy CSS selection methods, as well as it's cross browser compatibility. It is nice except to me they went just a little bit overboard on it. If you look into how they return the elements in an array format when it's truly an object, that was smart just because developers are used to seeing that. Also like I said they clogged it with silly functions that are repetitive when we can use one function and do the same thing.


How does jQuery return an array like object? Easy take a look

Code:
[panda=js](function() {
    //first create a lowercase function that returns a new function
    function jquery(ele,context) {
        context = context || document;
        return new JQuery(ele,context);
    }
   
    //create our instance of jQuery in caps because that's js conventions when we use this which is not the window
    function JQuery(ele,context) {
        var targ = context.querySelectorAll(ele);
        var len = targ.length;
        if( len ) {
          this.length = len;
          while(len--){
              this[len] = targ[len];
          }
        }
      return this;
    }
 
    //make jQuery accessible in the global window object
    window.jQuery = window.$ = jquery;
})();

So that just gets something like

Code:
[panda=js]var a = $("#logo");
console.log(a);

//returns
/*
  {
    0: div#logo,
    length: 1
  }
*/

But we want to return an array and have chainable events


Code:
[panda=js](function() {
    //first create a lowercase function that returns a new function
    function jquery(ele,context) {
        context = context || document;
        return new JQuery(ele,context);
    }
   
    //create our instance of jQuery in caps because that's js conventions when we use this which is not the window
    function JQuery(ele,context) {
        var targ = context.querySelectorAll(ele);
        var len = targ.length;
        if( len ) {
          this.length = len;
          while(len--){
              this[len] = targ[len];
          }
        }
      return this;
    }
 
    //make chainable events and return an array like object
    jquery.fn = JQuery.prototype = {
        splice: [].splice,
        display:function(st){
          var len = this.length;
          while(len--){
              this[len].style.display = st;
          }

          return this;
        }
    };

    //make jQuery accessible in the global window object
    window.jQuery = window.$ = jquery;
})();


Now when we work with this code

Code:
[panda=js]var a = $("logo");
console.log(a);
//returns
/*
  [ div#logo ]
*/

Looks like an array but it's not it's object still and we added a display function too.

Code:
[panda=js]a.display("none");
// div#logo now has a style.display === none


Hope you get that, I'm just showing why it made such a huge uproar coming out.
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Mon 21 Sep 2015, 22:13
today i learn something new, thank you guys
DomDom
Status : No status yet...

Posts : 513
Join date : 2011-12-24
Location : USA
Wed 23 Sep 2015, 22:49
Back when I wrote FMChat, I admit that a good amount of it was written in jQuery, for the sake of cross-browser compatibility. I can't tell you the number of times someone would ask on the support forum why it isn't working on Internet Explorer 8. The first thing I would reply with would have been "upgrade your browser" or "use chrome/firefox." So, to prevent those things from happening, I just started changing newer methods to jQuery and the problems just went away.

And lastly, @Ch@alo Valdez, I assume (EspaƱol/Castellano) is your first language since your location is Mexico City, right? Your English is understandable and fine. Just some small problems like grammar lol. I actually learned Spanish not too long ago from native Spaniards and Hispanics, and I find it funny that my Hispanic friends hate when I speak in Castellano, so I change it up depending on who I am with haha.
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Thu 24 Sep 2015, 00:32
hahaha yes @Dom my first language is spanish, i read more fast in english because all my university books are in english, but is more technical and easy
Ch@lo ValdezCh@lo Valdez
Status : :)

Posts : 218
Join date : 2013-04-21
Age : 48
Location : Mexico City
Tue 20 Oct 2015, 18:19
how do this in javascript

Code:
[panda=js]
 $('.postprofile').find('.f_a2').find('p:nth-last-of-type(2)').each(function () {
                $(this).closest('.post').find('.version').addClass($(this).text().toLowerCase()).show();
            });


thanks
avatarGuest
Wed 04 May 2016, 20:37
I moved this topic to 'General Discussions'. It's more a discussion about when to use JS or jQuery as a library and JSON as data. Also, in this topic there's talk about non-FM related board versions and various coding examples that don't meet the requirements of existing in any of the support forums on AvacWeb but General Discussions. It's more of a thoughts sharing topic.
Sponsored content