Monday 10 July 2017

JAVA SCRIPT ARRAY

JAVA SCRIPT ARRAY

-----------------------------------------------------------------------------------------------------------------------
SIMPLE ARRAY LIST IN JAVA CODE
-----------------------------------------------------------------------------------------------------------------------
<html>
<style>
#WriteHereHtmlId{
background-color:Green; /* Green */
border: none;
color: Gold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<head>
</head>
<body>
<JavaCodeShowDiv id="WriteHereHtmlId"></JavaCodeShowDiv>
<script type="text/javascript">
var Variable1EqualToArrayList = ["ArrayItem1","ArrayItem2","ArrayItem3","ArrayItem4"];
document.getElementById("WriteHereHtmlId").innerHTML = Variable1EqualToArrayList ;
</script>
</body>                              
</html>
----------------------------------------------------------------------------------------------------------------------
SIMPLE JAVA SCRIPT ARRAY
FOR JS TO AS3 CODE CHANGE
document.write(Array); <--------> trace(Array);
MATH RANDOM CODE MANY WAYS:
document.write("Test "+ Array[Math.floor(Math.random() * ((Array.length - 1) - 0 + 1))]);
//OR
document.write(Array[Math.floor(Math.random()* Array.length)]);
//OR
----------------------------------------------------------------------------------------------------------------------

Javascript Array Shuffle by manipulating the sort() method

