Файл: Использование скриптов.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 10.11.2023

Просмотров: 110

Скачиваний: 11

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

КГУ «Средняя школа №13» отдела образования по городу Усть-Каменогорску управления образования ВКО

Краткосрочный (поурочный) план

Раздел




ФИО педагога




Дата




Класс 10

Количество присутствующих:

отсутствующих:

Тема урока

Использование скриптов

Цели обучения, которые достигаются на данном уроке (ссылка на учебную программу)


10.​4.​2.​3 использовать готовые скрипты при разработке web-страниц

Цель урока

формировать практические навыки учащихся при работе с Интернет – ресурсами.

познакомить учащихся с понятием Юзабилити.


Критерии успеха

использовать скрипты при разработке web –страниц

Знают дополнительные возможности по импорту объектов

Ход урока

Этапы урока

Деятельность учителя

Деятельность обучающихся

Оценивание

Ресурсы

Организационный этап

Создайте облако слов на плакате с термином «Информационная безопасность»

Вопросы для ученикам:

1. Почему информационная безопасность так важна?

2. Какие существуют решения для обеспечения информационной безопасности?

3. Насколько реальна ПОЛНАЯ защита информации?

Определите информационную безопасность и представьте для урока.
.

Показывают решения задач, при возникновении вопросов разбирают с учителем

В ходе заслушивания ответов детей остальные школьники контролируют правильность и полноту ответов.

По мере необходи­мости исправляют, дополняют, уточняют ответы.




Интерактивное обучение

Изучение нового материала

“Чистый” HTML имеет весьма ограниченные возможности для программирования интерфейса приложений и построения интерактивных сеансов работы пользователей.

Традиционное средство, которое предлагается HTML для изменения экрана — мышиный щелчок по ссылке. Браузер загружает новый файл, и экран перерисовывается.

Традиционная динамика в документе — анимационный GIF. Но этой анимации далеко до настоящей мультипликации.

А ведь хочется? Правда, хочется! Хочется динамических меню, реакций на мышиные перемещения и щелчки. Хочется полноценного диалога на страницах документа, такого, как в “настоящих” компьютерных программах.

Хочется придумать и “выпечь” в гипертексте динамическую игру или обучающую программу с “живыми” демонстрациями, зачетными классами и испытательными стендами. Хочется больше жизни!

JavaScript — одно из тех средств, которые нужны для этой цели. С JavaScript гипертексты получают встроенный программный моторчик, запускающий HTML на новые обороты.

Посмотрите примеры использования JavaScript и CSS (каскадные таблицы стилей) в HTML-файлах (документы нормально просматриваются только в Internet Explorer 4).

  • Абсолютное позиционирование

  • Трехмерный заголовок

  • Статические фильтры

  • Динамические фильтры

  • Сложное движение элементов

  • Зеркальное отражение

  • Арканоид

JavaScript?.. что это такое?


Это язык программирования, который понятен браузеру. Это означает, что браузер умеет выполнять (интерпретировать) команды этого языка.

Программу на JavaScript (ее называют скриптом или сценарием) можно помещать внутрь HTML-программы или держать в отдельном файле. Этот файл браузер прочитает (по специальной команде) во время интерпретации HTML-кода.

Коды JavaScript дополняют коды HTML и “живут” вместе с ними. Даже если они расположены в отдельном файле.

как скрипт монтируется в html


Скрипт размещается между двумя парными тегами <SCRIPT>…SCRIPT>. Обычно запись скрипта выглядит так:

<SCRIPT language=JavaScript>

<!--

...

Код на JavaScript

...

//-->

SCRIPT>
<NOSCRIPT>

...

Для браузеров, которые

не поддерживают JavaScript

...

NOSCRIPT>

Начало скрипта

Скрипт представлен как

HTML-комментарий, чтобы

не “смущать” браузеры,

которые о скриптах не

знают.

Конец скрипта
Эта команда —

специально для

пользователей,

у которых

браузер не понимает

скриптов.

пояснения


  • Код скрипта оформляют как HTML-комментарий. Браузеры, которые умеют работать со скриптами, об этом знают, а другие проигнорируют скрипты (как обычный комментарий).

  • Закрывающий тег HTML-комментария предваряется двумя наклонными чертами “//” (комментарий языка JavaScript) опять же в целях безопасности. Некоторые браузеры “сходят с ума”, если не видят этих знаков. (Комментарием в JavaScript считается все, что располагается от символов “//” до конца текущей строки).

  • Открывающий тег SCRIPT использует атрибут language для указания языка, на котором написан скрипт. Значением этого атрибута в нашем случае является ключевое слово JavaScript.

  • Блок <NOSCRIPT>…NOSCRIPT> является не обязательным, но желательным. Внутри него могут располагаться теги HTML.

пример


<HTML>

<HEAD>

<!-- Meta http equivalent was here -->

<TITLE>Проверка браузераTITLE>

HEAD>

<BODY bgcolor=white text=black

link=blue alink=red vlink=purple>

<H1>Проверка браузераH1>

<HR>
<SCRIPT language=JavaScript>

<!--

alert("Ваш браузер поддерживает язык JavaScript!");

//-->

SCRIPT>
<NOSCRIPT>

<H2>ПредупреждениеH2>

<P>

Ваш браузер не поддерживает JavaScript.

Этот документ будет показан неверно, возможны

сообщения об ошибках.

<P>

Версия документа без скриптов расположена

<A href=doc1.htm>здесьA>.

NOSCRIPT>
<P>

Для возврата к основному тексту нажмите кнопку

<EM>НазадEM> на инструментальной панели браузера.
BODY>

HTML>

Посмотрите на этот документ.

пояснения


Скрипт в приведенном выше примере, содержит всего одну команду на языке JavaScript — вызов функции alert. Функция alert создает информационное окно с единственной кнопкой “Ok” внутри:



Пользователь читает сообщение, нажимает кнопку и окно убирается с экрана. Теперь браузер приступает к интерпретации команд, расположенных вслед за скриптом в HTML-коде — выводит в окошко текст:

Для возврата к основному тексту нажмите кнопку
Назад на инструментальной панели браузера.

Если браузер не поддерживает JavaScript или эта поддержка отключена в настройках, в окно документа выводится сообщение:


замечания


  • Если текст-параметр функции alert слишком длинный, его можно записывать в нескольких строчках используя знак “+” (операция соединения):

alert("Язык JavaScript был разработан в 1995 году фирмой"+

" Netscape для второй версии своего браузера");

Начало формы

Конец формы




  • Операция соединения не означает разрыв строки на экране. Для перевода строк нужно использовать символы “\n”:

    alert("Первая строка.\nСтрока вторая.");

    Начало формы

    Конец формы



  • Браузеры Netscape третьих версий “не любят”, когда в текстовых константах JavaScript попадаются русские буквы “я” маленькое и “С” большое. “Лечится” это записью перед такими буквами обратной косой черты:

Практика стр.149-151 учебника

Практическая работа №3-4

БАТАРЕЙКА

Батарейка

Введите данный ниже код HTML. В результате получите три разные

батарейки, показанные на рисунке 2.