www.webdeveloper.com
Results 1 to 4 of 4

Thread: Going back to JavaScript from JQuery?

  1. #1
    Join Date
    Feb 2013
    Posts
    108

    Question Going back to JavaScript from JQuery?

    I written this online trivia game : https://www.pepster.com/ and the more I've been think the more I want to convert it all over to straight JavaScript. I want to convert it over to straight JavaScript for two reasons.

    1. I want to be able just to tell people to all they have to do is add the external JavaScript file without having to tell them they need to have the jQuery library loaded first. Plus I don't want to convert it over to a plugin, which means learning how to write a plugin on top of jQuery which is on top of JavaScript itself.

    2. Second I think it would be more streamline and easier for people to incorporate into their own websites if they so desire if it was written in straight JavaScript.

    Now my question would it be easier to convert the jQuery code to JavaScript:

    A small example of my existing jQuery:
    Code:
    	function displayScore() {
    		if ( score >= 0 ) {
    			$totalPts.css('color', '#02DE00');
    		} else {
    			$totalPts.css('color', 'red');
    		}
    		
    		var displayScore = '0000',
    		    maxZeros     = 5,
    				x            = 0;
    		
    		displayScore = Math.abs(score);
    		displayScore = displayScore.toString();
    		
    		while ( ( displayScore.length - maxZeros ) != 0  ) {
    			displayScore = '0' + displayScore;
    			x++;
    		}
    		
    		$totalPts.text(displayScore);	
    			
    	}
    though I'm leaning towards starting for scratch for even in my jQuery code I have straight JavaScript in other parts of the code. However, I would like other opinions which would be the best route?

    Thanks John

  2. #2
    Smart move. Jq probably isn't doing anything for you, and where it is, you're probably doing something wrong.

    See directly changing the style in the javascript, instead of doing a class swap.

    Even so, there ARE going to be a few things you'll need some simple helper functions for. Like that text replace?

    $totalPts.text(displayScore);

    You'd probably have totalPts as a normal variable, where this helper:

    Code:
    var textReplace =
    	d.body.textContent ?
    	function(e, text) { e.textContent = text; } :
    	function(e, text) { e.innerText = text; };
    So you'd do:

    textReplace(totalPts, displayScore);

    Assuming the totalPts element has no other clases...

    Code:
    var textReplace =
    	d.body.textContent ?
    	function(e, text) { e.textContent = text; } :
    	function(e, text) { e.innerText = text; };
    	
    function displayScore() {
    
    	totalPts.className = score < 0 ? 'negative' : '';
    
    	var
    		places = 5,
    		textScore = Math.abs(score).toString();
    		
    	while (textScore.length < places) textScore = '0' + textScore;
    		
    	textReplace(totalPts, textScore);	
    			
    }
    Use the class to set the color (or any other affectation), not the scripting. If nothing else it will let other people using the script change it in the CSS without changing the scripting.

    If there are other classes involved, some other helper functions I use could be handy -- like:

    Code:
    	function classExists(e, className) {
    		return RegExp('(\\s|^)' + className + '(\\s|$)').test(e.className);
    	}
    	
    	function classAdd(e, className) {
    		if (classExists(e, className)) return false;
    		e.className += (e.className ? ' ' : '') + className;
    		return true;
    	}
    
    	function classRemove(e, className) {
    		if (!classExists(e, className)) return false;
    		e.className = e.className.replace(
    			new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '
    		) . replace(/^\s+|\s+$/g,'');
    		return true;
    	}
    	
    	function classSwap(e, removeClass, addClass) {
    		classRemove(e, removeClass);
    		classAdd(e, addClass);
    	}
    	
    	function classToggle(e, className) {
    		if (classRemove(e, className)) return true;
    		classAdd(e, className);
    		return false;
    	}
    	
    	function flush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	}
    
    	function addText(e, text) {
    		e.appendChild(document.createTextNode(text));
    	}
    Hope this helps. Usually most of what people do with jquery has no business being done, is CSS' job, or would be less code without it. A tiny little self-contained lib can replicate most of what you need to do the same thing, usually cleaner, faster and with a fraction the overhead.

  3. #3
    Question:

    Code:
    if (timer) clearInterval(timer); // Stop timer 
    		
    		/* The actual timer funtion, setup & execution */
    		timer = setInterval(function() {
    Why are you using Intervals like a timeout? That seems needlessly and pointlessly convoluted.

    This:
    "answer1 row span12 clicked"

    Also throws up warning flags for me, but then so does the HTML 5 data- attributes "for nothing".
    Last edited by deathshadow; 08-07-2014 at 04:53 PM.

  4. #4
    Join Date
    Feb 2013
    Posts
    108
    Quote Originally Posted by deathshadow View Post
    Question:

    Code:
    if (timer) clearInterval(timer); // Stop timer 
    		
    		/* The actual timer funtion, setup & execution */
    		timer = setInterval(function() {
    Why are you using Intervals like a timeout? That seems needlessly and pointlessly convoluted.

    This:
    "answer1 row span12 clicked"

    Also throws up warning flags for me, but then so does the HTML 5 data- attributes "for nothing".
    Well, I've been going back to the drawing board so to speak and have been reading a book on JavaScript, look the "answer1 row span12 checked" now also brings red flags now for me...lol I must have been trying to create some kind of hook to latch the answers to is the best I can guess? Anyways I'm leaning starting from scratch when it comes in coding in straight JavaScript (I'm 99 percent sure), for I just got done reading about the date object and I can even see where the Interval like a timeout is weird. All I can say is going through JavaScript after doing JQuery I've been seeing some weird things that I had been doing. If anyone ones says that all you need to is know a little bit of JavaScript in order to do JQuery is a fool and should have their head exam. What I have been finding out I've been using jQuery as a crutch, I guess it's OK if all a person wants to do is do fancy small crap on their website. It's not great for developing anything substantial though.
    It also doesn't help taking a couple of advanced Flash Actionscript courses in college when it comes to HTML5. By this I mean it bad enough debugging something in a script using debugging tools in browsers, but HTML5 allows almost any kind of garbage to appear to run correctly. I mean I miss where the Flash ActionScript compiler would spit it out back at me and "I'm not go to run until you fix me". I know Actionscript is dead, but sometimes I am tempted to go back to writing ActionScript 3.0 applications. I have written 3 or 4 nice games in ActionScript. As a matter of fact I have a nicer version of the Trivia game written in ActionScript 3.0 that I hope someday to convert over to JavaScript.

    Thanks for the input.
    John

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles