wyjasnienie kodu, javascript

0

Prosze o wyjasnienie poszczegolnych linii (co one robia) bo nie moge zrozumiec tego fragmentu przykladu: (wiecej informacji w komentarazch).

z gory dzieki za pomoc, bo dla mnie to wyglada jak czarna magia po chinsku ;)

<body>
	<form method="post" name="form" action="../cgi-bin/zapisz.pl" onsubmit="return validate()">  //dlaczego dodaje to w "form" , zapisz.pl zawiera skrypt w perlu zapuisjacy dane do pliku tekstowego, dalczego tak to zrobiono ?
	<div id="przedmiot">
	<span>Przedmiot &nbsp; </span>
	<select id="par1" name="par1" onchange=fn_przedmiot()>  //calej zawartosci <select> do </select> nie rozumie, do czego to sluzy ?
		<option value="0" > -- Proszę wybrać przedmiot -- </option>
		<option value="1" >Techniki internetowe</option>
		<option value="2" >Programowanie proceduralne</option>
		<option value="3" >Programowanie obiektowe</option>
		<option value="4" >Jezyki formalne</option>
		<option value="5" >Bazy danych</option>
	</select>
	</div>
	<div id="grupa">
	<span>Grupa zajęciowa &nbsp;</span>
	<select id="par2" name="par2" onchange=fn_grupa()>
	</select>
	</div>


 

 
function fn_przedmiot()
{
	if ( document.form.par1.selectedIndex != 0 )  //co sprawdza ten warunek ?
	{
		document.getElementById("grupa").style.display = "block" ; //co to robi ?
		document.getElementById("dane").style.display = "none" ; //co to robi ?
		document.form.nazwisko.value = "" ; //co to robi ?
		document.form.imie.value = "" ;
		document.form.indeks.value = "" ;
		document.form.email.value = "" ;
		switch (document.form.par1.selectedIndex)  //co to robi ?
		{
		case 1:
			document.getElementById('par2').innerHTML = "<option value=\"0\"> --         //co to robi ?
			Proszę wybrać grupę -- </option><option value=\"1\">Grupa 11</option>
			<option value=\"2\">Grupa 12</option><option value=\"3\">Grupa 13</option";
			break;
		case 2:
			document.getElementById('par2').innerHTML = "<option value=\"0\"> --
			Proszę wybrać grupę -- </option><option value=\"1\">Grupa 21</option><option
			value=\"2\">Grupa 22</option><option value=\"3\">Grupa 23</option";
			break;
		case 3:
			document.getElementById('par2').innerHTML = "<option value=\"0\"> --
			Proszę wybrać grupę -- </option><option value=\"1\">Grupa 31</option><option
			value=\"2\">Grupa 32</option><option value=\"3\">Grupa 33</option";
			break;
		case 4:
			document.getElementById('par2').innerHTML = "<option value=\"0\"> --
			Proszę wybrać grupę -- </option><option value=\"1\">Grupa 41</option><option
			value=\"2\">Grupa 42</option><option value=\"3\">Grupa 43</option";
			break;
		case 5:
			document.getElementById('par2').innerHTML = "<option value=\"0\"> --
			Proszę wybrać grupę -- </option><option value=\"1\">Grupa 51</option><option
			value=\"2\">Grupa 52</option><option value=\"3\">Grupa 53</option";
			break;
		}
	}
	else
	{
		document.getElementById("grupa").style.display = "none" ;
		document.getElementById("dane").style.display = "none" ;
		document.form.nazwisko.value = "" ;
		document.form.imie.value = "" ;
		document.form.indeks.value = "" ;
		document.form.email.value = "" ;
	}
}


function fn_grupa()
{
	if ( document.form.par2.selectedIndex != 0 )
	{ 
		document.getElementById("dane").style.display = "block" ; 
	}
	else
	{
		document.getElementById("dane").style.display = "none" ;
		document.form.nazwisko.value = "" ;
		document.form.imie.value = "" ;
		document.form.indeks.value = "" ;
		document.form.email.value = "" ;
	}
}
1 
<body>
        <form method="post" name="form" action="../cgi-bin/zapisz.pl" onsubmit="return validate()">  //dlaczego dodaje to w "form" , zapisz.pl zawiera skrypt w perlu zapuisjacy dane do pliku tekstowego, dalczego tak to zrobiono ?

