Helló, az utolsó cikkben a szintaxist néztük meg JavaScript nyelv. Megtanultuk, mik a hurkok, változók, tömbök, logikai operátorok, funkciók és így tovább.

Mindezek a műveletek az oldalon belül zajlanak, és semmilyen módon nem jelennek meg. Ma megtanuljuk, hogyan jelenítsük meg a szükséges adatokat a képernyőn. Egy szabályos numerikus változót az ActionScript használatával számos módon jelenítünk meg.

Az alábbiakban feltüntetett összes módszer használatához hozzá kell férnünk a dokumentum objektumhoz. Ez a JavaScript nyelv különálló eleme, amelyet webhelyekkel való együttműködésre terveztek.

Első módszer: írási függvény

Egy változó ilyen módon történő megjelenítéséhez létre kell hoznunk. Írjuk a következő sort: var message = "Hello World!"

Most beszéljünk a writeln függvényről. Csak az oldal eredeti verziójának betöltésekor célszerű használni, így a belső tartalom megváltozik.

Az olyan függvények használatával, mint a writeln, létrehozhat egy teljes egészében JavaScriptben írt oldalt. Ezenkívül ez a funkció hasznos lehet, ha csökkenteni kell a szervertől érkező kérések számát.

Ennek a funkciónak a használatához írjuk a document.writeln parancsot, zárójelbe írjuk a változónk nevét, amely ezután megjelenik a képernyőn.

Figyel! A weblapokkal való munkavégzésre vonatkozó legtöbb utasítás a dokumentum névterének összetevője, ezért azt a függvény elé kell beírni, ponttal elválasztva.

Második út: figyelmeztető funkció

Nem szerepel a dokumentum névtérben, mint a writeln, így nem kell szerepelnie. Az Alert nagyszerű lehet a weboldal kódjának hibakeresésére. Használható felhasználói interakcióra is, de ez nem ajánlott.

Az Alert bármely JavaScript-függvény szabványos szintaxisával rendelkezik. Először az alert parancsot írjuk, zárójelbe az értéket vagy a változót.

Ezt követően az oldal tetején egy ablak jelenik meg a felhasználónak szóló üzenettel, amely egy „OK” gombot tartalmaz.

Ennek a funkciónak számos felhasználási módja lehet, de ne használja túlzottan, amikor egy webhelyen dolgozik, mivel a felugró ablakok irritálhatják a felhasználót. Ezenkívül néhány bővítmény blokkolja az olyan funkciókat, mint az alert.

JÁVA

var message = "Hello World!"; document.writeln("üzenet"); alert("üzenet"); document.getElementById("hl").innerHTML = "üzenet"

Másolat

Harmadik mód: getElementById függvény

Ez az információk képernyőn való megjelenítésének legbonyolultabb és legnépszerűbb módja. Ezzel megváltoztathatja HTML oldalának szöveges tartalmát.

Mint tudjuk – mindent HTML címkék azonosítókkal rendelkezhetnek. A funkciónk nekik szól. A GetElementById az azonosítója alapján talál egy elemet, tetszés szerint módosítja a címke tartalmát, miközben a tartalom többi részét változatlanul hagyja.

Ez a függvény a dokumentum névterének része, amihez meg kell adni, mielőtt maga a függvény.

Amint azt már észrevetted, a getElementById mellett van egy értelmezhetetlen innerHTML parancs, amelyet egy egyenlőségjel és szöveges karakterlánc. Tehát ez a parancs az egyenlőségjellel együtt megkeres egy adott címkét, és „egyenlővé teszi” annak tartalmát az idézett karakterlánccal.

Ez a módszer a legalkalmasabb szöveg beszúrására JavaScripten keresztül, mivel számos előnnyel rendelkezik:

Nincsenek felugró ablakok, amikor a funkció fut.

A funkció csak HTML elemekkel működik.

Az idézett szöveget címkékbe lehet csomagolni. Így a semmiből írhat JavaScript oldalt.

Következtetés

Ebben a cikkben arról beszéltünk, hogyan jeleníthet meg információkat a képernyőn. Ez történhet üzenetekkel, valamint a weboldal belső tartalmának megváltoztatásával. Csak a felületét karcoltuk meg a dokumentum névterének, amely számos funkcióval rendelkezik a weboldallal való munkavégzéshez. A következő leckékben részletesen megismerkedünk velük.