https://www.youtube.com/watch?v=boxRlfTI3Pw
https://codepen.io/mohitmanuja/pen/vXVmKb
--------------------------------------------------------------------------------------------------------------------
SIMPLE SORT FUNCTION ONLY ORGANISE ITEMS ARRAY ALPAHABETICLY
https://www.w3schools.com/jsref/jsref_sort.asp
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
document.write(fruits);
</script>
<!-- // output: Apple,Banana,Mango,Orange -->
fruits.sort() 
The result of fruits will be:
Apple,Banana,Mango,Orange
------------------------------------------------------------------------------------------------------------------------
THIS IS SIMPLE SORT
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
------------------------------------------------------------------------------------------------------------------------
<script>
var numbers = [4, 2, 5, 1, 3];
numbers.sort(
function(a, b){return a - b}
)
document.write(numbers);
// output: [1, 2, 3, 4, 5]
</script>
--------------------------------------------------------------------------------
FLASH AS3 SORTING ARRAY
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7fa4.html
fruits.sort(() => Math.random() > 0.5 ? 1 : -1);
fruits.push(fruits.splice(Math.floor(Math.random()*fruits.length),1));
----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>JAVASCRIPT ARRAY SHUFFLE BY MANIPULATING THE SORT() METHOD</title>
<!-- https://codepen.io/mohitmanuja/pen/vXVmKb -->
</head>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(function(){return .5-Math.random()});
document.write(fruits);
</script>
</body>
</html>
-----------------------------------------------------------------------------
REMOVE SPACE BETWEEN WORDS
-----------------------------------------------------------------------------
<html>
<head>
<title>REMOVE WHITE SPACE BETWEEN WORDS</title>
<!--https://stackoverflow.com/questions/44487123/how-can-i-remove-white-space-between-words-in-an-array-using-javascript-->
</head>
<body>
<DIV id="TextBox1"></DIV>
<script type="text/javascript">
var array = ['He Is Going To School'];
var nospace_array = array.map(function(item){
return item.replace(/\s+/g,'');
})
TextBox1.innerHTML=(nospace_array);
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
WORD SHUFFLE ARRAY IN JAVA SCRIPT
IN ABOVE CODE WE ADD IMAGE LINKS AND IMAGE JOIN LINES
fruits.sort(FunctionName,true);
function FunctionName(){
return .5 - Math.random()
};
----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>JAVASCRIPT ARRAY SHUFFLE BY MANIPULATING THE SORT() METHOD</title>
<!-- https://codepen.io/mohitmanuja/pen/vXVmKb -->
</head>
<body>
<DIV id="TextBox1"></DIV>
<script type="text/javascript">
var fruits=[
"https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif",
"https://4.bp.blogspot.com/-rpobIsOydoo/WVI_G8Bs4fI/AAAAAAABc5Q/AQU0A3HZhFEPkTcw50KT3JstbnyGIkSTwCLcBGAs/s1600/image2.gif",
"https://1.bp.blogspot.com/-5ID-KMzd7NA/WVI_Hp9KP8I/AAAAAAABc5U/PHtJY22Um3I7J4sYDSGrP6fajzcRj78OACLcBGAs/s1600/image3.gif",
"https://4.bp.blogspot.com/-_tOsrCxbPpc/WVI_Hx8i9tI/AAAAAAABc5c/GHg_QBACG00qG_rjej5EOewZJ1Gj2E8sACLcBGAs/s1600/image4.gif",
];
fruits.sort(function(){return .5-Math.random()});
TextBox1.innerHTML = '<img src="' + fruits .join('" /><img src="') + '" />';
</script>
</body>
</html>
----------------------------------------------------------------------------
var fruits = ["Banana","Orange", "Apple", "Mango"];
fruits.sort(FunctionName,true);
function FunctionName(){
return .5 - Math.random()
};
document.write(fruits);
==============================================================================
<html>
<!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_sort_random -->
<body>
<h2>JavaScript Shuffle Array Sort</h2>
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;   
function myFunction(){
points.sort(
function(a, b){
return 0.5 - Math.random()
}
);
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
===============================================================================
OR USE ABOVE CODE WITHOUT MY FUNCTION LINE AND AB VARIABLES
===============================================================================
<p id="demo"></p>
<script type="text/javascript">
var points = [40, 100, 1, 5, 25, 10];
points.sort(
function(a, b){
return 0.5 - Math.random()
}
);
document.getElementById("demo").innerHTML = points;
</script>
---------------------------------------------------------------------------------------------------------------------
<p id="demo"></p>
<script type="text/javascript">
var points = ["40","100","1","5","25","10"];
points.sort(FunctionName,true);
function FunctionName(){
return .5 - Math.random()
};
document.getElementById("demo").innerHTML = points;

</script>
==============================================================================
<p id="demo"></p>
<script type="text/javascript">
var points = ["Banana","Orange","Apple","Mango"];
points.sort(
function(){
return 0.5 - Math.random()
}
);
document.getElementById("demo").innerHTML = points;
</script>
===============================================================================
<p id="demo"></p>
<script type="text/javascript">
var points = [40, 100, 1, 5, 25, 10];
points.sort(
function RandomFunction(){
var a ;
var b ;
return Math.random() - 0.5
}
);
document.getElementById("demo").innerHTML = points;
</script>
===============================================================================
<p id="demo"></p>
<script type="text/javascript">
var points =["Banana","Orange","Apple","Mango"];
function SortFunction(){
points.sort(RandomFunction);
}
SortFunction();
function RandomFunction(){
return Math.random() - 0.5
}
RandomFunction();
document.getElementById("demo").innerHTML = points;
</script>

===============================================================================
JAVASCRIPT ID SORT WITH RANDOM FUNCTION
OR USE THIS CODE FOR WITHOUT BUTTON OR RUN CODE WHEN CLICK ON WINDOW
sortID();
window.onclick = function(){
sortID();
}
===============================================================================
<!-- http://jsfiddle.net/nXkDp/671/ -->
<div id="list">
<button id="categorie5.1-4">4</button>
<button id="categorie5.1-3">3</button>
<button id="categorie5.1-5">5</button>
<button id="categorie5.1-1">1</button>
<button id="categorie5.1-2">2</button>
</div>
<input type="button" id="mybutton" value="Sort" />
<script>
var sortID = function () {
var toSort = document.getElementById('list').children;
toSort = Array.prototype.slice.call(toSort, 0);
toSort.sort(function (a, b) {
var aord = +a.id.split('-')[1];
var bord = +b.id.split('-')[1];
return .5 - Math.random();
});
var parent = document.getElementById('list');
parent.innerHTML = "";
for (var i = 0, l = toSort.length; i < l; i++) {
parent.appendChild(toSort[i]);
}
};
window.onload = function(){
document.getElementById("mybutton").onclick = sortID;
}
</script>
-------------------------------------------------------------------------------
<div id="list">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<button id="SortBtn">SORT BUTTON</button>
<script>
function sortID () {
var toSort = document.getElementById('list').children;
toSort = Array.prototype.slice.call(toSort, 0);
toSort.sort(function (a, b) {
var aord = +a.id.split('-')[1];
var bord = +b.id.split('-')[1];
return .5 - Math.random();
});
var parent = document.getElementById('list');
parent.innerHTML = "";
for (var i = 0, l = toSort.length; i < l; i++) {
parent.appendChild(toSort[i]);
}
};
sortID();
SortBtn.onclick = function(){
sortID();
}
window.onclick = function(){
sortID();
}
</script>
------------------------------------------------------------------------------
OR USE THIS CODE:
------------------------------------------------------------------------------
<!-- http://jsfiddle.net/nXkDp/671/ -->
<div id="list">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
function sortID () {
var toSort = document.getElementById('list').children;
toSort =[btn1,btn2,btn3,btn4];
toSort.sort(
function(a, b){
return 0.5 - Math.random()
}
);
var parent = document.getElementById('list');
parent.innerHTML = "";
for (var i = 0, l = toSort.length; i < l; i++) {
parent.appendChild(toSort[i]);
}
};
sortID();
</script>
------------------------------------------------------------------------------
OR USE THIS CODE:

------------------------------------------------------------------------------
<!-- http://jsfiddle.net/nXkDp/671/ -->
<div id="list">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
function sortID () {
toSort =[btn1,btn2,btn3,btn4];
toSort.sort(
function(a, b){
return 0.5 - Math.random()
}
);
for (var i = 0, l = toSort.length; i < l; i++) {
list.appendChild(toSort[i]);
}
};
sortID();

</script>

===============================================================================
ADD BUTTON IN ABOVE CODE WITH EXTRA GREEN LINESS
===============================================================================
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  
function myFunction(){
points.sort(
function RandomFunction(){
var a ;
var b ;
return Math.random() - 0.5
}
);
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
JAVA SCRIPT SHUFFLE ARRAY
----------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfromhell.com/array/shuffle#rank-header -->
<head>
<body>
<div id="content">
<script type="text/javascript">
//<![CDATA[
shuffle = function(v) {
for(
var j, x,
i = v.length; i;
j = parseInt(Math.random() * i),
x = v[--i],
v[i] = v[j],
v[j] = x
);
return v;
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var v = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
document.write(shuffle(v));
//]]>
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
shuffle = function(MY){ OR USE = function shuffle(MY){
--------------------------------------------------------------------------------------------------------------
<body>
<script type="text/javascript">
//<![CDATA[
shuffle = function(MY){
for(
var j, x,
i = Array.length; i;
j = parseInt(Math.random() * i),
x = Array[--i],
Array[i] = Array[j],
Array[j] = x
);
return MY;
};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Array = ["A","B","C","D"];
document.write(shuffle(Array));
//]]>
</script>
</body>
--------------------------------------------------------------------------------------------------------------
<body>
<script type="text/javascript">
var Array = ["A","B","C","D"];
shuffle = function(MY){
for(
var j, x,
i = Array.length; i;
j = parseInt(Math.random() * i),
x = Array[--i],
Array[i] = Array[j],
Array[j] = x
);
return MY;
};
document.write(shuffle(Array));
</script>
</body>
--------------------------------------------------------------------------------------------------------------
<body>
<script type="text/javascript">
var Array = ["A","B","C","D"];
function shuffle(){
for(
var j, x,
i = Array.length; i;
j = parseInt(Math.random() * i),
x = Array[--i],
Array[i] = Array[j],
Array[j] = x
);
return Array;
};
document.write(shuffle(Array));
</script>
</body>
--------------------------------------------------------------------------------------------------------------
REMOVE  RETURN AND FUNTION LINES IN ABOVE CODE
--------------------------------------------------------------------------------------------------------------
<body>
<script type="text/javascript">
var Array = ["A","B","C","D"];
for(
var j, x,
i = Array.length; i;
j = parseInt(Math.random() * i),
x = Array[--i],
Array[i] = Array[j],
Array[j] = x
){}
document.write(Array);
</script>
</body>
 --------------------------------------------------------------------------------------------------------------
HERE ARRAY HAS 4 ITEMS A,B,C,D SO Array.length = 4
var Array = ["A","B","C","D"];
--------------------------------------------------------------------------------------------------------------
<body>
<Div id="TextBox1"></Div>
<script type="text/javascript">
var Array = ["A","B","C","D"];
for(
var j,x,
i = 4; i;
j = parseInt(Math.random() * i),
x = Array[--i],
Array[i] = Array[j],
Array[j] = x
){}
document.write(Array);
TextBox1.innerHTML = Array;
</script>
</body>
--------------------------------------------------------------------------------------------------------------
SHUFFLE  A3 ARRAY CODE CHANGE INTO JAVASCRIPT BY ESPRIMA SYNTAX
---------------------------------------------------------------------------------------------------------------
<!-- https://www.youtube.com/watch?v=CTc2vu7Adnk -->
<!-- http://textuploader.com/6cxa -->
<DIV id="TextBox1"></DIV>
<script>
var MovieArray = new Array("MOVIE1","MOVIE2","MOVIE3");
for (var i = 0; i < MovieArray.length;  i++) {
var RandomNumber = Math.floor(Math.random()* MovieArray.length)
var MoviePosX = MovieArray[RandomNumber]
var MoviePosY= MovieArray[RandomNumber]
MovieArray[RandomNumber] = MovieArray[i]
MovieArray[RandomNumber] = MovieArray[i]
MovieArray[i] = MoviePosX
MovieArray[i] = MoviePosY
}
TextBox1.innerHTML += MovieArray
</script>
------------------------------------------------------------------------------
SHUFFLE RANDOM BUTTON AS3 IN JAVA SCRIPT
OBJECT ARRAY ITEM WRITE WITHOUT STRING 
var MovieArray = new Array(MOVIE1,MOVIE2,MOVIE3,MOVIE4);
var MovieArray = [MOVIE1,MOVIE2,MOVIE3,MOVIE4];
WE DONOT USE LOOP LINE BECAUSE IT GIVES UNNECESSARY SPACE BETWEEN BUTTON
for (var i = 0; i < MovieArray.length;  i++) {}
------------------------------------------------------------------------------
<div id="container">
<button id="MOVIE1">MOVIE1</button>
<button id="MOVIE2">MOVIE2</button>
<button id="MOVIE3">MOVIE3</button>
<button id="MOVIE4">MOVIE4</button>
</div>
<script>
var MovieArray = new Array(MOVIE1,MOVIE2,MOVIE3,MOVIE4);
var RandomNumber = Math.floor(Math.random()* MovieArray.length)
container.appendChild(MovieArray[RandomNumber]);
</script>
==============================================================================
//ARRAY LENGTH RANDOM
<!-- https://www.w3schools.com/js/js_loop_for.asp -->
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var i;
for (i = 0; i < cars.length * Math.random(); i++) {
document.getElementById("demo").innerHTML += cars[i] + "<br>";
}

</script>
----------------------------------------------------------------------------------------------------------------------
ABOVE CODE CHANGE BY TREE HOUSE
https://teamtreehouse.com/community/mathrandom05
https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_sort_random
----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>JAVASCRIPT ARRAY SHUFFLE BY MANIPULATING THE SORT() METHOD</title>
<!-- https://teamtreehouse.com/community/mathrandom05-->
</head>
<body>
<script type="text/javascript">
var myArray = ["Banana", "Orange", "Apple", "Mango"];
myArray.sort(
function( a, b ){return Math.random()-0.5});
document.write(myArray);
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
SIMPLE ARRAY IN JAVA SCRIPT
https://www.w3schools.com/js/tryit.asp?filename=tryjs_array
----------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_array -->
<body>
<p id="demo"></p>
<script>
var cars = new Array(3);
cars [0] = ["Saab"];
cars [1] = ["Volvo"];
cars [2] = ["BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<div id="HtmlDivId1"></div>
<script>
var Array = ["A","B","C"];
TextBox1.innerHTML = Array;
HtmlDivId1.innerHTML = Array[0]+","+Array[1]+","+Array[2];
//SameOutPut= A,B,C

</script>
 ==========================================================================
 <html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------

Javascript - Randomizing an Array

----------------------------------------------------------------------------------------------------------------------
<html>
<!-- saved from url=(0043)https://s.codepen.io/zFunx/fullpage/xdKpEd? -->
<!-- https://www.youtube.com/watch?v=BZKFKfrxU-g -->
<head>
<title>JAVASCRIPT - RANDOMIZING AN ARRAY</title>
</head>
<body translate="no">
<button onclick="shuffleUsingRandomSwapping(numberStrings);updateNumberList(numberStrings);">Shuffle Using Random Swapping</button>
<button onclick="shuffleUsingSortFunc(numberStrings);updateNumberList(numberStrings);">Shuffle Using Sort Function</button>
<div id="numberList"><br>Three<br>Two<br>Six<br>One<br>Five<br>Four</div>
<script>
var numberStrings=["One","Two","Three","Four","Five","Six"];
function updateNumberList(array){
var s="";
for(var i=0;i<array.length;i++){
s+="<br>"+array[i];
}
document.getElementById("numberList").innerHTML=s;
}
function shuffleUsingRandomSwapping(array){
var j,x,i=0,len=array.length;
for(i;i<len;i++){
j=Math.floor(Math.random()*len);
x=array[i];
array[i]=array[j];
array[j]=x;
}
}
function shuffleUsingSortFunc(array){
array.sort(function(){
return 0.5-Math.random();
});
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
<html>
<body>
<script>
var Array = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
document.write(Array);
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
<html>
<body>
<div id="Div1"></div>
<script>
var Array = ["A","B","C","D","E"];
document.getElementById("Div1").innerHTML = Array;
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
PUSH LOOP ARRAY
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_push
https://www.w3schools.com/js/js_loop_for.asp
http://jsfiddle.net/robert/tUW89/
FIND JAVA SCRIPT ERROR ONLINE
http://esprima.org/demo/validate.html
----------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/robert/tUW89/ -->
<body>
<script>
var Array = [];
for (var i = 0, l = 40; i < l; i++) {
Array.push(Math.round(Math.random() * l))
}
document.write(Array);
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
JAVA SCRIPT ARRAY
https://www.w3schools.com/js/js_arrays.asp
ReadMore:
RANDOM JAVA SCRIPT ARRAY
https://stackoverflow.com/questions/1516695/js-math-random-for-array
----------------------------------------------------------------------------------------------------------------------
RANDOM JAVA SCRIPT ARRAY CODE:
DOCUMENT WRITE IN
----------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://stackoverflow.com/questions/1516695/js-math-random-for-array -->
<body>
<script>
var Array = new Array('a', 'b', 'c', 'd', 'e');
document.write("Test "+ Array[Math.floor(Math.random() * ((Array.length - 1) - 0 + 1))]);
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
ARRAY LINE IN JAVA SCRIPT WRITE IN MANY WAY LIKE
var Array = ['A','B','C','D','E'];
//OR
var Array = ["A","B","C","D","E"];
//OR
var Array = new Array ('A','B','C','D','E');
//OR
var Array = new Array("A","B","C","D","E");
//OR
----------------------------------------------------------------------------------------------------------------------
AS3 TO JAVA SCRIPT CODE  

 shuffling array javascript
https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&biw=1164&bih=631&tbm=isch&sa=1&q=shuffling+array+javascript&oq=shuffling+array+&gs_l=img.1.1.0i24k1l3.486826.490101.0.492437.7.7.0.0.0.0.112.478.6j1.7.0....0...1.1.64.img..0.1.68.9i54MEcqm9g#imgrc=CWK-VDol09ZfxM:

 https://www.youtube.com/watch?v=MrTngobv35A

Javascript Array Shuffle by manipulating the sort() method

https://www.youtube.com/watch?v=boxRlfTI3Pw

Javascript - Randomizing an Array

https://www.youtube.com/watch?v=BZKFKfrxU-g


HOW TO CHANGE AS3 TO JAVA SCRIPT CODE:

 1) trace() <---------------------> document.write()

 2) REMOVE VARIABLE DECLARED WORDS LIKE

 1) :Array ; 2) :Number ; 3) int

3) U CAN USE THIS CODE:
randomPos = Math.round(Math.random() * letters.length);
//OR
randomPos = parseInt(Math.random() * letters.length);
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Randomize array</title>
</head>
<body>

<script type='text/javascript'>

var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

var shuffledLetters = new Array(letters.length)

var randomPos = 0;

for (i = 0; i < shuffledLetters.length; i++) {
randomPos = Math.round(Math.random() * letters.length);
shuffledLetters[i] = letters[randomPos];
}

document.write(shuffledLetters)

</script>

</body>

</html>
-----------------------------------------------------------------------------------------------------------------------
IMAGE ARRAY SHUFFLE JAVA SCRIPT
https://www.google.co.uk/search?q=image+array+shuffle+javascript&rlz
-----------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/salman/usPMd/ -->
<head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style type="text/css">
</style>
<title>IMAGE ARRAY SHUFFLE JAVASCRIPT</title>
</head>
<body>
<div id="deck">
<div><img src="http://dummyimage.com/64x64/000/fff&text=o" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=1" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=2" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=3" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=4" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=5" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=6" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=7" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=8" /></div>
<div><img src="http://dummyimage.com/64x64/000/fff&text=9" /></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$("#deck").append(a);
});
//]]>
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
img src array javascript
IMAGE SHOW IN BUTTON ONLY CHANGE BELOW BODY CODE
<button onclick = "myFunction()">IMAGE SHOW IN BUTTON WHEN I CLICK
<img src = "" name = "imgDisplay" />
</button>
IMAGE NOT SHOW IN BUTTON ONLY CHANGE BELOW BODY CODE
<button onclick = "myFunction()"> IMAGE OUTSIDE SHOW </button>
<img src = "" name = "imgDisplay" />
------------------------------------------------------------------------------
A demonstration of how to access an IFRAME element
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_get
------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
function myFunction(){
document.getElementById('demo').src = "https://1.bp.blogspot.com/-OqM5Kg7Pd_k/Vx0pylxo6-I/AAAAAAABano/6E74V__h_o0nCOuZ9S6DG1htf7OifIA_ACLcB/s1600/Symbol%2B1.png";
}
</script>
</head>
<body onload="myFunction()">
<img src="" id="demo"/>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
IMAGE SRC ARRAY IN JAVA SCRIPT
https://codepen.io/mel/pen/Brads
--------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://codepen.io/mel/pen/Brads -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style>
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: 640px;
}
#boxcard {
z-index: 1;
margin: 10px 0 0;
}
#boxcard div{
float: left;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
#boxcard div img {

