2B: JavaScript 101

JavaScript is the lingua franca of the modern responsive web, and almost all the pages you interact with online use it in some form or other.  As with the other things we’re learning in this class, our aim is not to memorize every aspect of the language and become experts overnight, but to gain enough understanding of what it is and how it works so that we can ask the right questions when conceiving our own projects and can intelligently leverage the hard work of people who know these things much better than we do.  Thank heavens for JavaScript libraries!


In Class: Hacking with jsBin

To get the hang of how these three languages fit together we are going to explore some examples I set up in jsBin.  This code sharing site is a fantastic tool in the hacker’s toolbox, since it lets you copy and edit code in the cloud without having to invest in your own setup or FTP files to a server, view the output live, and then share all of it with others really easily.  We’ll be making a lot of use of jsBin in this class, so get used to the interface.

The first example is basic, and will let you test out what each of our three major client side languages does, and hack away to make modifications.

Go to http://jsbin.com/busimo/edit?output, follow the instructions, and start hacking.

The next example illustrates the power of the useful and ubiquitous jQuery library, which lets us do fancy things like extract data from structured markup, with a lot less code than straight JavaScript.  For this example, we’re trying to take the Carleton timeline information from this website and put it into a JS object (for a full description of this method see Dave Ward’s post).

Go to http://jsbin.com/zohawafinu/edit?html,js,output read the comments and try to figure out what’s going on.

 


Assignment

The assignment for this week is twofold:

First, make sure you have registered your domain and installed WordPress, and then spend some time setting up your personal website on your newly installed server. These are the most basic steps you should take to get your site looking like personalized rather than a generic WordPress blog.

  • Create an “About” page (not Post) to let the world know who you are
    • Write a brief bio paragraph about your background, what you are studying, your goals, etc. and post it to the site.  See mine at meDHieval.com for an example.
  • Get an API key for the Akismet plugin and activate it to block comment spam.
  • Choose a new theme to install and activate it
  • Add the Simple Custom CSS plugin and use your DevTools skills to change at least one element of your site’s design via CSS code

Secondly, continue your self-directed journey of discovery by taking at least one JavaScript course at Codecademy, so that you can include that experience in your blog post detailed below.

Blog Post

Your course blog post assignment for this week is to reflect on your experience with coding so far, and engage in the debate within the DH community over whether or not humanities students should learn to code.  Your post should include the following:

  • A clear statement in the first paragraph stating your position either for or against.
  • A discussion of your coding experience, including a link to your profile page on Codecademy
    • The profile should show at least one course each in HTML, CSS, and JavaScript
  • At least one quotation from each assigned reading: Kirschenbaum for, or Donahue against.
  • At least one example from your own experience coding, either this week or earlier, that supports your position.

References and links to other articles/blog posts on the issue or not required, but will be looked upon kindly.

 


Resources

JavaScript

Julie Meloni has written several how-to guides for programming, and has very helpfully posted two gentle introductory lectures pitched at Digital Humanists on Slide Share.  We covered some of this material in class, but here are the full lectures to peruse at your leisure.

 

Leave a Reply

Your email address will not be published. Required fields are marked *