Языки программирования

JavaScript широко используется  в браузерных операционных системах. Так, например, исходный код IndraDesktop WebOS на 75 % состоит из JavaScript, код браузерной  операционной системы IntOS — на 70 %. Доля JavaScript в исходном коде eyeOS — 5 %, однако и в рамках этой операционной системы JavaScript играет важную роль, участвуя в визуализации на клиенте и являясь необходимым механизмом для коммуницирования клиента и сервера.

5. Букмарклеты

JavaScript используется для  создания небольших программ, размещаемых  в закладки браузера. При этом  используются URL-адреса со спецификатором javascript:.

6. Пользовательские скрипты в браузере

Пользовательские скрипты в браузере — это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.

Для управления пользовательскими скриптами в Mozilla Firefox используется расширение Greasemonkey; Opera предоставляет средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey. Некоторые скрипты Greasemonkey могут выполняться в Google Chrome при использовании Greasemetal.

7. Серверные приложения

Приложения, написанные на JavaScript, могут исполняться на серверах, использующих Java 6 и более поздних версий. Это обстоятельство используется для построения серверных приложений, позволяющих обрабатывать JavaScript на стороне сервера.

JavaScript на стороне сервера  используется в проектах Google. Так например, Google Sites допускает подстройку с помощью JavaScript-сценариев, исполняемых движком Rhino.

8. Мобильные приложения

Перевод мобильных устройств Palm на использование Palm webOS в качестве операционной системы с Mojo SDK в качестве комплекта средств разработки позволяет использовать JavaScript в качестве языка разработки мобильных приложени.

9. Виджеты

Виджет — вспомогательная мини-программа, графический модуль, которой размещается в рабочем пространстве соответствующей родительской программы (англ.), служащая для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. JavaScript используется как для реализации виджетов, так и для реализации движков виджетов. В частности, при помощи JavaScript реализованы Apple Dashboard, Microsoft Gadgets , Yahoo!_Widgets , Google Gadgets, Klipfolio Dashboard.

10. Прикладное программное обеспечение

Исходный код и скриншот JavaScript-программы, созданной с помощью Seed

JavaScript используется для  написания прикладного ПО. Одним  из ярких примеров является Mozilla Firefox, 57 % исходного кода которого написано на JavaScript (для сравнения, следующим языком программирования по объёму кодовой базы Firefox является C++, доля которого составляет 17 %).

 

Google Chrome OS в качестве прикладного ПО использует веб-приложения.

В окружении рабочего стола GNOME имеется возможность создавать на JavaScript программы, оперирующие с библиотеками GNOME при помощи Gjs, Seed.

11. Манипуляция объектами приложений

JavaScript также находит применение  в качестве скриптового языка  доступа к объектам приложений. Платформа Mozilla (XUL/Gecko) использует JavaScript. Среди сторонних продуктов, например, Java, начиная с версии 6, содержит  встроенный интерпретатор JavaScript на базе Rhino. Сценарии JavaScript поддерживаются в таких приложениях Adobe, как Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator и Adobe InDesign.

12. Офисные приложения

JavaScript используется в  офисных приложениях для автоматизации  рутинных действий, написания макросов, организации доступа со стороны  веб-служб.

13. Microsoft Office

В Excel Services 2010 добавились два новых интерфейса программирования приложений: REST API и JavaScript Object Model (JSOM).

Excel Services 2010 REST API позволяет осуществлять доступ к объектам рабочих книг, таким как таблицы, диаграммы и именованные серии данных; получать изображения, HTML, Atom, рабочие книги; устанавливать значения и обновлять вычисления перед запрашиванием элементов.

JSOM даёт возможность реагировать  на действия пользователя в  отношении Excel Web Access (EWA), программно  взаимодействовать с составляющими EWA. Использование JSOM осуществляется  при помощи помещения кода JavaScript на страницу, содержащую компоненты EWA.

14. OpenOffice.org

JavaScript — один из языков  программирования, используемых для  написания макросов в приложениях, входящих в состав OpenOffice.org. В OpenOffice.org интегрирован интерпретатор JavaScript Rhino. По состоянию на декабрь 2009 года поддержка JavaScript носила ограниченный характер. Ограничения, присущие разработке макросов OpenOffice.org на JavaScript:

среда выполнения JavaScript поддерживает загрузку лишь тех классов Java, которые развёрнуты сценарием JavaScript;

среда выполнения JavaScript не предоставляет сообщения об ошибках, произошедших во время выполнения скрипта;

ещё не реализована поддержка интерактивной разработки JavaScript-сценариев.

В OpenOffice.org имеется редактор и отладчик JavaScript-сценариев.

15. Обучение информатике

Язык обладает пропедевтической ценностью, позволяя сочетать при обучении информатике ((англ.) Computer science) интенсивную практику программирования и широту используемых технологий. Преподавание данного языка в школе позволяет создать базу для изучения веб-программирования, использовать на уроках творческие проекты. Соответствующий курс позволяет обеспечить углубленный уровень изучения информатики и его имеет смысл включать в элективные курсы углубленного уровня подготовки.

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

Невключённые в книгу Николаса Закаса «Professional JavaScript for Web Developers» части о реализации на JavaScript классических алгоритмов, техник, структур данных, послужили началу проекта Computer science in JavaScript.

 

3.2. Примеры задач 

3.2.1. Обработка элементов форм

Задача. Тест по теме «Форсаж»

Постановка задачи:

Подобрать по 7 вопросов по каждому из Форсажей. Для каждого вопроса подобрать по 4 варианта ответов, выполненных элементами формы – переключателями. Предоставить пользователю возможность выбора одного из вариантов ответов на каждый вопрос. Создать кнопку для вызова результата тестирования. Дополнить форму кнопкой очистки элементов формы.

