Tuesday, 8 August 2017
JAVA SCRIPT LOOP
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT LOOP
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_ex
https://www.youtube.com/playlist?list=PLHGSE2kjRS_Yn4lE6mu7ZajhtMzp2lbZL
https://www.youtube.com/playlist?list=PL41lfR-6DnOrwYi5d824q9-Y6z3JdSgQa
OR USE THIS CODE IN BELOW CODE:
<!-- 1)<br> TAG SHOW CODE IN MULTILPLE
LINES THIS IS BREAK LINE CODE -->
document.write(i+")"+" "+x+"<br>");
WE ALSO REMOVE X VARIABLE LINE IN BELOW CODE WITH SOME CODE CHANGE
document.getElementById("demo").innerHTML +="HELLO"+"<br>";
---------------------------------------------------------------------------------------------------------------WE ALSO REMOVE X VARIABLE LINE IN BELOW CODE WITH SOME CODE CHANGE
document.getElementById("demo").innerHTML +="HELLO"+"<br>";
<script>
for (var i = 0; i < 5; i++) {
document.write("HELLO" + "<br>");
}
</script>
<script>
var i = 0;
while(i< 5){
document.write("HELLO"+"<br>");
i++;
}
</script>
<script>
for (var i = 0; i < 5; i++) {
document.write(i+")"+" "+"HELLO"+"<br>");
}
</script>
Multiplication Table Javascript
<script type ="text/javascript">
var t = 5;
for (var i = 0;i < 5; i++) {
document.write(t+ " X " +i+ " = " +i*t+ "<br>");
}
</script>
<script type ="text/javascript">
var t = 5;
var i = 0;
while(i< 5){
document.write(t+ " X " +i+ " = " +i*t+ "<br>");
i++;
}
</script>
<script>
var t = 5;
var i = 0;
do {
document.write(t+ " X " +i+ " = " +i*t+ "<br>");
i++;
}
while (i < 5);
</script>
---------------------------------------------------------------------------------------------------------------
<html>
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_ex -->
<body>
<h2>JavaScript Loops</h2>
<script>
for (var i = 0; i < 5; i++) {
var x = "HELLO";
var x = "HELLO";
<!-- 1)<br> TAG SHOW CODE IN MULTILPLE LINES THIS IS BREAK LINE CODE -->
document.write(x+"<br>");
}
</script>
</body>
</html>
--------------------------------------------------------------------------
--------------------------------------------------------------------------
<p id="innerHTML"></p>
<script>
for (var FOR = 0; FOR < 5; FOR++) {
innerHTML.innerHTML += "innerHTML"+"<br>";
}
</script>
------------------------------------------------------------------------
MAKE BUTTON IN JAVASCRIPT LIKE MATCHING GAME
-----------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
MAKE BUTTON IN JAVASCRIPT LIKE MATCHING GAME
-----------------------------------------------------------------------
------------------------------------------------------------------------
<p id="innerHTML"></p>
<script>
for (var FOR = 1; FOR < 11; FOR++) {
innerHTML.innerHTML +="<button"+"
"+"id="+"Q"+FOR+">"+FOR+"</button>";
}
</script>
---------------------------------------------------------------------------------------------------------------
IMAGE REPEAT 5 TIMES WITH LOOP AND IMAGE ADD CHILD
---------------------------------------------------------------------------------------------------------------
<p id="innerHTML"></p>
<!-- WITHOUT FUNCTION JAVASCRIPT CODE WRITE
AFTER HTML -->
<!-- BUT JAVASCRIPT FUNCTION CODE CAN WRITE
BEFORE OR AFTER HTML -->
<script>
innerHTML.innerHTML = "innerHTML";
</script>
---------------------------------------------------------------------------------------------------------------
<script>
function ShowImage() {
document.write("<br /><br /><img src='smiley.gif'>");
}
function NotShowImage() {
document.write("EMPTY");
}
</script>
<body>
<button type="checkbox"onclick="ShowImage()"> BUTTON CLICK SHOW IMAGE</button>
<button type="checkbox"onclick="NotShowImage()"> BUTTON CLICK NOT SHOW IMAGE</button>
</body>
---------------------------------------------------------------------------------------------------------------
button id="HtmlId">AddEventListener</button>
<script>
HtmlId.onclick=function(){
document.write("<br /><br /><img src='smiley.gif'>");
}
</script>
---------------------------------------------------------------------------------------------------------------<input id="demo" type="checkbox" name="Box" onclick="checker('that');"> Employment <br />
<img id="that" src="smiley.gif" style="visibility:hidden"/>
<script type="text/javascript">
function checker(demo) {
if(document.getElementById(demo).style.visibility=="visible"){
document.getElementById(demo).style.visibility="hidden";
}
else{
document.getElementById(demo).style.visibility="visible";
}
}
</script>
---------------------------------------------------------------------------------------------------------------
IMAGE HIDE SHOW WITH TOGGLE BUTTON
https://stackoverflow.com/questions/63794083/how-to-use-buttons-to-toggle-image-visibility
---------------------------------------------------------------------------------------------------------------
<style>
.toggle-image.hidden img {
display: none;
}
</style>
<div class="toggle-image">
<button onclick="toggle(this)">Image 1 </button>
<img src="http://placekitten.com/100/100" />
</div>
<script type="text/javascript">
function toggle(button) {
button.parentElement.classList.toggle('hidden');
}
</script>
---------------------------------------------------------------------------------------------------------------
IMAGE HIDE SHOW WITH TOGGLE BUTTON
https://stackoverflow.com/questions/9075440/javascript-button-show-hide-on-text-changed
NONE BLOCK NONE OR HIDDDEN VISIBLE HIDDEN
---------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/9075440/javascript-button-show-hide-on-text-changed -->
<button id="ButtonId" onclick="myFunction()">Try it</button>
</br>
<img id="ImageId" style="" src="https://www.w3schools.com/tags/smiley.gif">
<script>
ButtonId.onclick=function(){
if (ImageId.style.display === "none") {
ImageId.style.display = "block";
}
else {
ImageId.style.display = "none";
}
}
</script>
<!-- https://stackoverflow.com/questions/9075440/javascript-button-show-hide-on-text-changed -->
<button id="ButtonId" onclick="myFunction()">Try it</button>
</Br>
<img id="ImageId" style="" src="https://www.w3schools.com/tags/smiley.gif">
<script>
ButtonId.onclick=function(){
if(ImageId.style.visibility=="hidden"){
ImageId.style.visibility="visible";
}
else{
ImageId.style.visibility="hidden";
}
}
</script>
https://stackoverflow.com/questions/14544104/checkbox-check-event-listener
<input type="checkbox" id="checkboxId" name="checkbox" />
<img id="ImageId" src="smiley.gif" style=""/>
<script>
checkboxId.addEventListener('change',function(){
if (checkboxId.checked) {
ImageId.style.visibility="hidden";
}
else {
ImageId.style.visibility="visible";
}
});
</script>
<img id="ImageSrcId">
<script>
var ImageSrc =["https://www.w3schools.com/tags/smiley.gif"]
ImageSrcId.src =ImageSrc;
</script>
----------------------------------------------------------------------------------------------------------------
<img id="ImageSrcId">
<script>
ImageSrcId.src =["https://www.w3schools.com/tags/smiley.gif"];
</script>
----------------------------------------------------------------------------------------------------------------
CREATE ELEMENT NODE
https://www.w3schools.com/jsref/met_document_createelement.asp
http://www.htmldog.com/guides/javascript/advanced/creatingelements/
https://www.w3schools.com/jsref/met_document_createelement.asp
http://www.htmldog.com/guides/javascript/advanced/creatingelements/
--------------------------------------------------------------------------------------------------------------
<body>
<script>
var x = document.createTextNode("HI");
document.body.appendChild(x);
</script>
--------------------------------------------------------------------------
<img>
<script>
document.body.appendChild(document.createElement("IMG"))
.src =["https://www.w3schools.com/tags/smiley.gif"];
;
</script>
--------------------------------------------------------------------------
<body>
<script>
var x = document.createElement('div');
document.body.appendChild(x);
//APPEND CHILD STYLE
//https://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript
x.textContent = "HI";
x.style.width = "100px";
x.style.height = "100px";
x.style.background = "Red";
x.style.color = "White";
//APPEND CHILD STYLE
//https://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript
x.textContent = "HI";
x.style.width = "100px";
x.style.height = "100px";
x.style.background = "Red";
x.style.color = "White";
</script>
-------------------------------------------------------------------------
IMAGE CREATE IN JAVASCRIPT AND INNER HTML ATTRIBUTE
SERCH IN GOOGLE var x = document.createElement('div');
https://htmldog.com/guides/javascript/advanced/creatingelements/
Javascript Add ID to elements inside a div
https://stackoverflow.com/questions/30768753/javascript-add-id-to-elements-inside-a-div
Javascript Add ID to elements inside a div
https://stackoverflow.com/questions/30768753/javascript-add-id-to-elements-inside-a-div
-------------------------------------------------------------------------
<body>
<script>
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/tags/smiley.gif");
document.body.appendChild(x);
//JAVA SRIPT CSS ELEMENT
x.style.width = "100px";
x.style.height = "100px";
x.style.background = "Red";
//JAVA SRIPT INNER HTML ELEMENT
x.innerHTML = "IMAGE DIV INNER HTML";
x.id = 'CREAT HTML ID BY JAVA SCRIPT';
x.setAttribute('class', 'CREAT HTML CLASS BY JAVA SCRIPT');
x.textContent = "HI";
</script>
-------------------------------------------------------------------------
ACTUALLY BELOW CODE TELLS IF HTML ID SHOWS IN ELEMENT BOX
SEARCH THIS javascript find and replace text in html IN GOOGLE
CREAT HTML ID BY JAVA SCRIPT THEN ITS CHANE INTO "CREAT HTML ID BY JAVA SCRIPT HAS CHANGE"
-------------------------------------------------------------------------
<body>
<!-- https://stackoverflow.com/questions/1650299/how-do-i-change-the-id-of-a-html-element-with-javascript -->
<!-- THIS CODE HTML ID CHANGE--><script>
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/tags/smiley.gif");
document.body.appendChild(x);
x.id = 'CREAT HTML ID BY JAVA SCRIPT';
document.getElementById("CREAT HTML ID BY JAVA SCRIPT").id = "CREAT HTML ID BY JAVA SCRIPT HAS CHANGE"
</script>
-------------------------------------------------------------------------
Javascript Add ID to elements inside a div
https://stackoverflow.com/questions/30768753/javascript-add-id-to-elements-inside-a-div
-------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style id="compiled-css" type="text/css">
div {
width: 80%;
margin: 0 auto 0.5em auto;
border: 2px solid #000;
}
div > div[id]::before {
content:'ID: ' attr(id);
color: #f00;
display: block;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">//<![CDATA[
window.onload = function() {
$('#my_parent_div div').prop('id', function (i, v) {
return v === '' || 'undefined' === typeof v ? 'new_added_id_' + String.fromCharCode(97 + i) : v;
});
};
//]]></script>
</head>
<body>
<div id="my_parent_div">
<div id="my_child_div_a">Here is some text A</div>
<div>Here is some text B</div>
<div>Here is some text C</div>
<div>Here is some text D</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
Javascript Add ID to elements inside a div
https://stackoverflow.com/questions/30768753/javascript-add-id-to-elements-inside-a-div
-------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style id="compiled-css" type="text/css">
div {
width: 80%;
margin: 0 auto 0.5em auto;
border: 2px solid #000;
}
div > div[id]::before {
content:'ID: ' attr(id);
color: #f00;
display: block;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">//<![CDATA[
window.onload = function() {
$('#my_parent_div div').prop('id', function (i, v) {
return v === '' || 'undefined' === typeof v ? 'new_added_id_' + String.fromCharCode(97 + i) : v;
});
};
//]]></script>
</head>
<body>
<div id="my_parent_div">
<div id="my_child_div_a">Here is some text A</div>
<div>Here is some text B</div>
<div>Here is some text C</div>
<div>Here is some text D</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<script>
var x = document.createElement('div');
x.id = 'con';
x.style.width = 'auto';
x.style.height = '200px';
x.style.background = '#2a2a2a';
x.innerHTML = "hello world";
document.body.appendChild(x);
//no need to access `y` by id, use the reference returned by createElement to set the content
//var y = document.getElementById('con');
//y.innerHTML = "hello world";
</script>
</body>
</html>
=====================================================================
IMAGE MOUSE OVER AND MOUSE OUT WITH APPEND CHILD
=====================================================================
<body>
<img id ="AS2" src="smiley.gif"/>
<script>
AS2.onmouseover=function(){
var x = document.createElement("img");
x.setAttribute("src","smiley.gif");
document.body.appendChild(x);
x.textContent = "HI";
x.style.color = "White";
x.style.width = "50px";
x.style.height = "50px";
};
AS2.onmouseout=function(){
var x = document.createElement("img");
x.setAttribute("src","https://www.w3schools.com/tags/logo_w3s.gif");
document.body.appendChild(x);
x.style.background = "Red";
x.style.width = "100px";
x.style.height = "100px";
};
</script>
----------------------------------------------------------------------------------------------------------------
IMAGE SRC IN JAVA WITHOUT HTML CODE
window.onclick=function(){window.open("smiley.gif","_self")}
window.onmouseover=function(){window.open("smiley.gif","_self")}
window.addEventListener("click",FunctionName,true);function
FunctionName(){window.open("smiley.gif","_self")}
--------------------------------------------------------------------------------------------------------------
<script>
window.open("smiley.gif","_self");//IMAGE SHOW CODE WEBPAGE
window.open("smiley.gif","_blank");//IMAGE SHOW NEW WEBPAGE
</script>
------------------------------------------------------------------------
OR ADD ALL CODE UNDER LISTENER
AS2.onmouseover=function(){};<img id ="AS2" src="smiley.gif"/>
<body>OR ADD ALL CODE UNDER LISTENER
AS2.onmouseover=function(){};<img id ="AS2" src="smiley.gif"/>
<script>
var x = document.createElement("IMG");
x.setAttribute("src","smiley.gif");
document.body.appendChild(x);
x.style.width = "100px";
x.style.height = "100px";
x.style.background = "Red";
</script>
----------------------------------------------------------------------------------------------------------------
<!--
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create -->
<title> IMAGE REPEAT 5 TIMES
WITH IMAGE ADD CHILD </title>
<body>
<script>
for (var i = 0; i < 5; i++) {
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");
document.body.appendChild(x);
<!-- 1)<br> TAG SHOW CODE IN MULTILPLE LINES THIS IS BREAK LINE CODE -->
document.write(x+"<br>");
}
</script>
</body>
=========================================================================
=========================================================================
<html>
<title> IMAGE REPEAT WITH
COUNT DOWN TIMER </title>
<head>
<script>
var count = 0;
countdown=function(){
count++;
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");
document.body.appendChild(x);
document.getElementById("demo").innerHTML = count;
}
doCountdown = setInterval(countdown,1000);
</script>
</head>
<body>
<p id="demo"></p> <!--demo TELLS IMAGES NUMBER IN TEXT-->
</body>
</html>
=========================================================================
<title> IMAGE REPEAT WITH COUNT DOWN TIMER </title>
<p id="demo"></p>
<script>
var count = 0;
countdown=function(){
count++;
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");
document.body.appendChild(x);
document.getElementById("demo").innerHTML = count;
}
doCountdown = setInterval(countdown,1000);
</script>
=========================================================================
<img id="demo">
<script>
for (var i = 0; i < 5; i++) {
var x = document.createElement("IMG");
x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");
//WE DONOT NEED BODY TAG WHEN WE USE INNER HTML
LINE FORMULA
document.getElementById("demo")
.innerHTML = document.body.appendChild(x);
}
</script>
---------------------------------------------------------------------------------------------------------------
TYPE TEXT LISTNER BOX
---------------------------------------------------------------------------------------------------------------
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="mas" rows="15" class="content"></textarea>
<p> </p>
<div class="mas" >Texts Comes here</div>
<script type="text/javascript">
$('.content:not(.focus)').keyup(function(){
var value = $(this).val();
var contentAttr = $(this).attr('name');
$('.'+contentAttr+'').html(value);
})
</script>
</body>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT LOOP WITH DOCUMENT GET ELEMENT
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
OR USE THIS LINE IN BELOW CODE
document.getElementById("demo").innerHTML +=(x+"<br>");
---------------------------------------------------------------------------------------------------------------
<html>
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_ex -->
<body>
<h2>JavaScript Loops</h2>
<div id="demo"></div>
<script>
for (i = 0; i < 5; i++) {
var x = "HELLO";
document.getElementById("demo").innerHTML +=x +"<br>";
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
JAVA SCRIPT FOR EACH LOOP WITH DOCUMENT WRITE &
DOCUMENT GET ELEMENT & ALERT
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
DOCUMENT GET ELEMENT & ALERT
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
x.forEach(function(element){
document.getElementById("demo").innerHTML +=(element+"<br>");
});
//OutPut:ZERO,ONE,TWO,THREE IN LIST STYLE
</script>
--------------------------------------------------------------------------------------------------------------
<html>
<!--
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
-->
<body>
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
x.forEach(function(element){
document.write(element+"<br>");
document.getElementById("demo").innerHTML +=(element+"<br>");
alert(element+"<br>");
});
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT FOR LOOP CODE SHOW WITH THREE WAY0)CODE HAS SOME DIFFERENCE BUT SAME RESULT
1)alert("The number is "+i+"<br>");
2)document.getElementById("demo").innerHTML +="The number is "+i+"<br>";
3)document.write("The number is "+i+"<br>");
"The number is "+i+"<br>"
0)+i CODE SHOW 0 TO 4 NUMBERS
1)<br> TAG SHOW CODE IN MULTILPLE LINES THIS IS BREAK LINE CODE
"The number is "+i+"<br>"
0)+i CODE SHOW 0 TO 4 NUMBERS
1)<br> TAG SHOW CODE IN MULTILPLE LINES THIS IS BREAK LINE CODE
---------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
for (var i = 0; i < 5; i++){
//ALERT CODE
SHOW COUNTING
alert("The number is "+i+"<br>");
//DOCUMENT
GET ELEMENT CODE SHOW COUNTING
document.getElementById("demo").innerHTML +="The number is "+i+"<br>";
//DOCUMENT
WRITE CODE COUNTING
document.write("The number is "+i+"<br>");
}
</script>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT WHILE LOOP CODE SHOW WITH THREE WAY
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
var i = 0;
while(i < 5){
i++;
---------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
var i = 0;
while(i < 5){
i++;
//ALERT CODE SHOW COUNTING
alert("The number is
"+i+"<br>");
//DOCUMENT GET ELEMENT CODE SHOW COUNTING
document.getElementById("demo").innerHTML +="The number is
"+i+"<br>";
//DOCUMENT WRITE CODE COUNTING
document.write("The
number is "+i+"<br>");
}
</script>
https://www.w3schools.com/jsref/jsref_dowhile.asp
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT DO WHILE LOOP CODE SHOW WITH THREE WAYhttps://www.w3schools.com/jsref/jsref_dowhile.asp
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
---------------------------------------------------------------------------------------------------------------
<!--
https://www.w3schools.com/jsref/jsref_dowhile.asp -->
<p id="demo"></p>
<script>
var i = 0;
do{
i++;
//ALERT CODE SHOW COUNTING
alert("The number is
"+i+"<br>");
//DOCUMENT GET ELEMENT CODE SHOW COUNTING
document.getElementById("demo").innerHTML +="The number is
"+i+"<br>";
//DOCUMENT WRITE CODE COUNTING
document.write("The
number is "+i+"<br>");
}
while (i < 5);
</script>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT WHILE LOOP
---------------------------------------------------------------------------------------------------------------
<html>
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_while -->
<body>
<h2>JavaScript while</h2>
<div id="demo"></div>
<script>
var x= "HELLO";
var i = 0;
while (i < 5) {
i++;
document.getElementById("demo").innerHTML += x+"<br>";
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
FOR LOOP WITH ARRAY LENGTH
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
SIMPLE ARRAY CODE
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
SIMPLE ARRAY CODE
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
document.getElementById("demo").innerHTML +=x
//OutPut:ZERO,ONE,TWO,THREE
</script>
--------------------------------------------------------------------------------------------------------------
FOR LOOP WITH ARRAY LENGTH RANDOM
x.length * Math.floor(Math.random() * 5 + 1
--------------------------------------------------------------------------------------------------------------
x.length * Math.floor(Math.random() * 5 + 1
--------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
var x = ["ZERO"];//ZERO LIST SHOW RANDOMLY 5,4,3,2,1
for (var i = 0; i < x.length * Math.random() * 5; i++){
document.getElementById("demo").innerHTML += x+ "<br>";
}
</script>
<html>
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_om1 -->
<body>
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
FOR LOOP WITH ARRAY LENGTH WITHOUT TEXT VARIABLE
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
1)CODE HAS SOME DIFFERENCE BUT SAME RESULT
--------------------------------------------------------------------------------------------------------------
<html>
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_om1 -->
<body>
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
for (var i = 0; i < x.length; i++){
document.getElementById("demo").innerHTML += ["ZERO","ONE","TWO","THREE"][i] + "<br>";
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
FOR LOOP WITH ARRAY LENGTH WITHOUT TEXT VARIABLE
1)CODE HAS SOME DIFFERENCE AND DIFFRENT RESULT
1)CODE HAS SOME DIFFERENCE AND DIFFRENT RESULT
--------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script>
var x = ["ZERO","ONE","TWO","THREE"];
for (var i = 0; i < x.length; i++) {
document.write(x+"<br>");
document.getElementById("demo").innerHTML +=(x+"<br>");
}
//OUTPUT RESULT DIFFERENT: SHOW SAME LINE 4 TIMES
//document.getElementById("demo").innerHTML
=(x+"<br>");
//IF WE NEED SAME RESULT
//document.getElementById("demo").innerHTML
+=(x+"<br>");
</script>
--------------------------------------------------------------------------------------------------------------
image array repeat without loop
--------------------------------------------------------------------------------------------------------------
<html>
<!-- https://taniarascia.github.io/memory/ -->
<head>
<title>Memory Game</title>
<style>
.grid {
}
.card {
position: relative;
}
.card,
.back,
.front {
height: 381px;
width: 400px;
}
</style>
</head>
<body>
<div id="game"></div>
<script type='text/javascript'>
'use strict';
var cardsArray = [
{
'name': 'shell',
'img': 'https://www.pngmart.com/files/5/Balcony-PNG-File.png'
},
{
'name': 'star',
'img': 'https://taniarascia.github.io/memory/img/star.png'
},
];
var gameGrid = cardsArray.concat(cardsArray).sort(function () {
return 0.5 - Math.random();
});
var grid = document.createElement('section');
game.appendChild(grid);
gameGrid.forEach(function (item) {
var name = item.name,
img = item.img;
var card = document.createElement('div');
card.classList.add('card');
card.dataset.name = name;
var front = document.createElement('div');
front.classList.add('front');
var back = document.createElement('div');
back.classList.add('back');
back.style.backgroundImage = 'url(' + img + ')';
grid.appendChild(card);
card.appendChild(front);
card.appendChild(back);
})
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment