We’ll start off simple by discussing variables, data types, and loops. Then, we’ll move on to more complicated concepts like functions, selectors, and events. You’ll even get a chance to apply the skills you’ve learned by putting together some examples – perfect for any web designer!
What You’ll Learn
- Variables and data types
- Arrays and objects
- Functions and selectors
- How to put it all together
You’ll need some assets to follow along with the course properly. You can get them prepped and ready by clicking the button below.
- In the browser console
- By writing it in-line in an HTML document
- By using a dedicated JS file
3. Data Types
typeofoperator identifies the type of a variable.
The composite data types include:
And that’s what we’ll be covering next.
The first composite data type we’ll discuss is the array. Arrays are an ordered list of values that can be stored and manipulated. Arrays can contain any type of value - numbers, strings, booleans and even other arrays. Arrays are used to store multiple pieces of data which can then be accessed and worked with easily. They are often used in loops and other functions to store the results of computations and operations.
To understand objects, you need to understand properties. A property is a associate between a name and a value. For instance
color = red.
person and established several associated properties, including,
married (marital status):
operators are special symbols used to perform operations on data. They usually take two or more values as input and produce a result as output. Commonly used operators include:
- Assignment operators: like
- Comparison operators: like
- Logical operators:
7. If Else Statements
can be used to create powerful and custom logic by combining multiple conditions using the logical operators such as
! etc. It also allows for nested statements where one or more set of conditions can be checked within another statement. This allows for greater control over how and when code should be executed.
function keyword followed by the function name, an optional set of parameters, and the code body wrapped in curly brackets.
Functions can also directly return a value or have an implicit
return statement which will return undefined if no value is specified.
The next lessons put all you’ve learned so far to work with some practical examples.
12. Back to Top Button
Watch video lesson [1:06:15] ↗
This is the first of five demos in this course. The Back to Top button is a popular thing to include on a website as it helps to improve the user experience for site visitors. To create this button, you need to use the ID attached to the header of your website. Use this to tell the script the button’s destination. The button itself is placed in the footer.
Then in the style.css file, you can make adjustments to how the Back to Top button appears and how it functions, including its positioning on the page, color, size, and so forth.
13. Textbox Auto Completion
Watch video lesson [1:17:11] ↗
In this demo lesson, you’ll create a textbox that supports auto completion. This can help out the user experience considerably when it comes to filling in forms.
To do this, you’ll need to add a few variables to your script file, including
targetInput results for countries, then you can add
targetInput.addEventListener set to
keyup which makes it so whenever someone begins to type in the form field, the script will start comparing that input with the country list we’ve already established.
14. Simple Content Slider
Watch video lesson [1:41:42] ↗
In the third demo, you’ll get to create a content slider that contains images, text, HTML, and anything else you’d prefer. In the example, the slider contains quotes:
In the script file, you’ll set where the cursor is placed, whether or not the forward and back buttons are active, the slide width and height, and the number of slides included.
15. Image Lightbox
Watch video lesson [1:39:50] ↗
In the fourth demo, you learn how to create an image lightbox. A lightbox is usually an overlay that shows a much bigger version of a thumbnail and it can have many applications. In this example, you’re creating an image gallery and setting the lightbox to appear when an image is clicked. This makes an overlay of a larger version of that image appear. When you click anywhere off of that image, the lightbox closes.
16. Tab Control
Watch video lesson [1:44:02] ↗
In the last demo of this course, you learn all about how to create a simple tab control that allows visitors to click between tabs to toggle different content.
The markup for this is pretty straightforward. The active tab has the class
active and the
tab-contents contain whatever content is to be display within each tab.
Watch video lesson [1:46:43] ↗