A czego tu nie rozumieć? Zadaniem formularza jest najwyraźniej zapisanie danych do pliku tekstowego. Skrypt zapisz.pl to właśnie robi. W polu action formularza podaje się skrypt, który ma zostać odpalony po wysłaniu formularza.

Skoro ktoś umieścił tam skrypt zapisujący dane do pliku tekstowego, to znaczy to, że chciał za pomocą formularza... zapisać dane do pliku tekstowego. Co tu jest do tłumaczenia?

        <select id="par1" name="par1" onchange=fn_przedmiot()>  //calej zawartosci <select> do </select> nie rozumie, do czego to sluzy ?

Gdy na elemencie select zajdzie zdarzenie change, zostanie odpalona funkcja fn_przedmiot(). Zdarzenie change na polu select zachodzi wówczas, gdy ktoś wybierze jakiś element z pola.

Dołączony kod JavaScript jest słaby. Nie jest najlepszym przykładem skryptu, delikatnie mówiąc.

Nie wiem czy jest jakikolwiek sens, żeby Ci to tłumaczyć linia po linii. To nie jest tak, że programowania człowiek uczy się WYŁĄCZNIE na przykładach: tzn. gdy widzisz jakąś linijkę, to albo wcześniej widziałeś taką samą, ktoś Ci ją wytłumaczysz i teraz rozumiesz co to jest, albo takiej jeszcze nie widziałeś, nikt Ci nie tłumaczył, więc nie wiesz co to jest.

Trzeba się nauczyć podstaw składni. Nazw funkcji, pól obiektu. Bo jedną linijkę można stworzyć naprawdę na miliony sposobów -- wszystkich się nie nauczysz. To przecież nie jest tak, że w języku naturalnym rozumiesz tylko zdania, które ktoś Ci wytłumaczył. Nie: uczysz się zasad. Zwrotów też się uczysz, ale zasady także nabywasz -- choćby automatycznie -- i dzięki temu zdobywasz klocki, z których możesz składać zdania lub na podstawie których możesz zdania rozumieć.

Podobnie jest w programowaniu.

        if ( document.form.par1.selectedIndex != 0 )  //co sprawdza ten warunek ?

Nasz formularz ma nazwę (atrybut name) po prostu "form". W tym formularzu znajduje się pole o nazwie "par1". Jest to pole typu select. Można się odnieść do pola par1 w formularzu form pisząc document.form.par1 -- ale to kiepskawy sposób.

Pole par to pole select. Sam to możesz sprawdzić: poszukaj w kodzie HTML pola, które ma atrubut name="par1". Będzie to ten select, o który pytałeś wcześniej.

selectedIndex to numer aktualnie wybranej opcji.

Cały warunek sprawdza, czy wybrano opcję inną niż "zerowa", czyli pierwsza -- pierwsza opcja ma indeks 0. Informatycy liczą od zera ;).

document.getElementById("grupa").style.display = "block" ; //co to robi ?

document.getElementById("grupa") zwraca element, który ma atrybut id ustawiony na "grupa". Zerknij w HTML. Masz tam kod <div id="grupa"> .... To właśnie ten element.

Następnie ustawiasz styl (style), czyli własność CSS o nazwie display. Ustawiasz ją na block. Jeśli nie wiesz co to CSS, powinieneś się tym zainteresować. Jest to absolutna podstawa: język arkuszy stylów wykorzystywany do tworzenia stron.

W skrócie: ta linijka upewnia się, że element o id grupa jest wyświetlony (block to sposób wyświetlenia -- właściwość display odpowiada właśnie za sposób wyświetlenia; ściślej: za rodzaj ramki generowanej przez element).

document.getElementById("dane").style.display = "none" ; //co to robi ?

Analogicznie jak powyżej, ale teraz pobieramy element o id dane i ustawiamy jego sposób wyświetlenia na none. none oznacza "brak". Czyli brak wyświetlenia. Czyli: ukrywamy element #dane.

. . .

Dalej mi się nie chce tłumaczyć. Zrób sobie jakiś tutorial.

1 użytkowników online, w tym zalogowanych: 0, gości: 1