ďťż

FAQ JavaScript Najczęściej zadawane pytania

Podstrony

telcocafe

Wstęp

Postanowiłem stworzyć FAQ Javascript ;) Mam nadzieje, że znajdą się osoby, które pomogą w tworzeniu :D

Jak pisać?

Pytanie
Odpowiedź
Każde pytanie ma być oddzielnym postem!
Gdy umieszczacie kod pamiętajcie, aby umieścić kod pomiędzy znacznikami [ CODE] i [ /CODE] lub, gdy jest dłuższy [ CODEBOX] i [ /CODEBOX].

:arrow: Spis pytań

# 1 Jak wyświetlić alert przy wejściu na stronę?
# 2 Jak dodać stronę do ulubionych?
# 3 Jak zrobić pseudo logowanie w JS?
# 4 Jak zrobić przekierowanie strony?
# 5 Jak zrobić odwracanie zaznaczenia checkbox'ów?
# 6 Jak zrobić scrollowany tekst w statusie?
# 7 Jak wyświetlić datę ostatniej aktualizacji strony?
# 8 Jak wyświetlić losowy obrazek?
# 9 Jak ustawić stronę jako startową?
# 10 Jak wczytać zewnętrzny plik Javascript?
# 11 Jak zrobić potwierdzenie wysłania formularza?
# 12 Jak wyczyścić pole tekstowe po kliknięciu w pole?
# 13Jak stworzyć link odświeżający stronę?
# 14 Jak w ciekawy sposób przywitać użytkownika wyświetlając jego imię po wpisaniu?
# 15 Jak zablokować prawy przycisk myszy?
# 16 Jak otrzymać lustrzane odbicie naszego tekstu?
# 17 Jak zrobić pole tekstowe, na którym tekst po jego aktywacji będzie znikał i na odwrót po deaktywacji się pojawiał, jeśli pole będzie puste?
# 18 Jak wyświetlić okienko Pop-Up?
# 19 Jak zrobić podmianę obrazka po najechaniu na niego myszą?
# 20 Jak zrobić obsługe pól formularzy przez JS?
# 21 Jak wykonać rozjaśniający się obrazek?
# 22 Jak sprawdzić poprawność adresu e-mail?
# 23 Jak wymusić załadowanie strony z deklaracją ramek przy uruchamianiu podstrony?
# 24 Jak obsługiwać wiele zapytań XMLHttpRequest jednocześnie?
# 25 Jak dodać stronę do ulubionych, niezależnie od przeglądarki?
# 26 Do czego służy AJAX i jak z niego korzystać?
# 27 Jak w Javascript osiągnąć efekt strona.html?parametr=zmienna ?
# 28 Jak wykonać rozjaśniający się obrazek? wersja dla wszystkich przeglądarek (poprawka)
# 29 Jak wykonać efekt focus według własnych upodobań?

// Zapraszam do pisania :D
Użytkownik sauron edytował ten post 19 styczeń 2008, 21:03
Powód edycji: aktualizacja danych

Jak wyświetlić alert przy wejściu na stronę?

<script> alert ("Witaj!"); </script>
Użytkownik n4ever edytował ten post 16 maj 2006, 20:45
Jak dodać stronę do ulubionych?

<a href=# onclick="window.external.AddFavorite('http://adres_strony', 'tytul_strony')">Dodaj do ulubionych</a>
Użytkownik m_uli edytował ten post 17 maj 2006, 14:25
Jak zrobić pseudo logowanie w JS:

<script language="Javascript" type="text/javascript"> </script> (...) <input type="text" id="Login"><br /> <input type="text" id="Haslo"><br /> <input type="button" onclick="loguj()">

Jak zrobić przekierowanie strony:
<script language="Javascript" type="text/javascript">  </script> (...) <body onload="nowy()">
Użytkownik Avenger edytował ten post 17 maj 2006, 15:04

Jak zrobić odwracanie zaznaczenia checkbox'ów:

// w <head> <script language="javascript" type="text/javascript">  </script> // w <body> <form name="opcje"> <input type="checkbox" />1<br /> <input type="checkbox" />2<br /> <input type="checkbox" />3<br /> <input type="checkbox" />4<br /> <input type="checkbox" />5<br /><br /> <input type="button" value="Odwróć" onclick="invert()" /> </form>

Jak zrobić scrollowany tekst w statusie:

// w <head> <script language="javascript" type="text/javascript">  </script> // w <body> <body onload="ruchomy()">

Data ostatniej aktualizacji strony:

<script language="Javascript">  </script>
Użytkownik Merovingian edytował ten post 20 maj 2006, 12:40
Jak wyświetlić losowy obrazek:

<script language="Javascript" type="text/javascript"> </script>
Użytkownik Avenger edytował ten post 17 maj 2006, 15:04
Jak ustawić stronę jako startową?