border-radius: 10px;
z-index: 3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}</style>
</head>
<body>
<div id="picbox">
<div id="boxcard"></div>
</div>
<script>
var BoxOpened = "";
var ImgOpened = "";
var Counter = 0;
var ImgFound = 0;
var Source = "#boxcard";
var ImgSource = [
"http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",
"http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",
"http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",
"http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png",
"http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png",
"http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png",
"http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png",
"http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png",
"http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png",
"http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"
];
for (var y = 1; y < 3 ; y++) {
$.each(ImgSource, function(i, val) {
$(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
});
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script>
var pictures = new Array();
function myFunction(){
pictures[0] = new Image();
pictures[0].src = "https://1.bp.blogspot.com/-OqM5Kg7Pd_k/Vx0pylxo6-I/AAAAAAABano/6E74V__h_o0nCOuZ9S6DG1htf7OifIA_ACLcB/s1600/Symbol%2B1.png";
document.imgDisplay.src = pictures[0].src;
}
</script>
</head>
<body onLoad = "myFunction()">
<img src = "" name = "imgDisplay" />
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- http://www.java2s.com/Code/JavaScript/HTML/Imagearray.htm -->
<title>Image Array Demo</title>
<script>
var description = new Array("blank", "triangle", "circle", "square");
var pictures = new Array(3);
var counter = 0;
function initialize(){
// sets up the array with some startin values
// Andy Harris
pictures[0] = new Image(50, 50);
pictures[0].src = "https://1.bp.blogspot.com/-OqM5Kg7Pd_k/Vx0pylxo6-I/AAAAAAABano/6E74V__h_o0nCOuZ9S6DG1htf7OifIA_ACLcB/s1600/Symbol%2B1.png";
pictures[1] = new Image(50, 50);
pictures[1].src = "https://3.bp.blogspot.com/-pZcdLMBGkF8/Vx0pyuqinmI/AAAAAAABanw/PLnrjliI3vEpnl-7_goFHkRJzpJmn4T0QCLcB/s1600/Symbol%2B2.png";
pictures[2] = new Image(50, 50);
pictures[2].src = "https://1.bp.blogspot.com/-iz41qDg8M8M/Vx0pzHWbekI/AAAAAAABan4/HOHVhM-F76oRD8g4n4oDWsXOJ-4yEJQgQCLcB/s1600/Symbol%2B3.png";
pictures[3] = new Image(50, 50);
pictures[3].src = "https://1.bp.blogspot.com/-4u9y8JkdNGM/Vx0pzGUi9hI/AAAAAAABan0/yDWDFJWxjCoiJuB6O5fTLrmT8jYmm-6_wCLcB/s1600/Symbol%2B4.png";
} // end initialize
function upDate(){
//increments the counter and shows the next description
counter++;
if (counter > 3){
counter = 0;
} // end if
document.imgDisplay.src = pictures[counter].src;
document.myForm.txtDescription.value = description[counter];
} // end upDate
</script>
</head>
<body onLoad = "initialize()">
<center>
<h1>Image Array Demo<hr></h1>
<form name = "myForm">
<img src = "http://lh5.googleusercontent.com/-KFZnTzw2yrQ/AAAAAAAAAAI/AAAAAAAAAvE/XSHZpq09wyk/s60-c/photo.jpg"
name = "imgDisplay"
height = 100
width = 100>
<br>
<input type = "text"
name = "txtDescription"
value = "blank">
<br>
<input type = "button"
value = "next"
onClick = "upDate()">
</form>
</center>
<hr>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
CHANGE IMAGE SRC
https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
http://jsfiddle.net/8yytW/43/
------------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb -->
<!-- http://jsfiddle.net/8yytW/43/ -->
<title>HOW TO CHANGE IMAGE ONCLICK JAVASCRIPT FUNCTION?</title>     
<body>
<img id="myImage" onclick="changeImage()" src="https://www.w3schools.com/js/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "https://www.w3schools.com/js/pic_bulboff.gif";
} else {
image.src = "https://www.w3schools.com/js/pic_bulbon.gif";
}
}
</script>
</body>

