PRDV402: Introduction to JavaScript II

In the previous examples, you created one object with its properties and methods. How would you create more than one? Constructors. Constructors allow you to create as many objects as you like. This article explains how to use the new keyword and run constructors in JavaScript programs.

Object-oriented Programming (OOP) is a way to model real-world objects in applications using objects and classes. This article overviews object-oriented programming (OOP) in JavaScript and describes three main concepts: classes and instances, inheritance, and encapsulation. After reading this article, can you explain the difference between "classical OOP" and JavaScript's class-based object-oriented model?

All objects in JavaScript have an internal property called the prototype. Prototypes are used in JavaScript to reuse code and combine objects. This section will help you understand how prototype object chains allow objects to inherit features from one another. It will also explain how the prototype property is used to add methods to constructors.

This article presents an overview of classes in JavaScript. A class can be seen as blueprints or templates for creating objects. Classes are a way to bundle the properties and the methods that act on those properties (encapsulation). Constructors are used to initialize the properties of the class when you create a new object. Inheritance is a way to create a class hierarchy and reuse (extend) code. You can also override methods and customize your classes while using inheritance.

This video covers JavaScript object creation using functions and provides examples. It also explains how to use the new keyword when creating objects and what happens behind the scenes. Additionally, it covers creating object methods using function closures. The video also explains method creation and syntax for declaring classes in JavaScript, including different types of syntax that can be used, with many examples. Follow along using your favorite editor and create a Shape class with methods.

This article talks about "global objects" (built-in objects) in that they are objects in the global scope, not the global object itself. About 13 different categories are listed. Many of the objects we have started discussing, and some we will touch on as the course progresses. We will look at the String and Math objects, and the practice will use the Date object in the next section.

In JavaScript, the global property Infinity represents a numeric value of infinity. This article provides examples of its usage. This infinity behaves slightly differently than the mathematical infinity most people are accustomed to. Some positive and negative infinities can be used in math calculations; however, sometimes, using infinity in calculations may result in NaN (Not-a-Number), so understanding the rules for working with Infinity is important.

A String is simply a sequence of characters. There are different ways to create Strings – either as a string literal or as a String object using the String() constructor. Strings can be compared to an array of characters and are often accessed similarly. Understanding them is crucial as they play a significant role in input and manipulation within coding.

This article describes Number, a primitive wrapper object used to represent and manipulate numbers. "Number" represents floating point numbers like 45 or -3.24. Numbers are encoded as 64-bit binary, much like double in Java. There are some helpful functions in "Number" like Number ("123") would return the actual number 123. However, a "Number" ("Iamnotanumber") would return NaN (Not-a-Number) because it could not convert that into a number.

Math is a built-in object with properties and methods for mathematical constants and functions. It is not a function object. Math works with the Number type. Math functions are all static, so each starts with Math.myfunctioncallhere(). Math.PI and Math.random() are two Math functions used a lot when doing calculations.

This article describes the different methods for obtaining dates in various formats. The Date object in JavaScript returns a number representing milliseconds since midnight on January 1, 1970. Time is presented in Coordinated Universal Time (UTC) and isn't converted to time zones. When using the getDay() function, it uses local time from the computer. However, when using getUTCDay(), it returns UTC day instead of local time. The Date object is very useful when we need a timestamp or something similar.

When working with Strings you may need to focus on only a section of the string. The substring method allows you to break a String into smaller parts. In this video example, we will walk through how to use the indexOf and subsringmethods to create an interactive program with the user.

This video uses the Date function and displays it on a webpage. It shows how to grab the current date and time with JavaScript and display it on the webpage using a button. You should practice on your computer while watching the video for the best understanding. This exercise does not count toward your grade. It is just for practice!

An array is a way to store a collection of multiple items under a single variable name. This section introduces how to create, delete and access array elements.  Think about the following as you read the article:

• How are array elements accessed?
• What methods are used to access the elements of an array?
• How would you convert a string into an array?

In JavaScript, arrays can be created in various ways. This section provides examples of using Array literal notation and constructors with single and multiple parameters. Another way to create an array is by using the split() method to convert a string into an ordered list. This method can be particularly useful when taking input from users as strings. This section also provides some examples of common array operations in JavaScript.

