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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div id="main">
    <div id="navbar_wrap">
        <nav id="navbar">
          <header>On this page</header>
      
          <ul>
            <li>
            <a class="nav-link" href="#A_high_level_definition">A high level definition</a>
              </li>
            <li>
            <a class="nav-link" href="#So_what_can_it_really_do?">So what can it really do?</a>
          </li>
            <li>
            <a class="nav-link" href="#What_is_JavaScript_doing_on_your_page?">What is JavaScript doing on your page?</a>
          </li>
            <li>
            <a class="nav-link" href="#How_do_you_add_JavaScript_to_your_page?">How do you add JavaScript to your page?</a>
          </li>
            <li>
            <a class="nav-link" href="#Summary">Summary</a>
          </li>
            <li>
            <a class="nav-link" href="#Reference">Reference</a>
          </li> 
          </ul>      
      
        </nav>
    </div>
  
    <div id="content">
        <h1>What is Javascript?</h1>
        <hr>
        <main id="main-doc"> 
        <section class="main-section" id="A_high_level_definition">
          <header>A high level definition</header>
          <p>JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.</p>
          <ul>
            <li>HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.</li>
            <li>CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.</li>
            <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li>
          </ul>
        </section>

        <section class="main-section" id="So_what_can_it_really_do?">
          <header>So what can it really do?</header>
          <p>The core client-side JavaScript language consists of some common programming features that allow you to do things like:</p>
           <ul>
             <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called name.</li>
             <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the name variable to create the complete text label, e.g. ''Player 1: Chris".</li>
             <li>Running code in response to certain events occurring on a web page. We used a click event in our example above to detect when the button is clicked and then run the code that updates the text label.</li>
             <li>And much more!</li>
          </ul>
          <p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.</p>
          <p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.</p>
        </section>

        <section class="main-section" id="What_is_JavaScript_doing_on_your_page?">
          <header>What is JavaScript doing on your page?</header>
            <p>Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.</p>
            <p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p>
          <p>A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. If the JavaScript loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur.</p>
          <h3><span>Browser security</span></h3>
            <p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.
          </p>
          <h3><span>Javascript running orders</span></h3>
            <p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p>
            <code>const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
          </code>
          <p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console:
            <code>TypeError: para is undefined.</code> This means that the para object does not exist yet, so we can't add an event listener to it.</p>
          
        </section>

        <section class="main-section" id="How_do_you_add_JavaScript_to_your_page?">
          <header>How do you add JavaScript to your page?</header>
            <p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses link elements to apply external stylesheets and style elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the script element. Let's learn how this works.</p>
          <h3><span>Internal JavaScript</span></h3>
            <ol>
              <li>First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.</li>
              <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
        
              <li>Now we'll add some JavaScript inside our script element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
                <code>document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});
                                   </code>
                </li>
                <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
              </li>
          </ol>
          <h3><span>External JavaScript</span></h3>
            <p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
            <ol>
              <li>First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
              <li>Replace your current script element with the following:
                <code> src="script.js" defer </code></li>
              <li>Inside script.js, add the following script:
                <code>function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
                                 }</code></li>
                <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li>
          </ol>
    
        </section>

        <section class="main-section" id="Summary">
          <header>Summary</header>
            <p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p>
          <p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.</p>

        </section>
        <section class="main-section" id="Reference">
          <header>Reference</header>
            <p>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">MDN</a>.</p>


      </main>
    </div>
  </div>
</body>
              
            
!

CSS

              
                /*the left menu you can add CSS to links when hover, active, to let the user know where he is*/

* { 
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  color: #333333;
}

span{
  background-color: LightGreen;
  padding-right: 60px;
  padding-left: 20px;
}

hr{
  margin-left: 40px;
}

#main{
  position: relative;
}

#navbar_wrap{
  position: fixed;
  top: 20px;
  left: 0;
  width: 30%;
  background-color: #f7f7f7;
  
}

#navbar header{
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  padding: 20px;
  background-color: LightGrey;
} 

#navbar ul{
  padding: 0;
  margin-top: 20px;
}

#navbar li{
  list-style: none;
  padding: 10px;
  margin-left: 20px;
  
}

#navbar a {
  color: #3D7E9A;
  text-decoration: none;
  cursor: pointer;

}

#content{
  position: absolute;
  top: 20px;
  right: 10px;
  width: 70%; 
}

#content h1{
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  padding: 20px;
  margin-left: 20px;
  
}

#main-doc{
  padding: 20px;
  line-height: 1.75;
}

#main-doc header{
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#main-doc p{
  margin-left: 50px;
  margin-bottom: 20px;
}

#main-doc ul{
  margin-left: 65px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#main-doc li{
  margin: 15px 0px 0px 20px;
}

#main-doc h3{
  margin-left: 50px;
  margin-bottom: 20px;
}

#main-doc ol{
  margin-left: 65px;
  margin-bottom: 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  margin-left: 50px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  
  #main{
    position: relative;
    
  }
 
  #navbar_wrap {
    background-color: #f7f7f7;
    position: absolute;
    top: 120px;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: auto;
    border: none;
    border: 1px solid;
    
    
  }
  

  #main-doc {
    position: absolute;
    top: 450px;
    left: -180px;
    right: 10px;
    width: auto;
    
    
  }
  
  #main-doc header{
    font-size: 25px;
  }
  
  #main-doc ul{
  margin-left: 65px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#main-doc li{
  margin: 15px 0px 0px 20px;
}
  
  #content > h1{
    position: absolute;
    top: 0;
    text-align: center;
    height: 100px;
    z-index: 1;
    font-size: 30px;
  }
  
  hr{
    visibility: hidden;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console