Learning JavaScript

For some time now I have achieved things in JavaScript through a combination of examples and brute force persistence. My methods are roughly akin to prisoners digging out of jail with a spoon. You can do it but it’s not something I’d recommend.

Given my increasingly more sophisticated goals1 I was finding this to be too slow and too irritating. So I sat down on Monday to learn at least the basics of JavaScript. I watched the videos from Code School with the videos at about 1.5x speed which was pretty bearable. They offer the intro JavaScript course for free but everything beyond that is pay. I also did the Code Academy version. Their version is free in its entirety. Both sites have live editors that allow you to do your work right there in the page. The work’s on the left and a console is on the right. It’s a bit like a stripped down version of Code Pen (which I still find to be amazing).

I did hit some points of frustration when I would do something that worked fine but was not exactly how they wanted me to do it. This is one of those perils of machine learning that I don’t see any easy way around for a good while. It’s especially difficult when programming allows so many different paths to the same destination.

I also dealt with some of my frustration with busy work2 by building a demo interactive charting site3 that we might use for Spit for Science. I’ve also run into a few things that are glossed over in the courses but seem relevant- like whether you assign a function as a variable or not. I see why it’s a bit complex for an introductory class but it seems important. On the other hand, I now know enough to notice and to realize they’re different.

Functions were one of the elements in JavaScript that I now realize I didn’t get the grammar of at all. I didn’t get it enough that I didn’t realize I didn’t get it. I also helped solidify my understanding by making a quick image. I usually use Keynote to do this (and to do my code annotations) although I’m looking for a better way- one that would let me update the images as I needed.4

Screen Shot 2015-02-25 at 10.18.05 AM

Here’s the chart slider code which is a crude entry into the field of explorable explanations and now that I’m getting my feed under me I can start looking at things like Tangle and Bacon.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a title</title>
<!-- This ties in the various libraries we will use. -->
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
	<link href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="http://augmenting.me/js/tangle/Tangle.js"></script>
  <link rel="stylesheet" href="slider.css">

  	  </head>

	<body>
		
	<div class="holder">
		<h2>Spit 4 Science Demo</h2>
	<div class="chartbox">
		<!--div class is personalized (and some other stuff) the current HTML elements are the before portion-->
		<div class="ct-chart personalized ct-golden-section" id="takeaway">
			<img src="http://rampages.us/ecar/wp-content/uploads/sites/4173/2015/01/questionmark-150x150.png">

			<h2>Do you ever wonder- </h2>
			<ul>
				<li>Do I drink too much?</li>
				<li>Is my drinking dangerous?</li>
				<li>How much do other people at VCU drink?</li>
			</ul>
			</div>	
			<!-- This slider is reliant on HTML 5 and based on this post http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input-->
			<div class="slider">
			  <label for=drinks>Drinks per some span</label>
			  <!-- The outputUpdate shows the value of the slider beside the slider (script immediately below) and the onchange piece refires the function to build the chart. These are listeners and there is probably a better way to chain or blend them-->
			    	<input type=range min=0 max=15 value=0 id=amount1 step=1 oninput="outputUpdate(value)" onchange="personalChart()">
			    	<output for=amount1 id=drinks>0</output>
			    	<script>function outputUpdate(drinks) {
				    	document.querySelector('#drinks').value = drinks;
				    	}
				</script>

			</div>
  
	</div>
	<!-- This script builds the chart using the Chartist library http://gionkunz.github.io/chartist-js/ -->
	<script>
		function personalChart () {
			//gets the value of the slider element amount1
			var x = document.getElementById("amount1").value;
			//adds the slider amount (x) to the data for the graph
			var personalized = [3, 12, 6, 9, 10, 5, + x];
			var chart = new Chartist.Bar('.personalized', {
			  labels: ["year 1", "year 2", "year 3", "year 4", "year 5", "year 6", "you"],
			  series: [ {
				name: 'Drink series',
				data: personalized
			  }]
			}, {
			  low: 0,
			  axisX: {
				offset: 25,
				labelOffset: {
				  y: 10
				}
			  },
			  axisY: {
				offset: 35,
				labelOffset: {
				  x: -10,
				  y: 3
				}
			  }
			});
			<!-- Wipes out the old HTML and replaces it with the chart. It works but not sure about the properness of it. -->
			document.getElementById("takeaway").innerHTML = "";
		}
	</script>
	
	
	</body>
	</html>

1 It’s all relative.

2 Anything that is work to learn rather than work to do? In trying to define that I’m not sure it sounds as solid as it does in my head.

3 Nothing impressive but some fundamental concepts that I can now map out quickly to do some neat tricks.

4 Smallest federated image editor?

Comments on this post

  1. CogDog said on February 25, 2015 at 12:31 pm

    Tower 6 reported a sighting of you inside the Programmistan borders, confirmed!

    I learn a lot from code examples in Stackoverflow, just seeing how people take general queries and code solutions in multiple ways.

    To me the best solution is The One I Can Get To Work (damn the lack of elegance).

    I would suggest learning some more about how to move the code you have interspersed in the HTML in the head, using the jQuery document ready stuff. You can dynamically populate all the divs, and create the responses to clicks and menu changes, It makes for code that’s easier to work on (separated from output content) an ultimately can work better.

    For example, on your slider, I’d look for something to reset the prompt when you move all the way back (or have a reset button).

    Please make your way deeper into Programmistan but at a comfortable pace. But once inside, no sense lurking near the fences.

  2. CogDog said on February 25, 2015 at 12:32 pm

    Hey, where did my comment go?

    • Tom Woodward said on February 25, 2015 at 12:54 pm

      Rescued from the spam box.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL