Embedded Files
Приклад системи з використанням скриптів (тестування)
JavaScript - мова сценаріїв, або скриптів. Скрипт - це програмний код, який не вимагає попередньої обробки (компіляції) перед запуском.
JavaScript був створений програмістом Brendan Eich з Netscape і представлений в грудні 1995 року під назвою LiveScript. Досить швидко він був перейменований в JavaScript.
У HTML є спеціальний контейнерний тег <script>. Мова сценарію вказується за допомогою атрибута type. Наприклад,
<script type = "text / javascript">
Тут розташовується код сценарію
</script>
Програмний код JavaScript можна помістити в документ HTML такими способами:
Розмістити в тілі документа
Розмістити у заголовній частині документа
Зберегти у файлі (із розширенням .js) і підключити
<script type="text/JavaScript" src="myFunc.js"> </script>
Приклад 1. Цикли.
<html>
<head>
<title>Сценарій</title>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
document.write("Привіт, світе!");
}
</script>
</body>
</html>
Приклад 2. Слайдшоу з кнопкою.
Перед виконанням завдання три довільні фотографії формату jpg помістіть у папку images, змініть їх імена на a1, a2, a3.
<html>
<head>
<script language="javascript">
img1 = new Image ()
img1.src = "images/a1.jpg"
img2 = new Image ()
img2.src = "images/a2.jpg"
var count=1
function slideshow() {
count++;
if (count>4){count=1;}
document.foto.src=eval("img"+count+".src")
}
</script>
<style>
img {
border: 2px solid gray;
height:500px;
}
</style>
</head>
<body>
<center>
<img src="images/a1.jpg" name="foto" >
<p>
<input type="button" value=">>" name="b1" onclick="slideshow()">
</center>
</body>
</html>
Приклад 3. Реакція на мишку.
<html>
<head>
<style>
img{
height:300px;
border: 5px dotted green;
}
</style>
</head>
<body>
<center>
<a onMouseOver= "document.foto.src='images/a2.jpg'"
onMouseOut="document.foto.src='images/a1.jpg'">
<img src="images/a1.jpg" name="foto">
</a>
</center>
</body>
</html>
Приклад 4. Ефект лупи.
<html>
<head>
<script language="javascript">
function lupa() {
if (foto.height=="100"){ foto.height="500"}
else {foto.height="100"}
}
</script>
<style>
img{
border: 5px dotted green;
}
</style>
</head>
<body>
<center>
<img src="images/a1.png" name="foto"
onMouseOver="lupa()" onMouseOut="lupa()">
</center>
</body>
</html>
Практична 4.3_1
Створити папку 4-3-1
У папці 4-3-1 створити папку images
В папку images помістити 4-5 малюнків, давши їм назви a1,a2,a3,a4,a5.
Створити три веб-сторінки з використанням прикладів №2 №3 №4.
Додати додаткові картинки для кожного з прикладів
Page updated
Google Sites
Report abuse