Javascript objektid,näited (1)

5 VÄGA HEA

Steve Mägi A-08 9.08.2019
PÄRNUMAA KUTSEHARIDUSKESKUS
Arvutiteenindus A-08
Steve Mägi
Javascript
(Objektid, Sisseehitatud objektid, Html dom objektid, sündmused, näited)
Juhendaja : Sander Mets
Pärnu 2009
Sisukord
Javascripti keele objektid 5
Objekt MATH 8
Objekti Math meetodid 8
Lause with 9
Matemaatilised konstandid 9
Objekt DATE 10
Meetod get 10
Meetod set 11
Meetod to 11
Meetod parse 11
Loetava kuupäeva loomine 11
Kellaaeg 12
Objekt string 12
String meetodid 13
Näited 14
Brauseri objekt 16
Navigator objekti omadused 16
Aknaobjekt window 18
Objekt window omadused 18
Objekt window meetodid 18
Alert 19
Prompt 19
Confirm 19
Popup aken 19
Ajapomm 19
Html dom 22
Sündmused 23
Vormide sündmused: 23
Piltide sündmused: 23
Lingi sündmused: 23
Akna sündmused: 23
Driverite sündmused: 24
Pildid: 25
Pildi omadused 25
Sündmused 25
Rollover 25
Ajas muutuv 25
Suvaline pilt massiivist 26
Pildi vahetamine klikkides 27
Image Map 27
Hiireoperatsioonid: 28
Frame : 29
Confirm Box 30
Prompt Box 30
Lihtene hüpik-aken 30
For: 33
While : 34
Function : 35
35
Kasutatud kirjandus: 36
Sissejuhatus
Järgnevas referaadis seletan põhjalikult järgmisi javascripti ette antud teemasid / punkte näidete ja sõnastuse puhul.

OBJEKTID. Objekti deklareerimine . Objekti loomine. Objekti muutuja poole pöördumine. Objekti omaduste muutmine.  Üks oma objekt (klassi kirjeldus) ja objekti loomine.

Sisseehitatud objektid(JavaScript keele objektid: massiiv , Math-objekt(MATH.PI ?), Date-objekt, String-objekt; brauseri poolt defineeritud objektid: Window-objekt, dokumendiobjekt).

HTML DOM objektid. Meetod ja atribuudid .

SÜNDMUSED

Pildid.

Kihid.

Hiireoperatsioonid.

Frame'id.

Hüpikaknad. (pop up window)

Vormid.
Scripti näited:
If, switch , for, while, function
OBJEKTID

JavaScript on objektorienteeritud keel ja objektid on programmist

kättesaadavad meetodite abil.

Objektidel on omadused ja neid omadusi saab muuta neile väärtuste omistamise teel ning kontrollida neid väärtusi võrdlemise teel.

Objekti saab luua kahel viisil.

Esiteks saab selle luua läbi operaatori new, mis loob operaatorist paremal olevast konstruktorfunktsioonist uue isendi.

New loob uue tühja objekti ning seejärel käivitab funktsiooni, edastades funktsioonile viite this äsja loodud uue objekti juurde.

Konstruktorfunktsioon on mõeldud uue objekti algväärtustamiseks vajalike väärtuste ja tegevustega.

Objekt ( object ) moodustab sorteerimata väljade kogumi, koosnedes nendes väljades olevatest võtme-väärtuse paaridest.

Iga väli võib seega hoida endas teist objekti, primitiivset väärtust või meetodit.

Minu näide:
var a=10;
var b=10;
var vastus=a+b;

Javascripti keele objektid

Array
Array objekti kasutatakse kahe või enama väärtuse hoidmiseks, ühe muutuja sees.
Boolean
Boolean objekti kasutatakse non-Boolean väärtuse konverteerimiseks Boolean väärtuseks ("true" v. " false ").
Date
Date objekti kasutatakse aja ja daatumite toimetamisel.
Function
Alamprogramm
Math
Math objekt võimaldab kujutada matemaatika ülesandeid.
Number
Numbrid
Object
Objektide üldised omadused
RegExp
Regexp objekt võimaldab määrata elemendi tekstis ning seejärel see ülesse otsida v. asendada .
String
String objekt võimaldab manipuleerida teatud teksti osadega.
Array kasutamisel JavaScriptis peab meeles pidama järgmisi olulisi punkte:

