|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 7:
Использование локального JavaScript - контента на мобильном устройстве
Аннотация: Принципы создания локального JavaScript - контента на мобильном устройстве. Вставка JavaScript-кода в страницы HTML5. Пользовательские функции. Перемещение кода JavaScript в файл сценариев. Основные структуры языка JavaScript. Типы данных для переменных. Арифметические операции. Условные переходы. Циклы. Массивы. Объекты. События. Обработчики событий. Обработчик как свойство элемента. Прослушивание элементов методом addEventListner(). Примеры программ для мобильных устройств.
Ключевые слова: Visual Basic, Pascal, HTML, запуск, программа, css, Файл сценария, файл, тег, браузер, сценарий, имя переменной, переменная, сообщение об ошибке, строкой, значение, тип данных, объект, операции, операторы, ключевое слово, цикл, счетчик, цикла, выражение, массив, ячейка, screen, history, location, event, meta, анализ, сложение, вывод, пользователь, функция, множество событий, обработчик события, код программы, тип события, синтаксис, атрибут, имя события, загрузка, ссылка
Принципы создания локального JavaScript - контента на мобильном устройстве
В то время как HTML5 остается каркасом мобильных гибридных приложений, интеллектом, оживляющим большинство клиентских виджетов, является JavaScript. Рассмотрим некоторые из основных возможностей JavaScript, которые часто используются непосредственно с элементами HTML5. Этот материал не является руководством по использованию JavaScript и не содержит достаточно информации, чтобы позволить вам начать работать с этим языком, если у вас нет абсолютно никаких знаний другого языка программирования. Но если вы обладаете хоть малейшими знаниями программирования - например, когда-то немного программировали на Visual Basic, освоили основы Pascal или экспериментировали с языком C, тогда эта лекция позволит вам перенести приобретенные навыки в мир JavaScript. Если вам требуется более полная помощь по JavaScript, можете выбрать книгу о JavaScript в HTML5[1,2] или учебный курс ИНТУИТ[3]. Или же прочитайте подробное, но сухое руководство по JavaScript от Mozilla, доступное по адресу[4].
Вставка JavaScript-кода в страницы HTML5
Программы JavaScript размещаются в заголовке HTML-страницы, поскольку эта часть веб-страницы загружается первой, и к тому моменту, когда загрузятся остальные части страницы, уже готова к работе. Эти программы действуют совершенно так же, как сценарии CSS3, и помимо заголовка, могут размещаться и в других частях страницы. Тем не менее, для простоты во всех примерах данной лекции JavaScript-код размещается в заголовке. Например, попробуйте запустить следующую программу (этот пример, как и все следующие из данной лекции, можно отлаживать и тестировать в настольном браузере, эмуляторе мобильного устройства или на реальном устройстве).
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
document.write("Наша программа заработала!");
</script>
<style>
body {
background-color: #59ee53;
color:#0C080C;
font-family:Verdana, Geneva, sans-serif;
font-size:70px;
margin-left:100px;/*отступ слева*/
}
</style>
<title>Первый JavaScript-код</title>
</head>
<body>
</body>
</html>Когда вы протестируете эту программу, вы увидите текстовое сообщение и ничего больше:
Пользовательские функции
Функции JavaScript - это пакеты кода, которые запускаются, когда их вызывает html-страница (по требованию). Преимущество функций заключается в том, что с их помощью вы можете вносить изменения в содержимое страницы. Будет хорошей идеей давать функции название, отображающее ее назначение. Например, ниже представлен пример внешней JavaScript-программы, содержащей простую пользовательскую функцию ShowMessage(), содержащую стандартный метод вывода document.write(). Запуск этой пользовательской функции выполняется посредством события onLoad - окончания загрузки страницы. Сохраните и отладьте следующую html-страницу, содержащую программу JavaScript, используя любое имя, например, Simple_1.html:
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function ShowMessage() {
document.write("Наша функция заработала!");
}
</script>
<title>Первый JavaScript-код</title>
</head>
<body onload ="ShowMessage();">
</body>
</html>После имени каждой функции ставятся круглые скобки. При необходимости в этих скобках разработчик указывает параметры функции. Программа JavaScript запускается сразу после загрузки этой страницы (событие onLoad). Более важный способ применения функций JavaScript основан на возможности отложить выполнение JavaScript-кода до того момента, когда в этом возникнет необходимость. О том, как это сделать, будет рассказано в разделе "Обработчики событий".
Перемещение кода JavaScript в файл сценариев
Как и в случае файлов CSS, вы можете создавать и сохранять программы JavaScript в виде внешних текстовых файлов, называемых сценариями.
Файл сценария - это простой текстовый файл с расширением js (обозначающим JavaScript). Код помещается в файл сценариев таким же образом, как и в файл веб-страницы, но без использования элемента <script>. В качестве примера далее приведено полное содержимое файла сценария external.js, содержащего пользовательскую функцию из предыдущего раздела:
function ShowMessage() {
document.write("Наша функция заработала!");
}Сохраните эту программу в формате текстового файла, используя имя external.js, выбрав любую папку, вложенную в папку главной страницы (напримр, js). Затем создайте следующую программу HTML5 и сохраните в одной папке с файлом external.js. Ключевую часть данной страницы представляет тег <script>...</script>, который служит для указания используемой программы JavaScript.
<!DOCTYPE HTML> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/external.js"></script> <title>Первый JavaScript-код</title> </head> <body onload ="ShowMessage();"> </body> </html>
Когда браузер обнаружит блок сценария <script src="js/external.js"></script>, он запросит файл "js/external.js" и будет рассматривать содержащийся в нем код, как будто бы тот находится в html-странице. Это означает, что функцию showMessage () можно вызывать точно таким же образом, как мы это делали ранее, событием onLoad.
Запустив страницу, вы увидите, что использование данного метода представляет собой тоже самое, что и внедрение текста в сценарий HTML-страницы.
Несколько основных структур языка JavaScript
Краткой лекции, наподобие этой, недостаточно, чтобы охватить все аспекты любого языка программирования, даже такого простого, как JavaScript. Но в последующих разделах мы рассмотрим несколько основных конструкций языка, необходимых для понимания примеров, приводимых в последующих лекциях.
Дмитрий Белов