w3resource

JavaScript: Rotate a string from left to right

JavaScript Basic: Exercise-5 with Solution

Write a JavaScript program to rotate the string 'w3resource' in right direction by periodically removing one letter from the end of the string and attaching it to the front.

Sample Solution:

HTML Code:

<!DOCTYPE html>
  <html> 
  <head>
  <title>JavaScript basic animation</title>
  <script type="text/javascript">
  </script>
  </head> <body onload="animate_string('target')"
  <pre id="target">w3resource </pre>
  </body> 
  </html>
  

JavaScript Code:

function animate_string(id) 
{
    var element = document.getElementById(id);
    var textNode = element.childNodes[0]; // assuming no other children
    var text = textNode.data;

setInterval(function () 
{
 text = text[text.length - 1] + text.substring(0, text.length - 1);
  textNode.data = text;
}, 100);
}

Explanation:

document.getElementById(id) : Returns a reference to the element by its ID; the ID is a string which can be used to identify the element; it can be established using the id attribute in HTML, or from script.
Parameters : id is a case-sensitive string representing the unique ID of the element being sought.

element.childNodes[0] will produce the same result as the HTML content of the first child node.

text.length: The length property represents the length of a string. It returns the number of characters units in the string.

Flowchart:

Flowchart: JavaScript - Rotate a string from left to right

ES6 Version:

function animate_string(id) 
{
    const element = document.getElementById(id);
    const textNode = element.childNodes[0]; // assuming no other children
    let text = textNode.data;

setInterval(() => {
 text = text[text.length - 1] + text.substring(0, text.length - 1);
  textNode.data = text;
}, 100);
}

Live Demo:

See the Pen JavaScript current day and time - basic-ex-2 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript function to find the area of a triangle where lengths of the three of its sides are 5, 6, 7.
Next: Write a JavaScript program to determine whether a given year is a leap year in the Gregorian calendar.

What is the difficulty level of this exercise?



JavaScript: Tips of the Day

Promise object

const myPromise = () => Promise.resolve('I have resolved!');

function firstFunction() {
  myPromise().then(res => console.log(res));
  console.log('second');
}

async function secondFunction() {
  console.log(await myPromise());
  console.log('second');
}

firstFunction();
secondFunction();

With a promise, we basically say I want to execute this function, but I'll put it aside for now while it's running since this might take a while. Only when a certain value is resolved (or rejected), and when the call stack is empty, I want to use this value.
We can get this value with both .then and the await keyword in an async function. Although we can get a promise's value with both .then and await, they work a bit differently.
In the firstFunction, we (sort of) put the myPromise function aside while it was running, but continued running the other code, which is console.log('second') in this case. Then, the function resolved with the string I have resolved, which then got logged after it saw that the callstack was empty.
With the await keyword in secondFunction, we literally pause the execution of an async function until the value has been resolved before moving to the next line.
This means that it waited for the myPromise to resolve with the value I have resolved, and only once that happened, we moved to the next line: second got logged.

Ref: https://bit.ly/3jFRBje