Kurs JavaScript - Jak przygotować stronę samouczka  

Autor: Piotr Bubacz

Opublikowano: 2011-12-06

W samouczku będziesz wykorzystywał stronę jTest.html, na której wykonasz większość operacji. Aby ją przygotować, utwórz nowy plik w dowolnym edytorze tekstowym. Aby łatwiej edytować kod HTML, możesz pobrać i zainstalować darmowy program WebMatrix.

1. W programie WebMatrix utwórz nową stronę i nazwij ją JavaScript.

• Uruchom program WebMatrix (Rys. 1.).

Rys. 1. Program WebMatrix po uruchomieniu.

• Kliknij przycisk Templates.
• Wybierz szablon Empty Site i w polu Site Name wpisz JavaScript. (Rys. 2.)

Rys. 2. Dodanie nowego projektu w WebMatrix.

• Kliknij przycisk OK.
• Następnie kliknij przycisk Files.
• Prawym przyciskiem myszki, kliknij plik Default.cshtml, a potem Delete. W oknie potwierdź chęć usunięcia pliku.

2. Dodaj nowy plik do projektu.

• Na wstążce Home kliknij New, a następnie New File.
• Na liście dostępnych typów plików kliknij HTML, a następnie jako nazwę określ index.html.

3. Umieść niezbędne elementy na stronie.

• W znaczniku title wpisz:

Samouczek JavaScript

• Ustaw kursor za znacznikiem body i dodaj nową linię. Potem wklej następujący kod:

<h1>Samouczek JavaScript</h1>
<div id="pokaz"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel metus vitae risus vehicula accumsan blandit quis nulla. Vivamus molestie, mauris quis vestibulum pulvinar,tortor felis ullamcorper diam, vel imperdiet eli test non sem.</p>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vivamus scelerisque ullamcorper sapien, quis sollicitudin lectus euismod vitae.
        <ul>
            <li>Integer nec nunc arcu, sed bibendum diam.</li>
            <li>Donec mollis libero ac quam accumsan adipiscing.</li>
        </ul>
    </li>
    <li>Duis ac nisl id velit laoreet mollis.</li>
    <li>Aenean blandit quam eu leo feugiat iaculis mattis nisl vestibulum.
        <ul>
            <li>Mauris et orci at sem pharetra pretium quis at erat.</li>
            <li>Etiam porta justo non purus fringilla ornare.</li>
        </ul>
    </li>
</ul>
Podajtekst:
<input id="mojTekst" type="text" name="mojTekst"/>
<input id="butWyslij" type="submit" name="butWyslij" value="Wyślij" />

4. Wygeneruj pozostałą treść.

• Otwórz przeglądarkę i wpisz adres bing.com. Wyszukaj hasło „lorem ipsum generator” W wynikach wyszukiwania wybierz odpowiedni generator. Zwróć uwagę na możliwość generowania nie tylko akapitów tekstu, ale również list, słów i bajtów o określonej długości (Rys. 3.).

Rys. 3. Przykładowy generator, umożliwiający tworzenie dowolnej liczby akapitów, słów, bajtów oraz list.

• Wygeneruj i dodaj do strony kilka akapitów oraz list.
• Zapisz plik i sprawdź, czy wygląda podobnie, jak na Rys. 4.

Rys. 4. Plik do testów samouczka JavaScript

 

---