Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                ///////////////////////////////// JavaScript Data Types ////////////////////////////////
    
  // You may have noticed in the first two sections that we declare new variables in the same way no matter what we set them equal to, by using the let keyword and giving the variable a name.

  // JavaScript has dynamic variables. This is what allows us to declare all variables in the same way, and what allows us to reset a variable that may have stored a number before, to storing a string of text.

  // Without realizing, though, you have been following syntax conventions for different data types.

  // When we set a new variable equal to a number, we simply set it equal to that number. But when we set a new variable equal to text, we set it equal to the text within quotation marks. 

  // It is important to become familiar with the different data types, and when and how to use them.


   // 1. Numbers

      // Other programming languages typically specify the use between variables that store integers, which are whole numbers, and variables that store doubles, which are numbers with fractions or decimals.

      // JavaScript has dynamic variables, however, so there is no need to specify whether a variable is storing an integer or decimal/double. 

      // To create a variable that stores a numeric value, we simply declare a new variable to that value. Examples:
   
         let myNumber = 45678930;
         let shoppingBill = 45.89;
         let myAge = 20;
         let numberOfPetsIOwn = 4;


   // 2. Strings

      // Strings are variables that store text. Variables that store strings are set equal to the string in quotation marks, whether it be a sentence, paragraph, or a single word. Examples:

         let myString = "This is my string.";

         let myParagraph = "This is my paragraph. It isn't about anything yet, it just exists to show you some examples of a string. This paragraph could be as long or as short as I want it to be. But, I am out of sentences, so I'll cut it short.";

         let name = "Bob Ross";
         let firstName = "Leslie";
         let lastName = "Knope";


 // 3. Booleans

      // Booleans are variables that store a true or false value. The variables are identified with a name, and set to either true or false. 

      // Booleans are important and useful variables, as they are used in conditional and logical statements, which we will visit later. Examples:

         let myBoolean = false;
         let pizzaIsGross = false;
         let pizzaIsYum = true;


// 4. Arrays

     // Arrays are variables that store a collection of data. They are used to store multiple values within one variable. 
   

     // The following syntax will declare an empty array with an unspecified size. Remember that the value of unassigned variables, including unassigned arrays, is undefined.
         let myEmptyArray = [];

     // Arrays are declared by assigning the variable to data enclosed in brackets and separated by commas. 
    
     // Arrays can store any data type and combinations of different data types. Ex:

         let myArray = ["my", "JavaScript", "Array"];
         let testScores = ["Jane", 80, "Matt", 76, "Kate", 90, "Rachel", 98, "Bartholomew", 85];

     // If necessary, the declaration of an array can span across multiple lines, such as:
         let sameTestScores = [
            "Jane", 80, 
            "Matt", 76, 
            "Kate", 90, 
            "Rachel", 98, 
            "Bartholomew", 85
         ];

               // or

         let animals = [
            "dogs",
            "cats",
            "chinchillas"
         ];

   // An element is single value or input in the array. The array named animals on line 83 contains 3 elements: the strings dogs, cats, and chinchillas. 

   // Each element has an index within the array. An element's index tells us where it is located in the collection of data. 

   // Array indexes begin at position 0. The first element in an array, then, has an index of 0. The second element is at index 1, the third is at index 2, and so on.

   // To access data stored in arrays, we have to specify the index of the element we want to obtain. 

   // Ex: I want to obtain the second element within the array named animals. The second element in this array is the string "cats". 
    // The first element is at index 0, so we know the second element is at index 1. We would access the element at index 1 like so:

         animals[1]; 

   // Elements can be accessed by specifying their index within an array and can be assigned to a new value. Ex:

         animals[1] = "polar bears";
         
   // The array named animals would still contain 3 elements, but instead of dogs, cats, and chinchillas, the array now contains dogs, polar bears, and chinchillas.

   // To print an element to the console, we simply place the statement accessing the element within the console.log print statement:
        console.log(animals[1]);
   
   // We can print multiple values in one print statement by adding a space in between the values, like so:
    // Note that the operator "+" is NOT adding the three values in the traditional sense. Rather, it is joining the two strings together, with a space in the middle.
    // We will discuss String operators in section 2.3
        console.log(animals[1] + " " + animals[2]);

   // Or we could print the entire animals array:
        console.log(animals);

   // Q: How would we use indexes to access values in the array named "testScores" for Kate and Bartholomew only? 
    

     // Side Note:  Sometimes the content of an array needs to be added in later, and we want to create an empty array. 

     // If we know what size our array is going to be, we can declare an empty array of a fixed size like so:

         let finalExamScores = new Array(30); // the variable finalExamScores is now assigned to a new array with 30 empty (undefined) elements. 


