Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

How to Use Change Attributes Properties in jQuery?

So in this blog, we’re going to learn that How to Use Change Attributes Properties in jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js and define-

In this main.js To read the current value of an attribute, use attr() with only one argument: the name of the attribute you want to read. after that Retrieve the value of the href attribute of the “<a>” tag This is logged into the console. To see it, press F12 in Firefox/Chrome to open the Developer Tools and click on the Console tab.

Change Attributes Properties in jQuery

Tagged : / / / / / /

How do you transition multiple properties in CSS & HTML?

You know that a what is transition property in the previous blog. transition property can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property. You can do the same with duration, timing functions, and delays as well. If the values are the same, you only need to specify one of them.

In this blog, I am creating multiple transitions multiple properties in CSS & HTML. So, creating below index.html and style.css

When you used upper index.html & style.css then show like button when use cursor then shows hover effects.
When you used upper index.html & style.css then show like button when use cursor then shows hover effects.
When you used upper index.html & style.css then show like button when use cursor then shows hover effects.
Tagged : / / / / / / /

How to use Form Handling in javascript

Form Handling

JavaScript provides access to the forms within an HTML document through the Form object known as HTMLFormElement in the DOM. Which is a child of the Document Object.

Properties

PropertiesValueDescription
accept-charsetUTF-8Specifies the charset used in the submitted form (default: the page charset).
actionURLContains a URL that defines where to send the data after submitting the form
autocompleteOn (default)
Off
Determines that the browser retains the history of previous values.
enctypespecifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encodingHolds the value of the enctype attribute, which usually contains either application/x-www-form-urlencoded value or the multipart/form-data value (in the case of file upload)
elements[ ]An array of DOM elements that correspond to the interactive form fields within the form

Properties

PropertiesValueDescription
lengthThe number of a form field with a given form tag. Should bt the same as elements.length
methodGET (default)
POST
Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
namenameSpecifies a name used to identify the form
novalidatenovalidateSpecifies that the browser should not validate the form.
target_self (default)
_blank
_parent
_top
framename
Specifies the target of the address in the action attribute

Methods

MethodDescription
checkValidity ( )Returns a true or false value indicating whether or not all the fields in the form are in a valid state.
reset ( )Returns all form fields to their initial state.
submit ( )Submits the form to the URL specified in the form’s action attribute

Events: –

  • onreset
  • onsubmit
Tagged : / / / / / / /

What is a window object in JavaScript? What are its properties?

Window Object

  • Window object represents the browser’s window or potentially frame, that a document is displayed in.
  • As long as a browser window is open, even if no document is loaded in the window, the window object is defined in the current model in memory.
  • All global JavaScript variables, functions and objects automatically become members of the window object.

Dialog boxes

It is used to provide some information to users.

Type of Dialog box:-

  • Alert
  • Confirm
  • Prompt

alert ( ) Method

This Window object’s method is used to display data in the alert dialog box. alert really should be used only when you truly want to stop everything and let the user know something.

Syntax:- window.alert( ) or alert ( )

confirm ( ) Method

This Window object’s method is used to display a message for a user to respond to by pressing either an OK button to agree with the message to a Cancel button to disagree with the message. It returns true on OK and false on Cancel.

Syntax:- window.confirm( ) or confirm ( )

prompt ( ) Method

Window object’s method prompt() can be used to get input from the user, named prompt. The prompt( ) method displays a dialog box that prompts the visitor for input.

Once the prompt function obtains input from the user, it returns that input. If the user press the cancel button in the dialog or close box, a value null will be returned.

Syntax: – prompt(text, defaultText)

open ( ) Method

The open( ) method creates a new secondary browser window, similar to choosing New Window from the File menu. It returns a Window object representing the newly-created window. If the window couldn’t be opened, the returned value is instead null.

Syntax: – window.open (URL, name, features, replace)

URL – URL indicates the document to load into the window. If no URL is specified, a new window with about: blank is opened

Name – Specifies the target attribute or the name of the window. The following values are supported:

_blank – URL is loaded into a new window. This is default
_parent – URL is loaded into the parent frame
_self – URL replaces the current page
_top – URL replaces any framesets that may be loaded

open ( ) Method

Syntax: – window.open (URL, name, features, replace)

Features – It is a comma-delimited string that lists the features of the window.

Replace – It indicates whether or not the URL specified should replace the window’s contents. This would apply to a window that was already created. Value can be true/false.

Features

Feature ParameterValueExample
alwaysLoweredyes/noalwaysLowered=yes
alwaysRaisedyes/noalwaysRaised=no
centerscreenyes/nocenterscreen=yes
chromeyes/nochrome=yes/true
closeyes/noclose=no
dialogyes/nodialog=yes
dependentyes/nodependent=yes
z-lockyes/noz-lock=yes
hotkeysyes/nohotkeys=yes

