properties Archives

How to Use Change Attributes Properties in jQuery?

by rajeshkumarSeptember 30, 2021April 13, 2022jQueryLeave a Comment

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.

How do you transition multiple properties in CSS & HTML?

by rajeshkumarAugust 31, 2021April 13, 2022CSSLeave a Comment

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.

Tagged : css / delays / duration / HTML / Multiple / properties / timing / transition

How to use Form Handling in javascript

by rajeshkumarAugust 13, 2021April 13, 2022JavaScriptLeave a Comment

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

Properties	Value	Description
accept-charset	UTF-8	Specifies the charset used in the submitted form (default: the page charset).
action	URL	Contains a URL that defines where to send the data after submitting the form
autocomplete	On (default) Off	Determines that the browser retains the history of previous values.
enctype		specifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encoding		Holds 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

Properties	Value	Description
length		The number of a form field with a given form tag. Should bt the same as elements.length
method	GET (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
name	name	Specifies a name used to identify the form
novalidate	novalidate	Specifies 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

Method	Description
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 : document object / DOM / events / Form Handling / HTML / Javascript / Method / properties

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

by rajeshkumarAugust 12, 2021April 13, 2022JavaScriptLeave a Comment

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 Parameter	Value	Example
alwaysLowered	yes/no	alwaysLowered=yes
alwaysRaised	yes/no	alwaysRaised=no
centerscreen	yes/no	centerscreen=yes
chrome	yes/no	chrome=yes/true
close	yes/no	close=no
dialog	yes/no	dialog=yes
dependent	yes/no	dependent=yes
z-lock	yes/no	z-lock=yes
hotkeys	yes/no	hotkeys=yes

Features

Feature Parameter	Value	Example
location	yes/no	location=no
menubar	yes/no	menubar=no
minimizable	yes/no	minimizable=no
modal	yes/no	modal=yes
personalbar	yes/no	personalbar=yes/true
resizable	yes/no	resizable=no
scrollbars	yes/no	scrollbars=no
status	yes/no	status=no
titlebar	yes/no	titlebar=yes

Features

Feature Parameter	Value	Example
toolbar	yes/no	toolbar=yes
top	pixel value	top=20
height	pixel value	height=200
width	pixel value	width=200
innerHeight	pixel value	innerHeight=200
innerWidth	pixel value	innerWidth=200
outerHeight	pixel value	outerHeight=200
outerWidth	pixel value	outerWidth=200
left	pixel value	left=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 : Javascript / Method / Parameter / properties / window object

How do I manipulate using DOM Table in JavaScript?

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

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 : HTML / Javascript / methods / properties

CSS manipulation in JavaScript

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

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 : css / Javascript / Manipulation / methods / objects / properties

Manipulation Attributes in JavaScript

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

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 : Attributes / css / Javascript / Method / properties

What is the Purpose of the Node Object Property in JavaScript

by rajeshkumarAugust 6, 2021April 13, 2022JavaScriptLeave a Comment

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.

Constant	Node Type	Description
Node.ELEMENT_NODE	1	An element such as <h1> or <div>
Node.TEXT_NODE	3	The actual Text of Element or Attribute ex: – “Hello”
Node.PROCESSING_INSTRUCTION_NODE	7	An instruction to a parser on aspect of the document <?xml version=“1.0”?>
Node.COMMENT_NODE	8	A comment such as < – – Something – – >
Node.DOCUMENT_NODE	9	A Document Node
Node.DOCUMENT_TYPE_NODE	10	A doctype statement <!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE	11	A document fragment, which represents a lightweight structure to hold a collection of DOM nodes for manipulation or insertion.

Tagged : Javascript / Node / Node Object / nodeType / nodeValue / properties

How can I use math Object Properties in JavaScript?

by rajeshkumarAugust 5, 2021April 13, 2022JavaScriptLeave a Comment

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 : Javascript / math Object / methods / properties

How do you use Arrays in JavaScript?

by rajeshkumarAugust 4, 2021April 13, 2022JavaScriptLeave a Comment

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

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 : array / Array operators / elements / functions / Javascript / properties