Sitat av
Realist1
Ja, jeg så det.. Men jeg synes den var ganske elegant, jeg... Så da spør jeg deg; hvis den IKKE var elegant ... hvordan ser da en elegant løsning ut?
Jeg spør fordi jeg er oppriktig interessert, driver og lærer meg div. koding nå selv, og fine tips&triks som dette er veldig artig å plukke opp.
Da misforsto jeg, beklager.
Kode
<html>
<head>
<script language=javascript>
function validate(chk){
if (chk.checked == 1)
alert("Thank You");
else
alert("You didn't check it! Let me check it for you.")
chk.checked = 1;
}
</script>
</head>
<body>
<form>
<input type=checkbox name=chk1>Please Check Me
<p><input type=button value="check" onclick="return validate(chk1);">
</form>
</body>
</html>
For det første så bruker de onclick atributten. Det er uheldig, og fører bare til rot og uoversiktlig kode. I stedet for denne kunne man gitt elementet en id og skrevet slik:
Kode
document.getElementById('id').onclick = function () {
//do this
}
Evt. kunne (og burde man nokk) bruke addEventListener og (for i.e.) attachEvent, alle furnuftige js-bibliotek har wrappere for disse.
I neste omgang som er forholdsvis kritisk er at de sjekker verdien av chk.checked med "== 1"
Dette er ikke direkte feil, men det er misvisende da .checked bruker true og false. Det doble erlikhetstednet regner med at 1 og 0 skal matche true og false, men den kan i noen situasjoner feile og det er smart alltid å bruke triple ===, da de sjekker for sann likhet, altså ingen tolkning. Man bør også vite så nøyaktig som mulig ha man sjekker for, og i dette tilfellet sjekker man ikke om .checked har verdien 1, men om den har verdien true. Det riktige blir derfor (chk.checked === true).
De har en <p> tag om semantisk sett ikke har noe å gjøre der, det er også risikabelt ikke å ha en matchende </p>, selv om </p> strengt tatt skal være valgfri.
Hva de bruker return validate(...) til er jeg jaggu ikke sikker på, men vanlig praksis i samsvar med eksempelet mitt ovenfor, for å hindre at nettleseren sender deg noe sted når du klikker på knappne er å returnere false
Kode
document.getElementById('id').onclick = function () {
var chk = document.getElementById('id');
if (chk.checked === false) {
return false;
} else {
// hele else-blokken kan unnlates, men for demonstrasjonens skyld:
alert('It works, yay :D');
}
}
I tillegg kan det noteres at man kun bruker alert() (og confirm()) til testing, debugging, eksempler et. Det er fordi den (i avvente av svar) blokkerer alle script fra å kjøre, og man liker ikke når noe blokkerer i javascript. (fordi det er "event-driven" og at samtlige script på siden kjører i en kø, det vil si at alt stopper fra en alert-box kommer opp, og frem til du trykker på ok, eller hva knappen heter). Det kan være en fordel heller å bruke console.log() med chrome eller firefox+firebug.
Utenom det kan jeg minne om alltid å bruke en doctype på html-sider.
Kan lage et litt mer anvendelig eksempel, men nå er det snart jobb
Sitat av
lor3ntz
Som regel bør man gjøre slike kontroller server-side, ellers kan folk lett omgå det.
True, men det er en fordel med både og, da da men slipper å sende data fram å tilbake når man bruker js. Reduserer serverload ørelite grann, og brukertid ørlite grann mer
Sist endret av Dominic; 21. mars 2012 kl. 00:29.