<a href=# onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://adres_strony')">Ustaw jako stronę startową</a>
Użytkownik m_uli edytował ten post 17 maj 2006, 14:26
Jak wczytać zewnętrzny plik Javascript ?

<script language="Javascript" src="plik_js.js"></script>

Jak zrobić potwierdzenie wysłania formularza:

// w <head> <script language="javascript" type="text/javascript">  </script> // w <body> <form method="post" action="mailto:adres" onsubmit="return pytanie()">

Jak wyczyścić pole tekstowe po kliknięciu w pole?
<input type="text" name="pole" size="20" value="wpisz..." onclick="pole.value = '';">
Użytkownik n4ever edytował ten post 17 maj 2006, 14:17
Jak stworzyć link odświeżający stronę?

<a href="javascript:location.reload()">Odśwież</a>

Jak w ciekawy sposób przywitać użytkownika wyświetlając jego imię po wpisaniu?

<script language = "Javascript">  </script>

Jak zablokować prawy przycisk myszy?

<script language=Javascript> function click() { if (event.button==2) { alert('Tekst_alarmujący_w_okienku".') } } document.onmousedown=click </script>
Użytkownik m_uli edytował ten post 17 maj 2006, 17:34
Jak otrzymać lustrzane odbicie naszego tekstu

<html> <head> <script type="text/javascript"> </script> </head> <body> <FORM name="form"> <TEXTAREA NAME="dokument"></TEXTAREA> <input type="button" value="Odwroc" onclick="odwroc()"> <FORM><br /> <FORM name="form2"> <TEXTAREA NAME="dokument2"></TEXTAREA> <FORM> </body> </html>

Jak zrobić pole tekstowe, na którym tekst po jego aktywacji będzie znikał i na odwrót po deaktywacji się pojawiał, jeśli pole będzie puste?
Np. tak:
<input type="text" value="Tekst" onblur="if(this.value=='')this.value='Tekst';" onfocus="if(this.value=='Tekst')this.value='';" />

Jak wyświetlić okienko Pop-Up?

<html> <head> <script type="text/javascript">  </script> </head> <body> <a href="javascript:popup('strona.html')">strona.html</a><br /> <a href="javascript:popup('zdjecie.jpg')">zdjecie.jpg</a><br /> <a href="javascript:popup('http://onet.pl')">Onet.pl</a> </body> </html>

Jak zrobić podmianę obrazka po najechaniu na niego myszą?

<img src="obrazek1.jpg" onmouseover="src='obrazek2.jpg'" onmouseout="src='obrazek1.jpg'" />

Obsługa pól formularzy przez JS:

(z przykładem)

// w <head> <script language="javascript" type="text/javascript">  </script> // w <body> <form action="#" method="post" name="ankieta" onsubmit="spr()" style="font-family: verdana"> Podaj imie: <input id="imie" type="text" size="30"><br /><br /> Podaj plec: <select id="plec"><br /><br /> <option value="facet">Facet</option><br /> <option value="kobieta">Kobieta</option> </select><br /><br /> Lubisz symulatory lotu?<br /> <input type="radio" name="symulatory" value="tak">Tak<br /> <input type="radio" name="symulatory" value="nie">Nie<br /><br /> Wybierz firmy Twoich kontrolerów:<br /> <input type="checkbox" id="firmy" value="logitech">Logitech<br /> <input type="checkbox" id="firmy" value="saitek">Saitek<br /> <input type="checkbox" id="firmy" value="media-tech">Media-Tech<br /><br /> Uwagi:<br /> <textarea id="uwagi"></textarea><br /><br /> <input type="submit" value="Wyslij"> </form>

Jak wykonać rozjaśniający się obrazek?

<html> <head> <script language="Javascript"> function makevisible(cur,which) { if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=80 /* Zmieniamy wedle własnego uznania */ } </script> </head> <body> <img style="filter:alpha(opacity=80)" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)" border="0" src="obrazek.gif"> </body> </html>

Jak sprawdzić poprawność adresu e-mail:

// w <head> <script language="javascript" type="text/javascript">  </script> // w <body> <input type="text" name="email" /> <input type="button" onclick="spr()" value="Sprawdź" />

Jak wymusić załadowanie strony z deklaracją ramek przy uruchamianiu podstrony?

(kod umieszczamy na wszystkich podstronach)

// w <head> <script language="javascript" type="text/javascript">  </script>

Jak obsługiwać wiele zapytań XMLHttpRequest jednocześnie
function xmlRequest(method, url, mData, respHandler){ var xml = false; if (window.XMLHttpRequest) xml = new XMLHttpRequest(); else if (window.ActiveXObject) xml = new ActiveXObject("Microsoft.XMLHTTP"); if (xml) { xml.onreadystatechange = function (event){ respHandler(xml); } xml.open(method, url, true); xml.setRequestHeader("content-type","text/xml"); xml.send(mData); } }

