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>";
---------------------------------------------------------------------------------------------------------------
<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";
<!-- 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
-----------------------------------------------------------------------

 ------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
<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";
</script>
-------------------------------------------------------------------------
IMAGE CREATE IN JAVASCRIPT AND INNER HTML ATTRIBUTE
SERCH IN GOOGLE var x = document.createElement('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>
-------------------------------------------------------------------------
 CREAT HTML ID BY JAVA SCRIPT THEN ITS CHANE INTO "CREAT HTML ID BY JAVA SCRIPT HAS CHANGE"
-------------------------------------------------------------------------
<body>
<!-- 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>
-------------------------------------------------------------------------
<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>
<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>&nbsp;</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
<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 WAY
0)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
---------------------------------------------------------------------------------------------------------------
<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>
---------------------------------------------------------------------------------------------------------------
JAVA SCRIPT DO WHILE LOOP CODE SHOW WITH THREE WAY
https://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
<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
--------------------------------------------------------------------------------------------------------------
<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
--------------------------------------------------------------------------------------------------------------
<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
--------------------------------------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------------------------------------

Posted by on Tuesday 8 August 2017 at 23:56
Labels: , , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets