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

              
                <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JavaScript Fundamentals - Technical Documentation</title>
  <meta name="description" content="Technical documentation for JavaScript fundamentals - this is a project made for FreeCodeCamp by Zachary Parsons">
  <meta name="author" content="Zachary Parsons">
 <!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body>
  <nav id="navbar">
    <header><a href="#header">JavaScript Fundamentals</a></header>
    <ul>
      <li><a class="nav-link" href="#Hello,_World!">Hello, World!</a></li>
      <li><a class="nav-link" href="#Code_Structure">Code Structure</a></li>
      <li><a class="nav-link" href="#Variables">Variables</a></li>
      <li><a class="nav-link" href="#Data_Types">Data Types</a></li>
      <li><a class="nav-link" href="#Operators">Operators</a></li>
  </nav>
  <main id="main-doc">
    <header id="header">
      <a href="#" class="toggle"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a>
      
      <h1>JavaScript Fundamentals</h1>
      <p><a href="#footer">* Info</a></p>
      <p><a href="#footer">** More info</a></p>
    </header>
    <hr>
    <section class="main-section" id="Hello,_World!">
      <header class="section-header">Hello, World!</header>
      <p>This tutorial is about core JavaScript, the language itself.</p>
      <p>But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We’ll focus on JavaScript in the browser in the next part of the tutorial.</p>
      <p>So first, let’s see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like "node my.js".</p>
      <h3>The "script" tag</h3>
      <p>JavaScript programs can be inserted into any part of an HTML document with the help of the <span class="inline-code">&lt;script&gt;</span> tag.</p>
      <p>For instance:</p>
      <pre>
<code>
&lt;!DOCTYPE HTML&gt;

&lt;html&gt;
&lt;body&gt;

  &lt;p&gt;Before the script...&lt;p&gt;
  
  &lt;script&gt;
    alert( 'Hello, World!' );
  &lt;/script&gt;
  
  &lt;p&gt;After the script...&lt;p&gt;
  
&lt;/body&gt;
&lt;/html&gt;
</code>
      <button class="run-code" onclick="message()">Click to run code example</button>
      </pre>
      <p>The <span class="inline-code">&lt;script&gt;</span> tag contains JavaScript code which is automatically executed when the browser processes the tag.</p>
      <h3>External Scripts</h3>
      <p>If we have a lot of JavaScript code, we can put it into a separate file.</p>
      <p>Script files are attached to HTML with the <span class="inline-code">src</span> attribute:</p>
      <pre>
<code>
&lt;script src="/path/to/script.js"&gt;&lt;/script&gt;

</code>
      </pre>
      <p>Here <span class="inline-code">/path/to/script.js</span> is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, <span class="inline-code">src="script.js"</span> would mean a file <span class="inline-code">"script.js"</span> in the current folder.</p>
      <p>We can give a full URL as well. For instance:</p>
       <pre>
<code>
&lt;script src="example.com/libs/script.js"&gt;&lt;/script&gt;

</code>
      </pre>
      <p>To attach several scripts, use multiple tags:</p>
      <pre>
<code>
&lt;script src="/js/script1.js"&gt;&lt;/script&gt;
&lt;script src="/js/script2.js"&gt;&lt;/script&gt;

</code>
      </pre>
    </section>
    <hr>
    <section class="main-section" id="Code_Structure">
      <header class="section-header">Code Structure</header>
      <p>The first thing we’ll study is the building blocks of code.</p>
      <h3>Statements</h3>
      <p>Statements are syntax constructs and commands that perform actions.</p>
      <p>We’ve already seen a statement, <span class="inline-code">alert('Hello, world!')</span>, which shows the message “Hello, world!”.</p>
      <p>We can have as many statements in our code as we want. Statements can be separated with a semicolon.</p>
      <p>For example, here we split “Hello World” into two alerts:</p>
      <pre>
<code>
alert('Hello'); alert('World');

