• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Was bedeutet dieser Code???

S

superNova1014

Neues Mitglied
Hey Leute,

ich bin noch ein relativer Anfänger in Sachen Web-Programmierung.
HTML und CSS sind "okay", bei JavaScript hapert es aber an allen Enden

Vorgestern hab ich einen Code gefunden, den ich gerne aufnehmen würde, jedoch möchte ich ihn nicht weiter ohne jegliches Verständnis einfach hinein kopieren und deshalb meine Frage an euch, ob mir diesen, jemand Zeile für Zeile kommentieren könnte???

Für die Profis, dürfte das ja in wenigen Minuten passiert sein.+
Ich wäre euch wirklich sehr dankbar.

MFG
Aleks

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
#wrap{

margin: 80px auto;
width: 960px;
padding: 10px;
overflow: hidden;
background: #FAFAFA;
border-radius: 4px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
form{
background: #CCC;
border-radius: 2px;
padding: 10px;
}
table {
max-width: 100%;
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 20px;
}
table th{
background: #eae4ff;
}
table th,
table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
table {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
table th,
table td {
border-left: 1pxsolid#dddddd;
}
table tr:nth-child(odd){
background-color: #f9f9f9;
}
table tr:hover td
{
background-color: #f5f5f5;
}
table tr:first-child{
font-weight: bold;
}
</style>
</head>

<body>
<div id="wrap">
<h1>Testdatei für den Input </h1>
<form action="javascript:void(0);"id="the_form">
<input type="file"id="the_file"required="required"accept=".csv"/>
<input type="submit"value="Go"class="btn"/>
</form>
<div id="file_info"></div>
<div id="list"></div>
</div>

<script type="text/javascript">
function fileInfo(e){ /* was bedeutet das e genau??? kann ich auch andere buchstaben verwenden? */
var file = e.target.files[0];
if (file.name.split(".")[1].toUpperCase() != "CSV"){
alert('Invalid csv file !');
e.target.parentNode.reset();
return;
}else{
document.getElementById('file_info').innerHTML = "<p>File Name: "+file.name + " | "+file.size+" Bytes.</p>";
}
}
function handleFileSelect(){
var file = document.getElementById("the_file").files[0];
var reader = new FileReader();
var link_reg = /(http:\/\/|https:\/\/)/i;
reader.onload = function(file) {
var content = file.target.result;
var rows = file.target.result.split(/[\r\n|\n]+/);
var table = document.createElement('table');

for (var i = 0; i < rows.length; i++){
var tr = document.createElement('tr');
var arr = rows.split(',');
for (var j = 0; j < arr.length; j++){
if (i==0)
var td = document.createElement('th');
else
var td = document.createElement('td');
if( link_reg.test(arr[j]) ){
var a = document.createElement('a');
a.href = arr[j];
a.target = "_blank";
a.innerHTML = arr[j];
td.appendChild(a);
}else{
td.innerHTML = arr[j];
}
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('list').appendChild(table);
};
reader.readAsText(file);
}
document.getElementById('the_form').addEventListener('submit', handleFileSelect, false);
document.getElementById('the_file').addEventListener('change', fileInfo, false);
</script>

</body>

</html>
 
Das "e" ist ganz einfach ein Parameter der Funktion fileInfo. Innerhalb dieser Funktion lässt sich mit "e" dieser Parameter ansprechen.
Wenn dieser umbenannt wird, muss dieser auch innerhalb der Funktion anders angesprochen werden.

Aber es rentiert sich nicht dir irgendwas zu erklären wenn dir die einfachsten Grundlagen fehlen.
 
danke dir schon mal.
ja irgendwo hast du recht, jedoch möchte ich insbesondere den javascript teil verstehen, d. h. was z. B.

var file = e.target.files[0];
if (file.name.split(".")[1].toUpperCase() != "CSV"){

oder

var reader = new FileReader();
var link_reg = /(http:\/\/|https:\/\/)/i;
reader.onload = function(file) {
var content = file.target.result;

bedeutet
 
wenn das zu umständlich ist, könntest du mir vllt. in einem anderen Punkt helfen.

Und zwar erstellt die Funktion ja eine Tabelle in einer noch nicht sichtbaren div-box.
Jetzt würde ich gerne die <tr> und die <td> der Tabelle ansprechen und in ein Diagramm überführen.

Wie sage ich dem Programm jetzt, dass er einer bestimmten Zeile oder Spalte eine id vergeben soll, sodass ich diese ansprechen kann??
 
Code: 
var file = e.target.files[0];
if (file.name.split(".")[1].toUpperCase() != "CSV"){

Die erste Zeile speichert einen Dateinamen in der Variablen files. Die zweite Zeile zerlegt den Dateinamen in zwei Substrings, setzt den Teil hinter dem Punkt in Großbuchstaben um und fragt, ob er ungleich CSV ist.

Hier geht es um die File APi von JavaScript.
http://www.html5rocks.com/de/tutorials/file/dndfiles/
 
superNova1014 schrieb:
wenn das zu umständlich ist, könntest du mir vllt. in einem anderen Punkt helfen.

Und zwar erstellt die Funktion ja eine Tabelle in einer noch nicht sichtbaren div-box.
Jetzt würde ich gerne die <tr> und die <td> der Tabelle ansprechen und in ein Diagramm überführen.

Wie sage ich dem Programm jetzt, dass er einer bestimmten Zeile oder Spalte eine id vergeben soll, sodass ich diese ansprechen kann??
Zum Vergrößern anklicken....

Sorry, aber ich denke nicht dass man dir hier helfen kann ohne dass du die Grundlagen beherrscht.
Funktionen sind in der JS-Programmierung unerlässlich, weshalb du zumindest den Umgang damit beherrschen solltest.

Solltest du allerdings auch nur ein Wort von Tronjer verstanden haben, haben wir natürlich schon eine andere Gesprächsbasis.
 
ich habe das kapiert, ich verstehe auch vieles, jedoch kann ich es nicht selber von hand runter programmieren und suche dann andere Beispiele die ich umbauen kann.

wenn du mir bitte meine fragen mit dem ansprechen erläutern könntest, wäre schon mal sehr viel geschafft.

wenn nicht, muss ich mich iwie selber durchwurschteln ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben