Let's explore basic JavaScript concepts that are fundamental to an eventual use of jQuery. As discussed in chapter 1, though jQuery is itself a deep subject, it requires basic JavaScript knowledge that cannot be ignored.
In this chapter, we'll look at:
The DOM (Document Object Model)
Operators
Data types
Conditionals
These concepts are universally used in programming languages beyond JavaScript, so an understanding of each will serve you well beyond this course. 😎
The DOM
The Document Object Model (DOM) can be one of the most difficult, abstract concepts in programming. It requires an understanding of the interplay between the HTML you write and the browser's representation of it.
A web page you see in your browser is a document object. This is the modeling of your page in the browser. The DOM is not the exact HTML that you wrote; instead, it's the exact HTML you wrote modeled by the browser. Often, the two will look identical, but a browser's modeling of HTML allows the targeting of elements within the HTML by other programming languages like JavaScript.
Imagine that your browser receives a bunch of HTML and then dresses each HTML element in its own little superhero outfit. You still have a bunch of HTML elements, but they're equipped with greater potential once they're part of the DOM, and can be targeted and modify via scripting languages like JavaScript.
Um, what's the point?
It took me a long time to understand why the DOM was important. You already have raw HTML, so that's the point of abstracting it into this DOM thing? The DOM opens up a world of methods that aren't available in raw, browser-less HTML, which I promise are wildly beneficial.
Each object is called a node, and scripts like JavaScript or jQuery will interact with this set of nodes -- not the raw HTML itself!
Data types
Numbers, strings, booleans, and arrays are the main JavaScript concepts you'll encounter while integrating jQuery. We'll focus on those for now!
Numbers are what you'd expect: you can have positive and negative numbers (5,-5), decimals (0.5), and numbers are large as you need (5000-- note the lack of commas here). Numbers aren't just for arithmetic here and are also important in jQuery, where you'll use them to interact with elements on the page.
Strings normally consist of text and are surrounded by quotation marks. A string could be 'Hello students!' or "Hello students!" The type of quotation marks you use is a whole political ballgame, but it's largely up to you. Just make sure the opening quote type matches the closing quote typeBooleans have only two possible values: true or false. How is this useful? Depending on if something is true or false, you could then set a certain jQuery method to run.
Arrays are sets of values, like['dog', 'cat', 'hamster', 'rabbit']. You could also have arrays of numbers, booleans, or any other data type! They are surrounded by square brackets, and their elements are surrounded by commas. To access an individual element within an array, you'll act as if you're picking an element from a numbered list that starts with 0. In the above example, 'dog' is at position 0. If our array was called pets, we'd access 'dog' by selectingpets[0]. For 'rabbit', we'd dopets[3].
Why? You could use numbers in jQuery to move elements a certain number of pixels or to set the time in milliseconds that an element takes to appear. You might use strings in jQuery to modify HTML content or to set properties, such as "red" for a color. You might use arrays in jQuery to modify elements in a list.
Operators
Programming isn't that different from math. You have a set of operations chained together with an eventual result. Operators are a simple representation of this concept! For all of its complicated syntax, JavaScript can be reduced to some very simple punctuation types.
We'll only look at two operators, as they're important in basic jQuery use.
The equal sign
Crucial to understand. The= allows assignment of one value.
color = 'red';This line of JavaScript assigns the value red to color.
The plus sign
A+ sign combines two strings together, for example:
sentence = "Hello" + "students";You can also use+ in arithmetic operations in JavaScript, like5 + 3. Note that you cannot use the subtraction sign to remove strings from a larger string! The- is reserved for arithmetic operations.
Why? You'll use the= sign often in jQuery to assign and modify element values. You will often use the+ sign in jQuery to chain page elements together.
Conditionals
Logic in JavaScript deserves its own chapter, but since we're only thinking of eventual jQuery, just know that you can use words likeif andelse in your code to see if certain statements are true (if this, then do that).
You can also use operators like> (greater than),< (less than),== (equal to; yep, there are two signs!), and more to compare values.
Why? You might want to evaluate if a user's screen size is above a certain number before running a certain jQuery method.
