JavaScript je populárny programovací jazyk používaný na vytváranie skriptov na strane klienta , ktoré majú byť realizované na internetových stránkach . Jedná sa o univerzálny jazyk , ktorý môže byť použitý na vytvorenie dynamickej webovej stránky s rozšírenými a interaktívne rozhranie . Nedávno zverejnené HTML 5 predstavil plátno prvok , zariadenie , ktoré môže byť použité na to , aby 2D tvarov a bitmapové obrázky . JavaScript môže byť použitý k tomu objektu , ako je napríklad strom , pomocou canvas . Pokyny dovolená 1
Otvorte svoj obľúbený webový prehliadač a prejdite na " codediesel.com /javascript /drawing - stromy - v - plátno . " Kliknite na odkaz " Stiahnuť zdroj " a uložte archív na pevnom disku . Kliknite pravým tlačidlom myši na archív , zvoľte " Extrahovať všetko " zo zobrazenej ponuky a vyberte priečinok , do ktorej budete extrahovať obsah archívu .
2
Otvorte textového editora , ako je napríklad Poznámkový blok alebo WordPad , začať vytvárať novú HTML stránku
3
začiatok stránky obvyklým spôsobom , tým , že vloží tieto riadky : .
< head >
4
Dajte vaša stránka titul pomocou názvu tag , takto : .
JavaScript plátno strom < /title > <br> <p> môžete nahradiť " JavaScript plátno strom " s iným názvom <br> 5 <p> Definovať a načítať skript vložením tento riadok : <br> <p> <script type='text/javascript' src='algoTree.js'> < /script > <br> <p> " , algoTree.js " je skript vyvinutý , ktoré vám pomôžu nakresliť stromy pomocou HTML 5 plátno <br> 6 <p> Koniec . " " časti a spustite " hlavy časti tela " na stránky HTML vloženie tieto dva riadky : <br> <p> < /head > <body> <br> 7 <p> Definujte element plátno a typ skriptu pomocou nasledujúce dva riadky : <br> <p> <canvas id="canvas"> < /canvas > <script type="application/javascript"> <br> 8 <p> Určte šírku a výšku vášho nového stromu a priradiť že na plátno vložením tieto dva riadky : <br> <p> var height = 300 , width = 300 , var plátno = document.getElementById ( ' plátno ' ) ; canvas.height = výška ; canvas.width = šírka ; <br> <p> Nahraďte dve " 300 " hodnoty s rozmermi , ktoré chcete váš strom mať <br> 9 <p> Definujte strom ako 3D objekt pridaním tento riadok : . <br> <p> ctx = canvas.getContext ( " 2d " ) ; <br> 10 <p> Nakreslite strom pomocou metódy " tree.draw " , ako je toto : <p> tree.draw ( ctx , výška , šírka ) ; <br> <p> Môžete si strom zložitejšie pomocou " " šíriť " parameter ( s hodnotami medzi 0,3 a 0,9 ) . Môžete tiež použiť " zobraziť listy = false " parameter , ktorý chcete nakresliť strom bez lístia . Ak chcete zmeniť typ listov , použite parameter " opustí typu " ( možno nastaviť na tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES a tree.THIN_LEAVES ) . Tu je, ako plná príkaz vyzerá takto : <br> <p> tree.draw ( ctx , výška , šírka , šírenie = 0,5 , zobraziť lístie = true , listy type = tree.BIG_LEAVES ) ; <br> 11 <p> Ukončiť " skript " , " telo " a " html " sekcie vložením tieto riadky : <br> <p> < /script > < /body > < /html > <br> <br> 12 <p> Overte kód pre prípadné chyby . V tomto bode , váš dokument vyzerá tohle : <p> <html lang='sk'> <head> < meta http - equiv = " Content - Type " content = " text /html ; charset = UTF - 8 " ; > <title> JavaScript plátno strom < /title > <script type='text/javascript' src='algoTree.js'> < /script > < /head > <body> < plátno id = " plátno " > < /canvas > <script type="application/javascript"> výška var = 300 , width = 300 , var plátno = document.getElementById ( ' plátno ' ) ; canvas.height = výška ; canvas.width = šírka ; ctx = canvas.getContext ( " 2d " ) ; tree.draw ( ctx , výška , šírka , šírenie = 0,5 , zobraziť lístie = true , listy type = tree.BIG_LEAVES ) ; < /script > < /body > < /html > <br> 13 <p> Vyberte uložiť textový súbor a typ . " html " v " Názov súboru " poľa , po mene vašej webová stránka , dokument uložiť ako súbor HTML . Uložte ho do zložky , kam ste rozbalili obsah archívu . " AlgoTree.js " sa nachádza v tejto zložke . <br> 14 <p> Nahrať súbor HTML a " algoTree.js " skript na webovej hostiteľa a testovať webové stránky . <br> <br> <br>
<div class="wodejimotaobuguo">
<div class="oukbwqe121s"><script language='javascript' src='http://www.pocitac.win/ad/sk/2.js'></script></div>
<div class="oukbwqe122s"></div>
</div>
<ul class="yongbaonidasda">
<li>Predchádzajúca strana: <a class='LinkPrevArticle' href='http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403099.html' >Ako previesť Pravidelné uzol k uzlu jQuery </a></li>
<li>Ďalšia strana: <a class='LinkNextArticle' href='http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403101.html' >Ako Zvýraznite značku v iFrame obsah </a></li>
</ul>
</div>
<div class="fa324wds"></div>
<div class="xiangguandwdsawqe2">
<h4>Odporúčané články</h4>
<div class="shenmedoubuxiangyaodsa">
<ul class="xinlimianshuosd1">
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403147.html" target="_blank">Ako používať Google Maps API pre Auto Complete Poloha Pole </a></li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403490.html" target="_blank">Ako zakázať HTML Text Selection </a></li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403363.html" target="_blank">Ako získať prístup Element Atribúty so zapnutým javascriptom </a></li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403526.html" target="_blank">Jednoduchá Dynamic menu pre webové stránky </a></li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403388.html" target="_blank">Čo robí Varovanie : Skript nereaguje Mean </a></li>
</ul>
<ul class="xinlimianshuosd2">
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403338.html" target="_blank">Ako odobrať priestor z premennej v JavaScripte </a> </li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403553.html" target="_blank">Ako vytvoriť Java Script </a> </li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403103.html" target="_blank">Ako si vyrobiť graf s jquery </a> </li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403482.html" target="_blank">Ako môžem povoliť JavaScript oveľa jednoduchšie ? </a> </li>
<li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403441.html" target="_blank">XML Tool Tip Tutorial </a> </li>
</ul>
</div>
</div>
</div>
<div class="shangkuaikiada2">
<div class="tahuiyuuedaogenhananr">
<div class="shenbiandhsaq21"><h4>Najnovšie články</h4></div>
<ul>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403297.html" target="_blank" class="ewq32ada131">Ako vypočítať kĺzavý úhrn vo JavaScript </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403297.html" target="_blank">JavaScript je klient - side skriptovací jazyk , ktorý umožňuje reagovať v reálnom čase na vstup užívateľa . Napríklad , môžete vytvoriť HTML formulár , ktorý sa automaticky aktualizuje celkový pole ako užívateľ upraví jednotlivé položky vo formulári . Ak to chcete vykonať , musíte priradiť názov každého prvku formulára , napísať funkciu , ktorá aktualizuje celkom a zavolajte funkciu zakaždým , keď jeden z prvkov zmeniť . Pokyny dovolená 1 Vytvoriť nový HTML dokument pomocou programu Poznámkový </a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403536.html" target="_blank" class="ewq32ada131">Javascript Dátum Tutorial </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403536.html" target="_blank">JavaScript poskytuje webovým vývojárom sa na strane klienta , jazyk , ktorý vytvára dynamické webové stránky . JavaScript beží na užívateľa webového prehliadača a slúži k animáciu tlačidiel , poslať varovné dialógové okná a vytvárať dátum funkcie . Tieto dáta funkcie používajú premenné definované v kóde JavaScript . JavaScript má niekoľko vnútorných dátum funkcia slúži na vytvorenie dátum , pridať čas na aktuálny dátum a zásahom na užívateľovi . Pokyny dovolená 1 Vytvoriť nový dátum premennú po</a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403312.html" target="_blank" class="ewq32ada131">Ako Explode reťazec pomocou JavaScriptu </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403312.html" target="_blank">V JavaScriptu , môžete explodovať reťazec , oddeľujúce jeho časti do poľa , pomocou metódy rozdelenia . Spôsob rozdelenia poskytuje funkcie , ktoré môžu byť zvyknutí z explodovať metódy v iných jazykoch , ako je PHP . Rozdelenie položky v textovom reťazci JavaScript do poľa prvkov pomocou metódy rozdelenia je jednoduché . Táto úloha sa môže vykonávať v niekoľkých jednoduchých riadkov kódu . Je to tiež jednoduchá a užitočná metóda sa učiť . Pokyny dovolená 1 Pripravte reťazec JavaScript . Nasled</a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403373.html" target="_blank" class="ewq32ada131">Ako zmeniť farbu pozadia HTML s výzvou v JavaScriptu </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403373.html" target="_blank">Vývojári JavaScript dúfal , že na zlepšenie webe podporou viac interakcie s užívateľom . Hypertext Markup Language , základný jazyk webové stránky , ponúka vstup používateľa prostredníctvom hypertextových odkazov a formulárových prvkov . JavaScript pridáva schopnosť vyvolať užívateľský vstup cez varovanie pole , a potvrdiť áno alebo nie box alebo rýchle box . Prompt boxy umožňujú väčšiu vstup od užívateľa . JavaScript môže vziať dáta z riadku poľa a použiť ho k zmene atribútov Web stránok </a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403124.html" target="_blank" class="ewq32ada131">Ako vytvoriť 3D animované logo v Javascriptu </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403124.html" target="_blank">setInterval funkcie používať JavaScript je vytvoriť animovaný 3 - D logo v programe , ktorý zobrazuje logo obrazy vykonanej v modelovacie aplikácie 3 - D . SetInterval funkcia pracuje opakovaným volaním funkcie môžete určiť , vo svojom prvom argumente v dobe , ktorú určíte v druhom argumente . Tento interval sa nastavuje v milisekundách , takže ak chcete pol druhej oneskorenie medzi každou snímkou , zadajte 500 pre toto tvrdenie . Ak chcete , aby logo animácie plynulejšie , použite modelovac</a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403155.html" target="_blank" class="ewq32ada131">Päť JavaScript Tipy </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403155.html" target="_blank">Krása JavaScript je , že nepotrebujete vysokoškolský titul používať . Namiesto oddelených súborov a viac riadkov zložitého kódu , budete najčastejšie vložiť jednoduché skripty priamo do Hypertext Markup Language ( HTML ) kódu na vašich webových stránkach . JavaScript pridáva interaktívne prvky na vaše stránky , ktoré môžu byť užitočné pre vás i vaše návštevníkov . Napríklad , to môže zistiť , ako sa webové stránky reagovať na udalosti , zistiť návštevníka webového prehliadača a vytvárať cookies </a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403251.html" target="_blank" class="ewq32ada131">JavaScript pre Time výpočty </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403251.html" target="_blank">V programovanie pre web by mohlo byť potrebné vykonávať výpočty na základe dátumu ( alebo budúcich osobitných dát ) s cieľom získať informácie , ktoré diváka . Dáta a časy sú spracované odlišne od iných číselných hodnôt na základe osobitných pravidiel , ktoré nasledujú ( a nepravidelností dáta a meranie času v dôsledku rozdielov v dĺžkach mesiac alebo prestupného roka ) . JavaScript Date objektu umožňuje programátorom prístup k dátum a čas , aby sa preformy výpočty . Dátum Object JavaScript Da</a></p>
</li>
<li>
<a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403315.html" target="_blank" class="ewq32ada131">Ako povoliť & Zakázať posuvníky so zapnutým javascriptom </a>
<p class="cxv234"><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403315.html" target="_blank">posuvníky na webové stránky vám umožní uložiť obrazovky nehnuteľností tým , že vaši čitatelia prejdite do alebo podobný prvok . Niekedy sú však tieto posuvníky môžu byť nevzhľadné skôr než užitočné . Ak chcete dať svojim čitateľom na výber , pridať tlačidlo , ktoré prepína medzi aktiváciou a deaktiváciou posuvníky s jedným kliknutím . Pokyny dovolená 1 Otvorte webovú stránku v editore HTML alebo textovom editore , ako je Poznámkový blok ( Microsoft Windows ) , TextEdit ( Apple OSX ) alebo pico</a></p>
</li>
</ul>
</div>
<div class="fjsdkfuio2">
<div class="ioufahkwq2311"><h4>JavaScript Programovanie</h4></div>
<ul>
<li><a href="http://www.pocitac.win/Programovanie/PHP--MySQL-Programovanie/404873.html" target="_blank">Ako zmeniť typ poľa MySQL v PHP </a></li><li><a href="http://www.pocitac.win/Programovanie/Java-Programming/402383.html" target="_blank">Ako vytvoriť triedu implementácia v Jave </a></li><li><a href="http://www.pocitac.win/Programovanie/PHP--MySQL-Programovanie/404227.html" target="_blank">Ako povoliť InnoDB v MySQL 5 , cPanel </a></li><li><a href="http://www.pocitac.win/Programovanie/Vizuálne-Základy-programovania/407091.html" target="_blank">Ako si vyrobiť Keygen vo VB6 </a></li><li><a href="http://www.pocitac.win/Programovanie/python-Programovanie/405910.html" target="_blank">Ako nájsť magické číslo Z Python PYC Súbor </a></li><li><a href="http://www.pocitac.win/Programovanie/Vizuálne-Základy-programovania/406850.html" target="_blank">Ako si vyrobiť dve tabuľky v listbox v VB.net </a></li><li><a href="http://www.pocitac.win/Programovanie/JavaScript-Programovanie/403581.html" target="_blank">Ako Skontrolujte , či je vstupné číslo v jazyku JavaScript </a></li><li><a href="http://www.pocitac.win/Programovanie/C--C-----Programming/397576.html" target="_blank">Ako na formát dátumu a časy S iostream </a></li>
</ul>
</div>
<div class="d342sdfw42"></div>
<div class="huiyishazsad">
</div>
</div>
</div>
</div>
<div class="dibudasdwqe213">
<div class="daspoiepwqieq12">
<div class="dsarew2342a">
<ul>
<h3>Programovanie</h3>
<li><a class='childclass' href='http://www.pocitac.win/Programovanie/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/Počítač-Programovacie-jazyky/' target="_self">Počítač Programovacie jazyky</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/delphi-Programovanie/' target="_self">delphi Programovanie</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/Java-Programming/' target="_self">Java Programming</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/JavaScript-Programovanie/' target="_self">JavaScript Programovanie</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/PHP--MySQL-Programovanie/' target="_self">PHP /MySQL Programovanie</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/perl-Programming/' target="_self">perl Programming</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/python-Programovanie/' target="_self">python Programovanie</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/ruby-Programming/' target="_self">ruby Programming</a></li> <li><a class='childclass' href='http://www.pocitac.win/Programovanie/Vizuálne-Základy-programovania/' target="_self">Vizuálne Základy programovania</a></li>
</ul>
</div>
</div>
<div class=clink> </div><p class="d342dsf2">Copyright © <a href="http://www.pocitac.win/" target="_blank" title="počítačové znalosti" class="dsa21d">počítačové znalosti</a> Všetky práva vyhradené</p>
</div>
</body>
</html>