Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <head>
</head>

<main id="main-doc">
  <div class="jumbotron bg-primary text-white">
    <h1> Javascript ECMA 6 ("ES 6")</h1>
  </div>

  <!-- Side navigation -->

  <div class="container sticky-top">
    <nav class="navbar" id="navbar">
      <header>
        <h2 id="navheader">Highlights of ES6<h2>
      </header>
      <ul class="nav flex-column">

        <li>
          <a class="nav-link" href="#Let">
            Let</a>
        </li>
        <li>
          <a class="nav-link" href="#Const">Const</a>
        </li>
        <li>
          <a class="nav-link" href="#Arrow_Functions">Arrow Functions</a>
        </li>
        <li>
          <a class="nav-link" href="#Classes">Classes</a>
        </li>
        <li>
          <a class="nav-link" href="#Default_Parameter_Values">Default Parameter Values</a>
        </li>
        <li>
          <a class="nav-link" href="#Array_Find">Array Find</a>
        </li>
        <li>
          <a class="nav-link" href="#Array_Find_Index">Array Find Index</a></li>
        <li>
          <a class="nav-link" href="#Exponentiation">Exponentiation</a></li>
      </ul>
    </nav>

  </div>
  <div class="container">
    <div class="row-md-1">
      <section class="main-section" id="Let">
        <header>
          <h3>Let</h3>
        </header>

        <p>The <mark>let</mark> statement allows you to declare a variable with block scope.</p>

        <code>
          Example
          var x = 10;
          // Here x is 10
          {
          let x = 2;
          // Here x is 2
          }
          // Here x is 10</code>
      </section>
    </div>
  </div>
  <div class="row-md-1">
    <section class="main-section" id="Const">
      <header>
        <h3>Const</h3>
      </header>

      <p>The <mark>const</mark> statement allows you to declare a constant (a JavaScript variable with a constant value).</p>

      <p>Constants are similar to let variables, except that the value cannot be changed.</p>

      <code>Example
        var x = 10;
        // Here x is 10
        {
        const x = 2;
        // Here x is 2
        }
        // Here x is 10</code>

    </section>
  </div>
  <div class="row-md-1">
    <section class="main-section" id="Arrow_Functions">
      <header>
        <h3>Arrow Functions</h3>
      </header>
      <ul>
        <li><p>Arrow functions allow a short syntax for writing function expressions.</p></li>

        <li><p>Arrow functions do not have their own <var>this</var>. They are not well suited for defining object methods.</p></li>

        <li><p>Arrow functions are not hoisted. They must be defined before they are used.</p></li>

        <li><p>Using <var>const</var>is safer than using <var>var</var>, because a function expression is always a constant value.</li>

        <li>You don't need the function keyword, the return keyword, or the curly brackets.</p></li>
        <br><br>
        <code>Example
          // ES5
          <var>var x = function(x, y) {
            return x * y;</var>
          }

          // ES6
          <var>const x = (x, y) => x * y;</var></code>
    </section>
  </div>
  <div class="row">
    <section class="main-section" id="Classes">
      <header>
        <h3>Classes</h3>
      </header>
      <ul>

        <li><p>A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.</p></li>

        <li><p>Use the keyword class to create a class, and always add a constructor method.</p></li>

        <li><p>The constructor method is called each time the class object is initialized.</p></li>

        <code>Example
          A simple class definition for a class named "Car":

          class Car {
          constructor(brand) {
          this.carname = brand;
          }
          }</code>

        Now you can create objects using the Car class:

        <code>Example
          Create an object called "mycar" based on the Car class:

          class Car {
          constructor(brand) {
          this.carname = brand;
          }
          }
          mycar = new Car("Ford");</code>
    </section>
  </div>
  <div class="row">
    <section class="main-section" id="Default_Parameter_Values">
      <header>
        <h3>Default Parameter Values</h3>

        ES6 allows function parameters to have default values.</>

        <code>Example
          function myFunction(x, y = 10) {
          // y is 10 if not passed or undefined
          return x + y;
          }
          myFunction(5); // will return 15</code>
      </header>
    </section>
  </div>
  <div class="row">
    <section class="main-section" id="Array_Find">
      <header>
        <h3>Array Find</h3>
      </header>
      <p>The find() method returns the value of the first array element that passes a test function</p>

      <p>This example finds (returns the value of) the first element that is larger than 18:</p>

      <code>
        var numbers = [4, 9, 16, 25, 29];
        var first = numbers.find(myFunction);

        function myFunction(value, index, array) {
        return value > 18;
      </code>
    </section>
  </div>
  <div class="row">
    <section class="main-section" id="Array_Find_Index">
      <header>
        <h3>Array Find Index</h3>

        <li>The findIndex() method returns the index of the first array element that passes a test function.</li>

        <li>This example finds the index of the first element that is larger than 18:</li>

        <code>Example
          var numbers = [4, 9, 16, 25, 29];
          var first = numbers.findIndex(myFunction);

          function myFunction(value, index, array) {
          return value > 18;</code>
      </header>
    </section>
  </div>
  <div class="row">
    <section class="main-section" id="Exponentiation">
      <header>
        <h3>Exponentiation</h3>
      </header>

      <p>The exponentiation operator (**) raises the first operand to the power of the second operand.</p>

      <code>Example
        var x = 5;
        var z = x ** 2; // result is 25
      </code>

    </section>
  </div>

</main>
              
            
!

CSS

              
                @media only screen and (max-width: 600px) {
  div {
    font-size: 14px;
  }
}
.nav_flex.column {
  margin-left: auto;
}
header{
 text-align:center; 
}
#navheader{
display: block;
position: right;
}
code {
font-family: Consolas,"courier new";
  color: crimson;
  background-color: #f1f1f1;
  padding: 2px;
  font-size: 105%;
}


ul {
display: fixed;
position: left;


}


.navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 323px;
  height: 100%;
  border: 1px solid white;
  overflow-y: scroll;
  z-index: 1;
  
}

/* The navigation menu links */
.sidenav a {
  padding: 14px 6px;
  text-decoration: none;
  font-size: 25px;
  background-color: gray;
  display: inline-block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}
section {
max-width: 600px;
padding: 5px;
}


}

/* Style page content */






}

  

}

  

}









              
            
!

JS

              
                
              
            
!
999px

Console