What’s yo name?

Watch some videos showing basic JavaScript syntax and build a small name comparing program.

Goal

We’re going to make a small program that accepts a user’s name and writes out different sentences based on what they type.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the whats-yo-name repository.

Fork & clone the “whats-yo-name” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up project

Before we start writing any JavaScript we need to have an HTML file set up. That’s where we’ll start.

  1. whats-yo-name
  2. index.html
  3. js
  4. main.js
  1. Make an index.html & add the boilerplate code.
  2. Make a main.js in your js folder.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

  2. HTML snippets

    Create the boilerplate with html5, viewport

2 Link the JavaScript to the HTML

At the bottom of the index.html file we need to connect the JavaScript file.

⋮
</head>
<body>

  <script src="js/main.js"></script>
</body>
</html>

JavaScript files are always connected at the bottom, right before the closing </body> tag.

  1. Line E

    The <script> tag is used to connect a JavaScript file to HTML.

    It should always go at the bottom for two reasons:

    1. Performance — JavaScript will stop rendering the page until the JS loads. Putting it at the bottom makes the load time appear faster because the page can be displayed first.
    2. HTML manipulation — we want to manipulate HTML with our JS, but the HTML must be rendered to the screen before JS can do anything.

3 Write some JavaScript!

These few lines of code will ask a user for their name and display a message based on what they type.

var newName = prompt('What is your name?');

if (newName == 'Thomas') {
  alert('Names are the same!');
} else {
  alert('Names are different.');
}

Try it out in your browser. It should work great.

  1. Line A

    The variable newName will hold whatever someone types into the dialogue box.

    The prompt() is a function built into JavaScript that will display a dialogue people can type into.

  2. Line C

    The if-statement is going to compare the contents of newName against the string 'Thomas'.

    • If they are the same the first path is taken.
    • If they are different the second path is taken.

    The double equals == means compare. A single equals = means set.

  3. Line D

    The alert() function is built into JavaScript and will display a dialogue with some text.

4 Bonus challenge

Change the program above so that the alert messages say what the user typed in. Make the messages read:

  • “Hey Thomas, our names are the same!”
  • “Too bad our names are different, Thomas.”

  1. Hint

    You’ll have to combine strings and variables together with a special character.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.