// 5. Objects

  // An object is a collection of properties, and a property is an association between a name (or key) and a value.

  // Objects are essentially used to store multiple values within one container.

  // These values are referred to as properties of the object

      // To understand properties, think of your dream car. Describe the car to yourself. You'll probably mention the color, make, model, etc. These are properties of the car.

      // Cars are not the only things with properties, however. For example, describe yourself or your friend. You'll probably mention name, hair color, eye color, favorite show, favorite animal, etc.

      // These are all properties of yourself or your friend! 

      // Objects allow us to create a variable in our program with which we can store all of these properties. 

      // So, we can make an object that represents ourself, our friend, our dream car, or anything else, and store the properties in it.
   
  // The value of a property can be any data type, meaning the 'year' property of a car can store a numeric value, while the 'model' property stores a string value

  // We assign properties to objects in name:value pairs, either during the construction of an object, or after an object has been created

  // First, we will look at declaring an empty object, and adding properties after an object has been created.
     
      // An empty object is an object that does not yet have any properties assigned to it. Remember that we can always add properties to an object later on.
    
      // To declare a new object without any properties, we say:

        let myFirstObject = new Object();
          
          // The object, named myFirstObject, was set equal to the value "new Object()".
    
          // The value we set the object equal to, "new Object()", is called a Constructor. 

          // A constructor is code that creates, or *constructs*, a new instance of something that has already been programmed. 

          // In this case, the constructor creates a new instance of an object. Objects have already been programmed into the JavaScript library, so the constructor uses the code as a blueprint to create our new object.  
  
          // We are able to program our own constructors, and use other constructors built into the JavaScript library, but we will cover these more in depth in a later segment.

      // We created our empty object on line 152, named myFirstObject. Now we want to add properties so that the object is no longer empty:
    
      // To add a property to an object, we first have to *access* the object that we will be adding the property to. 

          // We access an object by calling the object name, then we access the property of the object:

      // We can access an object's property two ways:  
        
          // (1) Dot Notation. Ex: objectName.propertyName  
              // Dot Notation uses a dot/period between the object name and property name to access or declare that property

          // (2) Bracket Notation. Ex:objectName["propertyName"]
              // Bracket Notation uses a pair of brackets after the object name, with the property name placed inside of the brackets in quotation marks

      // Dot Notation is more often used because it is easier to read and is more efficient, as we have to type less characters than we would using bracket notation; however the two are interchangeable

      // Adding a property to an object is similar to declaring a new variable, but we access the object and property and assign it a value, instead of assigning a value to a new variable using "let newProperty = ___"

            // Ex: objectName.propertyName = "someValue"; or objectName.propertyName = 12345;

            // Adding a new property with dot notation:
            myFirstObject.myFirstProperty = "this is my first object's first property";

            // Adding a new property with bracket notation:
            myFirstObject["mySecondProperty"] = "this is my first object's second property";
            
            // Remember that properties can be any data type, and objects can have multiple properties of different data types

     // Dot and bracket notation are also used to access a property that we want to edit the value of, like so:
            
            myFirstObject["myFirstProperty"] = "The value of this property has changed to this sentence!";
            
            myFirstObject.mySecondProperty = "this property has a new value, too!!";
            // Check the console to see that the values changed:
            console.log("New values: " + myFirstObject.myFirstProperty + " and " + myFirstObject.mySecondProperty);

  
  // We can also create objects and assign their properties on the same line, or across multiple lines as we can do with arrays:

  // When we create a new object and assign properties at the same time, we do not have to set the new object equal to the object constructor, "new Object()"

  // Instead, we set the new object equal to its properties using the following syntax: let newObject = {propertyOne:"valueOne", propertyTwo:"valueTwo", propertyThree:"valueThree"};

        // Make sure that the properties are inside of the curly brackets, the property name is followed by a colon(:), and that the property:value pairs are separated by commas:

        let newCar = {make:"Honda", model:"Civic", color:"Gray"};
        
        // on the line above, the newCar object is given 3 properties: make, model, and color.

        // we can print these properties to the console like so:

        console.log(newCar.make);
        console.log(newCar.model);

        // Just as we were able to add and alter properties we added to an empty object, we can also alter the value of these properties after they are assigned, and add new ones:

        newCar.color = "Red";
    
        newCar.year = "2018";

        // On lines 220 and 222, we used dot notation. Remember that the same actions can be achieved using bracket notation.

        console.log("My car is a " + newCar.color + ", " + newCar.year + " "+ newCar.make + " " + newCar.model);

   // Objects also have methods, which are functions that are programmed as properties of that object. We will discuss the use and creation of methods in a later segment.


///////////////////////// Exercises /////////////////////////
// 1. Declare four new variables: summer, fall, winter, and spring. Set these variables to their boolean value, depending on which season it currently is. The current season will be 'true'.
// 2. Declare a new array named "endangeredAnimals", with the following elements: 
//    Giant Panda, Siberian Tiger, Snow Leopard, Sea Otter, Asian Elephant, Gorilla, and Tasmanian Devil.
// 3. Print "Snow Leopard" to the console by accessing the element through the endangeredAnimals array.
// 4. Giant Pandas are no longer endangered. Assign the element containing "Giant Panda" in the array to the new value of "Orangutan". Print this to the console by accessing the element through the endangeredAnimals array.
// 5. Print the entire contents of endangeredAnimals to the console.
// 6. Create a new object named "me" with the following properties: name, age, eye color, hair color, and favorite food

//Extra Exercises:

//1. Declare five different variables that store: a string, a number, a boolean, an array, and an object. You can name them anything you want, and give them values of your choice. 

//2. Make your own array called colors, and fill it with three colors of your choice!

//3. Try calling one of the elements from the array in the console. We can type this directly into the console by typing colors[0]. (or colors[1] or colors[2]).

//4. Now try typing colors[3] into the console. Explain in a comment why this doesn't work!

//5. Change one of the elements in your colors array to a new color, using what we just learned. 
//Log the new element into the console. 

//More Extra Exercises:

//1. Write what the following data types are. You can write the data types next to the code as a comment. 

let age = 197;
let today = "08/19/2021";
let itIsHotOutside = true;
let weather = "ok";
let todayIsAMonday = false;
let daysOfTheSchoolWeek = ["monday", "tuesday", "wednesday", "thursday", "friday"];

//2. Print the variable "age" to the console. 

//3. Print the first element of the daysOfTheSchoolWeek array to the console. 

//4. Make a new array called colorsOfTheRainbow, and put the colors of the rainbow in it (as strings)

//5. Print the whole array colorsOfTheRainbow to the console. 
              
            
!
999px

Console