juehan/jscript_basic.html

## jscript_basic.html
<html>
<head>
<title>
JohnL javascript practice
</title>
<script type="text/javascript">

var titleOfApplication = "JohnL application";
window.titleOfApplication;

document.write(window.titleOfApplication + "<br>");
document.write(titleOfApplication + "<br>");

function op(operator, a, b){

	"use strict";

	globInsideFunc = "this is global variable inside function";
	if(operator == '+')
		return a + b;
	else if(operator == '-')
		return a - b;
	else if(operator == '*')
		return a * b;
	else if(operator == '/')
		return a / b;
	else
	{
		document.write("error");
		return -1;
	}
}

//1+2
var sum = op("+", 1, 2);
document.write("1 + 2 = ", sum, "<br>");

//3 - 4
document.write("3 - 4 = ", op('-', 3, 4), "<br>");

//7 / 4
document.write("7 / 4 = ", op('/', 7, 4), "<br>");

//global variables
/*
1. Defining them with “ var ” outside a function
2. Adding something directly to the window object
3. Defining them anywhere without using “ var ”
*/

document.write(globInsideFunc);
document.write("<br><br>");
myName = "John Lee";
alert("My name is \n" + myName);


/*
array
*/

var family = [
	"john",
	"michelle",
	"ys",
	"yj"
];

for(var i = 0; i != family.length; i++)
	document.write(family[i], "<br>");

/*
object
*/

var father = {
	"firstname" : "john",
	"lastname" : "doe",
	"gender" : "male",
	"nickname" : "dad"
};

var mother = {
	"firstname" : "jane",
	"lastname" : "doe",
	"gender" : "female",
	"nickname" : "mom"
};

document.write(father);


/*
Exact match
*/
document.write("<hr>", "Exact match", "<br>");

if(myName === "John Lee"){
	document.write("exactly match", "<br>");
}else{
	document.write("Not exactly match", "<br>");
}

if(myName === "John lee"){
	document.write("exactly match", "<br>");
}else{
	document.write("Not exactly match", "<br>");
}

/*
Anonymous function

You can use an anonymous functions and have it execute immediately
when it is run, instead of having it refernce a function elsewhere
in your document.

Anonymous functions perform better than a normally defined function
because there is nothing to reference

*/

(function(){

	"use strict";
	alert("anonymous function example")

	familyMember = ["johnl", "janea", "ysl", "yjl"];
	for(var i = 0; i < familyMember.length; i++)
	{
		if(familyMember[i] === "misooka")
			alert(familyMember[i] + "\nthis is my wife!");
		else
			alert(familyMember[i]);
	}
})();

/*
callback function
*/

window.addEventListener("load", function(){
	alert("callback function")
}, false);


/*
method
if function is embedded within object, it is referred to method

*/

//define object
var getInformation = {
	//first method, "names"
	"names": function () {
		"use strict";
		alert("get names");
	},

	//second method, "checkForjohn"
	"checkForJohn" : function () {
		"use strict";
		alert("check the john");
	}
};

//get names on load
window.addEventListener("keypress", getInformation.names, false);

//check for john on click
document.addEventListener("click", getInformation.checkForJohn, false);


</script>

</head>
<body></body>

</html>
	<html>
	<head>
	<title>
	JohnL javascript practice
	</title>
	<script type="text/javascript">

	var titleOfApplication = "JohnL application";
	window.titleOfApplication;

	document.write(window.titleOfApplication + "<br>");
	document.write(titleOfApplication + "<br>");

	function op(operator, a, b){

	"use strict";

	globInsideFunc = "this is global variable inside function";
	if(operator == '+')
	return a + b;
	else if(operator == '-')
	return a - b;
	else if(operator == '*')
	return a * b;
	else if(operator == '/')
	return a / b;
	else
	{
	document.write("error");
	return -1;
	}
	}

	//1+2
	var sum = op("+", 1, 2);
	document.write("1 + 2 = ", sum, "<br>");

	//3 - 4
	document.write("3 - 4 = ", op('-', 3, 4), "<br>");

	//7 / 4
	document.write("7 / 4 = ", op('/', 7, 4), "<br>");

	//global variables
	/*
	1. Defining them with “ var ” outside a function
	2. Adding something directly to the window object
	3. Defining them anywhere without using “ var ”
	*/

	document.write(globInsideFunc);
	document.write("<br><br>");
	myName = "John Lee";
	alert("My name is \n" + myName);


	/*
	array
	*/

	var family = [
	"john",
	"michelle",
	"ys",
	"yj"
	];

	for(var i = 0; i != family.length; i++)
	document.write(family[i], "<br>");

	/*
	object
	*/

	var father = {
	"firstname" : "john",
	"lastname" : "doe",
	"gender" : "male",
	"nickname" : "dad"
	};

	var mother = {
	"firstname" : "jane",
	"lastname" : "doe",
	"gender" : "female",
	"nickname" : "mom"
	};

	document.write(father);



	/*
	Exact match
	*/
	document.write("<hr>", "Exact match", "<br>");

	if(myName === "John Lee"){
	document.write("exactly match", "<br>");
	}else{
	document.write("Not exactly match", "<br>");
	}

	if(myName === "John lee"){
	document.write("exactly match", "<br>");
	}else{
	document.write("Not exactly match", "<br>");
	}

	/*
	Anonymous function

	You can use an anonymous functions and have it execute immediately
	when it is run, instead of having it refernce a function elsewhere
	in your document.

	Anonymous functions perform better than a normally defined function
	because there is nothing to reference

	*/

	(function(){

	"use strict";
	alert("anonymous function example")

	familyMember = ["johnl", "janea", "ysl", "yjl"];
	for(var i = 0; i < familyMember.length; i++)
	{
	if(familyMember[i] === "misooka")
	alert(familyMember[i] + "\nthis is my wife!");
	else
	alert(familyMember[i]);
	}
	})();

	/*
	callback function
	*/

	window.addEventListener("load", function(){
	alert("callback function")
	}, false);


	/*
	method
	if function is embedded within object, it is referred to method

	*/

	//define object
	var getInformation = {
	//first method, "names"
	"names": function () {
	"use strict";
	alert("get names");
	},

	//second method, "checkForjohn"
	"checkForJohn" : function () {
	"use strict";
	alert("check the john");
	}
	};

	//get names on load
	window.addEventListener("keypress", getInformation.names, false);

	//check for john on click
	document.addEventListener("click", getInformation.checkForJohn, false);


	</script>

	</head>
	<body></body>

	</html>