Модель формы:

test – имя формы

q1, q2, …, q7 – имена групп  переключателей формы

Алгоритм решения:

r – массив номеров  правильных ответов

b – количество баллов, набранное пользователем при  включении правильного ответа

1. Создаём массив для  номеров правильных ответов 

var r=new Array(2,1,0,2,3,2,3);

2. Задаём начальное значение  переменной b=0

3. Создаём функцию function test() для обработки переключателей  формы

4. Организуем цикл по  номерам групп переключателей       for (i=1; i<=7; i++)

5. В цикле используем  условный оператор для проверки  нажатия переключателя с правильным  ответом  if (document.fm.elements["d"+i][r[i-1]].checked), доступ к переключателю осуществляем  с помощью вложенных объектов:  document.ИмяФормы.ЭлементМассиваПереключателей

6. Если условие=true, то увеличиваем  переменную b на 1. {b++;}

7. Далее с помощью условного  оператора выполняем проверку  переменной b по заранее спланированному  рейтингу, и с помощью панели alert выводим результат на экран.

HTML-код формы:

<form name="test" onmouseover="colorchandge('yellow')" onmouseout="colorchandge('#8FBC8F')">

<ol>

<li><p>Какого года  Форсаж?</p>

<input name=q1 type="radio">1997<br>

<input name=q1 type="radio">2000<br>

<input name=q1 type="radio">2001<br>

<input name=q1 type="radio">2003<br>

…………………………

<li><p>Как с англиского  периводиться "The fast and the Furious"?</p>

<input name=q7 type="radio">Быстрее  не куда<br>

<input name=q7 type="radio">Бысрые  и Скрытные<br>

<input name=q7 type="radio">Яротные  гонщики<br>

<input name=q7 type="radio">Быстрые  и Яростные<br>

</ol>

<h2><a href = "s5.htm" target="z" onmouseover="this.style.color='red'" onmouseout="this.style.color='white' ">Назад</a><br></h2>

<p> &nbsp &nbsp &nbsp &nbspВы  набрали: <textarea cols="5" name="display" rows="1"></textarea> очков &nbsp &nbsp &nbsp

<input type="BUTTON" CLASS = "mystyle" value="Подведем итоги" onClick="z()">  &nbsp &nbsp &nbsp

<input type=reset CLASS = "mystyle" value="Очистить"></p>

</form> 

JavaScript-код задачи:

<script>

   var r=new Array(2,1,0,2,3,2,3);

   var b=0;

    function z(){

     b=0;

     for (i=1; i<=7; i++)

       if (document.test.elements["q"+i][r[i-1]].checked) {b++}

          document.test.display.value=b;

       if (b<=3)

        alert ("Вы набрали "+b+" очка(ов).\n Внимание!\n Вы наверное не смотрели этот  фильм!");

       if (b>=4 && b<=6) 

        alert ("Вы набрали "+b+" очка(ов).\n Помотрите  этот фильм еще раз.");

             if (b>=7) 

        alert ("Вы набрали "+b+" очка(ов).\n Великолепно! Вы знаете данный фильм почти  наизусть");

  

}

</script>

 

3.2.1. Обработка  динамических эффектов

Задача 1. «Смена изображения»

Постановка задачи:

Осуществить замену первого графического изображения на другое при наведении фокуса мыши на маленькую иконку другого, выполнить обратное действие при отведении фокуса мыши.

Алгоритм решения:

3.jpg– первое графическое  изображение

33-0.jpg, ….., 33-11.jpg– другое  графическое изображение

document.images[0].src – первый  элемент массива графических  изображений на Web-странице

1. Устанавливаем первое  графическое изображение img src="3.jpg "

2. Используем обработчик  события onMouseOver  для наведения  на объект фокуса мыши onMouseOver="document.images[0].src=33-0.jpg " , при этом осуществляем вывод  второго графического изображения

3. Используем обработчик  события onMouseOut  для отведения  с объекта фокуса мыши onMouseOut="document.images[0].src=3.jpg " , при этом осуществляем вывод  первого графического изображения

JavaScript-код задачи:

<img src="3.jpg "

<marquee bgcolor="cornflowerblue" scrollamount=7 >

<img src="33-0.jpg" border=1 width=100 onMouseOver="document.images[0].src='33-0.jpg' "

…………………………

<img src="33-11.jpg" border=1 width=100 onMouseOver="document.images[0].src='33-11.jpg' " onMouseOut="document.images[0].src='3.jpg' ">&nbsp

</marquee> >

 

Задача 2. «Часы»

Постановка задачи:

Создать часы подходящие по стилю к сайту.

Алгоритм решения:

Создаем вывод часов с тенью из JavaScript-задачи.

<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:comic sans ms;color:lime;font-size:60px;top:2px;left:28px"></div>

<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:comic sans ms;color:DDDDDD;font-size:60px;top:0px;left:24px"></div>

JavaScript-код задачи

<script>

function clockon() {

thistime= new Date()

var hours=thistime.getHours()

var minutes=thistime.getMinutes()

var seconds=thistime.getSeconds()

if (eval(hours) <10) {hours="0"+hours}

if (eval(minutes) < 10) {minutes="0"+minutes}

if (seconds < 10) {seconds="0"+seconds}

thistime = hours+":"+minutes+":"+seconds

if(document.all) {

  bgclocknoshade.innerHTML=thistime

  bgclockshade.innerHTML=thistime

}

if(document.layers) {

  document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:12px">'+thistime+'</div>')

  document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:10px">'+thistime+'</div>')

  document.close()