The most viewed posts

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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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 🔗 Copy 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.