Array on eri tüüpi muutuja

Väärtus Array sees peab olema määratud Array nimega ning Array väärtus ümbritsetud nurksulgudega.

Näiteks: minuArray[2] = "Tere jälle";

Sõna "new" peab kirjutama väikeste tähtedega ja "Array" algama suure algustähega.

Allpool olev kood loob Array objekti, mille nimeks on minuJoogid:
var minuJoogid=new Array()
On olemas kaks moodust kuidas lisada väärtuseid Array'sse (tuleb lisada niipalju väärtuseid kui palju on vaja määrata muutujaid).
I
var minuJoogid=new Array();
minuJoogid[0]=" Viin ";
minuJoogid[1]="Piim";
minuJoogid[2]="Vesi";
Lisada võib ka numbri selleks, et hoida Array suurus kontrolli all:
var minuJoogid=new Array(3);
minuJoogid[0]="Viin";
minuJoogid[1]="Piim";
minuJoogid[2]="Vesi";
II
var minuJoogid=new Array("Viin","Piim","Vesi");
Lõplik kood:
var minuJoogid=new Array();
minuJoogid[0]="Viin";
minuJoogid[1]="Piim";
minuJoogid[2]="Vesi";
for (i=0;i

with(Math)

{

r=5

a=PI*r*r

y=r*sin(a)

x=r*cos(a)

};

document .write('X on: '+x+'Y on: '+y);

Matemaatilised konstandid

Javascript kasutab kokku kaheksat matemaatilist konstanti, mis kuuluvad Math objekti juurde

Math.E - irrationaalarv
Math.PI - pii
Math.SQRT2 - ruutjuur kahest
Math.SQRT1_2 - ruutjuur poolest
Math.LN2 - naturaallogaritm kahest
Math.LN10 - naturaallogaritm kümnest
Math.LOG2E - kahendlogaritm e-st
Math.LOG10E - kümnendlogaritm e-st

näide

var pii = Math.PI;

Objekt DATE

Kuupäevaobjekti DATE kasutame kuupäevade ja kellaaegade leidmiseks ning arvutamiseks. Kuupäevaobjekti piirkond on -100000000 kuni +100000000 päeva ehk arvestatuna 1.jaanuarist 1970 kell 00:00:00 UTC ( Universal Cooridnated Time). Kuupäevad arvestatakse millisekundites.
Uus kuupäevaobjekt moodustatakse operaatori new abil

var kuupaev = new Date( parameetrid )
Parameetrina saab kasutada andmeid aasta, kuu, päeva, tundide , minutite, sekundite kohta, mis avaldatakse täisarvudes, näiteks:

var aastapaev = new Date(2009, 5, 12, 10, 30, 12);
Kuupäevad ja kellaajad arvutatakse kohaliku aja järgi. Parameetrina või kasutada ka stringi kujul " month day, year hours:minutes:seconds", näiteks:

var aastapaev = new Date("May 12, 2009 15:55:36");
Stringis tuleb kuu kirjutada ingliskeelsena, tuleb jälgida, et komad ja koolonid stringis oleksid vajalike andmete vahel ja et kogu string oleks jutumärkides. Kui jätta parameetritest välja kellaaeg, siis kuvatakse brauseri aknas nende väärtuseks 00:00:00.
Kui avaldises parameetrid üldse ära jätta, siis saadakse tulemusena jooksev kuupäev.

var aastapaev = new Date();

document.write(aastapaev);

Meetod get

Meetodi get abil leitakse kuupäevaobjektist vastavalt

päev - getDate
nädalapäev - getDay
kuu - getMonth
aasta - getFullYear
tunnid - getHours
minutid - getMinutes
millisekundid - getMilliseconds
ajatsoonile vastav tundide arv - getTimezoneOffset

Leia nädalapäev 6.11.2015

var synnipaev = new Date("November 6, 2015");

var paev = synnipaev.getDay();

document.write(paev);

Antud näites leiame nädalapäeva ning saame tulemuseks 5 (laupäev).
Leiame mitu päeva on jäänud aasta lõpuni (2009):
päevade arv aasta lõpuni

var tana = new Date();

var aastavahetus = new Date("December 31, 2009");

//millisekundite arv 1.01.1970 kuni selle aasta (2009) lõpuni avaldub...

var millisek1 = aastavahetus.getTime();

//... ja millisekundid selle tänasest (12.05.2009) aasta lõpuni

var millisek2 = tana.getTime();

//leian vahe

var vahe = millisek1 - millisek2;

//aasta lõpuni jääv päevade arv; päevas on 86400000 millisekundit

var aeg = vahe/86400000;

//väljastan tulemuse, ja ümardan kaks komakohta

document.write(Math. round (aeg*100)/100);

Meetod set

Meetod set abilmääratakse objektile Date vastavalt aasta (setFullYear), kuu (setMonth), tunnid (setHours), minutid (setMinutes), millisekundid (setMilliseconds), kohalik aeg (setTime) jms.

Meetod to

Meetod to abil saadakse kuupäevaobjektist string kas Greenwichi aja (toGMTString) või kohaliku aja (toLocaleString) suhtes.

Meetod parse

Meetod parse abil lietakse aeg millisekundites, mis on möödunud 1.jaanuar 1970 keskööst kuni määratud päevani.
meetod parse

millisek = Date.parse(" June 30, 2009 14:55:26");
Kui meetodit kasutatakse kuupäevaobjekti juures, väljastatakse kuupäev ja kellaaeg.

var kuup =new Date();

//seame väärtuse setTime() abil

kuup.setTime(Date.parse("Aug 1,2009"));

document.write(kuup);

Loetava kuupäeva loomine

Loaetav kuupäev

Date.prototype.getDateString = function(str)

{

var paevad = ['pühapäev', 'esmaspäev', 'teisipäev', 'kolmapäev', 'neljapäev', 'reede','laupäev'];

var kuud = ['jaanuar', 'veebruar', 'märts', 'aprill', 'mai', 'juuni', 'juuli', 'august','september', 'oktoober', 'november', 'detsember'];

str=str. replace ('%nadalapaev', paevad[this.getDay()]);

str=str.replace('%paev', this.getDate());

str=str.replace('%kuu', kuud[this.getMonth()]);

str=str.replace('%aasta', this.getFullYear());

return str;

};

var tana = new Date();

var oige = tana.getDateString('%nadalapaev - %paev.%kuu %aasta');

document.write(oige);

Kellaaeg

Date.prototype.getTimeString = function(kell)

< else

document.esitlus.src = pilt[pildinr-1]

}

