loader image
Skip to main content
If you continue browsing this website, you agree to our policies:
x

Topic outline

  • Unit 1: Working with Objects in JavaScript

    JavaScript is an Object-Oriented Programming (OOP) language based on prototypes. This unit will focus on the different properties of using objects in JavaScript. We will start by reviewing how to create objects and how they are used in programming. Then we will cover some built-in objects useful when programming, including the Math Object, Date Object, and String Object. Finally, we will construct a basic web page to test some of these built-in objects.

    Completing this unit should take you approximately 2 hours.

    • Upon successful completion of this unit, you will be able to:

      • explain the difference between class-based and prototype-based programming;
      • create objects using the "new" keyword;
      • model the use of Native Object, Math Object, and Date Object; and
      • construct a simple web page using  a built-in object.
    • 1.1: More on Objects in JavaScript

      Objects were covered in the first course in this series. Objects help programmers write reusable code for real-world objects. You will review Objects and then shows how to create them with constructors.

      • Objects are an essential data type of JavaScript, and learning how to use them is necessary to develop applications. We will start with a quick review of objects from the first course. Try the examples in this article to review creating and manipulating objects, accessing objects using dot [.] notation and bracket notation, and setting and getting object members. You can use the JavaScript Console on your browser DevTools to complete the examples.
      • 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.

    • 1.2: Object-Oriented JavaScript

      Every day, applications on the web help you buy a car, transfer money or take an online class. These real-world objects are represented in programs using objects and classes. This section presents an overview of object-oriented programming concepts and their use in JavaScript prototypes and classes.

      • 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.

    • 1.3: Working with Built-In Objects

      Javascript comes packaged with handy built-in objects that you can use without much effort.  The articles in this section cover some of those objects and how they can be used in a program.

      • 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.

    • 1.4 String, Math, and Date Objects in JavaScript

      Some of the most used built-in objects are Strings, Numbers, and Dates . On many web pages, you will see the Date/time displayed. String and numbers are essential for user input and data manipulation. You should follow along with the examples to strengthen your coding skills with these objects.

      • 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!

    • Unit 1 Assessment

      • Take this assessment to see how well you understood this unit.

        • This assessment does not count towards your grade. It is just for practice!
        • You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
        • You can take this assessment as many times as you want, whenever you want.