Работа с JavaScript
Возможности и структура языка JavaScript. Встраивание в веб-страницы. Пользовательские скрипты в браузере. Виджеты и версии, библиотеки JavaScript. Средства тестирования. Библиотеки WebGL. Создание и анимация объекта. Пример программы на JavaScript.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 13.01.2020 |
| Размер файла | 26,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Работа с JavaScript
Вступление
В современном мире интернет стал играть очень важную роль в жизни людей. Кто-то просто просматривает новости и видео, а для кого-то интернет это заработок. Так или иначе мы сталкиваемся с различными flash-приложениями или написанными на JavaScript(JS). Хотя раньше программирование на JS казалось ведомо только избранным, а сейчас же столь мощный пакет стал более доступным для обычных пользователей. Так же относительно недавно проводили сравнение вычислительных возможностей flash и JS,и оказалось, что JS значительно обгоняет в данном параметре своего конкурента. Поэтому автор считает, что наступает век JavaScript. Также автор надеется, что после прочтение ниже приведенной работы вы поддержите его мнение.
1.Возможности языка
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам -- функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания -- что придаёт языку дополнительную гибкость.
Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:
· объекты, с возможностью интроспекции;
· функции как объекты первого класса;
· автоматическое приведение типов;
· автоматическая сборка мусора;
· анонимные функции.
В языке отсутствуют такие полезные вещи, как:
· модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
· стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода/вывода, базовых типов для бинарных данных;
· стандартные интерфейсы к веб-серверам и базам данных;
· система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.
2.Структура языка
Структурно JavaScript можно представить в виде объединения трёх чётко различимых друг от друга частей:
· ядро (ECMAScript),
· объектная модель браузера (Browser Object Model или BOM (de)),
· объектная модель документа (Document Object Model или DOM).
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель браузера и объектная модель документа могут не поддерживаться.
Объектную модель документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с определением DOM как независимого от языка интерфейса документа. В противоположность этому ряд авторов находят BOM и DOM тесно взаимосвязанными.
3.Встраивание в веб-страницы
Для добавления JavaScript-кода на страницу, можно использовать теги <script></script>, которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, так как по умолчанию стоит javascript.
Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:
<script type="text/javascript">
alert('Hello, World!');
</script>
4.Пользовательские скрипты в браузере
Пользовательские скрипты в браузере -- это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Для управления пользовательскими скриптами в Mozilla Firefox используется расширение Greasemonkey; Opera и Google Chrome предоставляют средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey.
5.Виджеты
Виджет -- вспомогательная мини-программа, графический модуль которой размещается в рабочем пространстве соответствующей родительской программы (англ.), служащая для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. JavaScript используется как для реализации виджетов, так и для реализации движков виджетов. В частности, при помощи JavaScript реализованы Apple Dashboard, Microsoft Gadgets (англ.), Yahoo!_Widgets (англ.), Google Gadgets, Klipfolio Dashboard (англ.).
6.Версии
|
JavaScript |
Соответствующая версия JScript |
Существенные изменения |
|
|
1.0 (Netscape 2.0, март 1996) |
1.0 (ранние версии IE 3.0, август 1996) |
Оригинальная версия языка JavaScript. |
|
|
1.1 (Netscape 3.0, август 1996) |
2.0 (поздние версии IE 3.0, январь 1997) |
В данной версии был реализован объект Array и устранены наиболее серьёзные ошибки. |
|
|
1.2 (Netscape 4.0, июнь 1997) |
Реализован переключатель switch, регулярные выражения. Практически приведён в соответствии с первой редакцией спецификации ECMA-262. |
||
|
1.3 (Netscape 4.5, октябрь 1998) |
3.0 (IE 4.0, октябрь 1997) |
Совместим с первой редакцией ECMA-262. |
|
|
1.4 (только Netscape Server) |
4.0 (Visual Studio 6, нет версии IE) |
Применяется только в серверных продуктах Netscape. |
|
|
5.0 (IE 5.0, март 1999) |
|||
|
5.1 (IE 5.01) |
|||
|
1.5 (Netscape 6.0, ноябрь 2000; также |
5.5 (IE 5.5, июль 2000) |
Редакция 3 (декабрь 1999). Совместим с третьей редакцией спецификации ECMA-262. |
|
|
5.6 (IE 6.0, октябрь 2001) |
|||
|
1.6 (Gecko 1.8, Firefox 1.5, ноябрь 2005) |
Редакция 3 с некоторыми совместимыми улучшениями: E4X, дополнения к Array (например, Array.prototype.forEach), упрощения для Array и String |
||
|
1.7 (Gecko 1.8.1, Firefox 2.0, осень 2006), расширение JavaScript 1.6 |
Редакция 3, с добавлением всех улучшений из JavaScript 1.6, генераторов и списочных выражений (list comprehensions, [a*a for (a in iter)]) из Python, блоковых областей с использованием let и деструктурирующего присваивания (var [a, b] = [1, 2]). |
||
|
JScript .NET (ASP.NET; нет версии IE) |
(Считается, что JScript .NET разработан при участии других членов ECMA) |
||
|
1.8 (Gecko 1.9, Firefox 3.0, осень 2008), расширение JavaScript 1.7 |
Новая форма записи для функций, сходная с типичными лямбда-выражениями, генераторы (англ.), новые методы итеративной обработки массивов reduce() и reduceRight(). |
||
|
1.8.1 (Gecko 1.9.1, Firefox 3.5) |
Встроенная поддержка JSON, метод getPrototypeOf() у Object, методы trim(), trimLeft(), trimRight() у String |
||
|
2.0 |
Редакция 4 (разработка не закончена, название зарезервировано ECMA, но не было использовано для публикации) |
||
|
Редакция 5 (ранее известная под названием ECMAScript 3.1. Финальная версия принята 3 декабря 2009 годаhttp://ru.wikipedia.org/wiki/JavaScript - cite_note-108.) |
7.Библиотеки JavaScript
Для обеспечения высокого уровня абстракции и достижения приемлемой степени кросс-браузерности при разработке веб-приложений используются библиотеки JavaScript. Они представляют собой набор многократно используемых объектов и функций.
Среди известных JavaScript библиотек можно отметить Adobe life, Dojo Toolkit, Extjs, jQuery, Mootools, Prototype, Qooxdoo (англ.), Underscore.
1)jQuery -- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.
Возможности:
· Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
· Переход по дереву DOM, включая поддержку XPath как плагина;
· События;
· Визуальные эффекты;
· AJAX-дополнения;
· JavaScript-плагины.
2) Ext JS -- библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo! UI Library, jQuery или Prototype/script.aculo.us, начиная с 4-ой версии адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества Web 2.0.
8.Средства тестирования
Большинство фреймворков автоматизированного тестирования (англ.) JavaScript-кода предполагают запуск тестов в браузере. Это осуществляется при помощи HTML-страницы, являющейся контекстом тестирования (англ.), которая, в свою очередь загружает всё необходимое для осуществления тестирования. Первыми такими фреймворками были JsUnit (англ.) (создан в 2001 году), Selenium (создан в 2004 году). Альтернатива -- запуск тестов из командной строки. В этом случае используются окружения, отличные от браузера, например, Rhino. Одним из первых инструментов такого рода является Crosscheck, позволяющий тестировать код, эмулируя поведение Internet Explorer 6 и Firefox версий 1.0 и 1.5. Другой пример фреймворка автоматизированного тестирования JavaScript-кода, не использующего браузер для запуска тестов -- библиотека env.js, созданная Джоном Резигом. Она использует Rhino и при этом содержит эмуляцию окружения браузера и DOM.
Blue Ridge, плагин к фреймворку веб-приложений Ruby on Rails, позволяет осуществлять модульное тестирование JavaScript-кода как в браузере, так и вне его. Это достигается за счёт использования фреймворка автоматизированного тестирования Screw.Unit и Rhino с env.js[101].
Главная проблема систем тестирования, не использующих браузеры, в том, что они используют эмуляции, а не реальные окружения, в которых выполняется код. Это приводит к тому, что успешное прохождение тестов не гарантирует того, что код корректно отработает в браузере. Проблемой систем тестирования, использующих браузер, является сложность работы с ними, необходимость осуществления рутинных неавтоматизированных действий. Для решения этого JsTestDriver, фреймворк автоматизированного тестирования, разрабатываемый Google, использует сервер, взаимодействующий с браузерами для осуществления тестирования. Сходным образом ведёт себя Selenium Remote Control, входящий во фреймворк автоматизированного тестирования Selenium: он включает в себя сервер, запускающий и завершающий браузеры и действующий как HTTP-прокси для запросов к ним. Кроме того, в Selenium содержится Selenium Grid, позволяющий осуществлять одновременное тестирование JavaScript-кода на разных компьютерах с разными окружениями, уменьшая время выполнения тестов. Testswarm, имеющее поддержку фреймворков автоматизированного тестирования JavaScript-кода QUnit (библиотека jQuery), UnitTestJS (библиотека Prototype), JSSpec (библиотека MooTools), JsUnit, Selenium и Dojo Objective Harness, представляет собой распределённое средство поддержки непрерывной интеграции[108].
Негативное свойство, которым может обладать фреймворк автоматизированного тестирования JavaScript-кода -- наличие зависимостей. Это создаёт риск отказа в работе тестируемого кода, успешно проходящего тесты, в среде с отсутствием этих зависимостей. Например, исходная версия JsUnitTest, фреймворка, созданного и использовавшегося для тестирования библиотеки Prototype, зависела от самой Prototype, изменяющего свойства объектов в глобальной области видимости. Включение в библиотеку JavaScript инструмента тестирования -- распространённая практика. Так YUI Test 3 является частью Yahoo! UI Library и может быть безопасно использован для тестирования произвольного JavaScript-кода. QUnit -- фреймворк автоматизированного тестирования, созданный разработчиками jQuery.
9.WebGL
WebGL (Web-based Graphics Library) -- программная библиотека для языка программирования JavaScript, позволяющая создавать на JavaScript интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузерах. За счёт использования низкоуровневых средств поддержки OpenGL, часть кода на WebGL может выполняться непосредственно на видеокартах. Проект по созданию библиотеки управляется некоммерческой организацией Khronos Group.
10.Принципы WebGL
Библиотека построена на основе OpenGL ES 2.0 и обеспечивает API для 3D-графики., использует HTML5-элемент canvas, также оперирует с DOM. Автоматическое управление памятью предоставляется языком JavaScript.
11. Реализация WebGL
· Mozilla Firefox -- WebGL был включён во все платформы, у которых есть нужная графическая карта с актуальными драйверами, начиная с версии 4.0.
· Google Chrome -- WebGL включён по умолчанию во все версии начиная с 9.
· Safari -- поддерживает WebGL, но поддержка отключена по умолчанию.
· Opera -- WebGL реализован в версии Opera 12.00, но отключена по умолчанию.
· Internet Explorer -- Microsoft не заявляла об официальной поддержке WebGL, независимыми разработчиками выпущены плагины Chrome Frame и IEWebGL, предусматриваюющие опции, необходимые для поддержки WebGL в Internet Explorer. По-видимому, поддержка WebGL появится в IE 11.
12.Библиотеки WebGL
· Для разработки WebGL используется несколько библиотек. Первой общедоступной стала библиотека WebGLU. Среди других библиотек для WebGL - GLGE, C3DL, Copperlicht, SpiderGL, gwt-g3d (обёртка для GWT), SceneJS, X3DOM, Processing.js, Three.js, Turbulenz, OSGJS, XB PointStream и CubicVR.js.
· ANGLE (Almost Native Graphics Layer Engine) -- программа, выпущенная под лицензией BSD, которая позволяет переводить содержимое WebGL в OpenGL ES 2.0, вызывать API DirectX 9, которые взаимодействуют с платформами Microsoft Windows без необходимости в дополнительных драйверах OpenGL.
13.Пример создания и анимации объекта
Подключаем библиотеку Three.js и RequestAnimationFrame.js
1. <script src="Three.js"></script>
2. <script src="RequestAnimationFrame.js"></script>
Теперь можно приступить к написанию кода. Вначале нам нужно создать объект WebGLRenderer с режимом сглаживания.
1. var renderer = new THREE.WebGLRenderer({antialias: true});
2. renderer.setSize(document.body.clientWidth, document.body.clientHeight);
Далее применяем его BODY
1. document.body.appendChild(renderer.domElement);
ставим цвет для очистки рендера и очищаем его
1. renderer.setClearColorHex(0xEEEEEE, 1.0);
2. renderer.clear();
Теперь станем определять необходимые нам переменные:
1. var fov = 45; // угол обзора камеры
2. var width = renderer.domElement.width; // ширина сцены
3. var height = renderer.domElement.height; // высота сцены
4. var aspect = width / height; // соотношение сторон экрана
5. var near = 1; // минимальная видимость
6. var far = 10000; // максимальная видимость
Далее создаем объект камеры и отдаляем ее назад на 300 поинтов
1. var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
2. camera.position.z = 300;
Теперь создаем сцену, меш (трехмерный объект, в который добавляется другая геометрия), создаем простой куб с вершинами в 50 поинтов, и задаем черный цвет. После чего добавляем созданный нами меш в сцену, и рендерим сцену через камеру.
1. var scene = new THREE.Scene();
2. var cube = new THREE.Mesh(
3. new THREE.CubeGeometry(50,50,50),
4. new THREE.MeshBasicMaterial({color: 0x000000, opacity: 1})
5. );
6. scene.add(cube);
7. renderer.render(scene, camera);
Если сейчас посмотреть - можно увидеть просто черный квадрат. Создадим для него анимацию.
1. function animate(t) {
2. // задаем круговое движение камеры
3. camera.position.set(
4. Math.sin(t/1000)*300, 150, Math.cos(t/1000)*300);
5. // очищаем рендер и обновляем lookAt каждый фрейм
6. renderer.clear();
7. camera.lookAt(scene.position);
8. renderer.render(scene, camera);
9. window.requestAnimationFrame(animate, renderer.domElement);
10. animate(new Date().getTime());
Здесь мы создаем функцию вращения камеры по окружности вокруг куба. Очищаем каждый фрейм рендер окна, и добавляем функцию в цикличное выполнение через requestAnimationFrame, которая является аналогом функции setInterval(), но в отличии от нее первая дает браузеру знать, когда нужно прорисовать следующий фрейм, и выполняется только тогда, когда нужный элемент видимый на экране.
Добавив источник света.
1. var light = new THREE.SpotLight();
2. light.position.set( 170, 330, -160 );
3. scene.add(light);
И поверх уже созданного нами куба, добавим еще один.
1. var litCube = new THREE.Mesh(
2. new THREE.CubeGeometry(50, 50, 50),
3. new THREE.MeshLambertMaterial({color: 0xffffff}));
4. litCube.position.y = 50;
5. scene.add(litCube);
14.Пример программы на JavaScript
Файл №1 “index.html” (его мы и будем запускать)
<!DOCTYPE html>
<html>
<head>
<title>Three.js - dice</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<!--подключаемые библиотеки -->
<script type="text/javascript" src="Three.js"></script>
<script type="text/javascript" src="RequestAnimationFrame.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<!-- app -->
<script type="text/javascript" src="demoapp.js"></script>
</head>
<body>
//Создание музыки на заднем фоне
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<script type="text/javascript">
$$r(function() {
$$i({
create:'script',
attribute: {
'type':'text/javascript',
'src':'sound.js'
},
insert:$$().body,
onready:function() { //выполняю только после загрузки скрипта
//создаю экземпляр обьекта
var s=new sound();
s.start({
'music':'http://goldenland.onfind.net/2/1/5.mp3',
'player':'http://nagon.net/flash/player_mod0.swf'
});
}
});
});
</script>
<script Language="JavaScript" type="text/javascript">
</script>
//Создание кнопки
<input type="button" value="Add 5" onClick="freshStart(5)">
//Создание ползунков
<br>
Axis X: -1500<input type="range" name= "Axis X" min="-1500" max="1500" oninput="wallMakerX(this.value)" >1500
<br>
Axis Y: -1500<input type="range" name= "Axis Y" min="-1500" max="1500" oninput="wallMakerY(this.value)" >1500
<br>
Axis Z: -1500<input type="range" name= "Axis Z" min="-1500" max="1500" oninput="wallMakerZ(this.value)" >1500
<br>
<div></div>
</body>
</html>
Файл №2 “jquery.js” (это библиотека; подключаем сами)
Файл №3 “Three.js” (это библиотека; подключаем сами)
Файл №4 “RequestAnimationFrame.js ”:
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
Файл №5 “demoapp.js” (это тело нашей программы):
//Задание переменных
var container, camera, scene, renderer, floormesh,cubeNew,cubeMeshNew,cubeMesh,cubeMesh1,wallNew,wallMeshNew,i,wall,wallMesh, phi = 0;
var m = 10; //Начальное количество кубиков
var old_m = 0;
var addX=0;
var addY=0;
var addZ=0;
var d; // Количество добавленных кубиков
var cubes = new Array(m);
var wayOut = new Array (m);
var walls = new Array(10);
var cubesMesh = new Array (m);
var wallsMesh = new Array(10);
var startPosition = new Array (m);
var wallsPosition = new Array(10);
var xPosition = new Array(m);
var zPosition = new Array(m);
var randi,randiNew; //Рандомное число
//Задание цветов сторон кубика
var materials = [
new THREE.MeshBasicMaterial( { color: 0xE01B4C }), // правая сторона
new THREE.MeshBasicMaterial( { color: 0x34609E }), // левая сторона
new THREE.MeshBasicMaterial( { color: 0x7CAD18 }), //верх
new THREE.MeshBasicMaterial( { color: 0x00EDB2 }), // низ
new THREE.MeshBasicMaterial( { color: 0xED7700 }), // лицевая сторона
new THREE.MeshBasicMaterial( { color: 0xB5B1AE }) // задняя сторона
];
//Функция перемещения стены при помощи слайдера по X
function wallMakerX(r)
{
wallMesh.position.x = 300 + Number(r);
render(m);
}
//Функция перемещения стены при помощи слайдера по Y
function wallMakerY(r)
{
wallMesh.position.y = 400 + Number(r);
render(m);
}
//Функция перемещения стены при помощи слайдера по Z
function wallMakerZ(r)
{
wallMesh.position.z = 450 + Number(r);
render(m);
}
//Функция добавления новых кубиков в смерч
function freshStart(d)
{
old_m = m;
m += d;
init(m);
render(m);
}
//Функция создания кубиков и задания их начального положения
function init(m)
{
container = $( 'div' ).attr('id','cardfield');
$('body').append( container );
for ( i = 0 + old_m; i < m; i++)
{
cubeNew = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materials );
cubes[i] = cubeNew;
cubeMeshNew = new THREE.Mesh( cubes[i], new THREE.MeshFaceMaterial() );
cubesMesh[i] = cubeMeshNew;
randiNew = (Math.random()*50 + 1)
cubesMesh[i].position.x = Math.sin(randiNew * 10) ;
cubesMesh[i].position.y = randiNew ;
cubesMesh[i].position.z = Math.cos(randiNew * 10) ;
scene.addChild( cubesMesh[i] );
randi = Math.floor((Math.random()*200)+10);
startPosition[i] = randi * 50;
xPosition[i] = startPosition[i];
zPosition[i] = startPosition[i];
wayOut[i] = 1;
new THREE.ShadowVolume( cubesMesh[i] );
}
}
//Функция необходимая для анимации кубиков
function animate()
{
requestAnimationFrame(animate);
render(m);
}
//Функция изменения положения кубиков в пространстве
function render(m)
{
for (i = 0; i < m; i++)
{
//Вращене кубиков смерча
cubesMesh[i].rotation.x += (i / 20 + 0.5) * Math.PI / 90;
cubesMesh[i].rotation.y += (i / 20 + 1.0) * Math.PI / 90;
cubesMesh[i].rotation.z += (i / 20 + 1.5) * Math.PI / 90;
//Условие встречи со стеной
if ((cubesMesh[i].position.x < (wallMesh.position.x + 100))&&(cubesMesh[i].position.x > (wallMesh.position.x - 100))&&(cubesMesh[i].position.y > (wallMesh.position.y - 600))&&(cubesMesh[i].position.y < (wallMesh.position.y + 600))&&(cubesMesh[i].position.z < (wallMesh.position.z + 300))&&(cubesMesh[i].position.z > (wallMesh.position.z - 300)))
{wayOut[i] = wayOut[i] * (-1)}
//Изменяет направление при встречи со стеной
xPosition[i] += phi * wayOut[i] ;
zPosition[i] += phi * wayOut[i] ;
//Изменение координат кубиков
cubesMesh[i].position.x = Math.sin( xPosition[i] ) * i * 25;
cubesMesh[i].position.y = phi + i * 50;
cubesMesh[i].position.z = Math.cos( zPosition[i] ) * i * 25;
}
phi = 0.1 + (Math.random())/5;
renderer.render(scene, camera);
}
$(document).ready(function() {
//Создание неподвижной камеры
camera = new THREE.Camera(45, window.innerWidth/window.innerHeight,1, 10000);
//Задание положения камеры
camera.position.z = 3000;
camera.position.y = 5000;
camera.target.position.y = -1000;
//Создание сцены
scene = new THREE.Scene();
//Создание "пола"
var floorgeo = new THREE.CubeGeometry(1500,1500,5);
floormesh = new THREE.Mesh(floorgeo, new THREE.MeshBasicMaterial({color: 0x248C0F, opacity:0.9}));
floormesh.position.y = -200;
floormesh.rotation.x = 90 * Math.PI / 180;
scene.addChild(floormesh);
//Создание стены, изменяющей направление
wall = new THREE.CubeGeometry( 100, 600, 300, 1, 1, 1, materials );
wallMesh = new THREE.Mesh( wall, new THREE.MeshFaceMaterial() );
wallMesh.position.y = 400;
wallMesh.position.x = 300;
wallMesh.position.z = 250;
scene.addChild( wallMesh );
new THREE.ShadowVolume( wallMesh );
//Задание источника света
light = new THREE.DirectionalLight( 0xffffff );
light.castShadow = true;
light.position.set( 0, 1, 0 );
scene.addChild( light );
//Обновление анимации
init(m);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.append( renderer.domElement );
animate();
Вывод
Стремительное развитие интернета создаёт благоприятные условия для развития своего дела в виртуальном пространстве. Постоянно расширяющаяся аудитория пользователей всемирной паутины является самым широким рынком на котором можно реализовывать разнообразные товары: как реальные, так и виртуальные
В основе любого бизнеса, который строится в интернет, лежит веб-сайт. Причём на успех проекта влияет очень много факторов. Но первое, что видит посетитель любого сайта -- это его интерфейс.
От внешнего вида и удобства использования зависит, останется ли случайный веб-сёрфер почитать, что такого ценного имеет сайт или просто нажмёт кнопку «Закрыть» в своём браузере. Это уже потом, когда пользователь перейдёт в разряд постоянных читателей, он будет готов прощать ошибки и огрехи в интерфейсе сайта. Но при первой встрече интерфейс будет играть ключевую роль в завязывании тесных отношений с вашим клиентом.
Сделать оригинальную, стильную и качественно работающую одёжку сайта невозможно без использования JavaScript. Как мы уже показали ранее на примере программы, всего лишь несколько строк кода оживят ваш сайт.
Тем самым использование JavaScript на страницах веб-сайта откроет новую веху в развитии вашего веб-проекта.
Список литературы
javascript программа скрипт веб
1. Баррет Д. JavaScript. Web-профессионалам. - Киев: БХВ - Киев, 2001.
2. Бранденбау Д. JavaScript: сборник рецептов. - СПб.: Питер, 2000.
3. Вайк А. JavaScript в примерах. - Киев: ДиаСофт, 2000.
4. Вандер Вер Э. JavaScript для "чайников". - Диалектика, 2001.
5. Гарнаев А. Web-программирование на Java и JavaScript. - СПб.: БХВ Санкт-Перебург, 2002.
6. Дарнел Р. JavaScript. Справочник. - СПб.: Питер, 2000.
7. Дмитриева М. Самоучитель JavaScript. - СПб.: БХВ Санкт-Перебург, 2001.
8. Мэрдок К. JavaScript: наглядный курс создания динамических Web-страниц. - Диалектика, 2001.
Размещено на Allbest.ru
...Подобные документы
Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.
лекция [16,2 K], добавлен 05.02.2012Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".
курсовая работа [19,3 K], добавлен 01.07.2014Характеристика Javascript функции с параметрами (аргументами). Возврат значений, глобальные и локальные переменные в функции. Все способы создания пользовательских функций в Javascript. Область видимости переменных. Рекурсивная функция Javascript.
лабораторная работа [75,8 K], добавлен 19.09.2019Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Примеры динамического построения html-страницы при помощи JavaScript. Использование цикла For, когда заранее известно, сколько раз должны повториться циклические действия. Выполнение циклических операторов входа и выхода, прерывание текущей итерации.
лабораторная работа [52,4 K], добавлен 19.09.2019Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.
курсовая работа [51,4 K], добавлен 12.12.2010Особенности составления программы (сценария) на языке JavaScript. Построение выражений из литералов, переменных, знаков операций, скобок. Элементы, используемые для хранения данных. Приоритет операций, порядок, в котором выполняются операции в выражении.
лабораторная работа [40,2 K], добавлен 19.09.2019Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".
практическая работа [26,0 K], добавлен 04.02.2015Изучение создания скриптов на JavaScript. Разработка программы выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки. Применение контейнера SCRIPT для размещение JavaScript-кода. Получение типа программы просмотра HTML-страниц.
контрольная работа [21,1 K], добавлен 15.02.2010Області застосування JavaScript. Об'єктна модель документа. Ієрархічна структура моделі та їх взаємозв'язки з іншими об'єктами. Іменування об'єктів і точковий синтаксис. Розміщення сценаріїв у документах. Способи визначення моменту запуску сценарію.
реферат [26,5 K], добавлен 20.08.2011Изучение методик языка Javascript по формализации и решению поставленной задачи, технологических приемов разработки программ на языке Javascript, HTML, CSS. Формально определение машины Тьюринга, распознающую язык. Ее программная модель, протоколы работы.
курсовая работа [220,7 K], добавлен 03.03.2015Освоение принципов написания клиентских сценариев JavaScript, управляемых событиями. Связь собственной функции JavaScript с обрабатываемым событием. Оформление ссылок в виде графических кнопок, изменяющих свой вид при наведении на них указателя мыши.
лабораторная работа [605,9 K], добавлен 25.05.2016Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).
лабораторная работа [31,0 K], добавлен 28.10.2010Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".
презентация [331,2 K], добавлен 25.09.2013Типизация данных в JavaScript. Правила объявления локальных и глобальных переменных. Объявление и использование функций. Открытие и закрытие файла, запись в него и чтение из него. Создание теста с использованием средств языка программирования PHP скрипт.
контрольная работа [73,8 K], добавлен 25.01.2016История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Характеристика возможностей редактора DreamWeaver и Front Page. Особенности языков программирования PHP и JavaScript. Основные требования, предъявляемые к Web-странице. Специфика программного обеспечения для ее создания и эффективности использования.
курсовая работа [44,6 K], добавлен 03.02.2011Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.
дипломная работа [1,1 M], добавлен 05.03.2013Особенности создания сайта "Ремонт и эксплуатация автомобилей ВАЗ" содержащего необходимую информацию поэтапной разборки запчастей, а также устранение неисправностей, написанного с использованием языка гипертекстовой разметки HTML и языка JavaScript.
дипломная работа [10,5 M], добавлен 04.06.2019
