i can code! for Web.: JavaScript Exercises

Showing posts with label JavaScript Exercises. Show all posts

Friday, October 21, 2011

Implement Slider using HTML5 an JavaScript

This example show how to implement a slider using HTML5 and JavaScript. To demonstrate the effect, code from "jQuery exercise: change font-size" is borrowed, to change text size when slide is changed.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
 font-size: 20px
}

</style>
</head>
<body>
<center>
<input id="slide" type="range" min="8" max="50" value="20"? onChange="changeTextSize(this.value)" step="1"/>
<p id="mytext">Change TEXT size by Slider</p>

</center>
<script>

function changeTextSize(fontsize) {
 $("#mytext").css("font-size", fontsize+"px");
}

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

Thursday, October 20, 2011

Javascript Exercise: Get text and change text

example:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input and change text</h1>
<p id="mytextchanged">Hello!</p>
<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        document.getElementById("mytextchanged").innerHTML = msg;
    }
</script>

</body>
</html>

Read input text using JavaScript

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input</h1>

<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        alert(msg);
    }
</script>

</body>
</html>

Sunday, August 28, 2011

Javascript Exercise: Check if the browser support canvas

We can use the code document.createElement('canvas').getContext to check if the browser support HTML5 canvas feature. If the browser support HTML5 canvas feature, it return true, otherwise return false.

example:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Exercise</title>

<script type="text/javascript">



function CheckCanvas(){



	if(document.createElement('canvas').getContext){

		alert("OK. Your browser support canvas");

	}else{

		alert("Sorry! your brwser doesn't support canvas");

	}



}





function htmlonload(){

  CheckCanvas();

}

</script>

</head>

<body onload="htmlonload();">

JavaScript Exercise

</body>

</html>

Friday, August 5, 2011

Javascript Exercise: Math.round(), Math.round(), Math.ceil() and Math.floor()

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){
 var result = "";
 result += "Math.round(1.4) = " + Math.round(1.4) + "\n";
 result += "Math.round(1.5) = " + Math.round(1.5) + "\n";
 result += "Math.ceil(1.5) = " + Math.ceil(1.5) + "\n";
 result += "Math.floor(1.5) = " + Math.floor(1.5) + "\n";
 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Tuesday, August 2, 2011

JavaScript: Math.max and Math.min

Math.max and Math.min return the maximum and minimum from a list of numbers.

Example

Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Saturday, July 23, 2011

JavaScript Exercises - sort() of Array

example:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Exercise</title>

<script type="text/javascript">



function exercise(){

 var stringsource = "A man and a pen";

 var result = "sort() of Array= " + stringsource.split(" ").sort() + "\n";



 alert(result);

}





function htmlonload(){

exercise();

}

</script>

</head>

<body onload="htmlonload();">

JavaScript Exercise

</body>

</html>

JavaScript Exercises - reverse() of Array

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){
 var stringsource = "A man and a pen";
 var result = "reverse() of Array= " + stringsource.split(" ").reverse() + "\n";

 alert(result);
}