A fent leírt funkciókkal saját maga is kísérletezhet, vagy letöltheti forrásainkat. Jó szórakozást a tanuláshoz!

Bizonyos esetekben előfordulhat, hogy PHP globális változókat kell átadnia egy JavaScript-szkriptnek. Ebben a cikkben elmagyarázom, hogyan kell PHP-változókat használni JavaScriptben, és néhány példát mutatok be.

PHP-változók a JavaScriptben

Számos forgatókönyv létezik, amelyeknél előfordulhat, hogy PHP-változókat kell tartalmaznia a JavaScript-kódban. Például, ha egy webhely oldalát egy felhasználó kéri, PHP modul a szerveren számítások elvégzésével generálja az oldalt, és megjeleníti az összes oldalváltozót a böngészőablakban.

Az oldal betöltése után már nem irányíthatja azt (hacsak nincs időalapú szervere). Ha azonban PHP-változókat ad át a JavaScript-kódnak az oldal betöltésekor, továbbra is használhatja őket a JS-szkriptekben, és szabályozhatja az oldal megjelenítését és dinamikus viselkedését.

Most nézzük meg, hogyan lehet változókat átadni JavaScriptről PHP-re vagy fordítva.

PHP-változók átadása a soron belüli JavaScript-nek

Két fő módszer létezik a JavaScript-kód HTML-oldalakba helyezésére. Az első az, hogy a kódot ugyanarra az oldalra, egy szakaszba vagy a -ba helyezzük el. Tegyük fel, hogy van soron belüli JS kódunk egy szakaszban, és egy PHP felhasználónév-változót szeretnénk átadni a JavaScript-nek. Ebben az esetben a következő kódot kell használnunk:

var felhasználónév = "";

figyelmeztetés(felhasználónév);

...

Új változót definiáltunk a JS-ben, és felhasználónévnek neveztük el. Ezután ezt a JS PHP változót hozzárendelte a $username változóhoz, megismételve azt. Természetesen a $username változót korábban definiálni kellett a sor feletti oldalon.