przykładowe wywołanie :)

function rH(obj){ if (!obj) return false; // readyState: 4 czyli gotowe; status = 200 czyli brak bledu if ((obj.readyState == 4) && (obj.status == 200)){ document.getElementById('container').innerHTML = obj.responseText; } } xmlRequest('GET', 'chat.php', '', rH);
to co zwroci plik chat.php wyladuje w elemencie o id "container"
(np. div lub span :) )

Jak dodać stronę do ulubionych, niezależnie od przeglądarki*?

<script language="javascript" type="text/javascript">  </script> <a href="#" onclick="java script:add2fav('http://forum.ks-ekspert.pl','Popularne forum o komputerach');">Dodaj do ulubionych</a>

*prawie niezależnie ;)
Użytkownik DJ_ProG edytował ten post 21 marzec 2008, 09:51
Do czego służy AJAX i jak z niego korzystać ( advAjax podukcji Anakina )
http://advajax.anakin.us/index-pl.htm

Jak W js osiagnac efekt strona.html?parametr=zmienna

w sekcji head wkladamy
<script> var _GET = new Array(); var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); _GET[key] = val; } } </script>

teraz by wyswietlic zmienna parametr w alercie w sekcji body dajemy <script>alert(_GET['parametr']);</script>
Użytkownik bikstopa edytował ten post 20 wrzesień 2006, 23:12
Jak wykonać proste powiadomienie z prośbą o aktywację wykonywania skryptów na stronie ?

( utwórz nową strone, wklej do niej skrypt i uruchom w internet explolerze aby zobaczyć działanie )

<noscript> AKTYWUJ WYKONYWANIE SKRYPTÓW NA TEJ STRONIE </noscript>
Użytkownik fenekpl edytował ten post 25 sierpień 2006, 20:33
Jak wykonać rozjaśniający się obrazek? versja dla wszystkich przeglądarek.

Jak wykonać rozjaśniający się obrazek?

<html> <head> <script language="Javascript"> function makevisible(cur,which) { if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=80 /* Zmieniamy wedle własnego uznania */ } </script> </head> <body> <img style="filter:alpha(opacity=80)" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)" border="0" src="obrazek.gif"> </body> </html>

Powyższy kob raczej bedzie działać tylko na IE.
Aby działało i na IE i na FF oraz na innych należy zastosować taki kod
function setOpacity(element, value) { if(element) { if(element.filters) element.style.filter='alpha(opacity='+value*100+')'; else element.style.opacity=value; } } function makevisible(cur,which) { if (which==0) setOpacity(cur, 1.0); else setOpacity(cur, 0.8); }

Jak wykonać efekt focus według własnych upodobań

W funkcji initLight podajemy id elementu który jest rodzicem naszych elementów input i textarea.
Przy zdarzeniu onfocus do parametru 'class' elementu zostaje dodany ciąg znaków 'active' dlatego określamy styl css dla tych elementów.
Dodatkowo zawartość pola zostanie wyczyszczona (dla pól INPUT, choć można to też zrobić dla pola TEXTAREA) i jeżeli nic nie zostanie wpisane w polu to jego zawartość zostanie przywrócona.
Mam nadzieję, że się komuś przyda.
<style type="text/css"> .active { border: 1px solid #000000; color: blue; } .loginactive { border-bottom: 2px solid #00000; } </style> <div id="rodzic"><input type="text" class="login" value="test"/><input type="password" value="test2"/><textarea></textarea></div> <script type="text/javascript"> function initLight(element) { var element=document.getElementById(element); if(!element) return false; var tagNames=new Array('input', 'textarea') for(var b=0; b<tagNames.length; b++) { var childs=element.getElementsByTagName(tagNames[b]); for(var i=0; i<childs.length; i++) { var type=childs[i].getAttribute('type'); if(type) type=type.toLowerCase(); if(type=='text' || type=='password' || childs[i].tagName.toLowerCase()=='textarea') { var rv=true; if(childs[i].tagName.toLowerCase()=='textarea') rv=false; new lighter(childs[i], rv); } } } } function lighter(el, resetValue) { var obj=new Object(); obj.el=el; obj.defaultValue=obj.el.value; obj.resetValue=resetValue; obj.light=function() //aktywacja elementu { obj.el.className+='active'; if(obj.el.value==obj.defaultValue && obj.resetValue) obj.el.value=''; } obj.unlight=function() //dezaktywacja elementu { obj.el.className=obj.el.className.substr(0, (obj.el.className.length-6)); if(obj.el.value=='' && obj.resetValue) obj.el.value=obj.defaultValue; } obj.el.onfocus=obj.light; obj.el.onblur=obj.unlight; return obj; } initLight('rodzic'); </script>

W razie pytań pisać na priv.
Użytkownik polasek edytował ten post 20 styczeń 2008, 17:37

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL