Javascripti kysymykset

[skorpioni-cb]

Ajattelin tehdä tänne tälläisen, koska on jo C++-kysymyksiä-topikki.

Oma kysymykseni:

Miten voi muuttaa tekstin oletusväriä. (Ei Body-tagin avulla.)

EDIT:

Tarkoitin javascriptillä.

[Koodiapina]

Tuo hoituu CSS:llä.

Code: Select all

* { color: #ff0000; }

[Henkru]

Googleakin saa toki käyttää. Mm "javascript change element style" tms, varmasti löytyy.

Code: Select all

document.getElementById("teksti").style.color = "red";

Tietenki sille elementille, missä teksti on niin mitää antaa id.

[Sir Walrus]

Niin, eli minulla on koodi jonka pitäisi vaihtaa eräs laatikko näkyväksi ja näkymättömäksi yhdellä napilla. Voi ko sen tehdä näin yhdellä funktiolla, tuo koodi kun ei toimi:

Code: Select all

function paneloi(poisko) {
 if (poisko=='joo') {
  document.getElementById('source').style.visibility='hidden';
  document.getElementById('nappi').innerHTML="Lähdekoodi";
  document.getElementById('nappi').onClick="paneloi()";
 }
 else {
  document.getElementById('source').style.visibility='visible';
  document.getElementById('nappi').innerHTML="Lähdekoodi pois";
  document.getElementById("nappi").onClick="paneloi('joo')";
 }
}

[valscion]

Niin, eli minulla on koodi jonka pitäisi vaihtaa eräs laatikko näkyväksi ja näkymättömäksi yhdellä napilla. Voi ko sen tehdä näin yhdellä funktiolla, tuo koodi kun ei toimi:

Code: Select all

...koodi...

Sainkin askarrella tämän kanssa hetken. Näyttäisi siltä, ettei onclick:iä voi vaihtaa javascriptillä. Sen sijaan voisit toteuttaa nappulan käyttämällä linkkiä ja siinä href-kohdalla javascript:<tapahtuma> tyylistä linkitystä Ettei menisi ihan liian sekavaksi niin tässäpä esimerkit:
http://vesq.jouluserver.com/examples/js_changeevent.htm
http://vesq.jouluserver.com/examples/js ... bility.htm
Katsele noiden lähdekoodeja

EDIT:

Jos taas välttämättä haluat käyttää muuta kuin linkkiä nappulana, niin silloin sinun täytyy tehdä kaksi erillistä nappulaa, joista toinen on aina piilotettuna. Tähän tapaan:
http://vesq.jouluserver.com/examples/js ... bility.htm

[m1c]

Koetatte tehdä asian liian monimutkaisesti. Omassa esimerkissäni nappin klikkauseventtiin liitetään anonyymi funktio, joka klikatessa vaihtaa "kappaleen" visibilityä kahden vaihtoehdon välillä. (If-lause olisi selkeämpi, mutta tuohon ternäärioperaattori on juuri omiaan) Anonyymien funktioiden määrittelyn tilalle voi laittaa myös normaalin funktion nimen, jos katsoo tarpeelliseksi jaotella koodia tarkemmin.

Esimerkki

[Latexi95]

Taidampa vähän kysellä, että tämä viestiketju ei kokonaan unohdu.
Eli siis miten saisin muutettua kirjoituskohdan paikkaa "textarea":ssa?
Tässä aiheeseen liittyvää koodia:

Code: Select all

function tag_ins(fieldId, tag)
{
	field=document.getElementById(fieldId);
	field.focus();
	if (field.selectionStart > 0)
	{
		var f = field.value.substring(0, field.selectionStart);
	}
	else
	{
		var f = "";
	}
	if (field.selectionStart < field.selectionEnd)
	{
		var text = field.value.substring(field.selectionStart, field.selectionEnd);
	}
	else
	{
		var text = "";
	}
	if (field.selectionEnd < field.value.length)
	{
		var l = field.value.substring(field.selectionEnd, field.value.length-1);
	}
	else
	{
		var l = "";
	}
	var last = field.selectionEnd;
	field.value = f + "["+tag+"]"+text+"[/"+tag+"]"+l;
} 

Kuten varmaan huomaatte tagien laittamisesta on kyse.

[temu92]

Code: Select all

input.focus();
input.setSelectionRange(selectionStart, selectionEnd);

[Latexi95]

Kiitos.

[Pyromanius]

Väsäilen tässä jonkinlaista AJAX-systeemiä, mutten saa tuota koodia millään toimimaan. Siinä on kai jälleen kerran jokin pikkujuttu jota en huomaa.
httpPyynto.status palauttaa siis kokoajan nollaa, eikä mitään ilmeisesti tule perille.

Code: Select all

var httpPyynto;
function luoXMLHttpRequest() {
  if (window.ActiveXObject) 
  {
    httpPyynto= new ActiveXObject("Microsoft.XMLHttp");
  }

  else if (window.XMLHttpRequest) 
  {
    httpPyynto= new XMLHttpRequest();
  }
}

function aloitaPostPyynto() {
  luoXMLHttpRequest();
  httpPyynto.onreadystatechange = kasitteleTilanMuutos;
  var url="[url]";
  httpPyynto.open("GET",url,true);
  httpPyynto.send(null);
}


function kasitteleTilanMuutos() {
  if (httpPyynto.readyState == 4)
   {
     //testaus:
     alert(httpPyynto.status); //0
     haeSolmut(httpPyynto.responseText);
   }
   
   }

function haeSolmut(dok) 
  {
    //testi tuokin
    document.write(dok);
  }


aloitaPostPyynto();

[KilledWhale]

Suosittelen kokeilemaan prototypeä. Se helpottaa paljon ajaxin ja domin käyttöä
Jos kivoja efektejä haluaa myös scriptaculous on hyödyllinen härpäke. Sisältää useita valmiita efektejä sekä muuta hyödyllisyyttä.

[Sly_Jack0]

BUMP!

Elikkäs, ongelmani on rekisteröitymislomakkeen tarkistus, tai oikeastaan sen toimimattomuus. Eli siis, miksi rekisteröityminen menee aina läpi?

form.js

Code: Select all

function notEmpty(elem,helperMsg)  {
	if (elem.value.length == 0) {
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}

function isAlphanumeric(elem,helperMsg) {
	var alphaExp = /^[a-zA-Z0-9]+$/;
	
	if (elem.value.match(alphaExp)) {
		return true;
	} else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function doesMatch(elem1,elem2,helperMsg) {
	if (elem1.value == elem2.value) {
		return true;
	} else {
		alert(helperMsg);
		elem2.focus();
		return false;
	}
}

function checkLength(elem,min,max) {
	var uInput = elem.value;
	
	if (uInput.length >= min && uInput.length <= max {
		return true;
	} else {
		alert("Nimimerkin pituus tulee olla " + min + "-" + max + " merkkiä.");
		elem.focus();
		return false;
	}
}

function emailValidator(elem,helperMsg) {
	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9+.\-]+\.[a-zA-Z0-9]{2,4}$/;
	
	if (elem.value.match(emailExp)) {
		return true;
	} else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function validateForm() {
	var nick = document.getElementById('nick');
	var pass = document.getElementById('password');
	var rePass = document.getElementById('rePassword');
	var email = document.getElementById('email');
	
	if (!notEmpty(nick,"Anna nimimerkki!")) {
		return false;
	}
	
	if (!checkLength(nick,3,15)) {
		return false;
	}
	
	if (!isAlphanumeric(nick,"Nimimerkki saa sisältää vain kiraimia ja numeroita!")) {
		return false;
	}
	
	if (!notEmpty(pass,"Anna salasana!")) {
		return false;
	}
	
	if (!doesMatch(pass,rePass,"Salasanat eivät täsmää!")) {
		return false;
	}
	
	if (!emailValidator(email,"Anna kelvollinen sähköpostiosoite!")) {
		return false;
	}
	
	return true;
}

function checkLogin() {
	var nick = document.getElementById('nick');
	var pass = document.getElementById('password');
	
	if (!notEmpty(nick,"Anna nimerkki.")) {
		return false;
	}
	
	if (!notEmpty(pass,"Anna salasana.")) {
		return false;
	}
	
	return true;
}

Itse lomake (skripti on liitetty aikaisemmin <head>-tagissa):

Code: Select all

<h1>Rekister&ouml;idy</h1>

<form action='inc/processRegister.php' method='post' onsubmit='return validateForm()'>
	Nimimerkki: (3-15 merkki&auml)<br />
	<input type='text' name='nick' id='nick' onchange='return validateForm()' /><br />
	
	Salasana:<br />
	<input type='password' name='password' id='password' /><br />
	Salasana uudelleen:<br />
	<input type='password' name='rePassword' id='rePassword' /><br />
	
	S&auml;hk&ouml;posti:<br />
	<input type='text' name='email' id='email' /><br />
	
	<input type='submit' value='Rekister&ouml;idy' />
</form>

[DJ-Filbe]

BUMP!

Elikkäs, ongelmani on rekisteröitymislomakkeen tarkistus, tai oikeastaan sen toimimattomuus. Eli siis, miksi rekisteröityminen menee aina läpi?

form.js

Code: Select all

function notEmpty(elem,helperMsg)  {
	if (elem.value.length == 0) {
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}

function isAlphanumeric(elem,helperMsg) {
	var alphaExp = /^[a-zA-Z0-9]+$/;
	
	if (elem.value.match(alphaExp)) {
		return true;
	} else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function doesMatch(elem1,elem2,helperMsg) {
	if (elem1.value == elem2.value) {
		return true;
	} else {
		alert(helperMsg);
		elem2.focus();
		return false;
	}
}

function checkLength(elem,min,max) {
	var uInput = elem.value;
	
	if (uInput.length >= min && uInput.length <= max {
		return true;
	} else {
		alert("Nimimerkin pituus tulee olla " + min + "-" + max + " merkkiä.");
		elem.focus();
		return false;
	}
}

function emailValidator(elem,helperMsg) {
	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9+.\-]+\.[a-zA-Z0-9]{2,4}$/;
	
	if (elem.value.match(emailExp)) {
		return true;
	} else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function validateForm() {
	var nick = document.getElementById('nick');
	var pass = document.getElementById('password');
	var rePass = document.getElementById('rePassword');
	var email = document.getElementById('email');
	
	if (!notEmpty(nick,"Anna nimimerkki!")) {
		return false;
	}
	
	if (!checkLength(nick,3,15)) {
		return false;
	}
	
	if (!isAlphanumeric(nick,"Nimimerkki saa sisältää vain kiraimia ja numeroita!")) {
		return false;
	}
	
	if (!notEmpty(pass,"Anna salasana!")) {
		return false;
	}
	
	if (!doesMatch(pass,rePass,"Salasanat eivät täsmää!")) {
		return false;
	}
	
	if (!emailValidator(email,"Anna kelvollinen sähköpostiosoite!")) {
		return false;
	}
	
	return true;
}

function checkLogin() {
	var nick = document.getElementById('nick');
	var pass = document.getElementById('password');
	
	if (!notEmpty(nick,"Anna nimerkki.")) {
		return false;
	}
	
	if (!notEmpty(pass,"Anna salasana.")) {
		return false;
	}
	
	return true;
}

Itse lomake (skripti on liitetty aikaisemmin <head>-tagissa):

Code: Select all

<h1>Rekister&ouml;idy</h1>

<form action='inc/processRegister.php' method='post' onsubmit='return validateForm()'>
	Nimimerkki: (3-15 merkki&auml)<br />
	<input type='text' name='nick' id='nick' onchange='return validateForm()' /><br />
	
	Salasana:<br />
	<input type='password' name='password' id='password' /><br />
	Salasana uudelleen:<br />
	<input type='password' name='rePassword' id='rePassword' /><br />
	
	S&auml;hk&ouml;posti:<br />
	<input type='text' name='email' id='email' /><br />
	
	<input type='submit' value='Rekister&ouml;idy' />
</form>

IMO, kannattaa käyttää tarkistukseen mieluummin PHP:tä, mitä jos vaikka JavaScript on kytketty pois päältä?
Opiskele hieman PHP :n perusteita ja tee tuo sama php:lla, silloin tuon toimivuus ei ole ainakaan selaimestasi kiinni.
En halua lähteä testailemaan koodiasi, koska eri selaimet hyväksyvät erilaisia HTML-elementtien määritteitä.
Tiedän esimerkiksi, että tuo ei tulisi toimimaan PSP :lläni, koska sen selain ei tue HTML-elementtien täydellistä JS-käsittelyä.
PHP sitävastoin toimii kaikkialla (php-tuetuissa palvelimissa oc).
Ja kyseisellä kielellä säästät myös rutkasti koodirivejä ja parannat sivujesi tietoturvaa, joskin tiedon lähetyksen lataus vienee muutaman millisekunnin pidempään.

Jos sitten kuitenkin haluat tehdä JavaScriptillä nuo, tee sitten riittävät varotoimet jokaiselle selaimelle erikseen, jotta koodit toimivat varmasti.

[TheFish]

IMO, kannattaa käyttää tarkistukseen mieluummin PHP:tä, mitä jos vaikka JavaScript on kytketty pois päältä?
Opiskele hieman PHP :n perusteita ja tee tuo sama php:lla, silloin tuon toimivuus ei ole ainakaan selaimestasi kiinni.
En halua lähteä testailemaan koodiasi, koska eri selaimet hyväksyvät erilaisia HTML-elementtien määritteitä.
Tiedän esimerkiksi, että tuo ei tulisi toimimaan PSP :lläni, koska sen selain ei tue HTML-elementtien täydellistä JS-käsittelyä.
PHP sitävastoin toimii kaikkialla (php-tuetuissa palvelimissa oc).
Ja kyseisellä kielellä säästät myös rutkasti koodirivejä ja parannat sivujesi tietoturvaa, joskin tiedon lähetyksen lataus vienee muutaman millisekunnin pidempään.

Jos sitten kuitenkin haluat tehdä JavaScriptillä nuo, tee sitten riittävät varotoimet jokaiselle selaimelle erikseen, jotta koodit toimivat varmasti.

Eiköhän tuo sama tehdä jo PHP:lläkin. Yleensä vain on tapana käyttää JavaScriptiä lomakkeiden validointiin jo ennen kuin se lähetetään palvelimelle. Huomattavasti helpompaa käyttäjälle, kun ei tarvitse mennä eri sivulle vain nähdäkseen että jokin pakollinen tieto puuttuikin tms.

[DJ-Filbe]

IMO, kannattaa käyttää tarkistukseen mieluummin PHP:tä, mitä jos vaikka JavaScript on kytketty pois päältä?
Opiskele hieman PHP :n perusteita ja tee tuo sama php:lla, silloin tuon toimivuus ei ole ainakaan selaimestasi kiinni.
En halua lähteä testailemaan koodiasi, koska eri selaimet hyväksyvät erilaisia HTML-elementtien määritteitä.
Tiedän esimerkiksi, että tuo ei tulisi toimimaan PSP :lläni, koska sen selain ei tue HTML-elementtien täydellistä JS-käsittelyä.
PHP sitävastoin toimii kaikkialla (php-tuetuissa palvelimissa oc).
Ja kyseisellä kielellä säästät myös rutkasti koodirivejä ja parannat sivujesi tietoturvaa, joskin tiedon lähetyksen lataus vienee muutaman millisekunnin pidempään.

Jos sitten kuitenkin haluat tehdä JavaScriptillä nuo, tee sitten riittävät varotoimet jokaiselle selaimelle erikseen, jotta koodit toimivat varmasti.

Eiköhän tuo sama tehdä jo PHP:lläkin. Yleensä vain on tapana käyttää JavaScriptiä lomakkeiden validointiin jo ennen kuin se lähetetään palvelimelle.

Toki, no ei sitten mitään jos asia on näin. Mutta jokatapauksessa tuo JS-hommeli kannattaa tehdä yhteensopivaksi usealle selaimelle ja toteuttaa niin että jos yhteensopivuutta ei ole, estetään js-koodi kyseiseltä selaimelta lagaamisen välttämiseksi ja jätetään suoraan tarkistus php:n murheeksi.

Huomattavasti helpompaa käyttäjälle, kun ei tarvitse mennä eri sivulle vain nähdäkseen että jokin pakollinen tieto puuttuikin

Useimmat selaimet tekevät nykyään niin että lataavat seuraavan sivun edellisen "päälle" niin, että jos seuraava sivu sisältää vain esim. varoitusboxeja, selain näyttää vain varoitusboxin vanhan sivun päällä. Näin tekee ainakin firefox täällä.

[esa94]

Huomattavasti helpompaa käyttäjälle, kun ei tarvitse mennä eri sivulle vain nähdäkseen että jokin pakollinen tieto puuttuikin

Useimmat selaimet tekevät nykyään niin että lataavat seuraavan sivun edellisen "päälle" niin, että jos seuraava sivu sisältää vain esim. varoitusboxeja, selain näyttää vain varoitusboxin vanhan sivun päällä. Näin tekee ainakin firefox täällä.

...Täh? Ei varmasti tee, ellet tarkoita niitä alert-boksejasi.

[DJ-Filbe]

Huomattavasti helpompaa käyttäjälle, kun ei tarvitse mennä eri sivulle vain nähdäkseen että jokin pakollinen tieto puuttuikin

Useimmat selaimet tekevät nykyään niin että lataavat seuraavan sivun edellisen "päälle" niin, että jos seuraava sivu sisältää vain esim. varoitusboxeja, selain näyttää vain varoitusboxin vanhan sivun päällä. Näin tekee ainakin firefox täällä.

...Täh? Ei varmasti tee, ellet tarkoita niitä alert-boksejasi.

Nimenomaan juuri niitä....

[esa94]

Useimmat selaimet tekevät nykyään niin että lataavat seuraavan sivun edellisen "päälle" niin, että jos seuraava sivu sisältää vain esim. varoitusboxeja, selain näyttää vain varoitusboxin vanhan sivun päällä. Näin tekee ainakin firefox täällä.

...Täh? Ei varmasti tee, ellet tarkoita niitä alert-boksejasi.

Nimenomaan juuri niitä.... :roll:

No eipä se silti tee näin. Älykäs selain saattaisi hyvinkin pyytää vain tietyt osiot sivusta, mutt auskoisin sen silti lataavan sivun uudestaan vaikka vain saadakseen yhden ruman hälytysloodan näytölle.

[Henkru]

Jos tässä nyt tosiaan turhuuksia halutaan välttää niin DJ-Nerd tekisin aika monta juttua toiste.

1. Tuo palauteloota tosiaan tarvitsee selaimelta js-tuen AINA. Koska se ohjaa js:llä takaisin etusivulle....
2. Jos tosiaan halutaan välttää turhia sivulatauksia niin yhdistät palautelomakkeen ja sen käsittelyn. Koska nyt asiat etenee näin.

• Kirjoitetaan palaute ja painetaan nappia
  Selain hakee laheta_palaute.php ja kertoo samalla lomakkeen tiedot
  lahte_palaute.php pyytää meitä vielä hakemaan etusivun
  Haetaan etusivu

Kun asian voi tehdä myös

• Kirjoitetaan palaute ja painetaan nappia
  Selain hakee palaute.php ja kertoo samalla lomakkeen tiedot. palaute.php kirjottaa samalla palautteen ylös ja kertoo meille että palaute on lähetty tms.

3. Ainakaan minkäänlaista tarkistuta ei tuntunut olevan php:en puolella vaan kaikki alipitkät jutut menivät läpi tai ainakin näin sivu kertoi.

Ja yksi pieni juttu vielä alert EI ole oikea tapa ilmoitella asioita. Lähinnä se ärsyttäää ihmisiä.

Ainakaan en ole kuullut, että mikään selain hakisi taustalla itsenäisesti muita sivuston sivuja (AJAX:ia ei nyt huomioida). En tiiä sotketko tätä nyt välimuistiin.