Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 621 of 652
Rendering elements in React.js
The smallest building blocks of React applications are the elements. Example of an element is −const message = Welcome, Steve;React DOM updates the actual DOM with the converted react elements. React components are made up of elements.Rendering element on DOMWe will have a parent div element in the main html file . This div can be called as root. ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.To render the element it will be passed to the ReactDOM render method −const message = Welcome, Steve; ReactDOM.render(message, document.getElementById('app'));This will ...
Read MoreDisplay hello world using React.js
create-react-app is a command to create a React.js project with default configuration. Create-react-app will help in running react applications. Command will be executed on npm or yarnIf npm and node.js is installed on computer, install create-react-app globally with command −npm install –g create-react-appCreation of project − to create a project once above commands are executed, run below command −npx create-react-app hello-world-examplenpx comes with npm version 5.2+ , npm version can be checked on terminal using npm –versionIf npm version is 5.2+, then react.js project can be directly created with command −npx create-react-app hello-world-exampleIf npm version is 6+, npm init react-app ...
Read MoreRegular functions vs Arrow functions in JavaScript?
Regular functions vs Arrow functionsAn arrow function is used to write the code concisely. Both functions regular and arrow work in a similar manner but there are some differences between them. Let's discuss those differences in a nutshell.syntax of an arrow functionlet x = (params) => { // code };syntax of a regular functionlet x = function functionname(params){ // code };Usage of "this" keywordIt is unable to use "this" keyword in arrow functions whereas in regular functions it can be used without any disturbance.ExampleIn the following example, both regular(rectangle) and arrow(square) functions were used inside the object "num", which consists of len(length) ...
Read MoreHow to access a JavaScript object using its own prototype?
We can able to access the existing object by creating its own prototype using a javascript method called "Object.create()". Using this method we can inherit the properties from the existing properties to the newly created prototype. Let's discuss it in a nutshell.syntaxObject.create(existing obj);This method takes the existing object and creates its own prototype so that the properties will be inherited from the existing object to the newly created prototype.ExampleIn the following example, Initially, an object named "person" is created and the using "Object.create" its own prototype is created and assigned to a variable "newper". Later on, using the prototype the ...
Read MoreJavaScript's Boolean function?
Boolean functionWhile developing, a developer may come across yes/no situation. At that point of time Boolean() function can be used. It results only in true or false. Let's discuss it in detail.syntaxBoolean(exp);It takes an expression and scrutinizes it and displays either true or false based on the validity of the expression.Example-1In the following example, various values have been checked whether they are true or not using Boolean() function. If any value has any legitimate value then it results in true else it results in false. var a = 0; ...
Read MoreHTML DOM Input Range value property
The HTML DOM Input range value property is associated with the input element having type=”range” and the value attribute. It is used to return the value of slider control value attribute or to set it. The value attribute can be the default value or the value set by dragging the slider.SyntaxFollowing is the syntax for −Setting the value property −rangeObject.value = text;Here, text is used for specifying the value for the range slider control.ExampleLet us look at an example for the input range value property − Live Demo Input range Value property VOLUME Get the above element ...
Read MoreHTML DOM Input Range type property
The HTML DOM Input Range type property is associated with the input element having its type=”range”. It will always return range for the input range element.SyntaxFollowing is the syntax for range type property −rangeObject.typeExampleLet us look at an example for the range type property − Live Demo Input range type Property VOLUME Get the above input element type by clicking the below button GET Type function rangeType() { var P=document.getElementById("RANGE1").type; document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ; } OutputThis will ...
Read MoreHTML DOM Input Range stepUp() method
The HTML DOM Input Range stepUp() method is used for incrementing the slider control value by a specified number. If left blank then it will increment by 1.If the step attribute is specified then the stepUp() method will increment in multiple of that. Eg: If step=”20” then stepUp(2) will increment by 20*2=40SyntaxFollowing is the syntax for Range stepUp() method −rangeObject.stepUp(number)Here, number is a mandatory parameter for specifying the the slider control increment value. If left blank it will increment by 1.ExampleLet us look at an example for the range stepUp() method − Live Demo Input range stepUp() method ...
Read MoreHTML DOM Input Range stepDown() method
The HTML DOM Input Range stepDown() method is used for decrementing the slider control value by a specified number. If left blank then it will decrement by 1. If the step attribute is specified then the stepdown() method will decrement in multiple of that. Eg: If step=”20” then stepDown(2) will decrement by 20*2=40SyntaxFollowing is the syntax for Range stepDown() method −rangeObject.stepDown(number)Here, number is a mandatory parameter for specifying the slider control decrement value. If left blank it will decrement by 1.ExampleLet us look at an example for the range stepDown() method − Live Demo Input range stepDown() method ...
Read MoreHTML DOM Input Range step property
The HTML DOM Input Range step property is used for setting or returning the slider control step attribute value. It specifies how much the slider will move on each movement. By using the max and min attribute with the step property, we can define a range of legal values.SyntaxFollowing is the syntax for −Setting the step property −rangeObject.step=numberHere, number specifies the slider control movement size. The default value for this is 1.ExampleLet us look at an example for the Input Range step property − Live Demo Input range step Property VOLUME Change the step property value ...
Read More