When creating an array in JavaScript, you want to be able to create it easily and then use it to help make your coding less complicated. This video shows how to create and do basic array manipulations with your created array. It is a look ahead to some of the other methods and concepts we will cover in this section.

Now you will practice creating a Guest List using JavaScript arrays. We recommend following along with the video on your editor.  This exercise does not count toward your grade. It is just for practice!

One method to iterate through an array in JavaScript is forEach(). This method goes through each element of the array one at a time and can be useful when applying operations to specific elements within the array.

In JavaScript, the indexOf() method returns the first index at which a specified element can be found in an array. If it does not exist in the array, -1 is returned instead. Similarly, lastIndexOf() returns the last index where an element appears or -1 if it doesn't exist within the array. These methods are incredibly useful when searching for elements and are commonly used in various coding instances.

The sort() method for arrays in JavaScript will sort the elements of an array in place and return the reference to the sorted array. The sort defaults to ascending. Sorting arrays makes finding the minimum and maximum of data sets easy. The reverse() method can change the ascending sort into a descending one.  This video shows how to sort an array of numbers and characters.

When an array is "destructured," the contents are unpacked. Think of your closet and shoes; you only want red ones. You would need to search your collection of those shoes, so you would need to "unpack" them. You can think of destructuring arrays in that same type of idea. In this video, you will learn how to do this in JavaScript.

Adding or deleting items from arrays in JavaScript is a common procedure, so we focus on the push() and pop() methods. The pop() method removes the LAST element of the array and returns it. It does change the size of the array. The push() method adds one or more elements to the end of the array and will return the new length of the array. Watch this video and follow along with your favorite editor.

You may develop a useful algorithm as you work with arrays in JavaScript. However, before writing your algorithm, it's important to know about the many built-in methods already available in the language. This video guides you through some of the most commonly used methods and provides examples for each one.

In JavaScript, arrays do not need to be declared with the maximum amount of data that will be entered. Instead, you can declare an array and add data as needed. For instance, this example creates an array for grades and allows users to enter values. It also demonstrates how while and for loops can be used to access arrays and manipulate data. We recommend following along with the video on your editor. This exercise does not count toward your grade. It is just for practice!

Watch this video to learn about Sets.  Set objects in JavaScript are a collection of values, much like an array. The difference in using a Set is that sets only store unique values. This property can help solve certain problems without you having to write your code to make an array not have a duplicate. Basic Set operations are important to understand ( add, delete, get, find).

JavaScript objects hold structured data { key: "value" }. A limitation of this type of storage is that the keys have to be strings or symbols. Maps help with this limitation by allowing a key to be any type. Maps are iterable structures with certain commands that help use them efficiently. Try the examples in the video and please remember to open your Developer console.

In these examples, you will learn how to create and iterate over a Set and some basic Set operations. You should put these examples into your editor, run them, change some things, and try rerunning them.

Map objects are collections of key-value pairs where each key in the Map can only occur once and is unique within the Map's collection. A Map object is iterated by key-value pairs, meaning that a for...of loop returns a 2-member array of [key, value] for each iteration. Iteration occurs in insertion order, which corresponds to the order in which each key-value pair was first inserted into the map using the set() method (that is, if there was not already a key with the same value present when set() was called). Try the examples at the end of the section. These exercises do not count toward your grade. It is just for practice!

A function is a block of code that can be reused multiple times as needed. Functions may have zero or more parameters and can return values or not. In JavaScript, functions can be created using various methods, such as a function declaration or function expression.

Function Declaration:

function panda() { //do something in here
//return something (or not)
}
Function Expression:
var panda = function(){
//do something
}

In JavaScript, a function returns a value by returning the value in the "return" statement to where the function was called. For example:

sum = add(a,b)

Anonymous refers to not having a name or any means of identification. When using an anonymous function in JavaScript, your function will not be named. For example, let x = function() { console.log("I am anonymous"); }; In this case, "x" is the variable assigned to the anonymous function and NOT its actual name.

