Day: August 2, 2021

Object Oriented Programming in JavaScript

by rajeshkumarJavaScriptLeave a Comment on Object Oriented Programming in JavaScript

Object Oriented Programming

Object-oriented programming (OOP) is a programming language model organized around objects rather than “actions” and data rather than logic.

Concepts of OOP

  • Encapsulation
  • Abstraction
  • Inheritance
  • Polymorphism

Objects

An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects.

Type of Objects

  • User-defined Objects – These are custom objects created by the programmer to bring structure and consistency to a particular programming task.
  • Native Objects – These are provided by the JavaScript language itself like String, Number, Boolean, Function, Date, Object, Array, Math, RegExp, Error as well as object that allow creation of user-defined objects and composite types.
  • Host Objects – These objects are not specified as part of the JavaScript language but that are supported by most host environments, typically browsers like window, navigator.
  • Document Objects – These are part of the Document Object Model (DOM), as defined by the W3C. These objects presents present the programmer with a structured interface to HTML and XML documents. Access to the document objects is provided by the browser via the document property of the window object (window.document).

Declaration and initialization of Object

  • Using Object Literal

Multiword key required quotation

Declaration and initialization of Object

  • Using Object Literal

Declaration and initialization of Object

  • Using Object Literal

Declaration and initialization of Object

  • Using Object Constructor

Declaration and initialization of Object

  • Using Object Constructor
Tagged : / /

How to use Pseudo Element in CSS?

by rajeshkumarCSSLeave a Comment on How to use Pseudo Element in CSS?

This is used to style specified parts of an element.

Syntax: –

selector::pseudo-element { property:value; }

Ex: –

p::first-letter { color: red; }

  • ::first-letter
  • ::first-line
  • ::selection
  • ::before
  • ::after

::first-letter-

This is used to add a style to the first letter of the specified selector (each). This can only be used with block-level elements.

  • background properties
  • font properties
  • padding properties
  • color properties
  • margin properties
  • border properties
  • line-height
  • text-transform
  • text-decoration
  • vertical-align (only if float is ‘none’)
  • float
  • clear

Ex: –

p::first-letter { color: red;}

::first-line-

This is used to add a style to the first line of the specified selector (each). This can only be used with block-level elements.

  • background properties
  • font properties
  • text-decoration
  • color properties
  • word-spacing
  • letter-spacing
  • text-transform
  • vertical-align
  • line-height
  • clear

Ex: –

p::first-line { color: red;}

::selection-

This is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.

  • background properties
  • color properties
  • cursor properties
  • outline properties

Ex: –

p::selection { background-color: red; }

::before-

This is used to insert something before the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::before { content: “ Hello World”; }

::after-

This is used to insert something after the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::after { content: “ Hello DevOpsSchool”; }

Tagged : / / / / / /

How to Use child-selector in CSS?

by rajeshkumarCSSLeave a Comment on How to Use child-selector in CSS?

first-child-

This will set CSS rule to every first element of selector which is someone’s child. 

last-child-

This will set CSS rule to every last element of selector which is someone’s child. 

first-of-type-

This will set CSS rule to every first selector type of element.

last-of-type-

This will set CSS rule to every last selector type of element.

Tagged : / / / /

What is Laravel?

by Amardeep DubeyLaravelLeave a Comment on What is Laravel?

Laravel is a free, open-source PHP based Web Framework for building High End Web Applications, following the Model View Controller architectural pattern and based on Symfony.
It is created by Taylor Otwell.
Laravel Source Code : https://github.com/laravel/framework

Advantages of Laravel

  • Open Source
  • Collection of tools
  • Save Time
  • Improve Productivity
  • Robust and Easy
  • Security of the Application
  • Authentication
  • Routing
  • Templating
Tagged : /

How to Use Pseudo-classes in CSS?

by rajeshkumarCSSLeave a Comment on How to Use Pseudo-classes in CSS?

A pseudo-class is used to define a special state of an element.

Syntax:-

selector:pseudo-class { property:value; }

Ex: –

div:hover { background-color: red;}

Pseudo-classes–

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :checked
  • :first-child
  • :first-of-type
  • :nth-child(n)
Tagged : / / / / / / / / / /

Typeof operator in JavaScripts

by rajeshkumarJavaScriptLeave a Comment on Typeof operator in JavaScripts

The typeof operator is used to get the data type (returns a string) of its operand. The operand can be either a literal or a data structure such as a variable, a function, or an object.

Syntax: –
typeof operand
typeof(operand)

Ex: –
typeof “a”;

Undefined

The undefined type is used for variable or object properties that either do not exist or have not been assigned a value. The only value an undefined type can have is undefined.

Null

The null value indicates an empty value; it is essentially a placeholder that represents “nothing”. The null value is defined as an empty object so using typeof operator on a variable holding null shows its type to be an object.

Undefined Vs Null

Undefined means the value hasn‟t been set, whereas null means the value has been set to be empty.

var, let and const

var – The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

let – let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.

const – This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables. An initializer for a constant is required; that is, you must specify its value in the same statement in which it’s declared which can’t be changed later.

Tagged : / / / /

Immediately Invoked Function Expression (IIFE)

by rajeshkumarJavaScriptLeave a Comment on Immediately Invoked Function Expression (IIFE)

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
It is a design pattern which is also known as Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
The second part is creating the immediately executing function expression (), through which the JavaScript engine will directly interpret the function.

Immediately Invoked Function Expression (IIFE)

  • Avoid Creating Global variable and Functions
  • As it doesn‟t define variable and function globally so there will be no name conflicts
  • Scope is limited to that particular function

Pass by Value

  • JavaScript arguments are passed by value: The function only gets to know the values, not the argument’s locations.
  • If a function changes an argument’s value, it does not change the parameter’s original value.
  • Changes to arguments are not visible (reflected) outside the function.

Pass by reference

  • In JavaScript, object references are values.
  • Because of this, objects will behave like they are passed by reference:
  • If a function changes an object property, it changes the original value.
  • Changes to object properties are visible (reflected) outside the function.

Tagged : / / /

Types of Selector in CSS & How to Use CSS Selector in HTML?

by rajeshkumarCSSLeave a Comment on Types of Selector in CSS & How to Use CSS Selector in HTML?

There are five types of Selector in CSS.

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector–

  • ID
  • Class
  • Element

Id Selector–

<html>
	<head>
		<style>
		          #id_selector {
			              color: red; font-size: 60px;
			         }
		</style>
	</head>
	<body>
		<p id="id_selector">Hello World!</p>
		<p>This paragraph is not affected by the style.</p>
	</body>
</html>

Class Selector–

Universal-

<html>
	<head>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Element Specific-

<html>
	<head>
		<style>
			p.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Use Two or more class–

<html>
	<head>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 60px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	                    <h2 class="algn">I am Heading</h2>
	                    <p class ="red look">I am first paragraph</p>
	                    <p class="red algn">I am second paragraph</p>
	</body>
</html>
Tagged : / / / / / / / / /