</code>
      <button class="run-code" onclick="message0()">Click to run code example</button>
      </pre>
      <p>Usually, statements are written on seperate lines to make the code more readable:</p>
      <pre>
<code>
alert('Hello');
alert('World');

</code>
      <button class="run-code" onclick="message0()">Click to run code example</button>
      </pre>
      <h3>Semicolons</h3>
      <p>A semicolon may be omitted in most cases when a line break exists.</p>
      <p>This would also work:</p>
      <pre>
<code>
alert('Hello')
alert('World')

</code>
      <button class="run-code" onclick="message0()">Click to run code example</button>
      </pre>
      <p>Here, JavaScript interprets the line break as an “implicit” semicolon. This is called an automatic semicolon insertion.</p>
      <p>In most cases, a newline implies a semicolon. But “in most cases” does not mean “always”!</p>
      <p>There are cases when a newline does not mean a semicolon. For example:</p>
      <pre>
<code>
alert(3 +
1
+ 2);

</code>
      <button class="run-code" onclick="message1()">Click to run code example</button>
      </pre>
      <p>The code outputs <span class="inline-code">6</span> because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus <span class="inline-code">"+"</span>, then it is an “incomplete expression”, so the semicolon is not required. And in this case that works as intended.</p>
      <p>But there are situations where JavaScript “fails” to assume a semicolon where it is really needed.</p>
      <p>Errors which occur in such cases are quite hard to find and fix.</p>
      <p>We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let’s note once again – it is possible to leave out semicolons most of the time. But it’s safer – especially for a beginner – to use them.</p>
      <h3>Comments</h3>
      <p>As time goes on, programs become more and more complex. It becomes necessary to add comments which describe what the code does and why.</p>
      <p>Comments can be put into any place of a script. They don’t affect its execution because the engine simply ignores them.</p>
      <p>One-line comments start with two forward slash characters <span class="inline-code">//</span>.</p>
      <p>The rest of the line is a comment. It may occupy a full line of its own or follow a statement. Like here:</p>
      <pre>
<code>
// This comment occupies a line of its own
alert('Hello');
alert('World'); // This comment follows the statement

</code>
      <button class="run-code" onclick="message0()">Click to run code example</button>
      </pre>
      <p>Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */. Like this:</p>
      <pre>
<code>
/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');

</code>
      <button class="run-code" onclick="message0()">Click to run code example</button>
      </pre>
      <p>The content of comments is ignored, so if we put code inside <span class="inline-code">/* … */</span>, it won’t execute.</p>
      <p>Sometimes it can be handy to temporarily disable a part of code:</p>
      <pre>
<code>
/* Commenting out the code
alert('Hello');
*/
alert('World');

</code>
      <button class="run-code" onclick="message2()">Click to run code example</button>
      </pre>
      <p>Please, don’t hesitate to comment your code.</p>
      <p>Comments increase the overall code footprint, but that’s not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don’t appear in the working scripts. Therefore, comments do not have negative effects on production at all.</p>
    </section>
    <hr>
    <section class="main-section" id="Variables">
      <header class="section-header">Variables</header>
      <p>Most of the time, a JavaScript application needs to work with information. Here are two examples:</p>
      <ol>
        <li>An online shop - the information might include goods being sold and a shopping cart.</li>
        <li>A chat application – the information might include users, messages, and much more.</li>
        <li>A business directory - the information might include business's addresses and contact details</li>
      </ol>
      <p>Variables are used to store this information.</p>
      <h3>A Variable</h3>
      <p>A variable is a “named storage” for data. We can use variables to store goodies, visitors, and other data.</p>
      <p>To create a variable in JavaScript, use the <span class="inline-code">let</span> keyword.</p>
      <p>The statement below creates (in other words: declares) a variable with the name “message”:</p>
      <pre>
<code>
let message;

