Настройка среды
Java-скрипт можно вставить в HTML-страницу в блокноте, сохранить файл с расширением .html, и для запуска на выполнение вам понадобится лишь наличие браузера. Но это – крайне неудобный и нерациональный способ. Возможность пользоваться эдитором, возвращаться к ранее исправленному варианту и многое другое позволяют специально предназначенные для этого IDE. Eclipse является наиболее предпочитаемой средой для выполнения значительного количества приложений, в том числе и Java-скрипт приложений на сегодняшний день.
Вначале нужно запустить Eclipse (exe-file). В качестве Workspace в окне по запросу нужно выбрать заготовленную папку (Создайте пустую папку на диске D).
Через некоторое время появится Welcome-страничка Eclipse с ярлычками
Нужно щёлкнуть левой кнопкой мыши на ярлычке ‘Workbench’, и откроется перспектива ‘Resource’, которую Eclipse отображает по умолчанию (см. Рис. 5):
Для того чтобы создавать Java-приложения, нужно создать проект. Для этого нажмите на вкладку File->New-> Project и дайте ему имя, например, ‘MyFirstProject’ .
Теперь в этом проекте создайте обычный Java-проект, дайте ему другое название, к примеру, ‘MySimpleProject’
Создайте JavaScript файл:
Выберите тип файла и дайте ему название.
Отображение файла с расширением .js найдите в Project Explorer
Создайте тестовый пример, набрав в фале следующий код:
<html>
<script language="JavaScript">
<!--
var x = 3;
alert('hello there, I am JavaScript - x is '+x);
-->
</script>
</html>
И сохраните содержимое. Запустите на выполнение файл, кликнув правой кнопкой мыши по названию файла и выбрав Web Browser:
Чтобы каждый раз не искать подолгу Web Browser среди всех эдиторов, сделайте следующую настройку. Откройте вкладку Winows->Preferences->Editors_>File Assotiatens и выберите Web Browser. Если не обнаружите его в списке, добавьте через кнопку Add и установите Default. Теперь по умолчанию запуск вашего скрипта будет осуществляться через браузер.
Соответственно поменяется ярлык у вашего файла:
Теперь для запуска скрипта достаточно дважды кликнуть по его названию, а для редактирования нужно с помощью правой клавишей мыши открыть файл через JavaScript Editor.
Лабораторные работы по JavaScript
Основные понятия JavaScript.
Программное взаимодействие с HTML документами на основе DOM API.
Цель работы:
Знакомство с языком разработки клиентских веб-сценариев JavaScript. Изучение основ языка и его применения для автоматизации процесса разметки и добавления интерактивных возможностей веб-страниц.
Задание:
Ознакомьтесь с представленными примерами создания веб-страниц с элементами сценариев JavaScript. Выполните лабораторные работы после каждой темы.
Тема №1
Организация вывода и чтения значений
Пример 1: знакомство с командой alert и prompt
<html>
<head>
<title>A Simple Page</title>
<script language="javascript">
<!--
yourname = prompt("What is your name?","Type your name here ...");
alert(yourname);
yourname2 = yourname;
alert(yourname2);
yourname = prompt("Type something different in","Something different ...");
alert(yourname);
alert(yourname2);
// -->
</script>
</head>
<body>
</body>
</html>
Аналогичный пример без декларации:
<html>
<head>
<title>A Simple Page</title>
<script language="javascript">
<!--
yourname = prompt("What is your name?","Type your name here ...");
alert(yourname);
yourname2 = yourname;
alert(yourname2);
yourname = prompt("Type something different in","Something different ...");
alert(yourname);
alert(yourname2);
// -->
</script>
</head>
<body>
</body>
</html>
Пример 2: Подсчёт арифметических выражений:
<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--
var myVar=2000;
document.write(myVar+"<BR>");
myVar+=2000;
document.write(myVar+"<BR>");
myVar=myVar-500;
document.write(myVar+"<BR>");
myVar=myVar*0;
document.write(myVar+"<BR>");
myVar=myVar+500;
document.write(myVar+"<BR>");
myVar-=80;
document.write(myVar+"<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Пример 3: оператор typeof (определение типа)
<html>
<head>
<title>Using typeof to determine the type of variables</title>
<script language="JavaScript1.1">
<!--
var bMyVar = true;
var nMyVar = 35;
var sMyVar = "This is a string";
var uMyVar;
-->
</script>
</head>
<body>
<script language="JavaScript1.1">
<!--
document.writeln("bMyVar = " + typeof(bMyVar));
document.writeln("<br>nMyVar = " + typeof(nMyVar));
document.writeln("<br>sMyVar = " + typeof(sMyVar));
document.writeln("<br>uMyVar = " + typeof(uMyVar));
-->
</script>
</body>
</html>