//järgmine pilt

function jargminepilt(){

if(pildinr

pildinr++

}

document.esitlus.src = pilt[pildinr-1]

}

Eelmine

Järgmine

Image Map

Image Map on html-dokumendis asuv hüperpilt (näit. maakaart ), mille eri osadele on kinnistatud erinevad hüpertekstlingid:

circle - ring - antakse xy-kordinaat ja raadius
rect - ristkülik - antakse ülemise vasakpoolse nurga xy-kordinaadid ja alumise parempoolse xy-kordinaadid
poly - hulknurk - antakse iga nurga xy-kordinaadid, nurkasid loetakse päripäeva

ImageMap

Image Map

function hiiregayle(name)

{

document.form. lahter . value = name;

}

Hiireoperatsioonid:

onMouseDown / onMouseUp / onMouseOver /
onMouseMove / onMouseOut- Hiire liikumine mingi elemendi kohal

Frame:

JSi frame(raam) objekt on esindus HTML raamist mis kuulub html frameseti.
Frameset defineerib ära raamid mis koos loovad brauseri akna. Js frame objekt on window objekti omand.
Atribuudid

frames – Massiiv akna raamides või raami seadmine.
name –Raami nimi.
length –Raami massiivi pikkus.
parent – Käesoleva raami vanem.
self – Käesolev raam.

Meetodid

blur ()
focus ()
setInterval()
clearInterval()
setTimeout( avaldis , millisekundid) - Kui millisekundid aeguvad, hakkab avaldis tööle.
clearTimeout(timeout)
Alert Box

Alert box'i kasutatakse juhul kui on vaja olla kindel, et informatsioon jõuab kasutajani.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu, protseduuri jätkamiseks.
alert("mingi tekst");

Confirm Box