Features

Feature ParameterValueExample
locationyes/nolocation=no
menubaryes/nomenubar=no
minimizableyes/nominimizable=no
modalyes/nomodal=yes
personalbaryes/nopersonalbar=yes/true
resizableyes/noresizable=no
scrollbarsyes/noscrollbars=no
statusyes/nostatus=no
titlebaryes/notitlebar=yes

Features

Feature ParameterValueExample
toolbaryes/notoolbar=yes
toppixel valuetop=20
heightpixel valueheight=200
widthpixel valuewidth=200
innerHeightpixel valueinnerHeight=200
innerWidthpixel valueinnerWidth=200
outerHeightpixel valueouterHeight=200
outerWidthpixel valueouterWidth=200
leftpixel valueleft=20

close ( ) Method

Once a window is open, the close ( ) method is used to close it. It closes the current window or the window on which it was called. This method is only allowed to be called for windows that were opened by a script using the window.open() method. It is often used together with open ( ) method.

Syntax: – window.close ( )

Tagged : / / / /

How do I manipulate using DOM Table in JavaScript?

HTMLTableElement

HTMLTableElement interface provides special properties and for manipulating the layout and presentation of tables in an HTML document.

Properties
caption
tHead
tFoot
rows
tBodies

Methods
createCaption()
deleteCaption()
createTHead()
deleteTHead()
createTFoot()
deleteTFoot()
insertRow()
deleteRow()

Properties

  • caption – This property represents the table caption. If no caption element is associated with the table, it can be null.
  • tHead – This property represents  the table’s <thead> element. Its value can be null if there is no such element.
  • tFoot – This property represents the table’s <tfoot> element. Its value can be null if there is no such element.
  • rows – This property rows returns a live HTMLCollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. Although the property itself is read-only, the returned object is live and allows the modification of its content.
  • tBodies – This read-only property returns a live HTMLCollection of the table bodies. Although the property is read-only, the returned object is live and allows the modification of its content.

Methods

  • createCaption() – This method returns the caption for the table. If no caption element exists on the table, this method creates it, then returns it.
  • deleteCaption() – This method removes the caption from the table. If there is no caption associated with the table, this method does nothing.
  • createTHead( ) – This method returns the <thead> element association with the table, of type HTMLTableSectionElement. If there is no such element associated to the table, this method creates it, then returns it.
  • deleteTHead() – This removes a <thead> element from the table.
  • createTFoot() – This method returns the <tfoot> element associated with the table, of type HTMLTableSectionElement. If there is no footer for this table, this methods creates it, then returns it.
  • deleteTFoot() – This method removes a <tfoot> element from the table.
  • insertRow() method inserts a new row in the table and returns a reference to the new row.

Syntax: – var row = HTMLTableElement.insertRow(index = -1);

index is the row index of the new row.
row is assigned a reference to the new row. A reference to HTMLTableRowElement.
If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.
If a table has multiple tbody elements, by default, the new row is inserted into the last tbody.

  • deleteRow() method removes a row from the table. If the number of rows to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the table, the exception INDEX_SIZE_ERR is thrown.

Syntax: – HTMLTableElement.deleteRow(index)

an index is an integer representing the row that should be deleted.
However, the special index -1 can be used to remove the very last row of a table.

HTMLTableSectionElement

The HTMLTableSectionElement interface provides special properties and methods for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an HTML table.

Properties
rows

Methods
insertRow()
deleteRow()

  • Rows – This returns a live HTMLCollection containing the rows in the section. The HTMLCollection is live and is automatically updated when rows are added or removed.
  • insertRow() – It inserts a new row just before the given position in the section. If the given position is not given or is -1, it appends the row to the end of section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than -1, it raises a DOMException with the IndexSizeError value.
  • deleteRow() – It removes the cell at the given position in the section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than 0, it raises a DOMException with the IndexSizeError value.

HTMLTableRowElement

The HTMLTableRowElement interface provides special properties and methods for manipulating the layout and presentation of rows in an HTML table.

Properties
cells
rowIndex
sectionRowIndex

Methods
insertCell()
deleteCell()

Properties

  • cells – It returns a live HTMLCollection containing the cells in the row. The HTMLCollection is live and is automatically updated when cells are added or removed.
  • rowIndex – It returns a long value which gives the logical position of the row within the entire table. If the row is not part of a table, returns -1.
  • sectionRowIndex – It returns a long value which gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns -1.

Methods

  • insertCell() – This method inserts a new cell into a table row and returns a reference to the cell.

Syntax: – var cell = HTMLTableRowElement.insertCell(index = -1);

HTMLTableRowElement is a reference to an HTML table row element.
index is the cell index of the new cell.
cell, is assigned a reference to the new cell.
If index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. If index is greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Methods

  • deleteCell() – It removes the cell at the given position in the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than 0, it raises a DOMException with the IndexSizeError value.
