The most viewed posts

ZilaStar ICT Oct 22 2022, 10:15:47

JavaScript Array Methods

entries()
   Returns a key/value pair Array Iteration Object

every()
   Checks if every element in an array pass a test in a testing function.

fill()
   Fill the elements in an array with a static value.

filter()
   Creates a new array with all elements that pass the test in a testing function.

find()
   Returns the value of the first element in an array that pass the test in a testing function.

findIndex()
   Returns the index of the first element in an array that pass the test in a testing function.

forEach()
   Calls a function once for each array element.

from()
   Creates an array from an object

includes()
   Determines whether an array includes a certain element.

indexOf()
   Search the array for an element and returns its first index.

isArray()
   Determines whether the passed value is an array.

join()
   Joins all elements of an array into a string.

keys()
   Returns a Array Iteration Object, containing the keys of the original array.

lastIndexOf()
   Search the array for an element, starting at the end, and returns its last index.

map()
   Creates a new array with the results for calling a function for each array element.

pop()
   Removes the last element from an array, and returns that element.

push()
   Adds one or more elements to the end of an array, and returns the array's new length.

reduce()
   Reduce the values of an array to a single value(from left-to-right).

reduceRight()
   Reduce the values of an array to a single value(from right-to-left).

reverse()
   Reverses the order of the elements in an array.

shift()
   Removes the first element from an array, and returns that element.

slice()
   Selects a part of an array, and returns the new array.

some()
   Checks if any of the elements in an array passes the test in a testing function.

sort()
   Sorts the elements of an array.

splice()
   Adds/Removes elements to/from an array.

unshift()
   Adds new elements to the beginning of an array, and returns the arrays's new length.

💬 Comment 🔗 Get link

ZilaStar ICT Aug 01 2022, 11:43:29