Functions can be created using a "function" statement or the Function() constructor. Dynamic functions are created when defining functions with the "new" operator and Function() constructor. Constructors not only create new objects but also specify the behaviors and properties of those objects.

Scope refers to the variables available to a code segment at a given time. If a variable is out of scope, JavaScript cannot access it. The two types of scope are local and global. Global variables are declared outside of a block and can be accessed globally. Local variables are declared inside a block, and only that block can access them.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). Simplified, a function inside another function can access the variables from the outer (parent) function. This is a type of encapsulation in JavaScript.

Scope in JavaScript can be broken into two types: local and global. When you declare a variable inside a function, a function will have its local scope. A global variable will be declared outside of functions and can be used throughout the code segments. When using global variables, you must be careful because there are rules for when your global and local variables have the same name and how the precedence will work.  Watch this video for how scope is implemented in JavaScript.

When using closures in JavaScript, you can think of them as a "nested" function. The inner function will have access to the outer function's variables, its own variables, and the global variables. The inner function has access to the outer function's parameters so that they can be quite powerful. After watching this video, can you name the inner function and outer function and describe how they work together?

The "scope" and "closures" in JavaScript can sometimes become intricate and confusing. This walk-through will step you through the basics of scope and talk about the scope chain and closures. This even steps into the more advanced concept of scope hoisting. You should try to work along with the video on these examples for a better understanding. This exercise does not count toward your grade. It is just for practice!

This video will explore how the thiskeyword functions in JavaScript. The most important thing to remember when working with this is what the function containing it is called. The value of thischanges depending on its calling context. For instance, if a function is called without an object reference, then thisrefers to a global variable. On the other hand, if a function is called with an object reference, then this refers to that specific object.

In JavaScript, there is a way to call a function by using the .call() method. The syntax of the .call() is as follows:

functionName.call(thisArg, arg1, arg2, ….) // arg1 and arg2 are optional

functionName: Refers to the function being called and. thisArg specifies the object that this references inside the invoked function.

Another way to invoke functions in JavaScript is using the .apply() method. The syntax for .apply() is as follows: functionName.apply(thisArg, [array]). "functionName" refers to the function being called. However, with .apply(), an array containing all values can be sent instead of individual arguments. Additionally, "thisArg" specifies the object that "this" references inside the invoked function.

The bind() method does not invoke a function but instead takes an existing function and creates a new function with a specified value for "this" inside the new function.

The syntax of the bind() method is:

bind(thisArg, arg1, arg2, ….) // arg1 and arg2 are optional

This example demonstrates a function invoked using call() and bind(). Understanding how these methods use this and what values they will assign is essential. Working through these examples will give you insight into the various values this can take on.

In JavaScript, call() and apply() methods allow you to assign a custom this value to your functions. Why might you want to do this? Well, using these methods can enable borrowing another object's methods. It is important to remember that the value of this is assigned when a method or function is called and not defined. We recommend you watch this video and try the examples in your editor. Note that this exercise does not count toward your grade; it is just for practice!

Nested functions are much like nested loops. They occur when one function is nested inside the other. The inner function is private to the outer function. We discussed closures earlier – binding these variables with a closure allows nested functions to "inherit" the arguments and values of the other function. Understanding what function can access the other's variables is a unique relationship.

Recursion is when a function/method calls itself. It can be thought of as another way to loop or iterate. There are three ways in JavaScript that a function can refer to itself (call): 1. The function's name (it just calls its name); 2. arguments.callee; 3. An in-scope variable that refers to the function.

A classic recursion assignment is to do the factorial of a number. This video tutorial will show you how to write this program in JavaScript. Ensure your IDE is open and ready to work with this step-by-step guide.

Higher-order functions are functions that either take another function as an argument or return another function. JavaScript can become very powerful when you understand how to use these functions to help you write more powerful code. You use JavaScript's callback functionality when you pass a function as an argument.

This practice video shows you how to create a program that makes concentric circles using functions in JavaScript. It uses a loop to keep the circles drawing. For a challenge, change the loop into a recursive call once you have it working. This exercise does not count toward your grade. It is just for practice!