</code>
      </pre>
      <p>Now, we can put some data into it by using the assignment operator <span class="inline-code">=</span>:</p>
      <pre>
<code>
let message;

message = 'Hello'; // store the string

</code>
      </pre>
      <p>The string is now saved into the memory area associated with the variable. We can access it using the variable name:</p>
      <pre>
<code>
let message;
message = 'Hello'; // store the string

alert(message); // shows the variable content

</code>
      <button class="run-code" onclick="message3()">Click to run code example</button>
      </pre>
      <p>To be concise, we can combine the variable declaration and assignment into a single line:</p>
      <pre>
<code>
let message = 'Hello'; // define variable and store the string in one line

alert(message); // Hello!

</code>
      <button class="run-code" onclick="message3()">Click to run code example</button>
      </pre>
      <p>We can also declare multiple variables in one line:</p>
      <pre>
<code>
let user = 'John', age = 25, message = 'Hello';

</code>
      </pre>
      <p>That might seem shorter, but we don’t recommend it. For the sake of better readability, please use a single line per variable.

The multiline variant is a bit longer, but easier to read:</p>
      <pre>
<code>
let user = 'John';
let age = 25;
let message = 'Hello';

</code>
      </pre>
    </section>
    <hr>
    <section class="main-section" id="Data_Types">
      <header class="section-header">Data Types</header>
      <p>A variable in JavaScript can contain any data. A variable can at one moment be a string and at another be a number:</p>
      <pre>
<code>
// no error
let message = 'Hello';
message = 123456;

</code>
      </pre>
      <p>Programming languages that allow such things are called “dynamically typed”, meaning that there are data types, but variables are not bound to any of them.</p>
      <p>There are eight basic data types in JavaScript. For more in depth information on each of them please see <a href="https://javascript.info/types" target="_blank">here</a>.</p>
      <ol>
        <li>Number
          <ul>
            <li>For numbers of any kind.</li>
          </ul>
        </li>
        <li>BigInt
          <ul>
            <li>For integers of arbitrary length.</li>
          </ul>
        </li>
        <li>String
          <ul>
          <li>For strings of characters. A string may have one or more characters, there's no seperate single-character type.</li>
        </ul>
        </li>
        <li>Boolean
          <ul>
          <li>For true / false.</li>
        </ul>
        </li>
        <li>The "null" value
          <ul>
          <li>For unknown values.</li>
        </ul>
        </li>
        <li>The "undefined" value
          <ul>
          <li>For unassigned values</li>
        </ul>
        </li>
        <li>Objects and Symbols
          <ul>
            <li>Objects - For more complex data structures.</li>
            <li>Symbols - For more unique identifiers.</li>
        </ul>
        </li>
        <li>The typeof operator
          <ul>
          <li>This allows you to see which type is stored in a value.</li>
        </ul>
        </li>
      </ol>
    </section>
    <hr>
    <section class="main-section" id="Operators">
      <header class="section-header">Operators</header>
      <p>We know many operators from school. They are things like addition <span class="inline-code">+</span>, multiplication <span class="inline-code">*</span>, subtraction <span class="inline-code">-</span>, and so on.</p>
      <p>In this chapter, we’ll concentrate on aspects of operators that are not covered by school arithmetic.</p>
      <h3>Terms: "unary", "binary", "operand"</h3>
      <p>Before we move on, let’s grasp some common terminology.</p>
      <ul>
        <li><i>An operand</i> - is what operators are applied to. For instance, in the multiplication of <span class="inline-code">5 * 2</span> there are two operands: the left operand is <span class="inline-code">5</span> and the right operand is <span class="inline-code">2</span>. Sometimes, people call these “arguments” instead of “operands”.</li>
        <li>An operator is <i>unary</i>  if it has a single operand. For example, the unary negation <span class="inline-code">-</span> reverses the sign of a number:
        <pre>
<code>
let x = 1;

x = -x;
alert( x ); // -1, unary negation applied

