Class 6. JavaScript & jQuery 1

What are JavaScript and jQuery?

JavaScript, alongside HTML and CSS, make up the three core technologies of the web. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images and 2D/3D graphics, interact with the user, and pretty much everything else. JavaScript (often abbreviated JS) allows you to implement complex and dynamic web pages.

jQuery is a library, a set of helpful add-ons, to extend the JavaScript programming language. In general, jQuery is much better at giving you immediate, visual results than regular JavaScript. 

In this class, you’ll likely use a mix of them: basic or “Vanilla” JavaScript and jQuery. 

Why JS?

JavaScript was built for front-end interaction, so it’s perfect for a graphic designer! But now it’s also used on back-end interaction, so the syntax is familiar. 

Brief History of JavaScript

1995 — Famously written in ten days by Brendan Eich an engineer at Netscape
2005 — Not taken seriously until 2005 when Google used it to write Google Maps
2006 — jQuery first released
2009 — Ryan Dahl writes Node.js, creating server-side javascript
2018 — Laurel Schwulst and Matt Wolff teach Yale students the basics of JavaScript

Libraries of Code

JavaScript has been able to grow because it’s so flexible. As we know regarding the history of technology, “things build on top of other things.” Code is no exception. jQuery’s slogan is “write less. do more” because its library allows just that. 

jQuery is just one of many many libraries people have developed. The basic idea behind a library is pre-written code to extend JavaScript allowing for easier development. Three.js and P5.js (formerly Processing), for example, are both libraries meant to make complex coding with graphics, sound, and language more easily available.

Google hosts some specific JavaScript libraries for people to easily use and access them:

Introduction to JavaScript

JavaScript in the Console

The Web Console is like a command-line interface for a web page. It’s a tool that gives you a behind-the-scenes look at what your page is (or isn’t) doing. The Console does two main things: 

  1. Logs information associated with a web page. Such as:
  • Informational messages explicitly logged by JavaScript code
  • Network, JavaScript, CSS, or security errors and warnings
  1. Enables you to interact with a web page by executing JavaScript expressions.
Start by opening your homepage/or something else in a new browser tab. Then open the JavaScript Console: ⌘⌥J or View→Developer→JavaScript Console.

Similar to Terminal, the JavaScript Console is a text-only interface. When we type into the console, we’re writing expressions in real-time. To communicate with the console, we need to use JavaScript, but JavaScript is a language with precise rules, spelling, and grammar.

Try typing something into the console. Hit enter to return the result. Unless you entered a proper data type or something already in JavaScript, you’ll likely see something similar to this: 

Data Types

JavaScript understands three basic Data Types: Numbers, Strings, and Booleans.

JavaScript won’t distinguish between different types of numbers, like integers. To type a number into the console, just enter numerals without quotes. If you enter a number into the console, you’ll get that number back.