admin – Page 3

Reverse a string

var str = "Hellow World is done";
console.log(str);
var str2 = str.split('').reverse().join('');
console.log(str2);

[vc_single_image image=”918″ img_size=”full”]

Reverse a string but don’t change the position of the word.

var str3 = str.split('').reverse().join('').split(' ').reverse().join(' ');
console.log(str3);

Palindrome in Javascript

How to check string from both side left to right and right to left.

something like prarp this should be give us true.

function palindrome(str) {
var len = str.length;
var mid = Math.floor(len/2);

for ( var i = 0; i < mid; i++ ) {
if (str[i] !== str[len - 1 - i]) {
return false;
}
}

return true;
}

remove url from anchor tag href

Remove window url from anchor tag href that contain # hash. Means we need to remove url from hash to start.

var links = document.querySelectorAll('a');

		links.forEach((item) => {
			//check each item has 'inner'
			if(item.href.includes('inner')){
				if(item.href.indexOf('#') != -1){
					item.href = item.href.slice(item.href.indexOf('#'));
				}
			}
		})

Also now you need to change click jQuery code.

$('body').on('click', '.menu_area .wrapper .inner_wrapper ul li a[href^="#"]', function(){
console.log('hello')
});

Custom Element

–HTML File

<template>
    <style>
        * {
            background: #CCC;
        }
    </style>
    <p>Custom Elememnt</p>
</template>

<custom-tag></custom-tag>

–JS

// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template');

// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);

// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = function() {
  var root = this.createShadowRoot();
  root.appendChild(document.importNode(tmpl.content, true));
};

// Register our new element
var ImgSlider = document.registerElement('custom-tag', {
  prototype: ImgSliderProto
});

[vc_single_image image=”908″ img_size=”full”]

Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements. What’s truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.

Ref: CSS Trick

HTML Templates

<template id="template"><p>Smile!</p></template>
<script>
const fragment = document.getElementById('template').content.cloneNode(true);
document.body.appendChild(fragment);
</script>

[vc_single_image image=”900″ img_size=”full”]

Import html

Import html from another html file.

–component.html

<div id="container"> <h1>Content from another html file.</h1> <p>lipsum lipsum lipsum</p> </div>

–index.html

<head>
<link rel="import" href="component.html">
</head>
<body>
<script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;
    var el = content.querySelector('#container');
    document.body.appendChild(el);
</script>
</body>

[vc_single_image image=”897″ img_size=”full”]

ViewState and SessionState in Javscript

ViewState

value is specific to a page in a session. If user go to other page values will be no longer.

SessionState

value is specific to user specific data that can be accessed across all pages in the web application. If another user want to access this data he will not.

Object Cloning in Javascript

var phone1 = {
	make: 'Apple',
	model: 'Iphone 6',
	warranty: 12,
	extendWarranty: function(x){
		this.warranty += x;
    }
}

function clone(object){
	var c = function(){};
	c.prototype = object;
	return new c();
}

var phone2 = clone(phone1);

[vc_single_image image=”883″ img_size=”full”][vc_single_image image=”884″ img_size=”full”][vc_text_separator title=”OR”]

var phone1 = {myProp: 'Iphone'};
var phone2 = Object.assign({}, phone1)

[vc_single_image image=”891″ img_size=”full”]

Difference between proto and prototype in Javascript

__proto__

This is actual a Object that is used in the lookup chain to resolve methods.

var person3 = {
	name: 'Max'
}

person3.__proto__

.prototype

This is used to inherit one Object or Function to another Object. when you create an object with new and also this is build __proto__

function person3(name){
	this.name = name;
}

person3.prototype.age = 18

var person4 = new person3('Max')

person4.name

person4.age

person4

[vc_single_image image=”879″ img_size=”full”]

Author: admin