Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Exercise: Hyphenated Words

Exercise 17 Very easy

Prerequisites for the exercise

  1. JavaScript String Methods
  2. JavaScript String Basics
  3. All previous chapters

Objective

Extract out individual words from a hyphenated word.

Description

A hyphenated word is one that has the hyphen character (-) in it. Some examples are awe-inspiring, strongly-typed, small-sized, one-by-one etc.

In this exercise, you have to create a program that asks the user to input a hyphenated word and then displays each constituent word out on the document, one-by-one.

Start by asking the user to enter a hyphenated word with the message 'Enter a hyphenated word:'.

Once the word is entered, extract out the constituent words from it, and print each on a new line.

Shown below is an example:

Live Example

If the input value is invalid, alert 'Invalid input!' before asking the user to input again.

Hints

Hint 1

Use the split() string method.

Hint 2

Call split('-') on the input value to break it into an array of words.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-17-Hyphenated-Words and put the .html solution files for this exercise within it.

Solution

The description clearly says to keep on asking the user to enter a hyphenated word unless the entered value is valid.

This reminds us of a loop, whose condition is True and is terminated (using break) only if the entered word is hyphenated.

Obviously, the loop's condition could directly be set to check the input value, but using True is easier.

Anyways, now that we know that a loop is needed, let's set it up:

while (true) {
   // code goes here
}

Inside the loop, we start off with the prompt() function. The value input gets saved into the variable word, since that value is a word:

while (true) {
   var word = prompt('Enter a hyphenated word:');
}

If word is hyphenated, we break out of this loop but obviously after making the required output:

while (true) {
   var word = prompt('Enter a hyphenated word:');

   if (word.indexOf('-') !== -1) {
      // output code goes here
      break;
   }
}

For the output, word is split into a list, at each hyphen (-) using word.split('-'), stored in words, and then each element of this array output to the document using a for loop:

while (true) {
   var word = prompt('Enter a hyphenated word:');

   if (word.indexOf('-') !== -1) {
      var words = word.split('-');

      for (var i = 0; i < words.length; i++) {
         document.write(words[i] + '<br>');
      }
      break;
   }
}

In this code, the string '<br>' is necessary in the output in order to put each word on a new line.

If word isn't hyphenated i.e. the if conditional fails, we make an alert saying 'Invalid input!', after which the loop repeats itself, asking the user to input a word again:

while (true) {
   var word = prompt('Enter a hyphenated word:');

   if (word.indexOf('-') !== -1) {
      var words = word.split('-');
      for (var i = 0; i < words.length; i++) {
         document.write(words[i] + '<br>');
      }
      break;
   }

   else alert('Invalid input!');
}

This completes our exercise!