A Designer and Developer walk into a cocktail bar...

“Should I learn jQuery or javascript first?”

The developer, answers by saying,

“It seems unlikely that a person will be able to use jQuery for anything complex or intentioned if a person isn’t in some ways connected with how jQuery is actually really javascript written in an idiomatic fashion.”

The developer goes on to say,

“The reality of using jQuery is that you only need to learn a small amount of pure javascript and so instead of you taking some long course of study where you learn all kinds of not-related-to-design kinds of javascript stuff, I have a few questions, that if you can answer properly from your own point of view, you know enough javascript that jQuery should be reasonably ‘easy’ to work with.”

1. What is a variable and how to define it?
2. What is a function and how do you define and call one?
3. What are arguments?
4. What are some basic differences between strings, arrays and objects?

The above questions represent some fundamental building blocks of javascript that are eternally present but possibly not obvious in regular everday jQuery. Having a clear understanding of the above questions will greatly aid a designer in using Jquery, not being able to properly answer the above questions will likely lead to a designer being very unclear about how to properly use jQuery.

A variable is any word like waffles or person or node that is set to the value of something else by using the precise pattern var word =;

  var theDude = 'john davison or jd if you are into the whole brevity thing'

  <script>
    var theDude = 'john davison or jd if you are into the whole brevity thing'
  </script>
  <button onClick="alert(theDude)" >show the dude</button>

A function is any chunk of code that has been written inside a function definition.

Wait, isn’t that a circular definition? kind of…

Consider typing the below regular javascript code into the chrome javascript console(‘opt cmd j’ on a mac)

  alert('how is a raven like a writing desk?')

The above code can be executed over and over just by typing it into the console and pushing enter.

Imagine we wanted to alert the message ‘How is a raven’ but instead of typing alert('some message') everytime, we wanted to click a button, how might we accomplish that?.

  <button onClick="alert('how is a raven like a writing desk'">click me</button>

What if we wanted two buttons and we wanted them to do the exact same thing? We could define a ‘function’, ie, a piece of reusable code that can be referenced with a name.

  function showMessage() {
    alert('how is a raven like a writing desk')
  }

  <button onClick="showMessage()" class='btn'>click me</button>

  <button onClick="showMessage()" class='btn'>eat me</button>

Consider our showMessage() function.

  function showMessage() {
    alert('how is a raven like a writing desk')
  }

What if the message we wanted to alert needed to change based on the button we clicked? How could we handle that? We could use ‘arguments’. Unlike human arguments which can be tense and lead to bruised feelings, a javascript argument is really more like sending chunks of information to a function that the function can then do stuff with. Even though ‘arguments’ might seem kind of simple, communicating clearly about arguments is an essential and in certain situations complex skill when dealing with jQuery and other design centric javascript.

Let’s add an ‘argument’ to showDynamicMessage().

  function showDynamicMessage(messageText) {
    alert(messageText)
  }

Notice we added the word messageText inside the parens (). In programmer speak, you could say that we added argument definitions to the function definition and then we reference the arguments inside the function. The really important and often confusing part about ‘arguments’ is that ‘arguments’ represent changing information that can be referenced as variables inside functions. Arguments can be of almost any shape and flavor, but we won’t dig into that complexity here.

Let’s reconsider our two buttons,

  <button onClick="showDynamicMessage('i just got clicked')" class='btn'>click me</button>

  <button onClick="showDynamicMessage('i just got eaten')" class='btn'>eat me</button>

Strings, Arrays and Object are all javascript ‘data structures’. So what is a data structure? A data structure is some kind of container for information that a machine knows how to work with. Some people struggle with understanding this which is natural, programming can be full of language that overcomplicates or hides the underlying simplicity of stuff. Think about going to the beach and building a sand castle, chances are you’ve either yourself used or seen other people use a bucket to hold sand. In this case, a bucket is much like a ‘data structure’ in the sense that there is something inside the bucket, sand, that we as castle builder want access to. Strings, Arrays and Object are like different types of tools for holding onto information.

A String is any normal A-z, 1,2,3 or @,$,% characters contained between two '' or "". Strings are one of the smallest kinds of data that we work with in Javascript.

  'How is a raven like a writing desk'
  "How is a raven like a writing desk"

Consider the below alert statement;

  alert('HOW IS A RAVEN LIKE A WRITING DESK'.toLowerCase())

We have a string 'HOW IS A RAVEN LIKE A WRITING DESK' that we call a function toLowerCase() on.

If you are wondering where toLowerCase() came, nice observational skills :). .toLowerCase() is a standard javascript function that can be called on any String.

An Array is a bracketed [] thingy that has other thingies inside it with thingies all being seperated by a comma ,.

Consider the below, we have an Array that has three different letters of the alphabet in it. Also further consider that Array’s keep track of what is inside themselves by paying attention to ‘position’ which is commonly referred to as ‘index position’, ie, always starting from the left as position 0, this array has an ‘a’ in position 0, ‘b’ in position 1 and ‘c’ in position 2.

  ['a', 'b', 'c']

Consider the below,

  var people = ['john', 'jane', 'jimi']

people is a variable that lets us look at the Array with a few names inside it.

Further consider, how could we alert the last name in the array? We can literally add the index position that we want to look at to the end of the variable and javascript will instincitvely know that we want to ‘look up’ the thingy in that position

alert(people[2])

  <button onClick="alert(people[2])">show jimi</button>

  var exampleObject = {key: 'value', foo: 'bar', people: [ 'john', 'jane']}

Objects represent a slightly stickier and less natural kind of data structure. One of the more core things to notice about an Object is that an Object is a ‘brace’ {} that holds onto ‘key value’ pairs. The idea of ‘key value’ pair is kind of abstract and not at first clear but being able to notice when you are working with an object is generally very critical to using jQuery effectively.

Consider the below, we have braces {} and a key name: and a value 'john davison', they key value pair is name: 'john davison'

  { name: 'john davison' }

Consider the below, we a series of key value pairs, note that the key can’t repeat itself cause the Object keeps track of what is inside it by keep track of the keys and a key can only exist once. In the below, we have the first key name: and the second key location:.

  { name: 'john davison', location: 'tender-nob sf' }

If we want to access what is inside of an object, we can call the object with a key and the object will show us the value of the key;

  var person = { name: 'john davison', location: 'tender-nob sf' }

  <button onClick="alert(person['name'])">show person's name</button>