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 alibrary, 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 atNetscape
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
2019 — Laurel Schwulst teaches 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 allowsjust 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(formerlyProcessing), 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:
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:
Logs information associated with a web page. Such as:
Informational messages explicitly logged by JavaScript code
Network, JavaScript, CSS, or security errors and warnings
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:
An Error Message in the Console
Data Types
JavaScript understands three basic Data Types: Numbers, Strings, and Booleans.
Numbers
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.
What are JavaScript and jQuery?
Why JS?
Brief History of JavaScript
Libraries of Code
Introduction to JavaScript
JavaScript in the Console
Data Types