2 Події JavaScript

Працюючи з попереднім прикладом, ви ознайомились з подією OnClick, що при натискані викликає код. В цій вправі ви ознайомитесь з іншими подіями, що використовуються в скриптах.

1. У вашому HTML-коді змініть подію OnClick для OnMouseOver (виділено чорним):

<input type="button" onmouseover="show_prompt()" value="Submit" />

2. Збережіть файл і перегляньте його в браузері. Тепер помістіть курсор на кнопку, не натискаючи, на запрошуване вікно. В даний час ця подія прив'язана до кнопки, але ви можете перемістити подію на кнопку фактичної сторінки.

3. Виберіть подію OnMouseOver і її значення, а потім натисніть «Ctrl + X», щоб вирізати код. Знайдіть тег і натисніть «Ctrl + V», щоб вставити код, як показано тут:

<body onmouseover="show_prompt()">

4. Після зміни події OnLoad збережіть сторінку і прогляньте її в браузері. Ви можете ввести тут текст, але подія в даний час являється структурованою, було б доцільно написати текст на сторінці, тому натисніть кнопку «Скасувати».

За допомогою цієї вправи ви дізналися, що JavaScript дозволяє вам обирати, де і як ви задавати імена. В обох випадках взаємодія з користувачем запускає код, але подія надає користувачеві вибір, тобто час для запуску коду, у той час як подія OnClick (призначити на кнопку), дає користувачеві більш ширший вибір.

3 Об'єктні моделі документа

JavaScript має доступ до об'єктів у браузері, це як спливаюче вікно з вашої попередньої вправи, яке з'явилося на екрані. Цей доступ використовує Document Object Model (DOM), який затверджений «Конвенцією про доступ до даних в HTML-сторінках». Ця модель описує всі елементи HTML-сторінки, такі як форми і образи.

Серед всього іншого, цей доступ дозволяє JavaScript:

• Здійснювати перевірку полів форми

• Визначати версію браузера користувача

• Реагувати на дії користувача

• Зберігати та вилучати інформацію на комп'ютері користувача

Згадаємо перший приклад і частину його коду:

document.write (the seventh line from the top).

<script type="text/javascript">

function show_prompt()

{

var name=prompt("Please enter your name","Chris P. Bacon");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

}

</script>

3 Розуміння елемента Canvas

Елемент «Canvas» відрізняється від більшості інших елементів HTML5. Він більш складний та потребує допомоги JavaScript, для повноцінної роботи. Ваш перший крок полягає в додаванні (або визначенні) графічного елементу в HTML. Після того як визначили елемент, ви повинні зберегти посилання на контекст малюнка для цього елемента і в якості змінної в JavaScript.

1. Відкрийте 05_canvastemplate.HTML-файл в папці HTML5_05lessons та знайдіть шаблон, який будете використовувати, модифікуйте його відносно своїх майбутніх проектів. Цей шаблон визначає елемент Canvas з шириною і висотою 300px. HTML-код для елементу Canvas буде мати вигляд:

<body onload="setup();">

<canvas id="lessonCanvas" width="300"height="300"style="margin:100px;"></canvas>

</body>

The code for your JavaScript looks like this:

<script type="text/javascript">

  function setup() {

    var canvas = document.getElementById('lessonCanvas');

    if (canvas.getContext) {

      var ctx = canvas.getContext('2d');

      <!--drawing instructions here -->

    }

  }

</script>

Ви не зможете виконувати будь-які зміни в файлі, але як тільки будете готові створити полотно на основі своєї роботи, ви можете використовувати це в якості відправної точки.

2. Виберіть Файл> Закрити без внесення будь-яких змін в цей файл.