「C-assign-2009-01-09-with-javascript」の編集履歴(バックアップ)一覧はこちら
C-assign-2009-01-09-with-javascript - (2009/02/12 (木) 16:17:23) の1つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
*2009年1月9日の宿題(Javascriptに因るアプローチ)
**序
Javascript (ECMA準拠だが)によるアプローチの場合、とりあえずブラウザ上での動作が基本であるが故、その土台となるHTMLを作成する必要が有る。そのHTMLソースはのちに示す。次にソース全文を掲載する。
#codehighlight(JavaScript){{
//const variable
str_id_form = "form_root";
str_id_input_textarea = "input_array_elements";
str_id_input_textbox = "input_a_element";
str_id_output_results = "output_results";
str_style_results =
"height : 40%; border: 1px solid #ccc; font-family: 'Courier New', monospace;";
//Point Constructer
function Point(x, y)
{
this.x = x;
this.y = y;
}
/*Point.prototype = {
x : 0,
y : 0
}*/
function Line(poly_array)
{
this.from = new Point(poly_array[0], poly_array[1]);
this.to = new Point(poly_array[2], poly_array[3]);
this.setLength();
}
Line.prototype = {
setLength : function()
{
this.length = Math.sqrt( Math.pow(this.from.x - this.to.x,2)
+ Math.pow(this.from.y - this.to.y,2) );
/*
alert(typeof(this.from.x) +":"+ this.from.x + "\n"
+ typeof(this.from.y) +":"+ this.from.y + "\n"
+ typeof(this.to.x) +":"+ this.to.x + "\n"
+ typeof(this.to.y) +":"+ this.to.y + "\n"
+ typeof(this.length) +":"+ this.length);
*/
return this.length;
},
toString : function()
{
return "(" + this.from.x + "," + this.from.y + ")," +
"(" + this.to.x + "," + this.to.y + ")";
},
print : function(idx)
{
document.getElementById(str_id_output_results).innerHTML
+= ++idx + ":" + this.toString() + ":" + this.length + "\n";
}
}
// this must be friend function in C++? OR, use this obj/pointer?
function CompareLineLength(LineA, LineB)
{
return (LineA.length - LineB.length);
}
function inputData()
{
var str = document.getElementById(str_id_input_textarea).value;
var Lines = new Array();
var data_array = str.split('\n');
for(i=0; i<data_array.length; ++i)
{
if(temp_poly = data_array[i].match(/\d+/g))
Lines.push(new Line(temp_poly));
}
Lines.sort(CompareLineLength);
for(i=0; i<Lines.length; ++i)
{
Lines[i].print(i);
}
}
function setRandomData()
{
var str = "";
for(i=0; i<100; ++i)
{
for(j=0; j<4; ++j)
{
str += Math.floor( Math.random() * 1000);
if(j==3)
break;
str += ",";
}
str += "\n";
}
document.getElementById(str_id_input_textarea).innerHTML = str;
}
function test()
{
var A = new Array(new Line([0, 0, 6, 8]));
A.push(new Line([0, 0, 3, 4]));
A.sort(CompareLineLength);
alert(A[0].length +","+A[1].length);
}
function init()
{
var body = document.getElementsByTagName("body")[0];
var form = document.createElement("form");
form.setAttribute("id", str_id_form);
form.setAttribute("style", "height : 40%");
/*
var head_of_control = document.createElement("h2");
var head_of_results = head_of_control.cloneNode(false);
head_of_control.innerHTML = "Control";
head_of_results.innerHTML = "Results";
*/
var content_of_results = document.createElement("pre");
content_of_results.setAttribute("id", str_id_output_results);
content_of_results.setAttribute("style",
str_style_results);
content_of_results.innerHTML = "";
var tbox = document.createElement("input");
tbox.setAttribute("id", str_id_input_textbox);
var tarea = document.createElement("textarea");
tarea.setAttribute("id", str_id_input_textarea);
var button_start = document.createElement("input");
button_start.setAttribute("type", "button");
button_start.setAttribute("value", "Start");
button_start.addEventListener("click", inputData, false);
var button_set_random = document.createElement("input");
button_set_random.setAttribute("type", "button");
button_set_random.setAttribute("value", "Randomize");
button_set_random.addEventListener("click", setRandomData, false);
var field_one = document.createElement("fieldset");
field_one.appendChild(document.createElement("legend"));
var field_any = field_one.cloneNode(true);
var field_ope = field_one.cloneNode(true);
field_one.getElementsByTagName("legend").item(0).innerHTML = "One Element";
field_any.getElementsByTagName("legend").item(0).innerHTML = "Some Elements";
field_ope.getElementsByTagName("legend").item(0).innerHTML = "Operations";
field_one.appendChild(tbox);
field_any.appendChild(tarea);
field_ope.appendChild(button_start);
field_ope.appendChild(button_set_random);
form.appendChild(field_one);
form.appendChild(field_any);
form.appendChild(field_ope);
body.appendChild(form);
body.appendChild(content_of_results);
}
window.addEventListener("load", init, false);
}}
#codehighlight(HTML){{
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>オブジェクト指向</title>
<script type="text/javascript" src="softwareEx_200901.js">
</script>
</head>
<body>
<h1>オブジェクト指向</h1>
</body>
</html>
}}
*2009年1月9日の宿題(Javascriptに因るアプローチ)
**序
Javascript (ECMA準拠だが)によるアプローチの場合、とりあえずブラウザ上での動作が基本であるが故、その土台となるHTMLを作成する必要が有る。そのHTMLソースはのちに示す。次にソース全文を掲載する。
#codehighlight(JavaScript){{
//const variable
str_id_form = "form_root";
str_id_input_textarea = "input_array_elements";
str_id_input_textbox = "input_a_element";
str_id_output_results = "output_results";
str_style_results =
"height : 40%; border: 1px solid #ccc; font-family: 'Courier New', monospace;";
//Point Constructer
function Point(x, y)
{
this.x = x;
this.y = y;
}
/*Point.prototype = {
x : 0,
y : 0
}*/
function Line(poly_array)
{
this.from = new Point(poly_array[0], poly_array[1]);
this.to = new Point(poly_array[2], poly_array[3]);
this.setLength();
}
Line.prototype = {
setLength : function()
{
this.length = Math.sqrt( Math.pow(this.from.x - this.to.x,2)
+ Math.pow(this.from.y - this.to.y,2) );
/*
alert(typeof(this.from.x) +":"+ this.from.x + "\n"
+ typeof(this.from.y) +":"+ this.from.y + "\n"
+ typeof(this.to.x) +":"+ this.to.x + "\n"
+ typeof(this.to.y) +":"+ this.to.y + "\n"
+ typeof(this.length) +":"+ this.length);
*/
return this.length;
},
toString : function()
{
return "(" + this.from.x + "," + this.from.y + ")," +
"(" + this.to.x + "," + this.to.y + ")";
},
print : function(idx)
{
document.getElementById(str_id_output_results).innerHTML
+= ++idx + ":" + this.toString() + ":" + this.length + "\n";
}
}
// this must be friend function in C++? OR, use this obj/pointer?
function CompareLineLength(LineA, LineB)
{
return (LineA.length - LineB.length);
}
function inputData()
{
var str = document.getElementById(str_id_input_textarea).value;
var Lines = new Array();
var data_array = str.split('\n');
for(i=0; i<data_array.length; ++i)
{
if(temp_poly = data_array[i].match(/\d+/g))
Lines.push(new Line(temp_poly));
}
Lines.sort(CompareLineLength);
for(i=0; i<Lines.length; ++i)
{
Lines[i].print(i);
}
}
function setRandomData()
{
var str = "";
for(i=0; i<100; ++i)
{
for(j=0; j<4; ++j)
{
str += Math.floor( Math.random() * 1000);
if(j==3)
break;
str += ",";
}
str += "\n";
}
document.getElementById(str_id_input_textarea).innerHTML = str;
}
function test()
{
var A = new Array(new Line([0, 0, 6, 8]));
A.push(new Line([0, 0, 3, 4]));
A.sort(CompareLineLength);
alert(A[0].length +","+A[1].length);
}
function init()
{
var body = document.getElementsByTagName("body")[0];
var form = document.createElement("form");
form.setAttribute("id", str_id_form);
form.setAttribute("style", "height : 40%");
/*
var head_of_control = document.createElement("h2");
var head_of_results = head_of_control.cloneNode(false);
head_of_control.innerHTML = "Control";
head_of_results.innerHTML = "Results";
*/
var content_of_results = document.createElement("pre");
content_of_results.setAttribute("id", str_id_output_results);
content_of_results.setAttribute("style",
str_style_results);
content_of_results.innerHTML = "";
var tbox = document.createElement("input");
tbox.setAttribute("id", str_id_input_textbox);
var tarea = document.createElement("textarea");
tarea.setAttribute("id", str_id_input_textarea);
var button_start = document.createElement("input");
button_start.setAttribute("type", "button");
button_start.setAttribute("value", "Start");
button_start.addEventListener("click", inputData, false);
var button_set_random = document.createElement("input");
button_set_random.setAttribute("type", "button");
button_set_random.setAttribute("value", "Randomize");
button_set_random.addEventListener("click", setRandomData, false);
var field_one = document.createElement("fieldset");
field_one.appendChild(document.createElement("legend"));
var field_any = field_one.cloneNode(true);
var field_ope = field_one.cloneNode(true);
field_one.getElementsByTagName("legend").item(0).innerHTML = "One Element";
field_any.getElementsByTagName("legend").item(0).innerHTML = "Some Elements";
field_ope.getElementsByTagName("legend").item(0).innerHTML = "Operations";
field_one.appendChild(tbox);
field_any.appendChild(tarea);
field_ope.appendChild(button_start);
field_ope.appendChild(button_set_random);
form.appendChild(field_one);
form.appendChild(field_any);
form.appendChild(field_ope);
body.appendChild(form);
body.appendChild(content_of_results);
}
window.addEventListener("load", init, false);
}}
#codehighlight(HTML){{
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>オブジェクト指向</title>
<script type="text/javascript" src="softwareEx_200901.js">
</script>
</head>
<body>
<h1>オブジェクト指向</h1>
</body>
</html>
}}
表示オプション
横に並べて表示:
変化行の前後のみ表示: