Gdzie umieścić kod JAVASCRIPT?
Sposoby umieszczenia kodu JAVASCRIPT
- Pomiędzy znacznikami
<script></script>
- Jako lokalny plik o rozszerzeniu .js, dołączony za pomocą znacznika
<script src="/js/plik.js"></script>
- Jako zewnętrzny plik dołączony za pomocą znacznika
<script src="http://www.adresserwera.pl/..../js/script.js"></script>
W poprzednich wersjach HTML wymagany był atrybut type
<script type="text/javascript"></script>
Od HTML w wersji 5 już nie jest.
Przykłady
Przykład 1: Skrypt umieszczony pomiędzy znacznikami <script></script> wewnątrz <body></body>.
<body>
...
<script>
var a = 3;
// wyświetl wartość zmiennej na ekranie
document.body.innerHTML += "Wykonano kod JavaScript. Wartość zmiennej a wynosi: <b>" + a + "</b>";
// wyświetl komunikat w konsoli
console.log("Kod JavaScript został wykonany.");
</script>
...
</body>
Przykład 2: Skrypt umieszczony w części nagłówkowej strony.
<html>
<head>
<script>
function dopisz_na_koniec() {
document.body.innerHTML += "<br>Dopisane :)";
}
</script>
</head>
<body>
<button onclick="dopisz_na_koniec();">Kliknij, aby dodać...</button>
</body>
</html>
Przykład 3: Skrypt dołączony do strony.
<head> ... <script src="js/skrypt1.js"></script> <script src="js/skrypt2.js"></script> <script src="js/skrypt3.js"></script> ... </head>
Przykładowa struktura katalogów i plików strony internetowej. Katalog główny strony zawiera plik index.htm oraz katalogi przechowujące odpowiednio: pliki kaskadowych arkuszy stylów (css) oraz pliki javascript.
Ćwiczenia
Ćwiczenie 1
Pobierz skrypt do ćwiczenia 1: kibic
Utwórz strukturę strony według poniższego schematu. Projekt nazwij kibic.
Pobrany skrypt umieść w folderze js.
Utwórz stronę internetową według następujących wymagań:
- style zawarte w zewnętrznym pliku style.css umieszczonym w katalogu css
- obsługa polskich znaków
- html, body – szerokość 100%, margines zewnętrzny i wewnętrzny 0
- dołączony zewnętrzny plik kibic.js
- utworzony przycisk uruchamiający na kliknięcie funkcję wypisanie();
- utworzony div o id kontener, którego szerokość to 100%
Ćwiczenie 2
Pobierz skrypt do ćwiczenia 2: mecz
Utwórz strukturę strony według poniższego schematu. Projekt nazwij mecz.
Pobrany skrypt umieść w folderze js.
Utwórz stronę internetową według następujących wymagań:
- style zawarte w zewnętrznym pliku style.css umieszczonym w katalogu css
- obsługa polskich znaków
- html, body – szerokość 100%, margines zewnętrzny i wewnętrzny 0
- dołączony zewnętrzny plik mecz.js
- utwórz kolejno następujące kontenery:
- div: szerokość 100%, tekst wyśrodkowany, czarne tło, margines wewnętrzny 10px
zawiera: przycisk uruchamiający na kliknięcie funkcję strzel(), tekst na przycisku: GOL!; - div: szerokość 50%, float:left, tekst wyśrodkowany, wielkość czcionki xx-large, margines wewnętrzny 10px
zawiera: POLSKA - div: szerokość 50%, float:left, tekst wyśrodkowany, wielkość czcionki xx-large, margines wewnętrzny 10px
zawiera: RESZTA ŚWIATA - div id polska: szerokość 50%, float:left, wysokość 50%, wielkość czcionki 500%, tekst wyśrodkowany w poziomie i w pionie
zawiera: 0 - div id reszta: szerokość 50%, float:left, wysokość 50%, wielkość czcionki 500%, tekst wyśrodkowany w poziomie i w pionie
zawiera: 0
- div: szerokość 100%, tekst wyśrodkowany, czarne tło, margines wewnętrzny 10px
Schemat budowy strony internetowej dla ćwiczenia 2:
