Web Technology Experts Notes

Showing posts with label JavaScript. Show all posts

Sunday 29 March 2020

How do I copy to the clipboard in JavaScript?

Step 1: Add Following javascript function in Web page.

    function selectAllData(id) {
    var obj = document.getElementById(id);
        var text_val=eval(obj);
        text_val.focus();
        text_val.select();
        if (!document.all) return; // if IE return;
        r = text_val.createTextRange();
        r.execCommand('copy');
    }

Step 2: call selectAllData('id') function with passing the id of the container. See Example

<input onclick="return selectAllData('textareaId')" type="button" value="Select All" />

Following are consolidate Code:


<script type="text/javascript"> function selectAllData(id) { var obj = document.getElementById(id); var text_val=eval(obj); text_val.focus(); text_val.select(); if (!document.all) return; // if IE return; r = text_val.createTextRange(); r.execCommand('copy'); }</script> <textarea cols="30" id="textareaId" row="50"> javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers javascript interview questions and answers </textarea> <input onclick="return selectAllData('textareaId')" type="button" value="Select All" />

See demo:

Question: What is the most efficient way to deep clone an object in JavaScript?

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(), 
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);

Wednesday 14 February 2018

What is Object.assign()? and how to use Object.assign()?

Question: What is Object.assign()?
The Object.assign() is used to copy the values of all properties from one or more source objects to a target object.

Question: What is syntax for Object.assign()?

Object.assign(target, ...sources);

Example 1

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign(object1,{d:4});
console.log(object2);

Output

Object { a: 1, b: 2, c: 3, d: 4 }

Example 2

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign(object1,{d:4,e:5, a:11});
console.log(object2);

Output

Object { a: 11, b: 2, c: 3, d: 4, e: 5 }

Example 3

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign(object1,{d:4,e:5, a:11},{f:5, a:111});
console.log(object2);

Output

Object { a: 111, b: 2, c: 3, d: 4, e: 5, f: 5 }

Example 4

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign(object1,{d:4,e:5, a:11},{f:5, a:111},null, undefined);
console.log(object2);

Output

Object { a: 111, b: 2, c: 3, d: 4, e: 5, f: 5 }

Example 5

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign(object1,{d:4,e:5, a:11},{f:5, a:111},null, undefined,{g:6, a:1111});
console.log(object2);

Output

Object { a: 1111, b: 2, c: 3, d: 4, e: 5, f: 5, g: 6 }

Tuesday 13 February 2018

JSON.stringify - What is JSON.stringify? and how to use?

Question: What is JSON.stringify()?
The JSON.stringify() method converts a JavaScript value to a JSON string.
It can also convert a Object/Array to JSON String.

Question: Give few example of JSON.stringify()?
Following are few example of JSON.stringify()

JSON.stringify({});                  // {}

JSON.stringify(true);                // 'true'

JSON.stringify('foo');               // '"foo"'

JSON.stringify([1, 'false', false]); // '[1,"false",false]'

JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify({ x: 5, y: 6 });// '{"x":5,"y":6}'

JSON.stringify({ x: 5, y: 6 });// '{"x":5,"y":6}'

Question: What is use of 2nd parameter of JSON.stringify()?
2nd parameter of JSON.stringify() is a replacer.
It can be an array OR can be function.

Question: Give an example of callback function of replacer of JSON.stringify()?

var objectData={}
objectData.a='Apple';
objectData.b=undefined;
objectData.c=';
   
objectData=JSON.stringify(objectData, function(k, v) {                
if (typeof v === 'undefined') {
  return '';
}else{
    return v;
}
});

this replacer function will replace the undefined with empty space.

Question: Give an example of array of replacer of JSON.stringify()?

var foo = {name: 'web tech', week: 350, transport: 'car', month: 7};
JSON.stringify(foo, ['week', 'month']);  //"{"week":350,"month":7}"

IT will return those which match with array

Question: Difference between JSON.stringify and JSON.parse?
JSON.stringify convert a Javascript object into JSON text(JOSN string).
JSON.parse convert a JSON text into into Javascript object.

Both are opposite to each other.

Thursday 14 July 2016

Callback, Trigger and Event handler in javaScript

Callback is a function that is passed to another function as parameter and callback function is called inside another function.
Example:

$("#MyButton").click(function(){
    $("p#hideDiv").hide("slow", function(){
        alert("function() is callback and called.");
    });
});

Here following are callback function.

function(){
        alert("function() is callback and called.");
    }

The trigger is code that is executed automatically on some events.
Example:

<script>
$(document).ready(function(){
    $("input").select(function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("select");
    });
});
</script>
<input type="text" value="Hello World" />
<button>Click on this button</button>

Handler: An event handler executes a part of a code based on certain events occurring within the application such as onClick, onBlur, onLoad etc.
Example:

$(document).ready(function(){
    $("button").click(function(){
        $("input").trigger("select");
    });
});

Following are few more event handler

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

Friday 15 April 2016

How to apply css in iframe with javaScript?

See Following Working Example:
Suppose you have Following Iframe

<iframe border="0" cellspacing="0" frameborder="0" id="myIframeWebsite" name="myIframeWebsite" src="http://example.com/mydir/file.html"></iframe>

Now you just need to add a script code which will add the css file in iframe.
For Example:

<iframe border="0" cellspacing="0" frameborder="0" id="myIframeWebsite" name="myIframeWebsite" src="http://example.com/mydir/file.html"></iframe>
<script type="text/javascript">
var iframeCssLink = document.createElement("link") 
iframeCssLink.href = "/css/myiframecss.css"; 
iframeCssLink.rel = "stylesheet"; 
iframeCssLink.type = "text/css"; 
frames['frame1'].document.body.appendChild(iframeCssLink);
</script>

What will do above code
Whenever iframe load in browser, "/css/myiframecss.css" file will will be added in the head of iframe.
You just need to add all the css inside "/css/myiframecss.css"

Note: Iframe and website must have same Domain, Port and protocol.