function htmlonload(){
exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Thursday, July 21, 2011

JavaScript Exercises - toUpperCase() and toLowerCase().

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){
 var stringsource = "A man and a pen";
 var result = "stringsource = " + stringsource + "\n\n";
 result += "toUpperCase(): " + stringsource.toUpperCase() + "\n";
 result += "toLowerCase(): " + stringsource.toLowerCase() + "\n";
 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Wednesday, July 20, 2011

JavaScript Exercises - pop(), shift(), push() and unshift()

pop() and shift() remove and return the last(pop) or the first(shift) element element from a array.

push() and unshift() add a element into the array in the end (push) or in the front (unshift).

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var stringsource = "A man and a pen";
 var stringarray = stringsource.split(" ");


 var result = "stringsource = " + stringsource + "\n\n";
 result += "stringarray:\n" + stringarray + "\n\n";

 result += "pop(): " + stringarray.pop() + "\n" + " - result = " + stringarray + "\n\n";
 result += "shift(): " + stringarray.shift() + "\n" + " - result = " + stringarray + "\n\n";

 stringarray.push("push");
 result += "push(\"push\"): - result = " + stringarray + "\n\n";

 stringarray.unshift("unshift");
 result += "unshift(\"unshift\"): - result = " + stringarray + "\n\n";


 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

JavaScript Exercises - split() and join() functions of string

split() return a array of string, the parameter determine what character to split the string.

join() join all the elements in a array to form a string, the parameter to join() will be inserted between each element.

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var stringsource = "A man and a pen";
 var stringarray_SP = stringsource.split(" ");
 var stringarray_a = stringsource.split("a");
 var stringjoin = stringarray_SP.join(".");

 var result = "stringsource = " + stringsource + "\n\n";
 result += "stringarray_SP:\n" + stringarray_SP + "\n\n"
 result += "stringarray_a:\n" + stringarray_a + "\n\n";
 result += "stringjoin:\n" + stringjoin + "\n";

 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

JavaScript Exercises - Date object

A Date object contains a Number indicating a particular instant in time to within a millisecond. Such a Number is called a time value. A time value may also be NaN, indicating that the Date object does not represent a specific instant of time.

Time is measured in ECMAScript in milliseconds since 01 January, 1970 UTC. In time values leap seconds are ignored. It is assumed that there are exactly 86,400,000 milliseconds per day. ECMAScript Number values can represent all integers from –9,007,199,254,740,992 to 9,007,199,254,740,992; this range suffices to measure times to millisecond precision for any instant that is within approximately 285,616 years, either forward or backward, from 01 January, 1970 UTC.

The actual range of times supported by ECMAScript Date objects is slightly smaller: exactly –100,000,000 days to 100,000,000 days measured relative to midnight at the beginning of 01 January, 1970 UTC. This gives a range of 8,640,000,000,000,000 milliseconds to either side of 01 January, 1970 UTC.

The exact moment of midnight at the beginning of 01 January, 1970 UTC is represented by the value +0.

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var ToDay = new Date();

 var result ="ToDay = new Date()\n\n";
 result += "Date.parse(ToDay) = " + Date.parse(ToDay) + "\n\n"
 result += "Date(Date.parse(ToDay)) = \n" + new Date(Date.parse(ToDay)) + "\n";


 alert(result);
}


function htmlonload(){
 exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Monday, July 18, 2011

JavaScript Exercises - string operation: slice, substr and substring

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var msg = "Hello http://icancode-4-web.blogspot.com/";
 var result = "";
 result = "msg.slice(13, 40): " + msg.slice(13, 40) + "\n";
 result += "msg.substr(13, 14): " + msg.substr(13, 14) + "\n";
 result += "msg.slice(40, 13): " + msg.slice(40, 13) + "\n";
 result += "msg.substr(40, 13): " + msg.substr(40, 13) + "\n";
 result += "msg.substring(40, 13): " + msg.substring(40, 13) + "\n";

 alert(result);
}


function htmlonload(){
 exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Thursday, July 14, 2011

JavaScript Exercises - arguments to function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function handle_arguments(){
 var number_of_arguments = arguments.length;
 var list_of_arguments = "";
 var msg;
 var i;
 
 for(i = 0; i < number_of_arguments; i++){
  list_of_arguments += i + " : " + arguments[i] + "\n";
 }

 msg = "Number of arguments = " + number_of_arguments + "\n"
   + "List of arguments : \n" + list_of_arguments;
 alert(msg);
}

function exercise(){

 var j = "Javascript Exercise";
  var not_init;
 var its_null = null;
 handle_arguments(1, "Hello", 3, j, not_init, its_null);
}


function htmlonload(){
exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Friday, June 3, 2011

JavaScript: Alert

example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 alert("Hello, i can code!");
</script>
<meta charset="UTF-8">
<title>JavaScript: Alert</title>
</head>
<body>
<h1>JavaScript: Alert</h1>


</body>
</html>