Found 9326 Articles for Object Oriented Programming

In this tutorial, we will learn how to display an HTML element using JavaScript. HTML elements are the components that make up an HTML format file. These components are in charge of constructing web pages and defining their content. In HTML, an element typically consists of a start tag (tag name), a closing tag (tag name), and any text that is added in between. A collection of end tags, start tags, content, and attributes is what constitutes an element technically. Some HTML elements are − Starting Tag Content Ending Tag This is a paragraph. ... Read More

To declare a global variable, use the var at global scope −    var myGlobalVariable;    function display() {       //    } For JavaScript function, assign the property to a window −    function display() {       window. myGlobalVariable = …;    }

In this tutorial, we will explore the different ways by which we can replace all dots in a string using JavaScript. It is possible to remove all occurrences of dots in a string manually by running a for loop, but JavaScript provides many functions by which we can accomplish the same task very easily. This is precisely what we will discuss in this article. The two most popular methods by which we can replace all dots in a string using JavaScript are − Using the replaceAll() method in JavaScript JavaScript strings have a method called replaceAll(), to which we can ... Read More

In this tutorial, we will learn to print the content of a JavaScript object. Objects are similar to variables, but they can contain many values. Javascript object values are written as key: value pairs, and each pair is separated by commas. It is used to access data from databases or any other sources. Following are the ways to print the content of JavaScript objects − Using the JSON.stringify() Method And using a for-in loop Using Object.values() Using the JSON.stringify() Method The JSON.stringify() is used to convert JavaScript Objects into a string. We have to use JSON.stringify() to send ... Read More

Use the wordWrap property in JavaScript to allow long words to be broken and wrap to the next line.ExampleYou can try to run the following to learn how to work with wordWrap property −                    #box {             width: 150px;             height: 150px;             background-color: lightblue;             border: 1px solid black;          }                     Set                ThisisDemoText.ThisisDemoText.ThisisDemoText.ThisisDemoText.Thisis DemoText.ThisisDemoText.                      function display() {             document.getElementById("box").style.wordWrap = "break-word";          }          

In this article, we will learn how to set the spacing between words in a text in JavaScript. Word spacing is critical on websites because it improves the legibility and readability of the text displayed on the page. You can generate an aesthetically pleasing and easyto-read typeface using proper word spacing. In JavaScript, we use the wordSpacing Property to set the spacing between the words in a text displayed on a website. Using the Style wordSpacing Property This JavaScript DOM property is used to get and set the spacing between the words in a text Depending on your needs, ... Read More

Use the wordbreak property in JavaScript to set line breaking rules for non-CJK scripts. The following are CJK scripts: C for Chinese, J for Japanese, K for Korean.ExampleYou can try to run the following code to learn how to implement wordbreak property −                    #box {             width: 150px;             height: 120px;             background-color: lightblue;             border: 1px solid black;          }                     Set                This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.                      function display() {             document.getElementById("box").style.wordBreak = "break-all";          }          

In this tutorial, we shall learn to set when the transition effect starts with JavaScript. To set when the transition effect will start, use the JavaScript transitionDelay property. To make interactive components, we go for transition effects. Here let us get deeper into the topic and understand how we can set the transition start. Using the Style transitionDelay Property With Style transitionDelay property, we can set or return when the transition effect starts. We can specify the transitionDelay value in seconds(s) or milliseconds(ms). The delay can be either negative, positive, or zero. The transition effect starts immediately with a negative ... Read More

In this tutorial, we will learn how to handle tabs, line breaks, and whitespace in a text in JavaScript. To handle tabs, line breaks, and whitespace in text in JavaScript, we can use the whiteSpace property. This property has seven attributes − normal nowrap pre pre-line pre-wrap initial inherit Generally, in HTML we use the   entity for multiple spaces and the tag to get line break. But in JavaScript, we use different attribute properties (mainly the normal and pre) of white-space properties to handle the tabs, line breaks, and multiple whitespaces. The details of these two ... Read More

To set the duration for an effect to complete, use the transitionDuration property in JavaScript.ExampleYou can try to run the following code to return how many seconds or milliseconds a transition effect takes to complete −                    #div1 {             position: relative;             margin: 10px;             height: 300px;             width: 400px;             padding: 20px;             border: 2px solid blue;          }          #div2 {             padding: 80px;             position: absolute;             border: 2px solid BLUE;             background-color: yellow;             transform: rotateY(45deg);             transition: all 5s;          }          #div2:hover {             background-color: orange;             width: 50px;             height: 50px;             padding: 100px;             border-radius: 50px;          }                     Hover over DIV2       Set       DIV1          DIV2                      function display() {             document.getElementById("myDIV").style.transitionDuration = "5s";          }