We can achieve it by 2 method.
1- Standard auto execute function.
2- Arrow function.
<script>
(function() {
const iamvar1= 'Iam var 1';
console.log('Auto Execute 1 function');
})();
</script>
<script>
(()=> {
const iamvar2= 'Iam var 2';
console.log('Auto Execute 2 function');
})();
</script>
Simple Class in JavaScript
Here is the below code that demonstrate that how to create class and how to use it.
<script>
class WORKER {
#step1(){console.log("RUN step1");}
#step2(){console.log("RUN step2");}
#step3(){console.log("RUN step3");}
#step4(){console.log("RUN step4");}
#step5(){console.log("RUN step5");}
init() {
this.#renderHTMLFromURL();
}
#renderHTMLFromURL = () => {
this.#step1();
this.#step2();
this.#step3();
this.#step4();
this.#step5();
}
}
new WORKER().init();
</script>
here is the code that allow to add dependent script :
<script>
const addDependentScripts = async function( scriptsToAdd ) {
const s=document.createElement('script')
for ( var i = 0; i < scriptsToAdd.length; i++ ) {
let r = await fetch( scriptsToAdd[i] )
s.text += await r.text()
}
document.querySelector('body').appendChild(s)
}
</script>
Uses as below :
<script>
try {
addDependentScripts( [
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"https://cdn.mywebshopapp.com/test/a1.js",
"https://cdn.mywebshopapp.com/test/a2.js",
"https://cdn.mywebshopapp.com/test/a3.js",
"https://cdn.mywebshopapp.com/test/a4.js"
] );
}
catch (err) { }
</script>
Here is the example where apply css via JavaScript
<script>
const mstyle = document.head.appendChild(document.createElement(‘style’));
style.textContent = /*this is the css*/`
.myclass {
aspect-ratio: 16 / 9; background-color: #000;
position: relative; display: block; contain: content;
background-position: center center;
background-size: cover;
}
#mydivid {
color:green; opacity: 0;
}
`;
</script>
Define own custom HTML element
Here I am demonstrating how to define your own custom HTML element or control and how to use it.
Define is as <my-test-element-one> </my-test-element-one>
and then use my JavaScript. The complete code it below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
connectedCallback(){
this.innerHTML=` <div class="myclass" style=" width:600px;height:500px; background-color:green">
<img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
</div>`
}
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>
Show array data without for loop in javascript
Use below code
<script>
const strs1 = ["one ", "two", "three"];
const newst1 = strs.map(st => { console.log(st)});
const mynum = [1, 2, 3];
const newnum = mynum.map(num => { console.log(num)});
</script>
How to add inline javascript using createElement
Here are the 2 examples of codes.
Code 1:
<script>
var scriptNode = document.createElement ("script");
scriptNode.textContent = "alert('aaa');";
document.head.appendChild (scriptNode);
</script>
Code 2:
<script>
var scriptNode=document.createElement("script");
scriptNode.textContent= "!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', 'mynumber' );fbq('track', 'PageView', {customer_groups: 'Visitatore',default_customer_group: ''});";
document.head.appendChild (scriptNode);
</script>
How to pass and get data in createElement statement in javascript?
Here is the listed below code:
In "a1.html"
<script>
var myscript= document.createElement('script');
myscript.setAttribute('data-id1','fordata1');
myscript.setAttribute('data-id2','fordata2');
myscript.setAttribute('data-id3','fordata3');
myscript.setAttribute('data-id4','fordata4');
myscript.setAttribute('data-id5','fordata5');
myscript.setAttribute('src','get-id-in-js.js');
document.head.appendChild(myscript);
</script>
In "get-id-in-js.js" file
var scripts=document.getElementsByTagName("script");
console.log(scripts[0].getAttribute("data-id1"));
console.log(scripts[0].getAttribute("data-id2"));
console.log(scripts[0].getAttribute("data-id3"));
console.log(scripts[0].getAttribute("data-id4"));
console.log(scripts[0].getAttribute("data-id5"));
How to pass and get data in script tag in javascript Here is the code:
In "a1.html"
<script async="" data-id1="fordata1" data-id2="fordata2" data-id3="fordata3" data-id4="fordata4" data-id5="fordata5" src="get-id-in-js.js"></script>
In "get-id-in-js.js" file:
var scripts=document.getElementsByTagName("script");console.log(scripts[0].getAttribute("data-id1")); console.log(scripts[0].getAttribute("data-id2")); console.log(scripts[0].getAttribute("data-id3")); console.log(scripts[0].getAttribute("data-id4")); console.log(scripts[0].getAttribute("data-id5"));
Javascript Events of mousedown mousemove keydown scroll touchstart click keypress touchmove
<script type="text/javascript">
var sd=!1;
console.log(sd);
function myworker(){
if(!sd){
sd=!0;
console.log("Yes");
console.log(sd);
}
}
var myallEvents=["mousedown","mousemove","keydown","scroll","touchstart","click","keypress","touchmove"];
myallEvents.forEach(function(t){window.addEventListener(t,myworker,!1)});
</script>
Posts
All Comments