Confirm box'i kasutatakse juhul kui on vaja, et kasutaja kinnitaks midagi v. oleks millegiga nõus.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu või valima "Cancel" nupu.
confirm("mingi tekst");

Prompt Box

Confirm box'i kasutatakse juhul kui on vaja, et kasutaja kirjutaks midagi sisestus -väljale.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu või valima "Cancel" nupu või siis kirjutama midagi sisestus-väljale, et jätkata protseduuri.
prompt("mingi tekst","vaikimisi väärtus");

Lihtene hüpik-aken

Html'is saab avada uue akna, kasutades target ="_blank" elementi. Lihtne moodus , kuid pole võimalik lehekülje üle kontrolli saavutada, s.t. et kõik tööriista- ja kerimisribad kuvatakse ning samuti ei saa mõjutada akna suurust.
Nüüd, võttes appi JavaScript'i, saame luua uue akna mis kuvatakse just sellisena nagu tahame. S.t. et JavaScript ise avab akna mille suurus ja asukoht on autori poolt määratud. Samuti võib JavaScript vajadusel uue akna sisu luua v. siis selle leida oma saidist.
Kõigepealt kirjutame koodi dokumendi "head" sektsiooni :
window. open ('jav/popup_1.htm','name','
height =255, width =250,toolbar=no,directories=no, status =no,menubar=no,
scrollbars=no,resizable=no');
"window.open" on JavaScript meetod mida kasutatakse brauseri uue akna avamiseks. Sellel meetodil on kolm parameetrit:

Esimene parameeter sisaldab faili nime, mis avatakse uues aknas. Selles näites on faili nimeks jav/popup_1.htm.
Teine parameeter on nimi millega määratakse uus aken. Juhul kui lehel on mitu hüpik- akent siis tuleb need määrata erinevate nimedega. Vastasel juhul, järgmiste hüpik-akende käivitamisel, valib skript sama nimega akna.
Kolmas parameeter määrab hüpik-akna suuruse, milliseid tööriista v. kerimisribasid kuvatakse ning kas akent on võimalik suuremaks v. väiksemaks venitada (resize/noresize). Näites on hüpik-akna suuruseks 255 korda 250 pikselit. Samuti puuduvad uuel aknal kerimis, tööriista ja staatusriba. Ka ei saa külastaja akna suurust muuta.

Selleks, et Javascripti käivitada on vaja leida kõigepealt koht. Oletame, et skript käivitub siis kui lingile klikkida. Sellisel juhul näeb kood välja umbes selline:
Kliki siia
Nüüd kui külastaja klikib lingile siis avane uus aken mis omakorda on genereeritud JavaScript'i poolt ( eelduseks on see, et külastaja brauser toetab skripti).
Selleks, et näha kuidas skript töötab, siis
vajuta siia.
Scripti näited if:
Näide 1:
var x=5; y=11;
if (x>y)
                   {z = x; document.write("x on suurem kui y")}
          else
                   {z = y; document.write("y on suurem kui x")}
          document.write("
suurema muutuja väärtus on "+z)
//Kirjutab "Lõuna!" kui kell on 12
var d=new Date();
var time=d.getHours();
if (time==12)
document.write("Lõuna!");
if (a==0) else if (a j )

Function:

Näide:
function vajutamind()
alert("Tere Taas!");

Kasutatud kirjandus:

http://www.google.ee/
http://www.cs.ut.ee/~epuman/javascript.html
http://pyramdesign.angelfire.com/pyramdesign.html
http://jscode.org/JavaScript1_Reinman.pdf
http://metshein.com/index.php?option=com_content&task=view&id=537&Itemid=26
http://et.wikipedia.org/wiki/Esileht
www.annaabi.com
http://www.w3schools.com/js/default.asp
www.mindbridge.ee/kaimar/materjalid.html
www. neti .ee/info/top1000.html
www.triin.net/2006/05/10/veebipraktikad- annotatsioon .pdf
http://www.kanepig.edu.ee/index.php?option=com_content&view=article&id=57&Itemid=76
36

.DOC Laadi alla originaalfail 40 lk · .doc · 55 allalaadimist

100 punkti Autor soovib selle materjali allalaadimise eest saada 100 punkti.

~ 40 lehte Lehekülgede arv dokumendis

2009-11-29 Kuupäev, millal dokument üles laeti

55 laadimist Kokku alla laetud

1 arvamus Teiste kasutajate poolt lisatud kommentaarid

steff Õppematerjali autor

OBJEKTID. Objekti deklareerimine. Objekti loomine. Objekti muutuja poole pöördumine. Objekti omaduste muutmine. Objekti loomine.

Sisseehitatud objektid(JavaScript keele objektid: massiiv, Math-objekt(MATH.PI ?), Date-objekt, String-objekt; brauseri poolt defineeritud objektid: Window-objekt, dokumendiobjekt).

HTML DOM objektid. Meetod ja atribuudid. 3 näidet

SÜNDMUSED

Pildid.
Kihid.
Hiireoperatsioonid.
Frame'id.
Hüpikaknad. (pop up window)
Vormid.

Scripti näited:
if, switch, for, while, function

javascript referaat objekt näited switch while function vormid hüpikaknad pildid kihid frame sündmused html dom objektid hiireoperatsioonid

Kasutatud allikad

Sarnased õppematerjalid

doc

Scriptikeeled

Side) interpreteeritav objektorienteeritud programmeerimiskeel, mida kasutatakse koos HTMLiga veebilehtede koostamisel. Veebilehe laadimisel kuvab brauser selle vastavalt HTML-dokumendi tekstile ja täidab ka selles paikneva Javascripti programmi. Põhimõt e on HTML vormide valideerimiseks · interaktiivsuse tõstmiseks · dünaamilisuse tõstmiseks Javascript on lihtne ja tasuta Shellscript , JavaScript, VBA Skriptikeelte plussid Kiire loomistsükkel Lihtne õppida Platvormist sõltumatu Kompaktne ning suhteliselt kiire · Skriptikeelte miinused Piiratud funktsionaalsus (sisseehitatud vahendid) Kood avalikult nähtav Vähe töövahendeid (esialgu) JAVASCRIPT. Ajalugu. JavaScript loodi firma Netscape poolt 1995 aastal · Esmalt sai see nimeks LiveScript · Peale suuremat levimist on talle tehtud laiendusi eri firmade poolt

Arvutiõpetus

doc

Kliendipoolse JavaScript'i lühikonspekt

........................................................................................................4 3. Muutujad ...............................................................................................................4 4. Avaldised ja operaatorid ........................................................................................5 6. Funktsioonid ..........................................................................................................8 7. Objektid .................................................................................................................8 8. Jadad ......................................................................................................................9 1. Veebibrauseri programmeerimiskeskkond ................................................................9 2. JavaScript'i lisamine HTML dokumenti .................................................................10 3. JavaScript'i programmi täitmine ..

Informaatika

doc

Skriptikeeled

KONTROLLTÖÖ SKRIPTIKEELED. Põhimõtted. Plussid/miinused. Erinevad skriptikeeled. - Javascript on Netscape Communications Corporation'i poolt loodud kliendi-poolne (Client-Side) interpreteeritav objektorienteeritud programmeerimiskeel, mida kasutatakse koos HTMLiga veebilehtede koostamisel. Veebilehe laadimisel kuvab brauser selle vastavalt HTML-dokumendi tekstile ja täidab ka selles paikneva Javascripti programmi · Skriptikeele plussid 1.kiire loomistsükkel 2.lihtne õppida 3.platvormist sõltumatu 4.kompaktne ning suhteliselt kiire

Javascript

134

pdf

Programmeerimine PHP

.."; ?> Komplekstüübid Massiiv - array Massiiv on andmestruktuur, mis kujutavad ennast elementide hulga. Teisi sõnu, massiivid on omapärased konteinerid, mis võivad hoida samaaegselt mitu väärtust. Vaatleme neid eraldi peatükis 4. Näide '; // väljund: text echo $arr[2]; ?> Objekt - object Programmeerimise mõistes objekt on teatud hulk muutujaid, välju koos teatud hulga meetoditega, mis opereerivad muutujate väärtustega. Muutujaid ja meetodeid käsitletakse ühe tervikuna. Analoogias reaalse eluga võib muutujaid mõista näiteks kui mingi eseme kirjeldust ja meetodeid kui tegevusi, mida selle esemega on võimalik teha. Objekte vaatleme lähemalt peatükis 5. Näide sum(); class Test {

Allika?petus

docx

Lõputöö veebileht treeningute broneerimiseks

.................................................9 1.5.1 Nõuded......................................................................................... 9 1.5.2 Süsteemi tegijad........................................................................10 1.6 Arendusvahendid ja tehnoloogiad....................................................10 1.6.1 PHP............................................................................................. 11 1.6.2 JavaScript................................................................................... 11 1.6.3 jQuery......................................................................................... 11 1.6.4 MySQL........................................................................................ 12 1.6.5 HTML.......................................................................................... 12 1.6.6 CSS.........................................................................

Andmebaasid ja infootsingud

210

docx

PHP EDASIJÕUDNUD RAAMAT

6 FROM albumid 7 '; 8 //mysql käsu saatmine andmebaasile $valjund = mysqli_query($yhendus, $paring); 9 //väljastamine 10 while($rida = mysqli_fetch_assoc($valjund)){ 11 printf("Keskmine hind: %0.2f eur
", $rida['Keskmine hind']); 12 printf("Albumeid kokku: %d tk
", $rida['Albumeid kokku']); 13 } 14 Tulemuseks järgmised kaks rida: ? 1 Keskmine hind: 15.15 eur 2 Albumeid kokku: 5 tk Kasutaja dünaamilised päringud Eelmised näited tegid täpselt seda, mida sina "palusid" teha. Aga muudame päringud sõltuvaks kasutajast. Teeme näiteks otsingukasti, kuhu saab sisestada sõna ning vastavalt sellele tehakse päring. Loome ühe lihtsa vormi ühe tekstivälja ja nupuga. ? 1

4 Edasi oleks vaja kontrollida, kas kasutaja on enne nupule vajutamist midagi lisanud. Kasutame selleks

Informaatika

212

docx

Veebistuudium arendus ASP.NET

Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio ja SQL Server'i baasil ASP.NET Tallinn 2011 ASP.NET ASP.NET on .NET raamistiku moodul, mis võimaldab sul luua veebirakendusi, kasutades sealjuures minimaalselt koodi. ASP.NET ei ole mitte ASP (Active Server Pages) uus versioon, vaid täiesti uus lähenemine veebirakenduste loomisele. Erinevalt ASPist ja ka PHPst, mis on peamiselt skriptimise keeled, on ASP.NET lehtede taga olev kood täielikult objektorienteeritud. Seega tuleks ASP.NETi võrrelda mitte PHP vaid JAVA rakendustega. Kasutaja saab, kuid ei pruugi täpselt mõelda HTMLi eripärade peale. Pigem määrab ta, milliseid komponente ta soovib veebilehel näha ning need näidatakse, arvestades vajadusel kasutaja veebilehitseja eripäradega eriti kehtib see mobiilseadmete kohta. Koodi ASP.NET lehtede tarbeks võib kirjutada ükskõik millises .NET keeles. Lisaks veebivormidele on võimalik oma

Veebiprogrammeerimine

docx

ICD0007 - Veebitehnoloogiad teooria/konspekt

$numbers = [“math” => 1, “chemistry” => 3]; ja sellest üle käimiseks: foreach ($numbers as $key => $value) {} on mugav konstruktsioon sõnastikust üle käimiseks. Kui realõppu PHP_EOL ei pane, siis prindib üksteise otsa. Funktsioonid. Sarnane nagu Pythonis. Aga funktsiooni saab kasutada ka enne kui funktsioon on defineeritud (Pythonis peab olema vastupidi). Nimetamine. Sisse kirjutatud funktsioonid on vana viisi (nt array_push). Sisse ehitatud objektid on CamelCase’is. Kõige õigem on kasutada Java-pärast kirjapilti. Nt $subjectGrade $getSubjectGrades tiilireeglid kontrollivad seda. Faili lugemine. $lines = file(‘../data.txt’); Annab read listina. Faili kirjutamine käib file_put_contents(‘fail’, data, FILE_APPEND); | tähendab bitwise or ja sellega saab eraldada konstante. $str = join(‘ + ‘, [1,2,3]); $list = explode(“,“, “1,2,3”); list ($host, $port) = explode(“:”, “localhost:80”);

Veebiprogrammeerimine

Rohkem sarnaseid