In the DOM, all document parts are organized in a hierarchical tree-like structure consisting of parents and children. These individual parts are called Nodes. The Node interface is an abstract base class, so there is no such thing as a plain Node object. Look at some of the most used properties nodeType, parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling, and attributes.

The Document interface is an interface for web documents. It represents a document as a logical tree and has different properties and methods you can access as you build. 

Element nodes in HTML documents have properties and methods that help us locate specific elements on a webpage. Using methods such as getElementsByTagName() and getElementById(), we can easily parse the document and find what we need without searching from the root parent element.

Most interfaces in the HTML DOM API map almost one-to-one to individual HTML elements. This interface allows you to perform various actions on your webpage, such as getting, removing, adding, and changing HTML elements. Many options and methods are available to accomplish these changes, and we will cover some of the most common ones in the next section.

Understanding the EventTarget interface can make coding much easier to comprehend when working with events triggered by user actions. There are various types of events, and knowing how to handle them is essential for understanding JavaScript and its use of this interface. For example, the addEventListener()method adds a function that responds to certain events (e.g., mousedown).

The createElement() method creates an Element node. The syntax for this method is createElement(type), where "type" refers to the type of element to create and is required as a parameter. This method returns the created node element.

The .append() method inserts a set of Node or string objects after the last child of the document. This can be used to add a new node or move an existing child node to a new position. The append() method does not return a value; its parameters are either Nodes or string objects.

The .append() method inserts a set of Node or string objects after the element's last child. This can be used to add a new node or move an existing child node to a new position. The append() method does not return a value; its parameters are either Nodes or string objects.

In JavaScript, the getElementById() method returns the element with the ID passed as an argument to the function. The syntax for this method is document.getElementById(element_ID), where "element_ID" refers to the ID of an element and is required as a parameter. If there's no such ID, then this method will return null. In this video, we display some basic text on a web page in various ways and use this method in our code.

The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name. The syntax for this method is Document.getElementsByName(param), where "param" refers to the Name that it will search and is required as a parameter. The NodeList is an object similar to an array with properties like length and indexing beginning at 0. However, note that this method does not have full functionality like an array.

The querySelector() is a method that searches and returns the first element that matches the parameter sent to it. The syntax for this method is document.querySelector(param). If a match is not found, it will return null. If there is more than one match, it only returns the first.

The querySelector() returns the first element within the document that matches the selector(s) and null if no match is found. This will only return the first element that matches the selectors. You need to use a different method to return all matches, querySelectorAll()

When working with the DOM, you need to be able to create elements, and once you have created them, you should set whatever attributes you are trying to modify. Finally, you attach your element to the DOM.  We recommend that you follow the examples in this video using your favorite editor. 

This video covers some of the methods mentioned in this section. The DOM Tree comprises nodes from the elements on the page. If you want to change something, you must know how to "grab" the node and use another method to manipulate the node. Follow along with the video and try some of the examples using your favorite editor. This exercise does not count toward your grade. It is just for practice!

We will start this section by looking at how to design a simple web form. Forms must be easy to use and have an organized field layout (first and last name), clear actions (submit your application), and error messages (such as "please provide a username"). The article links to (older pages) examples of form design principles, accessibility, and best practices. Feel free also to browse the most recent articles.

A web page's <form> element is used to create a form on the page, collect user data and send that data to an application for processing. For example, when you shop online, you fill out a form indicating the product and the number of items and then submit it for processing. The DOM HTMLFormElement Interface provides the properties and methods. Forms must have a unique name Forms also must contain a method which says how the data will be sent to the application. Examples show how to use the post and get methods to send user data to an application.

The <input> element is used to create interactive controls for web-based forms to accept data from the user. Various types of input data and control widgets are available, depending on what use you need. The <input> element is one of HTML's most powerful and complex. The DOM HTMLInputElement interface provides the properties and methods for working with the options, layout, and presentation of <input> elements.

An <label> element associates a text label with a form <input> field and is implemented using the DOM HTMLLabelElement interface. The label can tell users what value should be entered in the input field. Having labels helps the accessibility of a form. You can implicitly or explicitly associate a label with a form. When doing it explicitly, you use the for attribute, and implicitly, you nest the <input> directly inside the <label>.