Tagged : / / /

CSS manipulation in JavaScript

CSSStyleDeclaration Object

The CSSStyleDeclaration object represents a collection of CSS property-value pairs.

It is used in API :

HTMLElement.style
window.getComputedStyle( )

Properties

  • cssText
  • length
  • parentRule

Methods

getPropertyValue(property)
getPropertyPriority(property)
removeProperty(property)
setProperty(property, value, priority)
item(index)

Style Property

The style property is used to get or set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element’s inline style attribute.

Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets or browser default.

Syntax:-

Return
element.style.property

Set
element.style.property = “value”

A style declaration is reset by setting it to null or an empty string, e.g. element.style.property = null

Inline Style Manipulation

The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element. To perform a manipulation of the CSS with a JavaScript DOM interface, you would access the style object of the element.

Style Property

Example: –

Dynamic Style Manipulation

As we know The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element, This has performance considerations since you need to change a single property at a time. We might manipulate style rules using CSS class Selector. The element’s class attribute is represented as className property in DOM.

DOMTokenList

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor.  etc. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties
length
value

Methods
item()
add()
remove()
replace()
contains()
toggle()
value()

classList Property

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.

Syntax: –

var elementClasses = elementNodeReference.classList;

Computed Style

The computed style is the style actually used in displaying the element, after “stylings” from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles, and browser default styles.
Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets or browser default. To get the values of all CSS properties for an element you should use window.getComputedStyle( ) instead.
The returned style is a live CSSStyleDeclaration object ( The CSSStyleDeclaration object represents a collection of CSS property-value pairs.), which updates itself automatically when the element’s style is changed.

Syntax:-
window.getComputedStyle(element, pseudoElement)
Element – Element for which to get the computed style.
pseudoElement – A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.

Ex: –
var elm = document.getElementById(“myid”);
var allCSSProp = window.getComputedStyle(elm)

Tagged : / / / / /

Manipulation Attributes in JavaScript

Attributes

The attributes property returns a live collection of all attribute nodes registered to the specified node. It is a read-only property.

Syntax:-
Element.attributes[index/key]

Attr Object

Properties

  • name (do not use nodeName)
  • value (do not use nodeValue or textContent or appendChild() or insertBefore( ) or removeChild( ) or replaceChild( ) these all are deprecated for attr object)

Methods

  • setAttribute( )
  • getAttribute( )
  • removeAttribute( )

setAttribute( )

This method is used to set the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value. We should not use this method to set inline style as it will overwrite other CSS properties.

Syntax:-
Element.setAttribute(name, value);
Element.setAttribute(“style”, “css properties: value”);

Ex: –
p.setAttribute(“id”, “mydiv”);
p.setAttribute(“style”, “font-size: 80px”);

getAttribute( )

The getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “ ”.

Syntax: –
var attribute = element.getAttribute(attributeName);

removeAttribute( )

This method is used to remove an attribute from the specified element.

Syntax: –
element.removeAttribute(attrName);

hasAttribute( )

The hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not.

Syntax:-
var result = element.hasAttribute(attr_name);

Tagged : / / / /

What is the Purpose of the Node Object Property in JavaScript

Properties of Node Object

The Node object represents a single node in the document tree.

  • nodeName
  • nodeValue
  • nodeType
  • textContent
  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • previousSibling
  • nextSibling

nodeName

The nodeName read-only property returns the name of the current node as a string.

  • CDATASection “#cdata-section”
  • Comment “#comment”
  • Document “#document”
  • DocumentFragment “#document-fragment”
  • DocumentType The value of DocumentType.name
  • Element The value of Element.tagName
  • Entity The entity name
  • EntityReference The name of entity reference
  • Notation The notation name
  • ProcessingInstruction The value of ProcessingInstruction.target
  • Text “#text”

nodeValue

The nodeValue property returns or sets the value of the current node.

  • CDATASection content of the CDATA Section
  • Comment content of the comment
  • Document null
  • DocumentFragment null
  • DocumentType null
  • Element null
  • NamedNodeMap null
  • EntityReference null
  • Notation null
  • ProcessingInstruction entire content excluding the target
  • Text content of the text node

nodeType

The read-only Node.nodeType property represents the type of the node.

ConstantNode TypeDescription
Node.ELEMENT_NODE1An element such as <h1> or <div>
Node.TEXT_NODE3The actual Text of Element or Attribute ex: – “Hello”
Node.PROCESSING_INSTRUCTION_NODE7An instruction to a parser on aspect of the document <?xml version=“1.0”?>
Node.COMMENT_NODE8A comment such as < – – Something – – >
Node.DOCUMENT_NODE9A Document Node
Node.DOCUMENT_TYPE_NODE10A doctype statement <!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE11A document fragment, which represents a lightweight structure to hold a collection of DOM nodes for manipulation or insertion.

