Z enostavnim klikom na izbrano knjižnico si celotno povezavo do knjižnice shranimo, potrebno jo je samo še prilepiti. Na voljo imamo tudi kratek »info« o posamezni knjižnici.

scriptsrc.net

JMerge

JMerge je enostavna spletna aplikacija, ki nam združi vse JavaScript datoteke. V označeno polje enostavno vnesemo svoj URL naslov.

Aplikacija nato sama poišče vse JavaScript datoteke in jih prikaže v seznamu. S klikom na povezavo lahko datoteke enostavno odstranjujemo iz seznama. Za generiranje skupne datoteke je potrebno samo še pritisniti gumb »Combine them!«. Rezultata je skupna JavaScript datoteka.

http://demo.lateralcode.com/jmerge/

Vir: http://www.lateralcode.com/combine-javascript-jmerge/

Stran občutljivo na čas lahko naredimo na več načinov. Ogledali si bomo primer, kjer se za preverjanje časa uporablja Javascipt koda in na podlagi tega vklopi CSS datoteko s stili.

Primer kode:

Opis kode:
Javascript kodo moramo dodati v glavo HTML datoteke. V prvem delu določimo spremenljivke katerim dodelimo trenuten čas. Nadaljujemo z IF zanko, kjer vklopimo določen CSS stil na podlagi ure. Če je ura večja od 7. ure in manjša od 19. ure se vklopi CSS stil »dan«. Drugače se vklopi CSS stil »noc«.
V primeru, če uporabnik nima podprtega Javasripta pa se vklopi alternativni CSS stil.

Prenesi kodo – Pomagalnik-JS_dan_noc

Ostali podobni primeri za časovno občutljivo stran:

• Javascript metoda: http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html
• PHP metoda: http://blog.strawberrysoup.co.uk/2010/01/07/dynamic-css-creating-time-sensitive-sites/

IE7 omogoči Internet Explorerju podporu W3C standardom CSSja in HTMLja:

• podpora za CSS značke:
  • parent > child
  • adjacent + sibling
  • adjacent ~ sibling
  • [attr], [attr="value"], [attr~="value"]
  • .multiple.classes (odpravi napako)
  • :hover, :active, :focus (za vse elemente)
  • :first-child, :last-child, only-child, nth-child, nth-last-child
  • :checked, :disabled, :enabled
  • :empty, :contains(), :not()
  • :before/:after/content:
  • :lang()
• podpora uvoženim CSS stilom
• nespreminja obliko dokumenta
• uporablja čisti CSS za uveljavo CSS pravil
• podpira W3C »box model in both standards« in »quirks mode«
• podpira fiksno pozicioniranje (flicker free)
• podpira overflow:visible
• podpira min/max-width/height
• odpravi pokvarjene (X)HTML elemente(abbr, object)
• standardizirano obnašanje form
• podpira PNG alpha transparenco
• »lightweight« script (11KB)
• podpira Microsoft Internet Explorer 5+ (Windows only)
• …

Knjižnico in dodatne informacije najdete na http://dean.edwards.name/IE7/ in http://code.google.com/p/ie7-js/.

Primer kode za povezavo

Primer kode za povezavo v novem oknu

OPOMBA: Določiti je potrebno obliko tipa miškinega kazalca (cursor: pointer;).

»onClick« funkcijo lahko uporabljamo tudi na drugih elementih.

Tukaj pride v veljavo Firebug Lite, ki je v obliki JavaScript knjižnice in nam omogoči uporabo osnovnih funkcij Firebug-a. Tako postane odpravljanje napak, ki so povezane z prikazovanjem v različnih brskalnikih zopet lažje.

Firebug Lite nam omogoča brez prenašanja in nameščanja uporabo osnovnih funkcij Firebug-a v vseh drugih brskalnikih. Vse, kar je potrebno narediti je vstaviti kodo, ki kliče knjižnico na spletu.

KODA:

Firebug Lite je tako vedno odprt v samem brskalniku. Če želite Firebug Lite uporabljati brez povezave do interneta, potem je potrebno prekopirati .JS in .CSS datoteko in ju uporabiti na enak način, kot uporabljate .JS in .CSS datoteke.

Primer Firebug-a Lite v IE.

V nadaljevanju si bomo ogledali Javascript kodo, ki nam omogoča prav to. V prvem delu kode shranimo v tabelo vse slike, ki jih želimo prikazovati na spletni strani, sledi funkcija, ki dodeli elementu IMG naključno sliko. Za prikazovanje slik je potrebno v HTML kodo vstaviti še element “<img id=”GlavnaSlika” />”.

OPOZORILO: Včasih se pri kopiranju popačijo narekovaji, tako da jih moramo vpisati ponovno.

Slednja ukaza sicer čedalje bolj zamenjujemo z hitrimi ukazi “F5″ za osveževanje in “Alt + smerna tipka levo/desno” za nazaj/naprej ali z ukazi samega brskalnika. Včasih pa že zaradi same spletne izkušnje ali potreb razvoja gumba uporabimo.

Osvežitev – F5
Nazaj – Alt + smerna tipka levo/desno

Za ta ukaz uporabimo Javascript kodo “history.go(-1)”, ki je implementirana v značko link. Številka v oklepaju nam pove, kakšen je korak nazaj.

Spreminjanje take kode zahteva veliko časa saj je potrebno spremeniti kodo na vsaki strani posebej. Da se izognemu temu in pohitrimo nalaganje same strani, vstavimo našo JavaScript kodo v zunanjo datoteko in jo povežemo z našimi stranmi preko povezave.

Primer enostavne Javascript kode na samem linku
<button onclick=”alert(‘Hello World!’)”>Hello World</button>

Primer klasične metode, kjer je koda v glavi v linku pa imamo klic na funkcijo
<script type=”text/javascript”><!–
function helloWorld() {
alert(‘Hello World!’) ;
}
// –></script>
…
<button onclick=”helloWorld();”>Hello World</button>

Zgornji del kode je tipični primer JavaScript kode. Na takšen način boste pisali vso kodo v JavaScriptu. Na hitro bom pojasnil, kaj pomeni, ampak za naš primer to ni pomembno.

Opis kode
Značka <script type=”text/javascript”><!– pove brskalniku, da sledi nekaj skriptnega jezika, ki se bo izvršil na uporabnikovi strani.

Atribut “Type” pove brskalniku za kakšen skriptni jezik gre, v našem primeru bo brskalnik uporabil JavaScript.

<! … // >
Ta del kode se uporablja, kadar vključimo kodo v HTML dokument. Preprečuje pa prikaz vsebine, ki je med začetkom in koncem.

function
Nam pove, da tu ustvarjamo novo funkcijo.

helloWorld()
“helloworld” je ime naše funkcije. par oklepajev sledi vsem imenom funkcije. Tu povemo funkciji, katere parametre oziroma spremenljivke bo prijela. V našem primeru jih nimamo, zato uporabimo samo oklepaja.

{ … }
Vse v oklepajih { } je glavn idel naše funkcije. V ta del pride koda, ki se izvrši, ko pokličemo funkcijo.

alert(‘Hello World!’);
Ta koda je enaka kodi, ki je bila prej v samem linku (onclick()), sedaj pa je shranjena v glavi.

Primer metode z uporabo zunanje datoteke(kodo vstavimo v glavo strani)
<script type=“text/javascript” src=“js-datoteka.js“></script>

Rabimo še JavaScript datoteko. Vsebina datoteke “js-datoteka.js”:
function helloWorld() {
alert(‘Hello World!’) ;
}

Funkcijo kličemo:
<button onclick=”helloWorld();”>Hello World</button>