UNPKG

6.09 kBHTMLView Raw
1<html>
2 <head>
3 <meta charset="UTF-8">
4 <link rel="stylesheet" type="text/css" href="css/c3.css">
5 <link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
6 <link rel="stylesheet" href="js/codemirror/addon/hint/show-hint.css">
7 <style>
8 body, fieldset, div { font-size:large; }
9 button , input, select { font-size:large; }
10 textarea { width:95%; }
11 fieldset { width:90%; height:98%; }
12 </style>
13 </head>
14 <body onload="E.loadEditor(codebox);run();">
15 <div style="width:100%; height:400px;">
16 <div style="width:50%;height:95%;float:left;">
17 <fieldset>
18 <legend>JavaScript</legend>
19 <textarea id="codebox" class="lined" style="height:95%" onmouseup="onLineNumber();">
20 function f(x, y) {
21 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
22 }
23 G.curve3d(f);
24</textarea>
25 </div>
26 <div style="width:50%;height:95%;float:left;">
27 <fieldset>
28 <legend>Graph</legend>
29 <div id="chart" style="height:95%"></div>
30 </fieldset>
31 </div>
32 </div>
33 <center>
34 <div style="width:98%">
35 <input type="radio" name="mode" value="code" checked="true"/>code
36 <input type="radio" name="mode" value="line"/>line &nbsp;
37 <input type="file" id="filebox" name="filebox" style="width:250px"/>
38 <button onclick="load()">load</button>
39 <button onclick="run()">run</button>
40 <button onclick="save()">save</button>
41<!--server
42 <select id="filename">
43 <option value="hist1.js">hist1.js</option>
44 <option value="plot1.js">plot1.js</option>
45 <option value="curveT.js">curveT.js</option>
46 </select>
47server-->
48 </div>
49 <div style="width:98%;height:100px">
50 <textarea id="msgbox" style="width:100%;height:100%"></textarea>
51 </div>
52 </center>
53 <script src="U.js"></script>
54 <script>
55 U.use("R.js", "R");
56 U.use("G.js", "G");
57 U.use("E.js", "E");
58 var filebox = document.getElementById('filebox');
59 var codebox = document.getElementById('codebox');
60 var msgbox = document.getElementById('msgbox');
61 var chartbox= document.getElementById('chart');
62 var filename= "test.js";
63 var lineNo = 1;
64 var mode, code, lines, results;
65
66 function msgClear() { msgbox.value = ""; }
67
68 function getRadioValue(name) {
69 return document.querySelector('input[name='+name+']:checked').value;
70 }
71
72 function handleFileSelect(evt) {
73 msgClear();
74 var reader = new FileReader();
75 reader.onload = function(e) {
76 codebox.value = reader.result;
77 E.editor.setValue(codebox.value);
78 run();
79 };
80 filename = evt.target.files[0].name;
81 reader.readAsText(evt.target.files[0]);
82 }
83
84 filebox.addEventListener('change', handleFileSelect, false);
85
86 function onLineNumber() {
87 if (mode === "line") {
88 lineNo = codebox.value.substr(0, codebox.selectionStart).split("\n").length;
89 var msg = "";
90 if (lineNo < results.length) {
91 var r = results[lineNo];
92 msg += "line "+lineNo+" : "+lines[lineNo];
93 if (r.error !== null)
94 msg += "\nerror : "+r.error;
95 msg += "\nreturn : "+r.value;
96 }
97 msgbox.value = msg;
98 }
99 }
100
101 function codekeyup(event) {
102 onLineNumber();
103 }
104
105 codebox.addEventListener('keyup', codekeyup, false);
106
107 function run() {
108 code = E.editor.getValue();
109 mode = getRadioValue("mode");
110 msgbox.value = "running...";
111 if (mode === "code") {
112 try {
113 eval("G.newGraph(chartbox);"+code);
114 } catch (e) {
115 msgbox.value = "error : ";
116 if (typeof(e.lineNumber) !== "undefined")
117 msgbox.value += "line="+e.lineNumber+" column="+e.columnNumber;
118 msgbox.value += "\nmessage : "+e.message;
119 }
120 } else {
121 lines = ["G.newGraph(chartbox)"].concat(code.split("\n"));
122 results = [];
123 for (var i in lines) {
124 var v = null, e=null;
125 try {
126 v=eval(lines[i]);
127 } catch (error) {
128 e=error;
129 }
130 results.push({value:v,error:e});
131 }
132 }
133 msgbox.value += "finished!";
134 }
135 </script>
136 </body>
137</html>
138
139<!--
140 var head = codebox.value.substr(0, codebox.selectionStart);
141// alert(head);
142 if (event.keyCode == 190) { // keyCode(190)=='.'
143 var lastLine = head.split(",").pop();
144 var m = lastLine.match(/([\w]+)\.$/);
145 if (m !== null) {
146 var lastWord = m[1];
147 var obj = eval(lastWord);
148/* var keys = [];
149 for (var key in obj) {
150 keys.push(key);
151 }
152 alert("obj.keys="+keys);*/
153 alert("obj.keys="+allMembers(obj));
154 }
155// var lastWord = lastLine.match(/([\w]+)\.$/)[1];
156// var lastWord = /[\w]+\.$/.match(lastLine);
157 }
158// alert("event="+event.keyCode);
159// alert("event="+JSON.stringify(event));
160/* if (event.key === '.') {
161 var head = codebox.value.substr(0, codebox.selectionStart);
162 alert(head);
163 } else {
164 return true;
165 }
166*/
167
168 function isObject(val) {
169 if (val === null) { return false;}
170 return ( (typeof val === 'function') || (typeof val === 'object') );
171 }
172
173 function allMembers(o) {
174 var members = [], pmembers=[];
175 if (typeof o === "string")
176 o = String;
177 if (isObject(o)) {
178 members = Object.getOwnPropertyNames(o);
179 // C.log("members="+members);
180 var proto = Object.getPrototypeOf(o);
181 if (isObject(proto)) {
182 pmembers = Object.getOwnPropertyNames(proto);
183 // C.log("pmembers="+pmembers);
184 }
185 }
186 return members.concat(pmembers);
187 }
188x = rnorm(1000, 5, 2);
189str(x);
190hist(x, "x", "normalized");
191curve("dnorm(x, 5,2)", "N(5,2)", 0.2);
192/*
193 function codekeyup(event) {
194 if (event.keyCode == 13) {
195 var lines = codebox.value.trim().split("\n");
196 var lastLine = lines.pop().trim();
197 if (lastLine.substring(0,2) !== "//") {
198 var result = eval(lastLine);
199// C.log("lastLine="+lastLine+" result="+result);
200 if (lastLine.indexOf("=")<0 && typeof(result)!=="undefined")
201 codebox.value = codebox.value+"// "+result+"\n";
202 }
203 codebox.scrollTop = codebox.scrollHeight;
204 } else {
205 return true;
206 }
207 }
208*/
209x = rnorm(1000, 5, 2);
210str(x);
211hist(x, {name:"x", mode:"normalized"});
212curve(fx(dnorm, 5, 2), {step:0.2});
213
214-->