Tag: document object

How many create cookies in JavaScript?

by rajeshkumarJavaScriptLeave a Comment on How many create cookies in JavaScript?

JavaScript Cookies

Cookies are exposed as the cookie property of the Document object. This property is both readable and writeable.

You can see Cookies in Google Chrome by following chrome://settings/content/cookies

Creating Cookies

When you assign a string to document.cookie, the browser parses it as a cookie and adds it to its list of cookies. There are several parts to each cookies, many of them optional.

Syntax: –

document.cookie = “name=value”;
document.cookie = “name=value; expires=date; domain=domain; path=path; secure”;
document.cookie = “name=value; max-age=inSecond; domain=domain; path=path; secure”;

Ex:-

Creating Cookies

Optional Cookies Attribute:-

max-age
expires
domain
path
secure

Whenever you omit the optional cookie fields, the browser fills them in automatically with reasonable defaults.

max-age

It is used to create persistent cookies. It is supported by all modern browsers except IE.

Type of cookies: –

  • Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
  • Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

expires

It is used to create persistent cookies.

Type of cookies: –

  • Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
  • Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

document.cookie = “username=devops; expires=Monday, 3-Sep-2018 09:00:00 UTC”;

domain

It specifies the domain for which the cookie is valid. If not specified, this defaults to the host portion of the current document location. If a domain is specified, subdomains are always included.

Ex: –

path

Path can be / (root) or /mydir (directory). If not specified, defaults to the current path of the current document location, as well as its descendants.

Ex: – document.cookie = “username=devops; path=/”;

Ex: – document.cookie = “username=devops; path=/home”;

secure

Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.

Ex: – document.cookie = “username=devops; secure”;

Tagged : / / / / /

How to use Form Handling in javascript

by rajeshkumarJavaScriptLeave a Comment on 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 the use of the document object model in JavaScript?

by rajeshkumarJavaScriptLeave a Comment on What is the use of the document object model in JavaScript?

Document Object Model

  • The Document Object Model (DOM) is an Application Programming Interface (API) for HTML and XML documents.
  • With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.
  • The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
  • The DOM model represents a document with a logical tree.
  • According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one. All operations on the DOM start with the document object. From it, we can access any node.
  • The Document Object Model can be used with any programming language.

DOM Levels

  • DOM Level 0 – This level supports the common document object collections – form[ ], image[ ], anchors[ ], links[ ] and applets[ ]. This is also known as classic or traditional JavaScript Object Model. •
  • DOM Level 1- It provides the ability to manipulate all elements in a document through a common set of functions. In this level, all elements are exposed and parts of the page can be read and written to at all times.
  • DOM Level 2 – It provides further access to page elements primarily related to CSS and focuses on combining Level 0 and Level 1 while adding improved support for working with XML documents.

DOM Levels

  • DOM Level 3 – Enhanced Level of Level 1 and Level 2 and added support for XPath and keyboard event handling.
  • DOM Level 4 – Enhanced  year 2015

Categories of DOM

  • DOM Core – It specifies a generic model for viewing and manipulating a marked-up document as a tree structure.
  • DOM HTML – It specifies an extension to the core DOM for use with HTML. This represents DOM Level 0 with capabilities for manipulating all of the HTML element objects.
  • DOM CSS – It specifies the interfaces necessary to manipulate CSS rules programmatically.
  • DOM Events – It adds event handling to the DOM.
  • DOM XML – It specifies an extension to the Core Dom for use with XML.

Document Tree

DOM Node Types

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.

Node Relationship

  • Parent
  • Children
  • First Child
  • Previous Sibling
  • Next Sibling
  • Last child

DOM Node Properties

PropertiesDescription
nodeNameContains the name of the node
nodeValueContains the value within the node; generally only applicable to text nodes
nodeTypeHolds a number corresponding to the type of node
parentNodeReference to the parent node of the element, if one exists
childNodesAccess to the list of child nodes
firstChildReference to the first child node of the element, if one exists
lastChildPoints to the last child node of the element, if one exists
previousSiblingReference to the previous sibling of the node; for example, if its parent node has multiple children
nextSiblingReference to the next sibling of the node; for example, if its parent node has multiple children
attributesThe list of the attributes for the element
ownerDocumentPoints to the HTML Document object in which the element is contained

Tagged : / / /