JavaScript Tutorials

Please login to start chat

ICT Solutions 22 Oct 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.

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 25 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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 = "tnwict.com">tnwict.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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 24 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 22 Jun 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>

...read more

ICT Solutions 21 Jun 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>

...read more

ICT Solutions 21 Jun 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>

...read more

ICT Solutions 21 Jun 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>

...read more

ICT Solutions 21 Jun 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>

...read more

ICT Solutions 21 Jun 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>

...read more

ICT Solutions 14 Jun 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>

...read more

ICT Solutions 14 Jun 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>

...read more

ICT Solutions 14 Jun 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>

...read more

ICT Solutions 14 Jun 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>

...read more

ICT Solutions 14 Jun 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>

...read more

ICT Solutions 13 Jun 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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>

...read more

ICT Solutions 13 Jun 2022, 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(", ");
}

...read more

ICT Solutions 13 Jun 2022, 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(", ");
}

...read more

ICT Solutions 13 Jun 2022, 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("<br />");
}

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

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

//2. Sort randomly

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

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

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

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("<br />");
}

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

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

To see video in YouTube.

...read more

ICT Solutions 13 Jun 2022, 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;
}

...read more

ICT Solutions 13 Jun 2022, 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(", ");
}

...read more

ICT Solutions 13 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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("
");
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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;
    }
}

...read more

ICT Solutions 12 Jun 2022, 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("
");
}

...read more

ICT Solutions 12 Jun 2022, 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);

ICT Solutions 12 Jun 2022, 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;
}

...read more

ICT Solutions 12 Jun 2022, 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");
}

...read more

ICT Solutions 11 Jun 2022, 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;
}

...read more

ICT Solutions 11 Jun 2022, 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;
}

...read more

ICT Solutions 11 Jun 2022, 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;
}

To see video in YouTube.

...read more

ICT Solutions 11 Jun 2022, 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;
}

...read more

ICT Solutions 11 Jun 2022, 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;
}

...read more

ICT Solutions 11 Jun 2022, 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("
"); 
}

...read more

ICT Solutions 11 Jun 2022, 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;
}

ICT Solutions 11 Jun 2022, 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 + "
");
}

ICT Solutions 11 Jun 2022, 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("
");
}

...read more

ICT Solutions 11 Jun 2022, 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("
"));

...read more

ICT Solutions 11 Jun 2022, 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;
}

To see video in YouTube.

...read more

ICT Solutions 2022-05-20 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);

To see video in YouTube.

...read more

ICT Solutions 2021-05-17 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

...read more

ICT Solutions 2020-04-28 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>

...read more

ICT Solutions 2020-04-28 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); */

To see video in YouTube.

...read more

ICT Solutions 2020-04-26 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
}

To see video in YouTube.

...read more

ICT Solutions 2020-04-26 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();
}

...read more

ICT Solutions 2020-04-25 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;
}

...read more

ICT Solutions 2020-04-25 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);

ICT Solutions 2020-04-25 16:13:20

JavaScript Dot Notation

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

myObj.cloud = "gray";

var myColor = myObj.cloud;

document.write(myColor);

ICT Solutions 2020-04-24 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";
    }
}

To see video in YouTube.

...read more

ICT Solutions 2020-03-22 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 /* ------- */

To see video in YouTube.

...read more

ICT Solutions 2020-03-20 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.

...read more

ICT Solutions 2020-03-19 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>

...read more

ICT Solutions 2020-03-11 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.

To see video in YouTube.

...read more

Available Services

Download Android Application