In this tutorial, we will learn what are the different types of DOM available to access and modify content in JavaScript. The Document Object Model (DOM) is a data representation of the objects that form the structure and content of a web document. It is an interface for scripting web pages. Programs can alter the document’s structure, style, and content by utilizing the DOM. The DOM represents each element as a node, and the programming languages like JavaScript can easily interact with the nodes to modify the page. There are different types of DOM available to access and modify content ... Read More
In this tutorial, we will learn the best practices to follow while using JavaScript. JavaScript is used in almost every website to make it more user interactive. Throughout the years, ECMAScript has released different versions of JavaScript. Each version has enhanced functionalities and new features, so it is important to know the best practices to follow while using JavaScript. The following are the best practices to be followed while using JavaScript − Meaningful Variable and Function Name The variables’ and functions’ names should be meaningful to their uses. In JavaScript, we use the variable to store some data, and the ... Read More
In this tutorial, we will learn complex data types in JavaScript. JavaScript has multiple built-in data types to store data in different formats. The data types of JavaScript can be divided into two groups, and those are primitive data types and non-primitive data types. Number, String, Boolean, Undefined and Null are part of the primitive data type, whereas the Array and Object are part of the non-primitive data type. The typeof operator is used to identify the data types. The primitive data types are simple and easy to use. In contrast, the non-primitive data types (Array and Object) are relatively ... Read More
In this tutorial, we will learn about native objects in JavaScript. Native JavaScript objects are regular JavaScript objects offered by JavaScript itself. Inbuilt objects, pre-defined objects, and global objects are other names. No matter the computer or environment, all users have access to these objects, and they function similarly. They may be used as both constructors (like String(), Array(), and Object()) and primitive values since their functions are unaffected by changes to the machine or environment. An object in an ECMAScript implementation whose semantics are entirely determined by this specification as opposed to the host environment. Native objects are additionally ... Read More
In this tutorial, let us discuss the function scope and context in JavaScript. Functions are the building blocks of Javascript. Therefore, JavaScript is a functional programming language. Scope The 'scope' is the code space where we can define and use a variable in a function. Scopes are of four types. Global scope Global 'scope' is the default scope. A variable with global 'scope' is accessible throughout the program. Browser closing removes a global variable. Window objects can access var variables wherein they can't access the let variables. Functional or local 'scope' A function variable is accessible only with the function. ... Read More
In this tutorial, let us discuss the smart, self-overwriting, or lazy-getters in JavaScript. A getter binds the property of an object to a function, but the getter will not calculate the property value until we access it. The getter helps when we need to get some dynamic value without an explicit call. Users can follow the syntax below to work with the getters. Syntax { get prop() {} } { get [exp]() {} } The prop and the exp are the object's properties that bind to a function. 'prop' is a simple object property, and 'exp' is an expression. ... Read More
In this tutorial, let us look at how to set whether the table border should collapse into a single table border or not with JavaScript. We can use the borderCollapse property in JavaScript to accomplish this. Let us look into this in brief. Using the Style borderCollapse Property The borderCollapse property defines whether the table border should collapse into a single table border or separate into a double table border. The value 'separate' is the default. The borderCollapse is a read-and-write property. Users can follow the syntax below to use the borderCollapse property. Syntax object.style.borderCollapse = "separate|collapse|initial|inherit|revert|unset" The syntax ... Read More
In this tutorial, let us look at the way to set whether the flexible items should wrap or not with JavaScript. We can use the flex-wrap property in JavaScript to set the item wrap value. Let us look into this in brief. Using the Style flex-wrap Property The flex-wrap property defines whether to wrap the items within a container element. The items must be flexible for the flex-wrap property to work. The default value is nowrap. Users can follow the syntax below to use the flex-wrap property. Syntax object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit" The syntax above sets the flex-wrap value to ... Read More
In this tutorial, let us look at the way to set how much the item will shrink relative to the rest of the elements in JavaScript. To set item shrink relative to the rest of the elements, we can utilize JavaScript's flexShrink property. Let's take a quick look at this. Using the Styel flexShrink Property The flexShrink property specifies how much a flex item will shrink according to the other items in the same container. The element must be flexible for the flexShrink property to function. The property's value functions as a ratio. For instance, 2:3 sets 2 to the ... Read More
In this tutorial, let us discuss how to work with the document's link in JavaScript. The document link property is a read-only DOM level 1 feature that returns all the links. The links property gives all the anchor elements and area tags with a href attribute. Working with document.links properties Let us learn to work with a link's properties. Users can follow the syntax below to work with the link's properties. Syntax let links = document.links; links.propertyName; The above syntax returns all anchor tags, area tags, and properties. Properties length − The length is the number of elements ... Read More