</html>
==========================================================================
<html>
<!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb -->
<!-- http://jsfiddle.net/8yytW/43/ -->
<title>HOW TO CHANGE IMAGE ONCLICK JAVASCRIPT FUNCTION?</title>     
<body>
<input id="img-switcher" type="checkbox"></input>
<label for="img-switcher"></label>
<STYLE>
#img-switcher {
width: 0px;
height: 0px;
visibility: hidden;
position: absolute;
}
#img-switcher + label {
background-image: url('http://i.imgur.com/6enLqgn.jpg8');
width: 100px;
height: 100px;
display: block;
background-size: cover;
}
#img-switcher:checked + label {
background-image: url('http://i.imgur.com/dBIRe8n.jpg?1?4649');
}
</STYLE>
</body>
</html>
 ------------------------------------------------------------------------------------------------------------------------
BUTTON CLICK IN JAVA SCRIPT
SEARCH IN GOOGLE : jquery button array click
https://www.google.co.uk/search?q=jquery+button+array+click&rlz=1C1_____enGB747GB747&oq=jquerybutton+arry&aqs=chrome.2.69i57j0l5.8252j0j7&sourceid=chrome&ie=UTF-8
https://stackoverflow.com/questions/17715309/jquery-binding-click-event-to-multiple-buttons
https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&q=for+loop+button+array+jquery&oq=for+loop+button+array+jq&gs_l=serp.1.0.33i21k1.2985.13375.0.15347.26.26.0.0.0.0.311.3135.9j16j0j1.26.0....0...1.1.64.serp..0.25.2998...0j35i39k1j0i67k1j0i131k1j0i20k1j0i22i30k1j33i160k1j30i10k1.mvskIETPRpQ
https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&biw=1164&bih=631&tbm=isch&sa=1&q=for+loop++jquery+button+array&oq=for+loop++jquery+button+array&gs_l=img.3...7392.9696.0.10015.3.3.0.0.0.0.294.514.1j1j1.3.0....0...1.1.64.img..0.2.217...0i24k1.ov78j2XLnYM#imgrc=RkRQRxYmHrAflM:
-------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://stackoverflow.com/questions/17715309/jquery-binding-click-event-to-multiple-buttons -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<title>JQUERY BINDING CLICK EVENT TO MULTIPLE BUTTONS</title>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
var b1 = $("#btn1");
var b2 = $("#btn2");
var b3 = $("#btn3");
var btnClick = function(e){
alert("Button: "+e.currentTarget.id);
}
b1.on('click', btnClick);
b2.on('click', btnClick);
b3.on('click', btnClick);
});
});
//]]>
</script>
</head>
<body>
<input type="button" id="btn1" value="submit"/>
<input type="button" id="btn2" value="submit2"/>
<input type="button" id="btn3" value="submit3"/>
</body>
</html>
===================================================================
<html>
<head>
<!-- http://jsfiddle.net/ehgMa/5/ -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
var b1 = "#b1", b2 = "#b2", b3 = "#b3";
$(b1 + "," + b2 + "," + b3).on('click',function(){
alert('clicked2' + jQuery(this).attr('id'));
});
});//]]>
</script>
</head>
<body>
<button id="b1" type="button">B1M</button>
<button id="b2" type="button">B2M</button>
<button id="b3" type="button">B3M</button>
</body>
</html>
=====================================================================
<html>
<head>
<!-- http://jsfiddle.net/XF3Vv/1/ -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var b1 = $("#b1")[0], b2 = $("#b2")[0], b3 = $("#b3")[0];
$([b1, b2, b3]).click(function () {
$('<div />').text('clicked3 ' + this.id).appendTo(document.body);
});
});
//]]>
</script>
</head>
<body>
<button id="b1" type="button">B1M</button>
<button id="b2" type="button">B2M</button>
<button id="b3" type="button">B3M</button>
</body>
</html>
===============================================================================
<html>
<head>
<!-- http://jsfiddle.net/erwin1975/2my5mmno/11/ -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<style type="text/css">
body {
color: #fff;
}
.link {
width: 180px;
height: 20px;
padding: 10px;
background-color: black;
cursor: pointer;
text-align: center;
margin-top: 5px;
}
#result {
display: block;
width: 300px;
height: 50px;
color: #000;
border: 1px solid #000;
margin-top: 50px;
}
</style>
<title> by erwin1975</title>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).ready(function(){
var links = [];
$('.resources a').each(function(){
links.push($(this).attr('href'));
});
function randomFrom(myArray) {
return myArray[Math.floor(Math.random() * myArray.length)];
}
function openPrev(myArray){
var url = $('#result').text();
var position = $.inArray(url, myArray);
return myArray[position-1];
}
function openNext(myArray){
var url = $('#result').text();
var position = $.inArray(url, myArray);
return myArray[position+1];
}    
$('.open-random-link').on('click', function(){
$('#result').text(randomFrom(links));   
});
$('.open-prev').on('click', function(){ 
$('#result').text(openPrev(links));
});
$('.open-next').on('click', function(){ 
$('#result').text(openNext(links));
});
});
});//]]>
</script>
</head>
<body>
<div class="resources">
<a href="url1"></a> 
<a href="url2"></a> 
<a href="url3"></a> 
<a href="url4"></a>   
</div>
<div class="link open-prev">click previous link</div>
<div class="link open-random-link">click random link</div>
<div class="link open-next">click next link</div>
<div id="result"></div>
</body>
</html>
===============================================================================
<html>
<!-- http://jsfiddle.net/nbrooks/2z5zN/ -->
<!-- http://jsfiddle.net/jfriend00/7frQ5/ -->
<!-- http://jsfiddle.net/NFGkj/ -->
<!-- https://stackoverflow.com/questions/10299020/changing-background-color-of-an-element-in-css-using-javascript -->
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<input id="taxId" type="text" /><br />
<input onclick="applyTax(this, '1');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '2');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '3');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<script>
function applyTax(btn, taxIdValue)   {
$('#taxId').val(taxIdValue);
$(btn).css("background-color","yellow");
}
</script>
</body
</html>
===========================================================================
<html>
<!-- http://jsfiddle.net/jfriend00/7frQ5/ -->
<head>
<style type="text/css">
</style>
<title> by jfriend00</title>
</head>
<body>
<button id="test1">Test 1</button><br>
<button id="test2">Test 2</button><br>
<button id="test3">Test 3</button><br>
<script type='text/javascript'>
//<![CDATA[
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1){
buttons[i].addEventListener("click", function(e) {
alert(this.id);
});
}
//]]>
</script>
</body>
</html>
 ------------------------------------------------------------------------------------------------------------------------

Posted by on Monday 10 July 2017 at 07:19
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