cba.pl · 2013-05-06 · 6 Podaj hasło LOGIN function login() { var login, haslo;...

1

document.write

<SCRIPT>  </SCRIPT>

Skrypt na stronie www

<html>

<head>

</head>

<body>

<br>

To jest normalny dokument HTML.

<br>

<script language="JavaScript">

document.write("To jest JavaScript!")

</script>

<br>

I znowu dokument HTML.

</body>

</html>

Wypisywanie znaku cudzysłowu na stronie

document.write("Na ekranie zobaczysz<br>C:\\>")

document.write("Polecam film \"Wladca Pierścieni\"")

document.write("<b><a href=\"spis.htm\">Spis treści</a></b>")

deklaracja zmiennej

<html>

<body>

<script type="text/javascript">

var name = "Ja"

document.write(name)

document.write("<h1>"+name+"</h1>")

</script>

<p>This example declares a variable.</p>

</body>

</html>

Typy zmiennych

var imie="Teresa" // zmienna typu string

var wiek=20 // zmienna typu integer

document.write("Nasza Pani ma na imię "+imie+".")

document.write(imie+" ma prawie "+wiek+" lat")

2

funkcja tekstowa

<html>

<head>


function myFunction()

{

return ("Hello, have a nice day!")

}

</script>

</head>

<body>


document.write(myFunction())

</script>

<p>The function returns a text.</p>

</body>

</html>

funkcja obliczeniowa z parametrem

<html>

<head>


function product(a,b)

{

return a*b

}

</script>

</head>

<body>


document.write(product(4,3))

</script>

<p>Funkcja zwraca wartość z dwóch parametrów 4 i 3.</p>

</body>

</html>

funkcja z wartością




</script>

3

funkcja z wartością modyfikacja




</script>

Alerty

1

liczba=prompt("podaj jakąś liczbę:")

jaka=(liczba%2==0)?"parzysta":"nieparzysta"

document.write("podana liczba jest "+ jaka)

2

wiek=prompt("W jakim jesteś wieku?")

if (wiek>18) {

document.write("Jesteś pełnoletni, więc możesz wejść dalej.")

document.write("<br><a href=\"enter.html\">Wejście dla dorosłych</a>")

}

3

wiek=prompt("W jakim jesteś wieku?")

if (wiek>18) {

document.write("Jesteś pełnoletni, więc możesz zobaczyć ten film.")

document.write("<br><a href=\"enter.html\">Film dla dorosłych</a>")

}

else {

alert("Ty masz zakaz!!!")

document.write("Nie jesteś dorosły")

}

4

odpowiedz=prompt("W którym roku narodził się JavaScript?")

if (odpowiedz=="1995") {

document.write("Brawo! Masz dobrą pamięć!")

}

else {

alert("Źle!!!")

document.write("Nie zapamiętałeś dokładnie pierwszej lekcji. ")

}

4

wprowadzenie przycisku

<html>

<head>


function disp_alert()

{

alert("Jestem okno z komunikatem!!!")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="disp_alert()" value="Display alert box">

</form> </body>

</html>

Przycisk i okno wprowadzania danych

<html>

<head>


function disp_prompt()

{

var name=prompt("Please enter your name","")

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?")

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="disp_prompt()" value="Display a prompt box">

</form> </body>

</html>

Alert z dwoma wierszami

<html>

<head>


function disp_alert()

{

alert("Witaj ponownie! Tutaj został” + '\n' + "dodany nowy wiersz!")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="disp_alert()" value="Display alert box">

</form> </body>

</html>

5

Confirm

<html>

<head>


function disp_confirm()

{

var name=confirm("Press a button")

if (name==true)

{

document.write("You pressed the OK button!")

}

else

{

document.write("You pressed the Cancel button!")

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="disp_confirm()" value="Display a confirm box">

</form>

</body>

</html>

Pole tekstowe

<html>

<head>




</script>

</head>

<body>

Wpisz swoje imię:

<form>

<input type="text" name="name" onBlur="getname(this.value)" value="">

</form>

</body>

</html>

6

Podaj hasło

<HEAD>

<TITLE>LOGIN</TITLE>

<SCRIPT>

function login()

{

var login, haslo;

login=document.formlogin.login.value;

haslo=document.formhaslo.haslo.value;

if (haslo=="virus45")

{

alert('Hello '+login+' , I am Red Dog');

}

else

alert('Niepoprawne hasło!!!');

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR=GOLD>

<FONT COLOR=BLCAK SIZE=4>Login:

<form name=formlogin>

<input type=text size=25 maxlength=25 name=login>

</form>

<FONT COLOR=BLCAK SIZE=4>Hasło:

<form name=formhaslo>

<input type=password size=25 maxlength=25 name=haslo>

<br>

<br>

<input type=button name=ok value=OK onclick=login()>

<input type=reset value=Wyczyść>

</form>

</BODY>

</HTML>

7

Hasło 2

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function podaj_password(form) {

if (form.ID.value=="Otul") {

if (form.pass.value=="javascript") {

location="Java.htm"

} else {

alert("Sorry " +form.ID.value+ ", wrong password.")

}

} else {

alert("Niewłaściwe informacje!")

}

}

</SCRIPT>

</HEAD>

<BODY>

<FORM name="login">

Login <INPUT NAME="ID"><br>

Hasło <INPUT NAME="pass" type="password"><br><br>

<INPUT TYPE="button" VALUE="Skocz" onClick="podaj_password(this.form)"> <INPUT

TYPE="RESET" VALUE="Wyczyść">

</form>

</BODY>

</HTML>

8

Nie dotykać

<BODY>

<SCRIPT language=JavaScript>



</SCRIPT>

<SCRIPT>

function zdarzenie()

{

alert('Auu !');

document.f1.b1.value = "Mowiłem, żeby nie dotykać";

}

</SCRIPT>

<FORM name=f1><INPUT onclick=zdarzenie() type=button value="Nie dotykać" name=b1>

</FORM>




</SCRIPT>

</BODY>

</HTML>

9

data modyfikacji

<html>

<body>

Ostatnia modyfikacja:


document.write(document.lastModified)

</script>

</body>

</html>

dzisiejsza data


today = new Date()

document.write("Teraz jest: ",today.getHours(),":",today.getMinutes())

document.write("Dzisiejsza data: ",today.getMonth()+1,"/",today.getDate(),"/",today.getYear());

</script>

Otwórz nowe okno

<HTML>

<HEAD>

<TITLE>Okno</TITLE>

<SCRIPT>

function otworz()

{

okno = window.open('nazwa.html','okno','width=1015, height=768, toolbar=no, location=no,

scrollbars=no, resizable=no, status=no fullscreen')

}

</SCRIPT>

<SCRIPT>

function zamknij()

{

window.close()

}

</SCRIPT>

</HEAD>

<BODY>

<A HREF="javascript:otworz();">Otwórz nowe okno

<BR>

<A HREF="javascript:zamknij();">Zamknij okno

</BODY>

</HTML>

1

0

zdarzenia

function pushbutton

<html>

<head>


function pushbutton() {

alert("Hello!");

}

</script>

</head>

<body>

<form>

<input type="button" name="Button1" value="Naciśnij mnie" onclick="pushbutton()">

</form>

</body>

</html>

Funkcja i przyciski <html>

<head>


function myfunction()

{

alert("HELLO")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="myfunction()" value="Moja funkcja">

</form>

<p>By pressing the button, a function will be called. The function will alert a message.</p>

</body>

</html>

funkcja txt

<html>

<head>


function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="myfunction('Hello')" value="Call function">

</form>

<p>By pressing the button, a function with an argument will be called. The function will alert

this argument.</p>

</body>

</html>

1

1

Inny przykład dwa przyciski

<html>

<head>


function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">

<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">

</form>

</body>

</html>

Funkcja The onMouseOver

<html>

<head>


function hello() {

alert("Wejdź na stronę!");

}

</script>

</head>

<body>

<a href="www.tryba.cba.pl" onMouseOver="hello()">link do mojej strony</a>

</body>

</html>

funkcja back i forward.

<html>

<body>

<FORM NAME="buttonbar">

<INPUT TYPE="button" VALUE="Back" onClick="history.back()">

<INPUT TYPE="button" VALUE="Home" onClick="location='stronadomowa.htm'">

<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">

</FORM>

</body>

</html>

Możesz także napisać history.go(-1) i history.go(1).

1

2

Pętle

If

<html>

<body>


var d = new Date()

var time = d.getHours()

if (time < 10)

{

document.write("<b>Good morning</b>")

}

else

{

document.write("<b>Good day</b>")

}

</script>

<p>

If the time on your browser is less than 10,

you will get a "Good morning" greeting.

Otherwise you will get a "Good day" greeting.

</p>

</body>

</html>

else

else

<html>

<body>


var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

else if (time>=10 && time<16)

{

document.write("<b>Good day</b>")

}

else

{

document.write("<b>Hello World!</b>")

}

</script>

1

3

for

1

<html>

<body>


for (i = 0; i <= 5; i++)

{

document.write("Numer " + i)

document.write("<br />")

}

</script>

<p>Pętla startuje od i=0.</p>

<p>Tak długo będzie tworzona, dopóki licznik nie osiągnie wartości 5.</p>

</body>

</html>

2

<html>

<body>


for (i = 1; i <= 6; i++)

{

document.write("<h" + i + ">This is header " + i)

document.write("</h" + i + ">")

}

</script>

</body>

</html>

Silnie liczb od 1 do 4

var x = 1;

for (var i = 1; i < 5; i++)

{

x = x * i;

document.write (i + "! = " + x);

}

przerwanie pętli

<html>

<body>


var i=0

for (i=0; i<=10; i++)

{

if (i==3){break}

document.write("The number is " + i)

document.write("<br />")

}

</script>

<p>Pętla się zatrzyma gdy i=3.</p>

</body>

</html>

1

4

While silnie kolejnych liczb naturalnych od 1 do 4

var i = 1;

var x = 1;

while (i < 5)

{

x = x * i;

document.write (i + "! = " + x);

i++;

}

wypisuje litery alfabetu

litera="a"

while(litera!="z") {

document.write(litera)

kodLitery=litera.charCodeAt() // pobierany jest kod ASCII litery

kodLitery++ // zwiększamy kod o 1

litera=String.fromCharCode(kodLitery) // tworzymy litere z kodu ASCII

}

Do..while

<html>

<body>


i = 0

do

{

document.write("The number is " + i)

document.write("<br>")

i++

}

while (i <= 5)

</script>

</body>

</html>

http://www.staff.amu.edu.pl/~psi/informatyka/javascript/js_3.html



1

5

Malowanie przyrostu procentowego

do {

procent=parseInt(prompt("Podaj procent zawartości (0-100):",""))

} while (procent<0 | procent>100 | isNaN(procent))

/* parseInt zamienia wartość która podał użytkownik na liczbę całkowitą

pętla wykonuje się dotąd, aż użytkownik wpisze liczbę z przedziału 0-100

jeżeli użytkownik wpisze inny znak lub ciąg znaków, wówczas operacja parseInt zamienia taki ciąg

na wartość NaN (Not a Number) - co jest również sprawdzane w jednym z warunków działania pętli

*/

slupek="<font color=\"#00FF00\">"

for (i=0;i<=procent;i++) {

slupek+="|"

}

slupek+="</font><font color=\"#0000FF\">"

for (i=procent+1;i<=100;i++) {

slupek+="|"

}

slupek+="</font>"

document.write("<br>"+ slupek +" = "+ procent +"%")

Switch

<html>

<body>


var d = new Date() // tworzony jest obiekt z datą

theDay=d.getDay()// wiemy jaki jest dzien na podstawie daty

switch (theDay)

{

case 5:

document.write("<b>W końcu Friday</b>")

break

case 6:

document.write("<b>Saturday Shoping day</b>")

break

case 0:

document.write("<b>Niedziela będzie dla nas</b>")

break

default:

document.write("<b>Kiedy będzie weekend?</b>")

}

</script>

<p>Ten JavaScript will generuje jaki dzis jest dzień. Przypisano baze danych: Sunday=0, Monday=1,

Tuesday=2, etc.</p>

</body>

</html>

1

6

tablice

<html>

<body>


var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

</body>

</html>

Data


DayName = new Array(7)

DayName[0] = "niedziela "

DayName[1] = "poniedziałek "

DayName[2] = "wtorek "

DayName[3] = "środa "

DayName[4] = "czwartek "

DayName[5] = "piątek "

DayName[6] = "sobota "

MonthName = new Array(12)

MonthName[0] = " I "

MonthName[1] = " II "

MonthName[2] = " III "

MonthName[3] = " IV "

MonthName[4] = " V "

MonthName[5] = " VI "

MonthName[6] = " VII "

MonthName[7] = " VIII "

MonthName[8] = " IX "

MonthName[9] = " X "

MonthName[10] = " XI "

MonthName[11] = " XII "

function pobierz_date(){

var Today = new Date()

var WeekDay = Today.getDay()

var Month = Today.getMonth()

var Day = Today.getDate()

var Year = Today.getFullYear()

return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + ", " + Year

}

document.write(pobierz_date())

</script>

1

7

formularze

1

<html>

<head>


function getname(imie) {

alert("Hi, "+ imie+"!"); }

</script>

</head>

<body>

Wpisz swoje imię i kliknij myszką:

<form>

<input type="text" name="name" onBlur="getname(this.value)" value="">

</form>

</body>

</html>

sprawdzanie poprawności adresu

<html>

<head>


function test1(form) {

if (form.text1.value == "")

alert("Podaj ciąg znaków!")

else {

alert("Cześć "+form.text1.value+"! Informacja poprawna!");

}

}

function test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("Niepoprawny adres poczty elektronicznej!");

else alert("OK!");

}

</script>

</head>

<body>

<form name="first">

Wpisz swoje nazwisko:<br>

<input type="text" name="text1">

<input type="button" name="button1" value="Test" onClick="test1(this.form)">

<P>

Wpisz adres swojej poczty elektronicznej:<br>

<input type="text" name="text2">

<input type="button" name="button2" value="Test" onClick="test2(this.form)">

</body>

</html>

1

8

2 przyciski wyboru

<BODY>

<FORM name=f1>

<SELECT name=miesiac>

<OPTION value=1 selected>Styczeń</OPTION>

<OPTION value=2>Luty</OPTION>

<OPTION value=3>Marzec</OPTION>

<OPTION value=4>Kwiecień</OPTION>

<OPTION value=5>Maj</OPTION>

<OPTION value=6>Czerwiec</OPTION>

<OPTION value=7>Lipiec</OPTION>

<OPTION value=8>Sierpień</OPTION>

<OPTION value=9>Wrzesień</OPTION>

<OPTION value=10>Październik</OPTION>

<OPTION value=11>Listopad</OPTION>

<OPTION value=12>Grudzień</OPTION>

</SELECT>

<SELECT name=rok>

<OPTION value=2003 selected>2003</OPTION>

<OPTION value=2004>2004</OPTION>











</SELECT>

</FORM>

</BODY>

1

9

Wybór płci

<html>

<head>


function mr(dis,en){

document.getElementById(dis).style.visibility='visible';

document.getElementById(en).style.visibility='hidden';

}

</script>

</head>

<body>

<input name="rad" type="radio" value="mężczyzna" onclick="mr('s1','s2') " />

<select id="s1" onchange="">

<option value="1">kawaler</option>

<option value="2">żonaty</option>

<option value="3">wdowiec</option>

</select>

<input name="rad" type="radio" value="kobieta" onclick="mr('s2','s1')" />

<select id="s2" onchange="">

<option value="4">panna</option>

<option value="5">mężatka</option>

<option value="6">wdowa</option>

</select>

</body>

</html>

2

0

Kalendarz

<BODY>

<TABLE>

<TBODY>

<TR>

<TD>Pon</TD>

<TD>Wt</TD>

<TD>Sr</TD>

<TD>Czw</TD>

<TD>Pt</TD>

<TD>Sob</TD>

<TD>Nd</TD></TR>

<SCRIPT>

var d = new Date();

d.setDate(1);

var m = d.getMonth()

d.setDate( 1 - d.getDay() );

do

{

document.write("<tr>");

for (var i=0; i<7; ++i)

{

document.write("<td>");

document.write( d.getDate() );

document.write("</td>");

d.setDate( d.getDate() + 1 )

}

document.write("</tr>");

} while (d.getMonth() == m)

</SCRIPT>

</TBODY></TABLE>

</BODY>

2

1

Kalendarz czarnobiały ze stylem

<STYLE>.naglowek {

WIDTH: 30px; BACKGROUND-COLOR: gray; TEXT-ALIGN: right

}

.dzien {

BACKGROUND-COLOR: silver; TEXT-ALIGN: right

}

</STYLE>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>

<BODY>

<TABLE>

<TBODY>

<TR>

<TD class=naglowek>Nd</TD>

<TD class=naglowek>Pon</TD>

<TD class=naglowek>Wt</TD>

<TD class=naglowek>Sr</TD>

<TD class=naglowek>Czw</TD>

<TD class=naglowek>Pt</TD>

<TD class=naglowek>Sob</TD></TR>




</SCRIPT>

<SCRIPT>

var d = new Date();

d.setDate(1);



do

{


for (var i=0; i<7; ++i)

{

document.write("<td class=\"dzien\">");




}

2

2


</SCRIPT>

</TBODY></TABLE>




</SCRIPT>

</BODY>

2

3

Kalendarz kolorowy

<STYLE>.naglowek {

WIDTH: 30px; BACKGROUND-COLOR: gray; TEXT-ALIGN: right

}

.naglowekWolny {

WIDTH: 30px; COLOR: red; BACKGROUND-COLOR: gray; TEXT-ALIGN: right

}

.dzien {

BACKGROUND-COLOR: silver; TEXT-ALIGN: right

}

.dzienWolny {

COLOR: red; BACKGROUND-COLOR: silver; TEXT-ALIGN: right

}

.dzienInny {

COLOR: gray; BACKGROUND-COLOR: silver; TEXT-ALIGN: right

}

</STYLE>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>

<BODY>

<TABLE>

<TBODY>

<TR>

<TD class=naglowekWolny>Nd</TD>

<TD class=naglowek>Pon</TD>

<TD class=naglowek>Wt</TD>

<TD class=naglowek>Sr</TD>

<TD class=naglowek>Czw</TD>

<TD class=naglowek>Pt</TD>

<TD class=naglowekWolny>Sob</TD></TR>




</SCRIPT>

2

4

<SCRIPT>

var d = new Date();

d.setDate(1);



do

{


for (var i=0; i<7; ++i)

{

document.write("<td class=\"dzien");

if (d.getMonth() != m)

document.write("Inny")

else if (i==0 || i==6)

document.write("Wolny")

document.write("\">");




}



</SCRIPT>

</TBODY></TABLE>




</SCRIPT>

</BODY>

2

5

Zegar

<HEAD>

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">

<STYLE>

.details

{

font-family : lucida sans unicode, verdana, century gothic, arial;

font-size : 10;

font-weight : normal;

color : #ffffff;

background-color : #000000;

}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HEAD>

<BODY onLoad=curTime()>

<SPAN CLASS=details ID=clock STYLE="position:relative;"></SPAN>

</BODY>

2

6

Matematyka




</script>

Tabliczka mnożenia

<html>

<head>


function tabliczka() {

document.write("<table border=\"1\">");

for (i=1; i<=10; i++)

{

document.write("<tr><td>" + i + "</td>");

for (j=1; j<=10; j++)

{

if (j != 1) {

document.write("<td>" + i*j + "</td>");

}

}


}

document.write("</table>");

}

</script>

</head>

<body>

<script>tabliczka();</script>

</body>

</html>

2

7

Code Outputs

\' single quote

\" double quote

\& ampersand

\\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

onerror

<html>

<head>


onerror=handleErr

var txt=""

function handleErr(msg,url,l)

{

txt="There was an error on this page.\n\n"

txt+="Error: " + msg + "\n"

txt+="URL: " + url + "\n"

txt+="Line: " + l + "\n\n"

txt+="Click OK to continue.\n\n"

alert(txt)

return true

}

function message()

{

adddlert("Welcome guest!")

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

2

8

6. Tworzenie okien

Oto źródło:

<html>

<head>


function WinOpen() {

msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");

msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");

msg.document.write("<CENTER><h1><B>To jest naprawdę fajne!

</B></h1></CENTER>");

}

</script>

</head>

<body>

<form>

<input type="button" name="Button1" value="Naciśnij mnie" onclick="WinOpen()">

</form>

</body>

</html>

. Oto, co możesz zmienić na swojej stronie( zawsze bez spacji między nimi)

toolbar

location

directories

status

menubar

scrollbars

resizable

copyhistory

width=piksele

height=piksele

cba.pl · 2013-05-06 · 6 Podaj hasło LOGIN function login() { var login, haslo;...

Documents

Transcript of cba.pl · 2013-05-06 · 6 Podaj hasło LOGIN function login() { var login, haslo;...