</code>
        <button class="run-code" onclick="message4()">Click to run code example</button>
        </pre>
        </li>
        <li>An operator is <i>binary</i> if it has two operands. The same minus exists in binary form as well:
        <pre>
<code>
let x = 1, y = 3;

alert( y - x ); // 2, binary minus subtracts values

</code>
        <button class="run-code" onclick="message5()">Click to run code example</button>
        </pre>
        </li>
      </ul>
      <p>Formally, in the examples above we have two different operators that share the same symbol: the negation operator, a unary operator that reverses the sign, and the subtraction operator, a binary operator that subtracts one number from another.</p>
    </section>
    <hr>
    <footer id="footer">
      <p>* All information has been copied from <a href="https://javascript.info" target="_blank"><b>javascript.info</b></a>, which is a fantastic resource, and goes into lots more detail!</p>
      <p>** This is a project created for the FreeCodeCamp 'Responsive Web Design' module. It was created by <a href="https://zacharyparsons.co.uk" target="_blank"><b>Zachary Parsons</b></a>.</p>
    </footer>
  </main>
</body>
</html>
              
            
!

CSS

              
                /* Global Styles */

body {
  color: #323232;
  height: 100%;
  width: 82vw;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

a {
  color: #323232;
  text-decoration: none;
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* #navbar Style */
  
#navbar {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 245px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  transform: translate3d(-100%, 0, 0);
  transition: .3s;
}

#navbar header {
  margin: 30px;
  font-size: 24px;
}

#navbar ul {
  list-style: none;
}

#navbar li {
  padding-top: 3px;
}

#navbar li a {
  margin-top: 2px;
  background: AliceBlue;
}

.toggle {
  position: fixed;
  top: 15px;
  text-decoration: none;
}

/* Show Menu Style */

.menu-active #main-doc {
    transform: translate3d(245px, 0, 0)
}
.menu-active #navbar {
    transform: translate3d(0, 0, 0)
}

/* #main-doc Style */

#main-doc {
  transition: .3s;
  padding: 2px 16px;
}

#main-doc header {
  margin-top: 50px;
}

#main-doc .section-header {
  font-size: 24px;
  font-weight: bold;
  background-color: AliceBlue;
}

#main-doc .inline-code {
  font-family: Consolas,Lucida Console,Menlo,Monaco,monospace;
  padding: 2px 4px;
  background: #f5f2f0;
  border-radius: 2px;
}

#main-doc code {
  display: flex;
  max-width: 100%;
  font-family: Consolas,Lucida Console,Menlo,Monaco,monospace;
  padding: 2px 4px;
  background: #f5f2f0;
  border-radius: 2px;
}

footer {
  padding-top: 10px;
}

/* Media Query for navbar */

@media screen and (max-width: 700px) {
  #navbar {
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.3s;
  }
  
  #main-doc {
    width: 100vw;
  }
}
              
            
!

JS

              
                let slidingMenu = function() {
  let menuToggle = document.querySelector('.toggle');
  let body = document.body;
  
  menuToggle.addEventListener('click', function(ev) {
    ev.preventDefault();
    body.classList.toggle('menu-active');
  });
}

slidingMenu();

document.addEventListener("DOMContentLoaded", function() {
  document.body.classList.add('menu-active');
});

function message() {
  alert( 'Hello, World!' );
};

function message0() {
  alert( 'Hello' );
  alert( 'World' );
};

function message1() {
  alert(3 +
  1
  + 2);
}

function message2() {
  /* Commenting out the code
  alert( 'Hello' );
  */
  alert( 'World' );
}

function message3() {
  let message = "Hello!";
  alert(message); // shows the variable content
}

function message4() {
  let x = 1;
  x = -x;
  alert( x ); // -1, unary negation applied
}

function message5() {
  let x = 1, y = 3;
  alert( y - x ); // 2, binary minus subtracts values
}
              
            
!
999px

Console