Input Datetime Local (HTML Objects)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "jsFun()">Try It</button>
<script>
function jsFun(){
var x = document.createElement("INPUT");
x.setAttribute("type", "datetime-local");
document.body.appendChild(x);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 31 2022, 11:42:26

Input Date (HTML Objects)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Test</title>
</head>
<button onclick = "jsFun()">Try It</button>
<body>
<script>
function jsFun(){
var x = document.createElement("INPUT");
x.setAttribute("type", "date");
document.body.appendChild(x);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 30 2022, 11:41:01

JS Event Listener 2

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>

<button type = "button" id = "event">Try It</button>
<p id = "demo"></p>
<script>
var x = document.getElementById("event");
x.addEventListener("mouseover", jsFun1);
x.addEventListener("mousedown", jsFun2);
x.addEventListener("mouseout", jsFun3);

function jsFun1(){
document.getElementById("demo").innerHTML += "Mouse Over<br />";
}

function jsFun2(){
document.getElementById("demo").innerHTML += "Mouse Down<br />";
}

function jsFun3(){
document.getElementById("demo").innerHTML += "Mouse Out<br />";
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 30 2022, 11:40:30

JS Event Listener 1

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">The Date is:</p>
<button type = "button" id = "test">Show Date</button>&nbsp;&nbsp;
<button type = "button" id = "test1">Hide</button>
<script>
document.getElementById("test").addEventListener('click', jsFun);
document.getElementById("test1").addEventListener('click', jsHide);

function jsFun(){
document.getElementById("demo").innerHTML = Date();
}

function jsHide(){
document.getElementById("demo").innerHTML = "";
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 29 2022, 11:39:36

timer (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "startCount()">Start Count</button>
<input type = "text" id = "txt">
<button onclick = "stopCount()">Stop Count</button>
</body>
<script>
var c = 0;
var t;
var myTimer = 0;

function jsFun(){
document.getElementById("txt").value = c;
c++;
t = setTimeout(jsFun, 1000);
}

function startCount(){
if(!myTimer){
myTimer = 1;
jsFun();
}
}

function stopCount(){
myTimer = 0;
clearTimeout(t);
}
</script>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 28 2022, 11:39:05

progressBar (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
<style>
#progressBar{
width: 100%;
height: 30px;
position: relative;
background-color: grey;
}

#myBar{
width: 20px;
height: 30px;
position: absolute;
background-color: green; 
}
</style>
</head>
<body>
<div id = "progressBar">
  <div id = "myBar"></div>
</div><p></p>
<button onclick = "myMove()">Try Now</button>
<script>
function myMove(){
var ele = document.getElementById("myBar");
var width = 0;
var myTime = setInterval(jsFun, 100);
function jsFun(){
if(width == 100){
clearInterval(myTime);
}else{
width ++;
ele.style.width = width + '%';
}
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 27 2022, 11:38:30

moveTo (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "openWin()">Open Window</button>
<button onclick = "moveWin()">Move Window</button>
<script>
function openWin(){
myWindow = window.open('', 'myWindow', 'width=300px, height=200px');
myWindow.document.write('hello');
myWindow.document.designMode = "On";
}

function moveWin(){
myWindow.moveTo(500, 300);
myWindow.focus();
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 26 2022, 11:37:55

close (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<div id = "msg"></div>
<button onclick = "openWin()">Open Window</button>
<button onclick = "closeWin()">Close Window</button>
<button onclick = "chkStatus()">Check Status</button>

<script>

var myWin;

function openWin(){
myWin = window.open("", "myWin", "width=300px, height=200px");
}

function closeWin(){
if(myWin){
myWin.close();
}
}

function chkStatus(){
if(!myWin){
document.getElementById("msg").innerHTML = "Window has never been opened.";
}else{
if(myWin.closed){
document.getElementById("msg").innerHTML = "Window has been closed.";
}else{
document.getElementById("msg").innerHTML = "Window stills opend.";
}
}
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 25 2022, 11:35:58

onchange 1 (HTML DOM Events)

<!DOCTYPE html>

<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<input type = "text" id = "fname" onchange = "jsFun()">
<script>
function jsFun(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 24 2022, 11:35:20

onchange (HTML DOM Events)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<select id = "myId" onchange = "jsFun()">
  <option value = "#">Choose Options</option>
  <option value = "Thet">Thet</option>
  <option value = "Naing">Naing</option>
  <option value = "Win">Win</option>
</select>
<p id = "demo"></p>
<script>
function jsFun(){
var x = document.getElementById("myId").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 23 2022, 12:09:13

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Paragraph");
para.appendChild(txtNode);
document.body.appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 22 2022, 12:08:45

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
width: 200px;
border: 2px solid red;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<p></p>
<div id = "myDiv">My Example</div>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Example");
para.appendChild(txtNode);
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 21 2022, 12:08:17

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<ul id = "myText">
  <li>Thet</li>
  <li>Naing</li>
</ul>

<button onclick = "jsFun()">Try It</button>

<script>
function jsFun(){
var node = document.createElement("LI");
var txtNode = document.createTextNode("Win");
node.appendChild(txtNode);
document.getElementById("myText").appendChild(node);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 20 2022, 12:07:06

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var x = document.getElementById("myId");
x.addEventListener("mouseover", msOver);
x.addEventListener("click", msClick);
x.addEventListener("mouseout", msOut);

function msOver(){
document.getElementById("demo").innerHTML += "Mouse Over <br />";
}

function msClick(){
document.getElementById("demo").innerHTML += "Mouse Click <br />";
}

function msOut(){
document.getElementById("demo").innerHTML += "Mouse Out <br />";
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 19 2022, 12:06:32

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var p1 = 9;
var p2 = 9;
document.getElementById("myId").addEventListener("click", function(){myFun(p1, p2)});

function myFun(num1, num2){
var x = num1 * num2;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 18 2022, 12:05:41

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>

<script>
var x = document.getElementById("myId");
x.addEventListener("click", myFun1);
x.addEventListener("click", myFun2);

function myFun1(){
alert("Function1");
}

function myFun2(){
alert("Function2");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 17 2022, 11:54:00

querySelectorAll() (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<h1 class = "example">Heading</h1>
<p class = "example">Paragraph</p>
<button onclick = "jsFun()">Try It</button>
<script>
function jsFun(){
var i;
var x = document.querySelectorAll(".example");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 16 2022, 11:52:53

getElementsByTagName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
</style>
</head>
<body>
<ol>
   <li>Example_1</li>
   <li>Example_2</li>
   <li>Example_3</li>
</ol>
<button onclick = "jsFun()">Red</button>
<script>
function jsFun(){
var i;
var x = document.getElementsByTagName("LI");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 15 2022, 11:51:48

getElementsByClassName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.Example{
border: 2px solid yellow;
padding: 5px;
width: 100px;
}
</style>
</head>
<body>
<div class = "Example">
Example_1
</div>
<div class = "Example">
Example_2
</div>
<div class = "Example">
Example_3
</div><br />

<button style = "background: red" onclick = "colRed()">Red</button>
<button style = "background: green" onclick = "colYellow()">Green</button>

<script>
function colRed(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "red";
x[i].style.color = "white";
}
}

function colYellow(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "green";
x[i].style.color = "yellow";
}
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 14 2022, 11:50:34

document.links (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsGreen()">Green</button>
<button onclick = "jsRed()">Red</button><br />

<p id = "demo"></p>

<li><a href = "zilastar.com">zilastar.com</a></li>
<li><a href = "tnw87.com">tnw87.com</a></li>
<li><a href = "tnw87.site">tnw87.site</a></li>

<script>
function jsGreen(){
var i;
var x = document.links;
for(i = 0; i < x.length; i ++){
x[i].style.color = "green";
}
}

function jsRed(){
var i;
var x = document.links;
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 13 2022, 11:48:24

Creating Text Node (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id = "myDiv">
This is just Testing.
</div>
<button onclick = "jsFun()">+</button>
<script>
function jsFun(){
var para = document.createElement("P");
para.innerHTML = "Paragraph";
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 12 2022, 11:41:03

Creating a Calculator with JS

<html>
<head>
<title>Math Fun</title>
<script>
function registerEvents(){
document.mathWiz.operate.addEventListener('click', doTheMath, false);
}
function doTheMath(){
var first = parseInt(document.mathWiz.numberOne.value);
var second = parseInt(document.mathWiz.numberTwo.value);
var operator = document.mathWiz.operator.value;

switch (operator){
case "add":
var answer = first + second;
break;
case "substract":
var answer = first - second;
break;
case "multiply":
var answer = first * second;
break;
case "divide":
var answer = first / second;
break;
}
document.mathWiz.theResult.value = answer;
}
</script>
</head>
<body onload = "registerEvents();">
<form name="mathWiz">
<label>First Number: <input type="number" name="numberOne"></label><br />
<label>Second Number: <input type="number" name="numberTwo"></label><br />
<label>Operator:
<select name = "operator">
<option value="add"> + </option>
<option value="substract"> - </option>
<option value="multiply"> * </option>
<option value="divide"> / </option>
</select>
</label><br />
<input type="button" name="operate" value="Do the Math!"><br />
<label>Result: <input type="number" name="theResult">
</form>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 11 2022, 18:12:27

JS Timer

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "myTimer = setInterval(jsCount, 1000)">Start Count</button>
<button onclick = "clearInterval(myTimer)">Stop Count</button>
<p id = "demo"></p>
<script>
c = 0;
function jsCount(){
document.getElementById("demo").innerHTML = ++c;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 10 2022, 18:10:53

Creating Readmore Button

<!DOCTYPE html>
<html>
    <head>
        <titile>Code Testing For Read More Function</titile>
        <style>
        	#more{
            display: none;
            }
        </style>
    </head>
<body>
<p>
I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
<button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<p>
    I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
    <button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<script>
        function myFunction(){
            var dots = document.getElementById("dots");
            var more = document.getElementById("more");
            var btn = document.getElementById("myBtn");
        if(dots.style.display === "none"){
            dots.style.display = "inline";
            more.style.display = "none";
            btn.innerHTML = "Read More";
            
        }else{
            dots.style.display = "none";
            more.style.display = "inline";
            btn.innerHTML = "Read less";
           
        }
    }
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 09 2022, 18:09:37

Creating Nav Bar

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
body{
margin: 0px;
font-size: 14px;
}

.header{
background-color: grey;
text-align: center;
padding: 12px;
}

#navbar{
overflow: hidden;
background-color: black;
}

#navbar a{
display: block;
float: left;
padding: 16px 32px;
text-decoration: none;
color: white;
}

#navbar a:hover{
background-color: gray;
}

#navbar a:focus{
background-color: green;
}

.content{
padding: 16px;
line-height: 25px;
}

.sticky{
position: fixed;
top: 0px;
width: 100%;
}

.sticky + .content{
padding-top: 60px;
}


</style>
</head>
<body onscroll = "jsFun()">
<div class = "header">
  <h1>Sticy Test</h1>
  <h2>These are codes for Sticky Position</h2>
</div>
<div id = "navbar">
  <a href = "#">Home</a>
  <a href = "#">Computer</a>
  <a href = "#">Network</a>
</div>
<div class = "content">
 <h2>My Paragraph</h2>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. 
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function jsFun(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
</script>

</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 08 2022, 18:08:34

Dropdown Menu

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.dropdown{
display: inline-block;
position: relative;
}

.dropbtn{
background-color: red;
font-size: 14px;
color: white;
padding: 12px 32px;
cursor: pointer;
border: 2px solid green;
}

.dropbtn:hover, .dropbtn:focus{
background-color: orange;
}

.dropcontent{
display: none;
overflow: auto;
position: absolute;
box-shadow: 0px 2px 1px 3px;
}

.dropcontent a{
display: block;
color: white;
padding: 15px 32px;
text-decoration: none;
background-color: red;
}

.dropcontent a:hover{
background-color: orange;
}

.show{
display: block;
}

</style>
</head>
<body>
<div class = "dropdown">
   <button id = "myBtn" class = "dropbtn">Example</button>
   <div id = "myDrop" class = "dropcontent">
      <a href = "">Example_1</a>
      <a href = "">Example 2</a>
      <a href = "">Example 3</a>
   </div>
</div>

<script>
document.getElementById("myBtn").onclick = function(){jsFun()};

function jsFun(){
document.getElementById("myDrop").classList.toggle("show");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 07 2022, 18:08:00

Display a Clock

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<script>
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("demo").innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 500);
}

function checkTime(i){
if(i < 10){i = "0" + 1};
return i;
}
</script>
</head>
<body onload = "startTime()">
<div id = "demo"></div>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 06 2022, 18:06:29

Converting Celsius to Fahrenheit

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<p><input id = "c" onkeyup = "temperature('C')"> degree Celsius.</p>
<p><input id = "f" onkeyup = "temperature('F')"> degree Fahrenheit.</p>
<script>
function temperature(degree){
var x;
if(degree == "C"){
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
}else{
x = (document.getElementById("f").value - 32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 05 2022, 18:04:53

Change Background Color of Html Elements

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<table style = "width:300px; height:100px">
   <tr>
      <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:red"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:green"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:yellow"></td>
   </tr>
</table>
<script>
function bgChange(bg){
document.body.style.background = bg;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 04 2022, 18:03:21

JS Animation

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#mySlide{
position: relative;
}

li{
position: relative;
list-style: none;
display: block;
float: left;
padding: 0px 10%;
width: auto;
}

@keyframes mymove{
from { left: 0px; }
to { left: 100%; }
}

@-webkit-keyframes{
from { left: 0px; }
to { left: 100%; }
}
</style>
</head>
<body onload = "jsFun()">
<div id = "mySlide">
  <li>Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
</div>
<script>
var x = document.getElementsByTagName("LI");
function jsFun(){
for(i = 0; i < x.length; i++){
x[i].style.animation = "20s 5 mymove";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 03 2022, 18:01:59

Switch (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<p id = "demo">What is Today?</p>
<button type = "button" onclick = "jsFunction()">Click Now</button>
<script>
function jsFunction(){
switch(new Date().getDay()){
case 0:
day = "Sunday";
break;

case 1:
day = "Monday";
break;

case 2:
day = "Tuesday";
break;

case 3:
day = "Wednesday";
break;

case 4:
day = "Thursday";
break;

case 5:
day = "Friday";
break;

case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML ="Today is " + day + ".";
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 02 2022, 18:01:25

If (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<h1>JavaScript Code Testing</h1>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<button type = "button" onclick = "jsFunction()">Try Now</button>
<script>
function jsFunction(){
var you = "I like to swim.";
var me = "I like to swim.";
var youme = "Our hobby is not same.";
if (you == me){
document.getElementById("demo1").innerHTML = you;
document.getElementById("demo2").innerHTML = me;
}else{
document.getElementById("demo3").innerHTML = youme;
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 01 2022, 18:00:50

Continue (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){continue;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 30 2022, 18:00:18

Break (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){break;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 29 2022, 17:58:27

Random Integer (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Please click Random for random numbers.</p>
<button type = "button" onclick = "jsRand()">Random</button>
<script>
function jsRand(){
var rand = Math.floor(Math.random() * 4000);
document.getElementById("demo").innerHTML = rand;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 28 2022, 17:57:41

Proper Random Function (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Click Random for random numbers.</p>
<button type = "button" onclick = "myRand()">Random</button>
<script>

function myRand(){
var rand = jsRand(100000, 900000);
document.getElementById("demo").innerHTML = rand;
}

function jsRand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 27 2022, 09:48:13

Math.sqrt() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.sqrt Testing</p>
<button type = "button" onclick = "jsSqrt()">Math Sqrt</button>

<script>
var a = 81;
document.getElementById("demo").innerHTML = a;

function jsSqrt(){
var b = Math.sqrt(a);
document.getElementById("demo").innerHTML = b;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 26 2022, 09:47:21

Math.round() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.round Testing</p>
<button type = "button" onclick = "jsRound()">Math Round</button>

<script>
var a = 4.576;
var b = 4.345;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsRound(){
document.getElementById("demo").innerHTML = Math.round(a) + " and " + Math.round(b);
}
</script>

</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 25 2022, 09:46:32

Math.random() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.random Testing</p>
<button type = "button" onclick = "jsRandom()">Math Random</button>
<script>
function jsRandom(){
var a = Math.random();
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 24 2022, 09:45:52

Math.pow() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.pow Testing</p>
<button type = "button" onclick = "jsPower()">Math Power</button>

<script>
var a = 9;
var b = 5;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsPower(){
var c = Math.pow(a, b);
document.getElementById("demo").innerHTML = c;
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 23 2022, 09:44:51

Math.PI (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1">This is JavaScript Math.PI Testing</p>
<button type = "button" onclick = "jsPI()">Math PI</button>
<script>
function jsPI(){
var pi = Math.PI;
document.getElementById("demo1").innerHTML = pi;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 22 2022, 09:40:14

JS While Loop

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var txt, i = 0;
txt = "<ol>";
while(i < names.length){
txt += "<li>" + names[i] + "</li>";
i++;
}
txt += "</ol>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 21 2022, 09:39:35

forof (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var txt;

for(txt of names){
document.write("<li>" + txt + "</li>");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 20 2022, 09:39:01

for (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var i, txt;

txt = "<ol>";
for(i=0; i<names.length; i++){
txt += "<li>" + names[i] + "</li>";
}
txt += "</ol>";

document.getElementById("demo").innerHTML = txt;

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 19 2022, 09:37:54

forin (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var i, txt;

txt = "<ol>";
for(i in names){
txt += "<li>" + names[i] + "</li>";
}
txt += "</ol>";

document.getElementById("demo").innerHTML = txt;

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 18 2022, 09:36:53

JS Form Validation

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<script>
function formValidate(){
var x = document.forms["myForm"]["fname"].value;
if(x == ""){
alert("Must fill out in the form");
return false;
}
}
</script>
</body>
<form action = "formvalidate1.html" method = "POST" onsubmit = "return formValidate()" name = "myForm">
<input type = "text" name = "fname">
<input type = "submit" value = "Submit">
</form>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 17 2022, 09:35:47

Throw Statement (JS Errors)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<input id = "demo" type = "text">
<button type = "button" onclick = "jsFun()">Check Input</button>
<p id = "page"></p>
<script>
function jsFun(){
var sms, x;
sms = document.getElementById("page");
sms.innerHTML = "";
x = document.getElementById("demo").value;
try{
if(x == "") throw "empty.";
if(isNaN(x)) throw "not a number.";
x = Number(x);
if(x < 5) throw "too small.";
if(x > 10) throw "too big.";
if(x > 4 && x < 11) throw "OK.";
}
catch (err){
sms.innerHTML = "The input is " + err;
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 16 2022, 09:35:11

Finally Statement (JS Errors)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Cdoe Testing</title>
</head>
<body>
<input id = "demo" type = "text">
<button type = "button" onclick = "jsFun()">Check Input</button>
<p id = "page"></p>
<script>
function jsFun(){
var sms, x;
sms = document.getElementById("page");
sms.innerHTML;
x = document.getElementById("demo").value;
try {
if (x == "") throw "empty.";
if (isNaN(x)) throw "not a number.";
x = Number(x);
if(x < 5) throw "too small.";
if(x > 10) throw "too big.";
if(x > 4 && x < 11) throw "OK.";
}

catch (err){
sms.innerHTML = "The Input is " + err;
}

finally{
document.getElementById("demo").value;
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 15 2022, 09:33:58

JS Arrow Function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<button  id = "btn1">Try Now</button>
<p id = "demo1"></p>

<button id = "btn2">Try Now</button>
<p id = "demo2"></p>

<script>
var test1 = function(){
document.getElementById("demo1").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test1);

//button object calls the function
document.getElementById("btn1").addEventListener("click", test1);

var test2 = () =>{
document.getElementById("demo2").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test2);

//button object calls the function
document.getElementById("btn2").addEventListener("click", test2);

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 14 2022, 08:04:31

Inheritance (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Inheritance Test</p>
<script>
class Car{
constructor(brand){
this.carname = brand;
}
present(){
return "I have " + this.carname;
}
}

class Model extends Car{
constructor(brand, mod){
super(brand);
this.model = mod;
}
show(){
return this.present() + " and the model is " + this.model + ".";
}
}
var myCar = new Model("Tesla", "2021");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 13 2022, 08:03:15

Getter and Setter (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
class Car{
constructor(brand){
this.carname = brand;
}
get cnam(){
return this.carname;
}
set cnam(x){
this.carname = x;
}
}
const myCar = new Car["Tesla"];
document.getElementById("demo").innerHTML = myCar;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 12 2022, 08:02:28

Creating Object (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id ="demo"></p>
<script>
class Name{
constructor(Name, City){
this.name = Name;
this.city = City;
}
}

var newName = new Name("Thet", "Yangon");
document.getElementById("demo").innerHTML = newName.name + " stays in " + newName.city + ".";

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 11 2022, 08:01:10

Class Methods (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">What is your name and age?</p>
<button type = "button" onclick = "jsFun()">Check Name and Age</button>
<script>
function jsFun(){
class Name{
constructor(Name, Year){
this.name = Name;
this.year = Year;
}

age(){
const date = new Date();
return date.getFullYear() - this.year;
}
}

const myName = new Name("Thet", 1987);
document.getElementById("demo").innerHTML = "My name is " + myName.name + " and my age is " + myName.age() + " years old now."; 
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 08 2022, 10:22:01

Reduce() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>

<button type = "button" onclick = "jsReduce()">Total</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsReduce(){
var number2 = numbers.reduce(funReduce);
document.getElementById("demo").innerHTML = number2;
}

function funReduce(total, value){
return total + value;
}


</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 07 2022, 10:21:20

Map() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsDouble()">Double</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsTriple()">Triple</button>
<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;


function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsDouble(){
number2 = numbers.map(mapDouble).join("<br/>");
document.getElementById("demo").innerHTML = number2;
}

function jsTriple(vlaue){
number3 = numbers.map(mapTriple).join("<br/>");
document.getElementById("demo").innerHTML = number3;
}

function mapDouble(value){
return value*2;
}

function mapTriple(value){
return value*3;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 05 2022, 10:20:42

Foreach() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "";
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function (a, b){return a - b;});

txt = "<ol>";
num.forEach(jsFunction);

document.getElementById("demo").innerHTML = txt;

function jsFunction(value){
txt += "<li>" + value + "</li><br/><hr/><br/>";
}

txt += "</ol>";

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jun 02 2022, 10:19:38

Find() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Find the first number greater than 20</p>

<button type = "button" onclick = "jsFind()">Find > 20</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsFind(){
var number2 = numbers.find(funFind);
document.getElementById("demo").innerHTML = number2;
}

function funFind(value){
return value > 20;
}


</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT May 21 2022, 10:18:54

Filter() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsFilter()">Less Than 100</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsFilter(){
number2 = numbers.filter(funFilter).sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = number2;
}

function funFilter(value){
return value < 100;
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Apr 24 2022, 21:02:50

Sort() and reverse() numerically (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Sort Numberically</p>
<button type = "button" onclick = "jsSort()">Sort</button>
<button type = "button" onclick = "jsReverse()">Reverse</button>
<script>
var numbers = [400, 40, 20, 200, 93, 49];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsSort(){
var sort = numbers.sort(function(a,b){return a - b;}).join("<br />");
document.getElementById("demo").innerHTML = sort;
}

function jsReverse(){
var reverse = numbers.sort(function(a,b){return b - a;}).join("<br />");
document.getElementById("demo").innerHTML = reverse;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Apr 04 2022, 21:01:00

Sort() and reverse() alphabetically (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsSort()">Sort</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReverse()">Reverse</button>
<script>
var cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila", "Bagan"];
document.getElementById("demo").innerHTML = cities.join(" * ");

function jsSort(){
var sort = cities.sort().join(" * ");
document.getElementById("demo").innerHTML = sort;
}

function jsReverse(){
var reverse = cities.reverse().join(" * ");
document.getElementById("demo").innerHTML = reverse;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Mar 14 2022, 20:59:37

Sort number randomly (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsRandom()">Sort Now</button>
<script>
var numbers = [300, 40, 83, 49, 92, 200, 79];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsRandom(){
var random = numbers.sort(function(a, b){return 0.5 - Math.random();});
document.getElementById("demo").innerHTML = random.join("<br />");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Feb 23 2022, 20:58:36

Math.max and Math.min (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "findMax()">Find Max</button>
<button type = "button" onclick = "jsReset()">Reset</button>
<button type = "button" onclick = "findMin()">Find Min</button>

<script>
var numbers = [200, 30, 400, 50, 1000, 70, 20, 100];
document.getElementById("demo").innerHTML = numbers.join("<br/>");

function jsMax(arr){
return Math.max.apply(null, arr);
}

function jsMin(arr){
return Math.min.apply(null, arr);
}

function findMax(){
document.getElementById("demo").innerHTML = jsMax(numbers);
}

function findMin(){
document.getElementById("demo").innerHTML = jsMin(numbers);
}

function jsReset(){
document.getElementById("demo").innerHTML = numbers.join("<br />");
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jan 26 2022, 20:57:29

Find maximum or minimum number (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "findMax()">Find Max</button>&nbsp;&nbsp;
<button type = "button" onclick = "numReset()">Reset</button>&nbsp;&nbsp;
<button type = "button" onclick = "findMin()">Find Min</button>

<script>
var numbers = [200, 30, 400, 50, 1000, 70, 20, 100];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsMax(arr){
var len = arr.length;
var max = -Infinity;
while(len--){
if(arr[len] > max){
max = arr[len];
}
}
return max;
}

function jsMin(arr){
var len = arr.length;
var min = Infinity;
while(len--){
if(arr[len] < min){
min = arr[len];
}
}
return min;
}

function findMax(){
document.getElementById("demo").innerHTML = jsMax(numbers);
}

function findMin(){
document.getElementById("demo").innerHTML = jsMin(numbers);
}

function numReset(){
document.getElementById("demo").innerHTML = numbers.join("<br/>");
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jan 13 2022, 19:54:27

Array Function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<button  id = "btn1">Try Now</button>
<p id = "demo1"></p>

<button id = "btn2">Try Now</button>
<p id = "demo2"></p>

<script>
var test1 = function(){
document.getElementById("demo1").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test1);

//button object calls the function
document.getElementById("btn1").addEventListener("click", test1);

var test2 = () =>{
document.getElementById("demo2").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test2);

//button object calls the function
document.getElementById("btn2").addEventListener("click", test2);

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Dec 27 2021, 19:52:37

Objects (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var myName = {firstName : "Thet", middleName : "Naing", lastName : "Win"};
document.getElementById("demo").innerHTML = myName.firstName;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Dec 06 2021, 19:52:03

Looping Array Element (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var cities, clen, text, i;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];
clen = cities.length;
text = "<ul>";
for(i=0; i<clen; i++){
text += "<li>" + cities[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Nov 16 2021, 19:51:24

Foreach Loop (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">forEach Loop</p>
<script>
var cities, text;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];

text = "<ul>";
cities.forEach(jsFunction);
text+= "</ul>";

function jsFunction(value){
text += "<li>" + value + "</li>";
}

document.getElementById("demo").innerHTML = text;

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Oct 30 2021, 19:50:56

Creating the Array (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1"></p>
<p id = "demo2"></p>
<script>

//good habit in crating array
var a = ["aaa", "bbb", "ccc", "ddd"];
document.getElementById("demo1").innerHTML = a;

//bad habit in creating array
var b = new Array("aaa", "bbb", "ccc", "ddd");
document.getElementById("demo2").innerHTML = b;
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Oct 13 2021, 19:50:22

Array Elements (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1"></p>
<p id = "demo2"></p>
<script>

var a = ["aaa", "bbb", "ccc", "ddd"];
a[0] = "eee";
document.getElementById("demo1").innerHTML = a;


var b = new Array("aaa", "bbb", "ccc", "ddd");
document.getElementById("demo2").innerHTML = b[2];
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Sep 29 2021, 19:49:31

Adding Array Element (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">forEach Loop</p>
<script>
var cities, text;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];

text = "<ul>";
cities.forEach(jsFunction);
text+= "</ul>";

function jsFunction(value){
text += "<li>" + value + "</li>";
}

document.getElementById("demo").innerHTML = text;

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Sep 05 2021, 19:48:42

unshift (JavaScript Array Method)

const tnwNames = ["Moe", "Soe", "Noe", "Mya"];
function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join(", ");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = "The original array is : " + tnwNames.join(", ");
    let tnwNewvalue = document.getElementById("newname").value;
    tnwNames.unshift(tnwNewvalue);
    document.getElementById("demo1").innerHTML = "The new array is : " + tnwNames.join(", ");
}

To see demo

💬 Comment 🔗 Get link

ZilaStar ICT Aug 19 2021, 19:47:15

splice (JavaScript Array Method)

const tnwNames = ["Hla", "Mya", "Soe", "Moe", "Noe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join(", ");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = "The original array is : 
" + tnwNames.join(", ");
    let result = tnwNames.splice(2, 2, "Aung", "Kyaw", "Tun");
    document.getElementById("demo1").innerHTML = "The removed elements are : 
" + result.join(", ");
    document.getElementById("demo2").innerHTML = "The new array is : 
" + tnwNames.join(", ");
}

💬 Comment 🔗 Get link

ZilaStar ICT Jul 24 2021, 19:46:34

sort (JavaScript Array Method)

//1. sort alphabetically
/**
const countries = ["Myanmar", "Singapore", "Malaysia", "USA", "Thailand", "Vietname"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = countries.join("
");
}

function jsSort(){
    let result = countries.sort();
    document.getElementById("demo").innerHTML = result.join("
");
}

function jsReverse(){
    let result = countries.reverse();
    document.getElementById("demo").innerHTML = result.join("
");
}

//2. Sort randomly

const tnwNums = [20, 17, 30, 38, 40, 50, 28, 12];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("
");
}

function tnwFun2(){
    let result = tnwNums.sort(tnwFun3);
    document.getElementById("demo").innerHTML = result.join("
");
}

function tnwFun3(a, b){
    return 0.5 - Math.random();
} */

// 3. Sort Numerically

const tnwNums = [20, 17, 30, 38, 40, 50, 28, 12, 4];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("
");
}

function jsSort(){
    let result = tnwNums.sort(function(a, b){return a - b;});
    document.getElementById("demo").innerHTML = result.join("
");
}

function jsReverse(){
    let result = tnwNums.sort(function(a, b){return b - a;});
    document.getElementById("demo").innerHTML = result.join("
");
}

💬 Comment 🔗 Get link

ZilaStar ICT Jul 03 2021, 19:46:00

some (JavaScript Array Method)

const tnwNums = [20, 39, 48, 58, 68, 70, 85, 90];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.some(tnwFun3);
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = result;
}

function tnwFun3(num){
    let chkInput = document.getElementById("chknum").value;
    return num > chkInput;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jun 13 2021, 19:45:18

slice (JavaScript Array Method)

const tnwNums = [20, 29, 30, 39, 40, 47, 50, 70];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.slice(1, 4);
    document.getElementById("demo").innerHTML = "The original is: " + tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = "The new array is: " + result.join(", ");
}

💬 Comment 🔗 Get link

ZilaStar ICT May 29 2021, 19:44:28

shift (JavaScript Array Method)

const tnwNums = [20, 30, 40, 50, 60, 70, 90];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.shift();
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = "The removed element is: " + result;
}

💬 Comment 🔗 Get link

ZilaStar ICT May 07 2021, 15:50:24

reverse (JavaScript Array Method)

const tnwNums = [20, 30, 40, 50, 60, 70];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("
");
}

function tnwFun2(){
    let result = tnwNums.reverse();
    document.getElementById("demo").innerHTML = result.join("
");
}

💬 Comment 🔗 Get link

ZilaStar ICT Apr 12 2021, 15:49:51

reduceRight (JavaScript Array Method)

const tnwNum = [20, 9, 20, 8, 100];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join(", ");
}

function tnwFun2(){
    var result = tnwNum.reduceRight(tnwFun3);
    document.getElementById("demo").innerHTML = result;
}

function tnwFun3(numRight, sum){
    return numRight - sum;
}

💬 Comment 🔗 Get link

ZilaStar ICT Mar 28 2021, 15:49:16

reduce (JavaScript Array Method)

const tnwNum = [70, 30, 20, 10, 7];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join("
");
}

function tnwFun2(){
    var result = tnwNum.reduce(tnwFun3);
    document.getElementById("demo").innerHTML = result;
}

function tnwFun3(leftNum, sum){
    return leftNum - sum;
}

💬 Comment 🔗 Get link

ZilaStar ICT Mar 12 2021, 15:48:32

push (JavaScript Array Method)

const tnwNames = ["Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    let tnwAdd = document.getElementById("adding").value;
    let result = tnwNames.push(tnwAdd);
    document.getElementById("demo").innerHTML = result;
}

💬 Comment 🔗 Get link

ZilaStar ICT Feb 15 2021, 15:47:59

pop (JavaScript Array Method)

const tnwName = ["Hla Hla", "Mya Mya", "Aung Aung", "Maung Maung"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwName.join("
");
}

function tnwFun2(){
    let result = tnwName.pop();
    document.getElementById("demo").innerHTML = "The removed element is : " + result;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jan 25 2021, 15:47:26

map (JavaScript Array Method)

const tnwNum = [10, 20, 30, 40];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join("
");
}

/**
function tnwFun2(){
    let result = tnwNum.map(Math.sqrt);
    document.getElementById("demo").innerHTML = result.join("
");
}*/

function tnwFun2(){
    let result = tnwNum.map(tnwFun3);
    document.getElementById("demo").innerHTML = result.join("
");
}

function tnwFun3(num){
    return num * 10;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jan 12 2021, 15:46:40

lastIndexOf (JavaScript Array Method)

const tnwText = "Hello, welcome to TNW (Web Service & ICT Solutions)";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwText;
}

function tnwFun2(){
    let tnwSearch = document.getElementById("search").value;
    let result = tnwText.lastIndexOf(tnwSearch);
    document.getElementById("demo").innerHTML = "The search text is found at : " + result;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jan 07 2021, 15:46:04

keys (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];
let result = "";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    let tnwKeys = tnwNames.keys();
    for(let x of tnwKeys){
        result += x + "
";
        document.getElementById("demo").innerHTML = result;
    }
}

💬 Comment 🔗 Get link

ZilaStar ICT Dec 19 2020, 15:44:56

join (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Aung Aung", "Maung Maung"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames;
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

💬 Comment 🔗 Get link

ZilaStar ICT Nov 02 2020, 15:44:18

isArray (JavaScript Array Method)

const tnwText = ["Hla Hla", "Mya Mya", "Soe Soe", "Noe Noe"];
//const tnwText = "I am Thet Naing Win.";
const result = Array.isArray(tnwText);
document.write(result);

💬 Comment 🔗 Get link

ZilaStar ICT Oct 12 2020, 15:43:33

indexOf (JavaScript Array Method)

const tnwText = "Hello Dear All, I am Thet Naing Win. Welcome to TNW (Web Service & ICT Solutions)";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwText;
}

function tnwFun2(){
    const tnwSearch = document.getElementById("search").value;
    const result = tnwText.indexOf(tnwSearch);
    document.getElementById("demo").innerHTML = "The search text is fount at " + result;
}

💬 Comment 🔗 Get link

ZilaStar ICT Sep 22 2020, 15:42:46

includes (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwNames.includes("Mya Mya");
}

💬 Comment 🔗 Get link

ZilaStar ICT Sep 05 2020, 09:58:52

from (JavaScript Array Method)

const myLetter = "ABCDEFGHIJKL";

function tnwFun1(){
    document.getElementById("demo").innerHTML = myLetter;
}

function tnwFun2(){
    const result = Array.from(myLetter);
    document.getElementById("demo").innerHTML = result;
}

💬 Comment 🔗 Get link

ZilaStar ICT Aug 26 2020, 09:58:18

forEach (JavaScript Array Method)

const student = ["Aung Aung", "Maung", "Kyaw", "Zaw", "Soe", "Moe"];
let names = "";
function tnwFun1(){
    student.forEach(tnwFun2);
}

function tnwFun2(item, index){
    names += index + " : " + item + "
";
    document.getElementById("demo").innerHTML = names;
}

💬 Comment 🔗 Get link

ZilaStar ICT Aug 11 2020, 09:57:48

findIndex (JavaScript Array Method)

const tnwAges = [19, 39, 28, 43, 29, 45, 53];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwAges.findIndex(chkAge);
}

function chkAge(age){
    return age > document.getElementById("myAge").value;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jul 27 2020, 09:57:10

find (JavaScript Array Method)

const tnwAges = [19, 39, 28, 43, 29, 45, 53];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwAges.find(chkAge);
}

function chkAge(age){
    return age > document.getElementById("myAge").value;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jul 11 2020, 09:56:23

filter (JavaScript Array Method)

const tnwAges = [25, 18, 29, 20, 40, 32, 53, 24];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    const result = tnwAges.filter(chkAge);
    document.getElementById("demo").innerHTML = result.join("
");
}

function chkAge(age){
    return age > 20;
}

💬 Comment 🔗 Get link

ZilaStar ICT Jun 22 2020, 09:55:54

fill (JavaScript Array Method)

const tnwNames = ["Aye Aye", "Nwe Nwe", "Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    const result = tnwNames.fill("Aung Aung", 1, 3);
    document.getElementById("demo").innerHTML = result.join("
"); 
}

💬 Comment 🔗 Get link

ZilaStar ICT Jun 11 2020, 09:55:16

every (JavaScript Array Method)

const tnwAge = [20, 29, 48, 76, 50, 38, 39];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAge.every(tnwFun2);
}

function tnwFun2(chkAge){
    return chkAge > 19;
}

💬 Comment 🔗 Get link

ZilaStar ICT Apr 03 2020, 09:53:28

entries (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Aye Aye", "Nwe Nwe", "Soe Soe", "Moe Moe", "Aung Aung"];
const y = tnwNames.entries();
for(x of y){
    document.write(x + "
");
}

💬 Comment 🔗 Get link

ZilaStar ICT Mar 11 2020, 09:51:51

copyWithin (JavaScript Array Method)

const people = ["Hla", "Mya", "Aung", "Maung", "Soe", "Noe", "Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = people.join("
");
}

function tnwFun2(){
    const result = people.copyWithin(3, 0, 3);
    document.getElementById("demo").innerHTML = result.join("
");
}

💬 Comment 🔗 Get link

ZilaStar ICT Mar 01 2020, 09:48:09

concat (JavaScript Array Methods)

const girls = ["Aye Aye", "Nwe Nwe", "Htwe Htwe"];
const boys = ["Aung Aung", "Maung Maung", "Kyaw Kyaw"];
const students = ["Hla Hla", "Mya Mya", "Aung Ba", "Aung Mya"];

const people = girls.concat(boys, students);
document.write(people.join("
"));

💬 Comment 🔗 Get link

ZilaStar ICT Feb 25 2020, 09:47:07

JavaScript Array Properties

length
	Sets or returns the number of elements in an array.

prototype 
	Allows you to add new properties and methods to an Array object.


//length
/*
const countries = ["USA", "UK", "Canada", "Myanmar", "Singapore"];

function showLength(){
    document.getElementById("demo").innerHTML = countries.length;
}

//prototype

Array.prototype.tnwCase = function(){
    for(let i = 0; i < this.length; i++){
        this[i] = this[i].toLowerCase(); //lower case
    }
};

const countries = ["USA", "UK", "Canada", "Myanmar", "Singapore"];
countries.tnwCase();

function tnwFun(){
    document.getElementById("demo").innerHTML = countries;
}*/

//Another example of prototype property

function Person(first, middle, last){
    this.firstName = first;
    this.middleName = middle;
    this.lastName = last;
}

const myFriend = new Person("Aung", "Kyaw", "Soe");
Person.prototype.nationality = "Myanmar";
Person.prototype.age = 35;

function tnwFun(){
    document.getElementById("demo").innerHTML = myFriend.age;
}

💬 Comment 🔗 Get link

ZilaStar ICT Feb 17 2020, 22:30:21

JavaScript Array

/*
const countries = ["USA", "UK", "Canada"];
document.write(countries);

//example one
const names = ["Hla Hla", "Mya Mya", "Soe Soe"];
document.write(names);


//example two
const cities = [
    "Yangon",
    "Mandalay",
    "Meikhtila"
];
document.write(cities); 

//example three
const countries = [];
countries[0] = "USA";
countries[1] = "UK";
countries[2] = "Canada";
document.write(countries); 

//example four 
//creating array by using new keyword
const countries = new Array("USA", "UK", "Canada");
document.write(countries); */

//Arrays are special types of objects

const myNmae = {first: "Thet", middle: "Naing", last: "Win"};
document.write(myNmae.last);

💬 Comment 🔗 Get link

ZilaStar ICT Jan 10 2020, 09:50:04

JavaScript Course

Chapter 1: Introduction to JavaScript
   - What is JavaScript
   - History of JavaScript
   - Start writing JS Codes
   - JavaScript Outputs
   - JavaScript Syntax
   - Basic Rules
   - Accessing Elements
   - Dot Notation
   - Square Bracket Notation
   - JS Statements
   - JS Objects
   - JS Methods
   - JS Properties

Chapter 2: Varialbes, Arrays and Operators
   - JS Variables
   - Variable Naming
   - JS Constant
   - Arrays
   - Array Properties
   - Array Methods
   - JS Operators
   - Working with Operators

Chapter 3: JS Functions
   - Function Definitions
   - Function Parameters
   - Function Invocation
   - Function Call
   - Function Apply
   - Function Closures

Chapter 4: JS Objects
   - Object hierarchy
   - Assigning properties to an object
   - Using methods to manipulate objects
   - Creating a new custom object
   - Window object
   - Document object
   - String object
   - Arrays
   - Date object
   - Math object
   - Image object


Chapter 5: Conditionals and Loops
   - Conditionals
   - if_else if_else conditions
   - Switch / Case
   - Loops
   - while loop
   - do while loop
   - for...of loop
   - for...in loop
   - break and continue
   - Array: forEach()

Chapter 6: Event Handlers and Listeners
   - On-Event Handlers
   - The getElementById() Method
   - The addEventListener() Method
   - Capturing Key Events
   - Benefits of Event Listeners
   - Timers

Chapter 7: JS HTML DOM
   - DOM Intro
   - DOM Methods
   - DOM Document
   - DOM Elements
   - DOM HTML
   - DOM CSS
   - DOM Animations
   - DOM Events
   - DOM Event Listener
   - DOM Navigation
   - DOM Nodes
   - DOM Collections
   - DOM Node List

Chapter 8: JS Browser BOM
   - JS Window
   - JS Screen
   - JS Location
   - JS History
   - JS Navigator
   - JS Popup Alert
   - JS Timing
   - JS Cookies

Chapter 9: Basic JS AJAX
   - AJAX Intro
   - AJAX XMLHttp
   - AJAX Request
   - AJAX Response
   - AJAX XML File
   - AJAX PHP
   - AJAX ASP
   - AJAX Database
   - AJAX Applications


Chapter 10: JS Web APIs
   - Introduction to Web API
   - Web History API
   - Web Storage API
   - Web Worker API
   - Web Fetch API
   - Web Geolocation API

💬 Comment 🔗 Get link

ZilaStar ICT Dec 12 2019, 11:19:54

JavaScript Constant

Example 1

<html>
<head>
<title>JS Constant</title>
</head>
<body>
<p id = "demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(8, 8);
</script>
</body>
</html>

 

Example 2

<html>
<head>
<title>JS Constant</title>
</head>
<body>
<p id = "demo"></p>
<script>
const x = (x, y, z) => (x + y + z);
document.getElementById("demo").innerHTML = x (4, 5, 6);
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Dec 11 2019, 11:00:06

JavaScript Variable Naming

/*
//the first character is letter
var myName = "I am Thet Naing Win.";
document.write(myName);

//the first character is underscore
var _myAge = "I am 35 now.";
document.write(_myAge); 

//the first character is number. this is not valid naming.
var 1_myAge = "I am 35 now.";
document.write(1_myAge);

var myName1 = "I am Thet Naing Win.";
var myAge1 = "I am 35 now.";
document.write(myName1);
document.write(myAge1);


//we can not use punctuation marks
var myName, = "I am Thet Naing Win.";
document.write(myName,);

var _myAge = "I am 35 now.";
document.write(_myAge);

//proper variable name
var myNmae = "I am Thet Naing Win.";
document.write(myNmae);

//we can use very long variable name. but this is improper variable name
//so we should care in variable naming
var iamthetnaing = "I am Thet Naing Win.";
document.write(iamthetnaing); 

var while = "I am Thet Naing Win.";
document.write(while); */

💬 Comment 🔗 Get link

ZilaStar ICT Dec 10 2019, 12:50:48

JavaScript Variables

/*var a = "I am Thet Naing Win.";
let b = "I am from Myanmar.";
const c = "I currently stay in Yangon.";

document.write(a);
document.write(b);
document.write(c);

const a = "I am Thet Naing Win.";
const a = "Who are you?";
document.write(a);
*/

var tnwGlobal = "I am TNW Global."; // global variable

function tnwOne(){
    var tnwLocal = "I am TNW Local."; //local variable
    document.getElementById("global").innerHTML = tnwGlobal;
    document.getElementById("local").innerHTML = tnwLocal;
}

function tnwTwo(){
    document.getElementById("global").innerHTML = tnwGlobal;
    document.getElementById("local").innerHTML = tnwLocal; //local variable declared in tnwOne
}

💬 Comment 🔗 Get link

ZilaStar ICT Dec 09 2019, 12:35:22

Basic JavaScript Objects

/*var person = {
    firstname : "Thet",
    lastname : "Naing"
};

function tnwFun(){
    document.getElementById("demo").innerHTML = person.lastname;
}*/

var person = {
    firstname : "Thet",
    lastname : "Naing",
    fullname : function(){
        return person.firstname+ " " +person.lastname;
    }
}

function tnwFun(){
    document.getElementById("demo").innerHTML = person.fullname();
}

💬 Comment 🔗 Get link

ZilaStar ICT Dec 09 2019, 17:07:27

JavaScript Statements

var a = "I am Thet Naing Win."; // Statement one
var b = "I am from Myanmar."; // Statement two
var c = "I currently stay in Yangon."; // Statement three
/*
document.write(a);
document.write(b);
document.write(c);*/

function tnwFun(){
    document.getElementById("demo1").innerHTML = a;
    document.getElementById("demo2").innerHTML = b;
    document.getElementById("demo3").innerHTML = c;
}

💬 Comment 🔗 Get link

ZilaStar ICT Dec 08 2019, 16:25:38

JavaScript Bracket Notation

var myObj = {tree: 'green', sky: 'blue', cloud: 'white'};

myObj['sky'] = 'gray'; //here i use ctrl+s to save

var myColor = myObj['sky']; //bracket notation

document.write(myColor);

💬 Comment 🔗 Get link

ZilaStar ICT Dec 07 2019, 16:13:20

JavaScript Dot Notation

var myObj = {tree : "green", sky : "blue", cloud : "white"};

myObj.cloud = "gray";

var myColor = myObj.cloud;

document.write(myColor);

💬 Comment 🔗 Get link

ZilaStar ICT Dec 6 2019, 17:04:37

Accessing Elements

// 1. Access Element By Id
/*
function tnwFun(){
    var txt = "<b>Welcome to TNW(Web Service & ICT Solutions)</b><br /><br />TNW Provides The Best ICT Solutions For Your Business By The Reasonable Price.";
    document.getElementById("tnwId").innerHTML = txt;
}*/

// 2. Access Elements By ClassName

/*
function tnwBlue(){
    var i;
    var x = document.getElementsByClassName("tnwPage");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "blue";
        x[i].style.color = "white";
    }
}

function tnwRed(){
    var i;
    var x = document.getElementsByClassName("tnwPage");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "red";
        x[i].style.color = "white";
    }
} */

// 3. Access Elements By Name
/*
function tnwBlue(){
    var i;
    var x = document.getElementsByName("tnwName");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "blue";
        x[i].style.color = "white";
    }
}

function tnwRed(){
    var i;
    var x = document.getElementsByName("tnwName");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "red";
        x[i].style.color = "white";
    }
} */

// 4. Access Elements By tagName
/*
function tnwFun(){
    var i;
    var x = document.getElementsByTagName("li");
    for(i = 0; i < x.length; i++){
        x[i].style.color = "red";
    }
}*/

// 5. Access Element By CSS Selector

function tnwFun(){
    var i;
    var x = document.querySelectorAll(".tnwClass");
    for (i = 0; i < x.length; i++){
        x[i].style.color = "red";
    }
}

💬 Comment 🔗 Get link

ZilaStar ICT Dec 05 2019, 16:07:29

JavaScript Basic Rules

// 1. JavaScript is case-sensitive

/*
var myTest = "I am Thet Naing Win";
var mytest = "Who are you?"
document.write(mytest);
*/

// 2. All the statements should end in semicolon
/*
var myStatement1 = "I am Thet Naing Win.";
var myStatement2 = "I am from Myanmar.";
var myStatement3 = "I live in Yangon now.";
var myStatement4 = "I am 35 now.";
document.write(myStatement1 + " " + myStatement2 + " " + myStatement3 + " " + myStatement4);
*/

// 3. All the variables mu be defined before using it. The type of data is put into the variables.
/*
var myVar1 = "I am Thet Naing Win."; //String
var myVar2 = "I am 35 now."; //number
document.write(myVar1 + " " + myVar2);
*/

// Global variable and local variable

/*
var tnwGlobal = "I am TNW Global."; //global variable

function myFun1(){
    var tnwLocal1 = "I am TNW Local one."; //local variable
    document.write(tnwGlobal + "<br />" + tnwLocal1);
}

function myFun2(){
    var tnwLocal2 = "I am TNW Local two."; //local variable
    document.write(tnwGlobal + "<br />" + tnwLocal2 + "<br />" + tnwLocal1);
}
*/
//Function two does not work as the local variable from myFun1() is being used in myFun2().

// 4. We can use single quotation mark or double quotation mark to declare the strings
/*
var myString1 = "I am Thet Naing Win.";//double quotation mark
var myString2 = 'I am from Myanmar.';//single quotation mark
document.write(myString1 + "<br />" + myString2);
*/

// 5. Varialbe increment or decrement
/*
var a;
a = a + 1; //or
a++;

a = a - 1; //or
a--;
*/
// For example
/*
for(var a = 9; a >= 1; a--){
    document.write(a + "<br />");
}
*/

// 6. Comments
// We can use // or /* ------- */

💬 Comment 🔗 Get link

ZilaStar ICT Dec 04 2019, 16:20:00

JavaScript Syntax

//There is a difference between const and let & var.
//We can not use const like let and var.
//For example

const a = 9;
const b = 8;
const c = a * b;
document.write(c);

//we must use const keyword like this

Please look at the following video.

💬 Comment 🔗 Get link

ZilaStar ICT Dec 03 2019, 16:20:00

JavaScript Outputs

<!DOCTYPE html>
<html>
<head>
<title>JavaScript OutPut</title>
</head>
<body>
<p>alert</p>
<button type = "button" onclick = "jsAlert()">Try Now</button>

<p>console.log</p>
<button type = "button" onclick = "jsConsole()">Try Now</button>

<p>document.write</p>
<button type = "button" onclick = "jsWrite()">Try Now</button>

<p id = "demo">innerHTML</p>
<button type = "button" onclick = "jsInner()">Try Now</button>

<p>Window Print</p>
<button type = "button" onclick = "jsPrint()">Print Now</button>

<script>
function jsAlert(){
alert("Window Alert in JavaScript OutPut");
}

function jsConsole(){
console.log("Console Log in JavaScript OutPut");
}

function jsWrite(){
document.write("document.write in JavaScript OutPut");
}

function jsInner(){
document.getElementById("demo").innerHTML = "inner.html in JavaScript OutPut";
}

function jsPrint(){
window.print("Window Print in JavaScript OutPut");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Dec 03 2019, 16:04:19

Start writing JS codes

Adding script between <head> and </head>

<html>
<head>
<title>TNW (Web Service & ICT Solutions)</title>
<script>
var txt = "<b>Welcome to TNW (Web Service & ICT Solutions)!</b><br /><br /> TNW provides the best ICT Solutions for your business by the reasonable price.";
function myFun(){
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<p id = "demo">TNW</p>
<button type = "button" onclick = "myFun()">Click Here</button>
</body>
</html>

 Open notepad or text editor and write the above codes. Then, save it as test.html and try to open by one of the browsers on your computer.

Adding Script between <body> and </body>

<html>
<head>
<title>TNW (Web Service & ICT Solutions)</title>
</head>
<body>
<p id = "demo">TNW</p>
<button type = "button" onclick = "myFun()">Click Here</button>
<script>
var txt = "<b>Welcome to TNW (Web Service & ICT Solutions)!</b><br /><br /> TNW provides the best ICT Solutions for your business by the reasonable price.";
function myFun(){
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Open notepad or text editor and write the above codes. Then, save it as test.html and try to open by one of the browsers on your computer.

💬 Comment 🔗 Get link