The <select> element gives a menu of options for a user and is implemented by the DOM HTMLSelectElementInterface. You can add the <multiple> attributes to the select element and add multiple options. The examples in this section use HTML, CSS, and JavasScript to customize <select> styles.

When building a form, you want to make sure you are using a basic structure that still covers all you need to cover. Building your forms with dedicated form elements and attributes will help ensure your form is usable and accessible.

Now that you have worked through building a web form, you can test your skills and build a structure that has given parameters. You may try this in the given editor, or if you are using some other editor to work on your forms, feel free to use it to test your knowledge. This exercise does not count toward your grade. It is just for practice!

Input elements of type button are rendered as simple push buttons, which can then be programmed to control functions on a webpage. The element is implemented using the DOM HTMLButtonElement interface. A button can be used for many things, such as sending or receiving data. They make the web page much more functional for the user.

Elements of type text create basic single-line text fields. The Try It example in this section will help you make your first text element. Text elements also have many attributes that can be helpful such as list, maxLength, minLength, size, and a few more. The section also introduces client-side validation of text fields which will be covered in detail later.

This video demonstrates how to handle the click() event on a button to modify the content of an HTML page. It covers creating basic HTML pages, adding event listeners, and showcasing an IDE that may be useful if you want to try something new.

Radio input elements are typically used in radio groups where only one button can be selected at a time. You can try out the radio button example to see how it works.

Checkboxes default to being checked when they are active. Many web documents have these types of controls. You can change their appearance to make them more rounded and make the labels clear for your users. Checkboxes differ from radio buttons because you can select multiple checkboxes simultaneously.

This video builds some checkboxes that will store car information. It also uses the getElementsByName() method to check different values of the checkboxes by name. It also shows you how to look at the values of radio buttons.

The easier widgets to style are <form>, <input> (but not "search"), <label>, <output>, and a few others. By styling these when creating your form, you make the form easier for the user and ensure the data is correct by using form validation in the next section. This has a great example of styling a "postcard" contact form from scratch. Download the starter file and follow along to make your own styled form.

Some elements, like checkboxes, radio buttons, and <input type="search"> are more difficult to style. Some other elements can not be styled thoroughly at all using CSS. Different browsers render checkboxes differently, which classifies them as an advanced style.

Now, you should be able to complete this exercise. You will be styling a basic form. If you have an online tool you prefer to use for this work, you may do so. Otherwise, work in whatever editor is comfortable for you. You should download the starting point for this task before you begin to work on the practice assessment. This exercise does not count toward your grade. It is just for practice!

The name attribute can reference an element in JavaScript. It specifies the name of an <input> element and can reference form data when a form has been submitted from a webpage. The examples in the section demonstrate how to use JavaScript to set the current value of an attribute.

The HTML The autocomplete attribute lets the developer decide if they want to enable the user to have automated assistance in filling out the form. You can determine where you want the automated responses to come from. They can come from values the user entered previously or pre-configured values the developer has decided upon.

Follow along as you create a text box with autocomplete capabilities to make the form more user-friendly and efficient. The video also covers many concepts from previous units, such as accessing elements using the DOM and working with arrays.

When you enter data, the browser or server will check that it is in the right format and valid for the application. Validation done in the browser is called client-side form validation; if the server does it, it is called server-side form validation. This section presents built-in client-side form validation. The last example in this section shows you how to validate forms without a built-in API using JavaScript and the DOM.

When users enter data into a form, it is essential to have validation to ensure that the information entered is correct. With proper validation, you can receive lots of usable data. If someone enters invalid data into your form, you must have checks to inform them of their mistakes. This video demonstrates validating a form with name, phone number, and email fields. As you watch the video, consider how form validation can be used in different applications.

This tutorial starts with coding the form and then uses JavaScript to validate the input types and information. It steps you through validating and entering a student ID, email address, and URL. This is a great tutorial to grab the code and work along with the video.

In these final practice exercises,  you will use HTML, CSS, DOM, and JavaScript to create forms that can be used with user input on a webpage and then validate the input. Note that these exercises are for practice purposes only. If you need help completing it successfully, download the solution code.