Tagged : / / / / /

How can I use math Object Properties in JavaScript?

Math

The Math object holds a set of constants and methods that enable more complex mathematical operations than the basic arithmetic operators. We can not instantiate a Math Object. The Math object is static so it‟s properties and methods are accessed directly.

Ex:-
Math.PI
Math.abs( )

Properties

  • E Returns Euler’s number (approx. 2.718)
  • LN2 Returns the natural logarithm of 2 (approx. 0.693)
  • LN10 Returns the natural logarithm of 10 (approx. 2.302)
  • LOG2E Returns the base-2 logarithm of E (approx. 1.442)
  • LOG10E Returns the base-10 logarithm of E (approx. 0.434)
  • PI Returns PI (approx. 3.14)
  • SQRT1_2 Returns the square root of 1/2 (approx. 0.707)
  • SQRT2 Returns the square root of 2 (approx. 1.414)

Methods

  • Math.abs(arg) Returns the absolute value of arg
  • Math.acos(arg) Returns the arccosine of arg, in radians
  • Math.acosh(arg) Returns the hyperbolic arccosine of arg
  • Math.asin(arg) Returns the arcsine of arg, in radians
  • Math.asinh(arg) Returns the hyperbolic arcsine of arg
  • Math.atan(arg) Returns the arctangent of arg as a numeric value between -PI/2 and PI/2 radians
  • Math.atan2(arg1, arg2) Returns the arctangent of the quotient of its arguments
  • Math.atanh(arg) Returns the hyperbolic arctangent of arg

Methods

  • Math.cbrt(arg) Returns the cubic root of arg
  • Math.ceil(arg) Returns arg, rounded upwards to the nearest integer
  • Math.cos(arg) Returns the cosine of arg (arg is in radians)
  • Math.cosh(arg) Returns the hyperbolic cosine of arg
  • Math.exp(arg) Returns the value of Ex
  • Math.floor(arg) Returns arg, rounded downwards to the nearest integer
  • Math.log(arg) Returns the natural logarithm (base E) of arg
  • Math.random() Returns a random number between 0 and 1
  • Math.round(arg) Rounds arg to the nearest integer

Methods

  • Math.max(arg1, arg2, …,arg_n) Returns the number with the highest value
  • Math.min(arg1, arg2, …,arg_n) Returns the number with the lowest value
  • Math.pow(arg1, arg2) Returns the value of arg to the power of arg2
  • Math.sin(arg) Returns the sine of arg (arg is in radians)
  • Math.sinh(arg) Returns the hyperbolic sine of arg
  • Math.sqrt(arg) Returns the square root of arg
  • Math.tan(arg) Returns the tangent of an angle
  • Math.tanh(arg) Returns the hyperbolic tangent of a number
  • Math.trunc(arg) Returns the integer part of a number (arg)

Tagged : / / /

How do you use Arrays in JavaScript?

Array

Arrays are a collection of data items stored under a single name. Array provides a mechanism for declaring and accessing several data items with only one identifier, thereby simplifying the task of data management.

We use an array when we have to deal with multiple data items. Arrays are a special type of object. The typeof operator in JavaScript returns “object” for arrays.

Declaration and initialization of Array

  • Using Array Literal

Syntax: – var array_name = [ ];

Declaration and initialization of Array

  • Using Array Literal

Syntax: – var array_name = [value1, value2, value_n];

Declaration and initialization of Array

  • Using Array Constructor

Syntax: – var array_name = new Array( );

Declaration and initialization of Array

  • Using Array Constructor

This will create an empty array with 5 lengths. So this is not a good idea to use Array
Constructor if you have only a single numeric value.

Note – By default, the array starts with index 0.

Important Points

  • JavaScript arrays are zero-indexed: the first element of an array is at index 0.
  • Using an invalid index number returns undefined.
  • It’s possible to quote the JavaScript array indexes as well (e.g., geek[‘2’] instead of geek[2]), although it’s not necessary.
  • Arrays cannot use strings as element indexes but must use integers.
  • There is no associative array in JavaScript. geek[“fees”] = 200;
  • No advantage to use Array Constructor so better to use Array Literal for creating Arrays in JavaScript.

Accessing Array Elements

Accessing Array Elements

Access all at once

Modifying Array Elements

Removing Array Elements

Array elements can be removed using the delete operator. This operator sets the array element it is invoked on to undefined but does not change the array‟s length.

Syantx :- delete Array_name[index];
Ex:- delete dev[0];

Length Property

The length property retrieves the index of the next available position at the end of the array. The length property is automatically updated as new elements are added to the array. For this reason, length is commonly used to iterate through all elements of an array.

Tagged : / / / / /