Hello, World! (console)

JavaScript is a programming language that is widely used in websites on the World Wide Web (WWW).

One of the easiest ways to write a JavaScript program is to simply write some code as part of a larger webpage.

Let's use the website repl.it to do that.

  1. On your computer, use a browser (Chrome, Firefox, Safari) to go to the address repl.it If you haven't already signed up for a free account, do so.

  2. A "repl" is their name for a project. Once you're logged into your account, click "+ new repl", and select "HTML, CSS, JS" for your environment. A random name will be given to your project, but you should change it to this: 01-helloWorld

  3. You'll see a window that opens up that looks like this:

replit opening layout

  1. At this point there are three files in the project, listed on the left side: index.html, script.js, and style.css. We're only going to use index.html for this exercise, and that filename should already be highlighted, with a bunch of text in the middle window.

  2. Erase all that text and replace it with this code:

     <!DOCTYPE html>
 <html>
     <head>
         <title>01-helloWorld, by Your Name</title>
         <meta name="author" content="your name" /> 
     </head>

     <body>
         <script>

             // JavaScript code goes here


         </script>
     </body>
 </html>

    We'll learn what all this code means very soon. For now, just notice that there are pairs of lines, and a lot of angle brackets < >.

  3. It's time for our very first program, which is traditionally getting the computer to print out a message to the world: Hello, World! Our JavaScript "program" consists of a single line of code:

     console.log("Hello, world!");

    Enter this line of code into the window, between the <script> and </script> tags, and just below the line that says "JavaScript code goes here."

  4. Once this code has been entered into the correct location, we're ready to run it! Click on the square, green "Run" triangle above the window, which will cause the code in your index.html window to be displayed in the screen to the right.

  5. Did it work?! If so, congratulations! You've taken (maybe!) your first step to becoming a Computer Scientist.

    If it didn't work, you've really taken your first step to becoming a Computer Scientist, because most of the time we spend trying to get the computer to do what we want it to do, and we rarely get it right the first time.

    Double-check that you've entered everything exactly as it should be, right down to the last bit of punctuation. Everything has to be exactly right.

  6. Once your program is working correctly, use your mouse to click-drag over the URL address for your project at the top of the browser window. Copy that link, and give that copied link to the instructor using the procedure given in class.

project URL