Ne feledje, hogy a $username karaktert kiíró PHP-kód körül dupla idézőjeleket (" ) használtunk, akárcsak a JS változók deklarálásakor. Ha a PHP változó egy szám, akkor nem kell idézőjeleket használnia. De ügyeljen arra, hogy az idézőjeleket helyesen használja, mert a kimeneti karakterlánc idézőjeleket is tartalmazhat, és ez megtöri a JS-kódot. PHP-változók átadása külső JavaScript-nek A JS kód is tárolható egy külső fájlban (például script.js), amelyhez társítva van

HTML oldal

. Ha például egy időváltozó értékét (másodpercben) szeretné átadni egy JS időzítőnek, akkor a következő kódot használhatja:

var másodperc = ;

... Kód a külső JS-fájlban (script.js): setTimeout(function() ( window.location.href = "/"; ), másodperc * 1000); A fenti kódban először inicializáljuk PHP érték

változó $seconds változó JS másodperc . A változó ezután elérhető a DOM-ban, és a beépülő szkript (script.js) használhatja. A fenti példában a felhasználó át van irányítva ide

Aztán megnéztük, hogyan kell kezelni a felhasználói eseményeket. Ezúttal azt fogjuk megvizsgálni, hogyan lehet néhány felhasználói bevitelt felhasználni, és másokkal kombinálni egyszerű oldal, üdvözlöm.

examples/js/pure_js_greating.html

Hello World Keresztnév: Vezetéknév: Köszönj!

function say_hi() ( var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Hello " + fname + " " + lname; document.getElementById ("eredmény").innerHTML = html; ) document.getElementById("say").addEventListener("click", say_hi);

Megpróbál!

Ebben a példában egy kicsit több HTML-ünk van, mint korábban. A gombon és a diven kívül, ahol az eredményeket fogjuk megjeleníteni, két beviteli elemünk is van. Mindegyik saját azonosítóval.

A JavaScript kódban van a say_hi függvény. A korábban megvizsgált getElementById metódust használja, hogy megkapja a bemenetet képviselő DOM elemet az id first_name azonosítóval. A visszaadott objektumnak van egy értékmetódusa, amely a felhasználó által az adott mezőbe beírt szöveget adja vissza.

Ezzel a módszerrel megkapjuk mindkét bemeneti elem tartalmát, és a kapott értékeket két változóhoz rendeljük: fname és lname .

Ezután ezekkel a változókkal létrehozunk egy HTML-részletet, és hozzárendeljük egy új html-változóhoz.

Ezután beállítjuk az innerHTML attribútumot (mint korábban is), hogy a generált HTML-t jelenítse meg. Az eredmény így nézhet ki: Nehézkes HTML készítés Még ebben is

egyszerű HTML többször kell a +-t használnunk, és a kód eléggé olvashatatlannak bizonyul. Képzeljük el, mi történne, ha egy bonyolultabb alkalmazást akarnánk létrehozni, ahol elemlistákat vagy akár táblázatokat szeretnénk létrehozni. A HTML-t menet közben generálni és beilleszteni a DOM-ba elég fájdalmas lenne. A Perl, Python vagy Ruby nyelven írt háttérprogramokban az emberek ugyanezekkel a problémákkal találkoztak. A megoldást különféle sablonmotorok létrehozása jelentette. Alapvetően a sablon egy HTML-részlet néhány helyőrzővel (kulcsszavakkal), egy bizonyos függvény ezt a HTML-részletet (sablont) kapja paraméterként, valamint több kulcs-érték párat. A függvény ezután visszatér

új HTML

egy részlet, amelyben a helyőrzőket a megfelelő kulcsok kapott értékeivel helyettesítjük.

A JavaScript változói különféle információk tárolására szolgáló tárolók.

Minden JavaScript változó saját egyedi névvel kell rendelkeznie, amely kezdődhet latin betűvel vagy "_" jellel.

Megjegyzés: A JavaScript változónevei nem kezdődhetnek számokkal.

Figyelem: mivel a JavaScript megkülönbözteti a kis- és nagybetűket, az azonos nevű változók különböző kis- és nagybetűkkel írva (például var és VAR) különböző változók lesznek.

Változók létrehozása

A változók létrehozását JavaScriptben gyakran hívják "közlemény" változók.

A JavaScript változói a var paranccsal deklarálhatók.

//Változó létrehozása ex1 néven var ex1; //Hozzon létre egy ex2 nevű változót var ex2;

A fent létrehozott változók üresek lesznek, azaz létrehoztunk konténereket, de nem töltöttünk be értékeket.

Az értékek közvetlenül a létrehozáskor is betölthetők a konténerekbe, az alábbi példa szerint:

//Hozzon létre egy ex1 nevű változót, amely a 4 értéket tartalmazza var ex1=4; //Hozzon létre egy ex2 nevű változót, amely az 5 értéket tartalmazza var ex2=5;

Ahhoz, hogy értéket kinyerhessen egy korábban létrehozott változóból, hivatkoznia kell a nevére.

A következő példában kibontjuk a változók tartalmát, és azonnal kiadjuk az oldalra a document.write paranccsal.

//Írjuk be a 4-es számot az ex1 változóba var ex1=4; //Írjuk be az 5-ös számot az ex2 változóba var ex2=5; //Kiírja az ex1 változó tartalmát a document.write(ex1+" oldalra
"); //Kiírja az ex2 változó tartalmát document.write(ex2+"
"); //Az ex2 változó tartalmának módosítása ex2=200; //Az ex2 változó új tartalmának kiadása document.write(ex2);

Gyors nézet

String változók

A számok mellett tetszőleges szöveget is tárolhat változókban. A szöveget tároló változókat karakterlánc-változóknak nevezzük.

Amikor szöveget ír egy változóba, ügyeljen arra, hogy dupla (") ill egyetlen idézőjel (").

//Az ex változóba írd be a „Helló mindenkinek!” karakterláncot var ex="Üdv mindenkinek!"; //Az ex változó értékének kiírása az oldalra document.write(ex);

Gyors nézet

Változók meghatározása varral és anélkül

A JavaScriptben definiálhat változókat a var paraméterrel vagy anélkül.

//Új változó létrehozása a var var ex=123 értékkel; //Új változó létrehozása var ex2=20 nélkül;

Azt gondolhatnánk, hogy a var nélküli és a változók deklarálása mindig ugyanazt az eredményt adja, de ez csak akkor igaz, ha a deklaráció globális kontextusban történik (azaz az összes függvényen kívül).

Ha a deklaráció helyi kontextusban történik (azaz egy függvény törzsében), a var jelű deklaráció létrehoz egy helyi változót (azaz egy olyan változót, amely csak ennek a függvénynek a törzsében lesz elérhető, és a függvény után megsemmisül végrehajtásra kerül), a var nélküli deklaráció egy globális változót hoz létre (vagyis egy olyan változót, amely egy adott szkripten belül más függvények számára is elérhető lesz).

Ne feledje, hogy a helyi és globális változókról ebben az oktatóanyagban később még többet fogunk beszélni.

A változók törléséről és újradefiniálásáról

A változók újradefiniálásával nem törli a bennük tárolt értékeket.

Var ex=123; var ex; document.write(ex); // 123. nyomatok

Ha törölni szeretne egy változót a JavaScriptben, és azt nem a var segítségével deklarálták, használhatja a delete operátort.

Ex=123; törölje ex;

A delete operátor nem tudja törölni a var paraméterrel deklarált változókat, így ha egy változót var-al deklaráltunk, akkor a törlésének egyetlen módja a hozzárendelés null érték vagy undefined.

Var ex=123; ex=null; // vagy ex=undefined

Csináld magad

1. feladat. Javítsa ki a hibákat az alábbi kódban:

1. feladat

var 33var=33; document.write(33var); document.write("
"); var str1=Üdv mindenkinek!; document.write(str1); document.write("
"); var vaR = 288; document.write(var); document.write("
");

2. feladat. A secred1.js külső fájl tartalmazza a sec1, sec2, sec3 és sec4 változókat, amelyek a kódszó betűit tartalmazzák (nem sorrendben). Csatlakoztasson egy külső fájlt, és keresse meg a kódszót változó értékek megjelenítésével az oldalon.

A weboldal fejlesztés során gyakran előfordul, hogy valamilyen értéket (változót, tömböt) kell átadni a javascriptnek, ilyenkor általában azt tanácsolják, hogy pl.

var változó = alert(változó);

A beágyazott Javascript vegyes érzelmeket vált ki.

Először is, ez szinte mindig nem a kódstílus szerint történik.

Másodszor, nehéz a hibakeresés.

Harmadszor, az ilyen kódot a böngésző nem tárolja gyorsítótárban.

Figyelem, kedves olvasó, a fenti példa több mint teljesen helytelen, amire azonnal figyelmeztetlek, és pontosan így nem szabad, de arról, hogyan kell helyesen, átgondoltan és körültekintően, az alábbiakban olvashat.

De ha például nem vagy magas erkölcsi elvekkel rendelkező ember, nyugodtan másolhatsz vele, és azt csinálhatsz vele, amit akarsz, én ezt nem tanácsoltam, sőt lebeszéltem.

Meggyőződésem, hogy a javascriptet kizárólag fájlokban kell tárolni,
html, hogy biztosítsa a böngészők normál gyorsítótárazását, és megkönnyítse ennek a szkriptnek a megtalálását a projektben.

De hogyan tudjuk átadni az értéket a PHP-ből, és ugyanakkor megőrizni a szép kódot?

A válasz az eval() használata Javascriptben.

Nézzünk egy példát a kapcsolatra google maps.

Először is csatlakoztassuk a Google Maps-t (könyvtárat)

azonnal inicializáljuk a térképek rajzolásának kezdetét a DOM betöltése után

Var $ = jQuery.noConflict(); $(document).ready(function () ( if ($("#map-canvas").length) ( function inicialize() ( var place = eval($("#map-canvas").attr("data -place")); var pos = new google.maps.LatLng(hely, hely); var mapOptions = ( középen: poz., nagyítás: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: ( stílus: google. maps.MapTypeControlStyle.DROPDOWN_MENU ), görgetőkerék: false, rotateControl: true ); var map = new google.maps.Map(document.getElementById("map-canvas"), map.setTilt(45); new google.maps.Marker (( pozíció: poz, térkép: térkép )); google.maps.event.addDomListener(window, "load", inicializál

Készítsük el a szükséges html elemeket

Ennek az utcai varázslatnak a magyarázata

js-ben minket a következő sor érdekel:

Var place = eval($("#map-canvas").attr("adat-hely"));

$("#map-canvas").attr("adat-hely")

Lekéri az id map-canvas elem data-place attribútumait, ami után az eval() átalakítja a karakterláncot js kóddá, pontosabban tömbbé, mert szögletes zárójelek vannak.

A HTML5 specifikációja szerint a böngészők kihagyják az adatokkal kezdődő címkék attribútumait – ez az attribútum nem befolyásolja a megjelenítést, de az értéke a javascriptben használható.

A html kód módosítható: