A Javascript programozási nyelv

Példaprogramok

Egéresemények

A következő példákban bizonyos egéreseményekre (onClick, onMouseOver) teszünk függvényeket. A harmadik pedig a link-ek egy újabb lehetőségét mutatja be.


Vissza az előző oldalra 
<script type="text/javascript">
function setRedStyle()
{
	document.getElementById('example_form_01').style.backgroundColor = '#ff0000' ;
	document.getElementById('example_form_01').style.color = '#ffffff' ;
}
function resetStyle()
{
	document.getElementById('example_form_01').style.backgroundColor = '#EEF4FF' ;
	document.getElementById('example_form_01').style.color = '#000000' ;
}
</script>
...
<input type="button" value="Piros háttérszin" onClick="setRedStyle()" />
<input type="button" value="Eredeti háttérszin" onClick="setRedStyle()" /><br />
<a href="JavaScript:window.top.history.back();">Vissza az előző oldalra</a>

Form használat

Ebben a példában a néhány rádió és egy hagyományos gomb manipulálását figyelhetjük meg. Valahányszor rákattintunk a nyomógombra, annak értéke megváltozik a legutóbb érvényes rádió gombnak megfelelő értékre.

Soul and R&B Jazz Classical 
<input type="hidden" id="hiddenObject" VALUE="hidden value" />
<input type="button" id="visibleObject" VALUE="click me" /> 
<input type="radio" name="musicChoice" VALUE="soul-and-r&b" />Soul and R&B
<input type="radio" name="musicChoice" VALUE="jazz" />Jazz
<input type="radio" name="musicChoice" VALUE="classical" />Classical

<script type="text/javascript">
// this should be in onLoad event

function updateHiddenObject(){
	document.getElementById('hiddenObject').value = this.value ;
}

function updateObject(){
	this.value = document.getElementById('hiddenObject').value;
}

document.getElementById('visibleObject').addEventListener('click',updateObject,false);	
for( var i in document.getElementsByName('musicChoice') ){
	document.getElementsByName('musicChoice')[i].addEventListener('click',updateHiddenObject,false);
}	
</script>

Jacobi és Seidel iterációk

Jacobi és Seidel

Tic-tac-toe

Tic-tac-toe

Flyers

Flyers
Mozgatható ablakok.
Kattints a háttérre új ablak létrehozásához. A fejlécet megragadva mozgathatod őket.
A program a prototype alapú öröklödést, és az eseménykezelést demonstrálja.

Osztályok:

FlPosition (pozíció: x, y)
FlSize (méret: width, height)
FlRGBColor (szín: red, green, blue)
FlWidget (GUI komponensek őse)
FlLabel (Cimke GUI komponens) őse: Widget
FlSystem (Az alaprendszer osztálya)
FlProc (Folyamat osztály, folyamatok őse)
FlDesktop (Desktop folyamat) őse: FlProc
FlMainWindow (Ablak osztály) őse: FlWidget
FlTestProc (egy teszt folyamat) őse: FlProc

Position

Elemek pozícionálása
Egy adott elemet a gombokkal tudod mozgatni, eltűntetni, megjeleníteni.

A következő linkeken a html fáljhoz szükséges további forráskódok érhetőek el:

Scroll

Egy DOM Gördülő Szöveges Ablak
Egy ablakban szereplő szöveget láthatunk majd, ami a szöveg végéig gördül.

A következő linkeken a html fáljhoz szükséges további forráskódok érhetőek el:

Sort

Tömb rendezése
Egy adott felületbe beírt szöveget tudunk rendezni.

A következő linkeken a html fáljhoz szükséges további forráskódok érhetőek el:

Styleswich

Stíluslap váltás
A felsorolt stíluslapok között lehet váltogatni.

A következő linkeken a html fáljhoz szükséges további forráskódok érhetőek el:

Tili-toli

Tili-Toli játék Javascriptben.

Modulok

Modulok
A modul minta használatát mutatja be egy egyszerű matematikai modulon keresztül.

A következő linkeken a html fáljhoz szükséges további forráskódok érhetőek el:

Analóg óra időzítővel

JavaScriptes "analóg" óra

Ki nevet a végén?

Táblás társasjáték böngészőben

Képek diavetítése

Képek diavetítése JavaScripttel

Node.js és CouchDB működés közben

Ez az alkalmazás egy demó program, amely szemléltetni szeretné, hogy csak JavaScript használatával milyen egyszerű egy teljes webes alkalmazást elkészíteni.

Az alkalmazás tartalmazza a szerver (Node.js) és a kliens (jQuery) oldali kódot. Azonban az adatbázishoz fel kell telepíteni egy CouchDB-t és létrehozni egy 'test' nevű adatbázist, amelynek készítünk egy 'main/data' nevű nézetet, amely visszaadja az adatokat.

Floyd-diagram megjelenítő

Egy html oldalba épített program, amely a megfelelő JSON formátumból építkezve megjeleníti a neki megfelelő Floyd-diagrammot. Részletesebb leírást tartalmazza a tömörített anyag.

Egyszerű HTML Parser

A böngészőben megjelenő HTML oldal szerkezetét, elemeit illetve tulajdonságait adja vissza nyers és "olvasható" formátumban.
Szerző neve: Oláh Péter
Készítés éve: 2014.

Használat:

  1. A kívánt oldal címének beírása a beviteli mezőbe.
  2. "Get elements from this site" gombra kattintás.
  3. Sikeres letöltés után lehetőségünk lesz nyers illetve fa nézetben is megnézni egy HTML oldal elemeit.

Az alkalmazás az alábi linken kipróbálható illetve forrása letölthető innen.

Simple HTML Parser

Memóriajáték

Egy egyszerű memóriajáték, amely az AngularJS keretrendszerrel íródott.

A forrás letölthető innen.

Prezentáció pörgető

Egy kép nézegető, mely alkalmas prezentáció bemutatására is.

A forrás letölthető innen.

Prezentáció pörgető

Chat kliens

Egy chatelésre alkalmas böngésző kliens. A backendet bármilyen nyelven implementálni lehet.

A forrás letölthető innen.

Asztal a böngészőben

Az Ext JS jellmezően üzlezi web-alkalmazások fejlesztéséhez használják, így a példa program is egy asztalt hoz létre a böngészőben.
Érdekes benne az ablak kezelés megvalósítása illetve a különböző komponensek egyszerűsége.
A szerver implementáció nélkül a funkciók többsége nem használható. Egy rar archívumban letölthető a példakód, ami mögé, ha berakjuk a szervert, már teljes mértékben használhatóvá válik.

WEBSHOP termék kereső angular js-el

A forrás letölthető innen.

webshop termékkereső