Upload
igor-shkulipa
View
200
Download
1
Embed Size (px)
Citation preview
Темы лекции: Обзор веб-фреймворков.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 11
http://www.slideshare.net/IgorShkulipa 2
jQuery
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействииJavaScript, HTML и CSS.
Что умеет jQuery:
• Обращаться к любому элементу DOM (объектной моделидокумента) и не только обращаться, но и манипулировать ими.
• Работать с событиями.
• Легко осуществлять различные визуальные эффекты.
• Работать с AJAX.
• Имеет огромное количество JavaScript плагинов, предназначенныхдля создания элементов пользовательских интерфейсов.
http://www.slideshare.net/IgorShkulipa 3
Функция $()
$("div") вернет все div-элементы на странице.
$(".someBlock") вернет все элементы с классом someBlock.
$("#content") вернет элемент с идентификатором content.
$("#content2 div.someBlock")
вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами.
$("[value = 5]") вернет все элементы с атрибутом value, равным 5.
С помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам
http://www.slideshare.net/IgorShkulipa 4
Функция $()
$("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.
$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.
$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.
$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.
$("#bigIt").html(<p>Новый!</p>)
изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.
$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.
$(".someBox").empty() очистить от содержимого элементы с классом someBox.
http://www.slideshare.net/IgorShkulipa 5
Цепочки методов
Важной особенностью большинства методов jQuery, является возможностьсвязывать их в цепочки. Методы, манипулирующие элементамидокумента, обычно возвращают эти объекты для дальнейшегоиспользования, что позволяет писать примерно следующее:
$("#bigIt").empty().attr("class", "noContent");
// в результате, у элемента с идентификатором bigIt будет удалено
все содержимое,
// после чего ему будет установлен класс noContent.
http://www.slideshare.net/IgorShkulipa 6
Работа с набором элементов
Помимо манипуляций с выбранными элементами, jQuery позволяетработать с самим набором: изменять его, а так же работать сэлементами по отдельности.
$("div").parent() вернет родительские элементы всех div-ов.
$("div").children() вернет дочерние элементы всех div-ов.
$("#someId").next() вернет элемент, лежащий сразу после someId.
$("div").prev() вернет элементы, лежащие перед div'ами.
$("div").eq(i) вернет div-элемент, с индексом i в наборе.
$("div").get(i) вернет DOM-объект div'а, с индексом i.
$("div").get() вернет массив DOM-объеков всех div-ов.
$("div").size() вернет размер набора (количествово div-ов).
http://www.slideshare.net/IgorShkulipa 7
Анимационные эффекты
Ключевым методом, на которой базируются все остальные, является методanimate(), с помощью которого можно задавать плавное изменениеразличных CSS-свойств:
.animate(properties, [duration], [easing], [callback])
• properties — список CSS-свойств, участвующих в анимации и ихконечных значений. Задаются объектом, в формате{ключ:значение}, например:{opacity: 50, width: 100, height: 200}.
• duration — продолжительность выполнения анимации. Может бытьзадана в миллисекундах или строковым значением 'fast' или 'slow'(200 и 600 миллисекунд).
• easing — изменение скорости анимации (будет ли она замедляетсяк концу выполнения или наоборот ускорится). Задается строковымзначением: "linear" и "swing" (для равномерной анимации ианимации с ускорением). Другие варианты можно найти в плагинах.
• callback — функция, которая будет вызвана после завершенияанимации.
$("#mydiv")
.animate({height: "hide"}, 300)
.text("Новый текст")
.animate({height: "show"}, 300);
http://www.slideshare.net/IgorShkulipa 8
Ajax
В jQuery реализована возможность выполнения запросов к серверу безперезагрузки страницы (ajax). Базовыми функциями для ее работыявляются post() и get():
$.post(url, [params], [callback], [dataType])
$.get(url, [params], [callback], [dataType])
• url — url-адрес, по которому будет отправлен запрос.• data — данные, которые будут отправлены на сервер. Они
должны быть представлены объектом, в формате: {fName1:value1,fName2:value2, ...}.
• callback — пользовательская функция, которая будет вызванапосле ответа сервера.
• dataType — ожидаемый тип данных, которые пришлет сервер вответ на запрос.
Простейший пример:
$.get(“http://random.org");
http://www.slideshare.net/IgorShkulipa 9
Другие возможности
Существуют и другие возможности jQuery, например:
• $.browser поможет узнать тип браузера.• $.support поможет узнать конкретные особенности браузера.• .offset() и .position() позволят узнать или изменить позицию
выбранного элемента.• .width() и .height() позволят узнать или изменить размеры
выбранного элемента.• .scrollTop() и .scrollLeft() позволят работать с прокруткой.
Ссылка на русскоязычное описание библиотеки
И на сайт разработчиков
http://www.slideshare.net/IgorShkulipa 10
Пример «Крестики-нолики с jQuery»
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery XO</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script src="xo.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="xo.css" />
</head>
<body>
<table style="width:600px; height:600px;">
<tr><td id="11"></td>
<td id="12"></td>
<td id="13"></td></tr>
<tr><td id="21"></td>
<td id="22"></td>
<td id="23"></td></tr>
<tr><td id="31"></td>
<td id="32"></td>
<td id="33"></td></tr>
</table>
</body>
</html>
xo.html
td, tr {
border: 1px solid black;
text-align: center;
color:transparent;
width: 33.33%;
height: 33.33%;
}
xo.css
http://www.slideshare.net/IgorShkulipa 11
xo.js функция проверки победыfunction CheckVictory(xo) {
if (
//Строки
(($("#11").text() == xo) && ($("#12").text() == xo) &&
($("#13").text() == xo)) ||
(($("#21").text() == xo) && ($("#22").text() == xo) &&
($("#23").text() == xo)) ||
(($("#31").text() == xo) && ($("#32").text() == xo) &&
($("#33").text() == xo)) ||
//Столбцы
(($("#11").text() == xo) && ($("#21").text() == xo) &&
($("#31").text() == xo)) ||
(($("#12").text() == xo) && ($("#22").text() == xo) &&
($("#32").text() == xo)) ||
(($("#13").text() == xo) && ($("#23").text() == xo) &&
($("#33").text() == xo)) ||
//Диагонали
(($("#11").text() == xo) && ($("#22").text() == xo) &&
($("#33").text() == xo)) ||
(($("#31").text() == xo) && ($("#22").text() == xo) &&
($("#13").text() == xo))) {
if (xo == 'X')
alert('Крестики победили!');
else
alert('Нолики победили!');
}
}
http://www.slideshare.net/IgorShkulipa 12
xo.js функция, отмечающая ход
function MarkXO(elem, xo) {
elem.text(xo);
elem.css("background-repeat", "no-repeat");
elem.css("background-position", "center");
if (xo == 'X')
elem.css("background-image", "url('x.png')");
else
elem.css("background-image", "url('o.png')");
}
http://www.slideshare.net/IgorShkulipa 13
xo.js функция-обработчик клика ячейки
var xoGlobal = 'O';
function ClickLogic() {
text = $(this).text();
if (text == '') {
if (xoGlobal == 'X') {
xoGlobal = 'O'
} else {
xoGlobal = 'X'
};
MarkXO($(this), xoGlobal);
CheckVictory(xoGlobal);
} else {
alert("Занято!");
}
}
http://www.slideshare.net/IgorShkulipa 14
xo.js последняя «функция»
$(document).ready(
function () {
$('td').click(ClickLogic);
});
Эта запись «переводится», приблизительно, как «в качествеобработчика $(document).ready установить функцию, котораяобработчиком клика td-шки устанавливает функциюClickLogic»
http://www.slideshare.net/IgorShkulipa 18
Bootstrap
http://bootstrap-ru.com/
Twitter Bootstrap - это фреймворк для создания современных, кросс-браузерных истандартизованных интерфейсов. Продуманная структура кода HTML, JavaScriptи CSS дает вам возможность создавать множество самых разнообразныхэлементов интерфейса и сетку сайта.
Основные инструменты Bootstrap:• Сетки — заранее заданные размеры колонок, которые можно сразу же
использовать, например ширина колонки 90px относится к классу .span2, которыймы можем использовать в CSS описании документа;
• Шаблоны — фиксированный или резиновый шаблон документа;• Типографика — описания шрифтов, определение некоторых классов для
шрифтов таких как код, цитаты и т.п.;• Медиа — представляет возможности управления изображениями и видео;• Таблицы — средства оформления таблиц, вплоть до добавления
функциональности для обеспечения возможности сортировки;• Формы — классы для оформления не только форм, но и некоторых событий
происходящих с ними;• Навигация — классы оформления для вкладок, страниц, меню и панелей
инструментов;• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.
http://www.slideshare.net/IgorShkulipa 19
Компоненты Bootstrap
Все компоненты Bootstrap
http://www.slideshare.net/IgorShkulipa 20
Пример
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, World from Bootstrap</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Hello from Tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Hello from Tab 2</p>
</div>
</div>
</div>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 22
AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом.Предназначен для разработки одностраничных приложений. Его цель— расширение браузерных приложений на основе MVC шаблона, атакже упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительныепользовательские атрибуты, которые описываются директивами, исвязывает ввод или вывод области страницы с моделью,представляющей собой обычные переменные JavaScript. Значенияэтих переменных задаются вручную или извлекаются из статическихили динамических JSON-данных.
AngularJS спроектирован с убеждением, что декларативноепрограммирование лучше всего подходит для построенияпользовательских интерфейсов и описания программныхкомпонентов, в то время как императивное программированиеотлично подходит для описания бизнес-логики. Фреймворкадаптирует и расширяет традиционный HTML, чтобы обеспечитьдвустороннюю привязку данных для динамического контента, чтопозволяет автоматически синхронизировать модель и представление.В результате AngularJS уменьшает роль DOM-манипуляций и улучшаеттестируемость.
http://www.slideshare.net/IgorShkulipa 23
Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.
• ng-app - объявляет элемент корневым для приложения.
• ng-bind - автоматически заменяет текст HTML-элемента на значениепереданного выражения.
• ng-model - то же что и ng-bind, только обеспечивает двустороннеесвязывание данных. Изменится содержимое элемента, ангуляр изменити значение модели. Изменится значение модели, ангуляр измениттекст внутри элемента.
• ng-class - определяет классы для динамической загрузки.
• ng-controller - определяет JavaScript-контроллер для вычисленияHTML-выражений.
• ng-repeat - создает экземпляр для каждого элемента из коллекции.
http://www.slideshare.net/IgorShkulipa 24
Популярные Angular-директивы
• ng-show и ng-hide - показывает или скрывает элемент в зависимостиот значения логического выражения.
• ng-switch - создает экземпляр шаблона из множества вариантов, взависимости от значения выражения.
• ng-view - базовая директива, отвечает за обработку маршрутов,которые принимают JSON перед отображением шаблонов,управляемых указанными контроллерами.
http://www.slideshare.net/IgorShkulipa 25
Ссылки
http://angular.ru
http://habrahabr.ru/hub/angularjs/
http://metanit.com/web/angular/
http://www.slideshare.net/IgorShkulipa 26
Пример. Контроллеры (они же модели)
function HelloWorldController($scope) {
$scope.message = "Hello, World from AngularJS";
}
function PeopleController($scope) {
$scope.people = [
{
"name": "Ivan",
"middle":"Ivanovich",
"surname": "Ivanov",
"email":"[email protected]"
},
{
"name": "Petr",
"middle": "Petrovich",
"surname": "Petrov",
"email": "[email protected]"
},
{
"name": "Sidor",
"middle": "Sidorovich",
"surname": "Sidorov",
"email": "[email protected]"
},
];
}
http://www.slideshare.net/IgorShkulipa 27
Пример. HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Example</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/angular.min.js"></script>
<script src="js/mc.js"></script>
</head>
<body>
<h1 ng-controller="HelloWorldController">{{message}}</h1>
<ul ng-controller="PeopleController">
<li ng-repeat="per in people">
{{per.name}} {{per.middle}} {{per.surname}}
- <strong>{{per.email}}</strong>
</li>
</ul>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 29
BackboneJS
BackboneJS — JavaScript-библиотека, основанная на шаблонепроектирования Model-View-Presenter (MVP), предназначена дляразработки веб-приложений с поддержкой RESTful JSON интерфейса.
Backbone — очень лёгкая библиотека (упакованная и gzip-сжатая 6.3 Кб),но для работы необходима библиотека Underscore.js, а дляподдержки REST API и работы с DOM элементами рекомендуетсяподключить jQuery-подобную библиотеку: jQuery или Zepto.
Backbone.js создан Джереми Ашкенасом, который известен также каксоздатель CoffeeScript.
Проект размещается на GitHub, с доступным аннотированным исходнымкодом, с онлайновыми тестами с примером приложения, со спискомтуториалов и списком реальных проектов, которые используютBackbone. Backbone доступен под лицензией MIT.
http://www.slideshare.net/IgorShkulipa 30
Каталог встроенных событий
• "add" (model, collection, options) — когда модель добавляется в коллекцию.
• "remove" (model, collection, options) — когда модель удаляется из коллекции.
• "reset" (collection, options) — когда всё содержимое коллекции заменяется.
• "sort" (collection, options) — когда коллекция была отсортирована.
• "change" (model, options) — когда атрибут модели меняется.
• "change:[attribute]" (model, value, options) — когда меняется конкретныйатрибут модели.
• "destroy" (model, collection, options) — когда модель уничтожена.
• "request" (model, xhr, options) — когда модель (или коллекция) отправляетзапрос на сервер.
• "sync" (model, resp, options) — когда модель была успешно синхронизирована ссервером.
http://www.slideshare.net/IgorShkulipa 31
Каталог встроенных событий
• "error" (model, xhr, options) — когда вызов save провалился насервере.
• "invalid" (model, error, options) — модель не прошла валидацию наклиенте.
• "route:[name]" (params) — когда один конкретный роут находитсоответствие.
• "route" (router, route, params) — когда любой из роутов находитсоответствие.
• "all" — это специальное событие срабатывает каждый раз, когдасрабатывает любое событие, передавая имя события первымаргументом.
http://www.slideshare.net/IgorShkulipa 32
Backbone.Model
Модели содержат как интерактивные данные, так и большую частьсоответствующей логики: конвертации, валидации, вычисленныесвойства и контроль доступа.
Вы расширяете Backbone.Model методами своей предметной области, аModel предоставляет базовый набор функциональности по управлениюизменениями.
http://www.slideshare.net/IgorShkulipa 33
Ссылки
http://backbonejs.org/
http://backbonejs.ru/
http://habrahabr.ru/post/127049/
https://github.com/kulakowka/Backbone.js-Russian
http://www.slideshare.net/IgorShkulipa 34
Пример. Заголовок
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS Example</title>
<link href="css/bootstrap.css" rel="stylesheet"
media="screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
</head>
<body>
<h1>Hello, World from BackboneJS</h1>
<div id="maindiv">
</div>
http://www.slideshare.net/IgorShkulipa 35
Пример. Шаблон представления
<script type="text/template" id="maintemplate">
<ul>
<% People.each( function(per) { %>
<li>
<%= per.get("name") %>
<%= per.get("middle") %>
<%= per.get("surname") %> -<strong>
<%= per.get("email") %></strong>
</li>
<% }); %>
</ul>
</script>
http://www.slideshare.net/IgorShkulipa 36
Пример. Модель и остальное
<script type="text/javascript">
var Persone = Backbone.Model.extend({
defaults: {
name: "Name",
middle: "Middle",
surname: "Surname",
email: "[email protected]"
}
});
var PeopleList = Backbone.Collection.extend({
models: Persone
});
var People = new PeopleList([
new Persone({ name: "Ivan", middle: "Ivanovich",
surname: "Ivanov", email: "[email protected]" }),
new Persone({ name: "Petr", middle: "Petrovich",
surname: "Petrov", email: "[email protected]" }),
new Persone({ name: "Sidor", middle: "Sidorovich",
surname: "Sidorov", email: "[email protected]" })
]);
http://www.slideshare.net/IgorShkulipa 37
Пример. Модель и остальное
var MainView = Backbone.View.extend({
el: "#maindiv",
initialize: function () {
this.render();
},
render: function () {
var templ = _.template($("#maintemplate").html(),
{ People: People.models });
$("#maindiv").html(templ);
return this;
}
});
var mv = new MainView();
</script>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 39
KnockoutJS
Knockout использует архитектуру (MVVM) Модель - Представление -Модель представления.
Элементы страницы, из которых она будет состоять, могут бытьпомещены в представление.
Сами данные, которые будут отображаться, могут быть представлены вмодели.
Третий компонент, модель представления, - это по сути состояниеинтерфейса в данный момент времени (комбинация данных ипредставления с уже применёнными интерактивными элементами).
http://www.slideshare.net/IgorShkulipa 40
Ссылки
http://knockoutjs.com/
https://github.com/knockout/knockout
http://www.slideshare.net/IgorShkulipa 41
Пример. ViewModel
function persone(nam, mid, surn, em) {
this.name = ko.observable(nam);
this.middle = ko.observable(mid);
this.surname = ko.observable(surn);
this.email = ko.observable(em);
this.fullname = ko.pureComputed({
read: function () {
return this.name() + " " +
this.middle() + " " +
this.surname();
},
write: function (value) {
var iFirstSpace = value.indexOf(" ");
var iSecondSpace = value.lastIndexOf(" ");
if ((iFirstSpace > 0)&&(iSecondSpace>0)) {
this.name(value.substring(0, iFirstSpace));
this.middle(value.substring(iFirstSpace+1, iSecondSpace));
this.surname(value.substring(iSecondSpace+1));
}
},
owner: this
});
return this;
}
http://www.slideshare.net/IgorShkulipa 42
Пример. ViewModel
var HelloWorldViewModel = {
message: "Hello, World from KnockoutJS",
people: ko.observableArray([
new persone("Ivan", "Ivanovich", "Ivanov", "[email protected]"),
new persone("Petr", "Petrovich", "Petrov", "[email protected]"),
new persone("Sidor", "Sidorovich", "Sidorov", "[email protected]")
])
}
http://www.slideshare.net/IgorShkulipa 43
Пример. HTML<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS Example</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<script type="text/javascript" src="js/mc.js"></script>
</head>
<body>
<h1 data-bind="text:HelloWorldViewModel.message" ></h1>
<table>
<thead>
<tr><th>Name</th><th>Middle</th><th>Surname</th>
<th>E-Mail</th><th>Full Name</th></tr>
</thead>
<tbody data-bind="foreach: HelloWorldViewModel.people">
<tr>
<td><input data-bind="value: name"/></td>
<td><input data-bind="value: middle"/></td>
<td><input data-bind="value: surname"/></td>
<td><input data-bind="value: email"/></td>
<td><input data-bind="value: fullname"/></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings(HelloWorldViewModel);
</script>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 45
NodeJS
Node или Node.js — программная платформа, основанная на движке V8(транслирующем JavaScript в машинный код), превращающая JavaScript изузкоспециализированного языка в язык общего назначения.
Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешниебиблиотеки, написанные на разных языках, обеспечивая вызовы к ним изJavaScript-кода.
Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, ноесть возможность разрабатывать на Node.js и десктопные оконные приложения(при помощи node-webkit и AppJS для Linux, Windows и Mac OS) и дажепрограммировать микроконтроллеры (например, tessel и espruino). В основеNode.js лежит событийно-ориентированное и асинхронное (или реактивное)программирование с неблокирующим вводом/выводом.
Node разработал Райан Дал (англ. Ryan Dahl) в 2009 году после двух летэкспериментирования над созданием серверных веб-компонентов. В ходе своихисследований он пришёл к выводу, что вместо традиционной моделипараллелизма на основе потоков следует обратиться к событийно-ориентированным системам. Эта модель была выбрана из-за простоты, низкихнакладных расходов (по сравнению с идеологией «один поток на каждоесоединение») и быстродействия. Целью Node является предложить «простойспособ построения масштабируемых сетевых серверов».
http://www.slideshare.net/IgorShkulipa 46
Ссылки
http://nodejs.org/
http://www.nodebeginner.ru/
http://www.slideshare.net/IgorShkulipa 47
Пример. Самый простой сервер
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/plain” });
response.end("Hello, World from NodeJS");
}).listen(12345);
http://www.slideshare.net/IgorShkulipa 48
Пример. Сервер немного сложнее
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/html” });
response.write("<!DOCTYPE html><html><head>");
response.write("<title>"+"NodeJS Example"+"</title>");
response.write("</head><body>");
response.write("<h1>"+"Hello, World from NodeJS"+"</h1>");
response.end("</body></html>");
}).listen(12345);
http://www.slideshare.net/IgorShkulipa 49
Пример. Сервер еще немного сложнее
var http = require("http");
var fs = require("fs");
http.createServer(function (request, response) {
var index = fs.readFileSync("./index.html");
response.writeHead(200,
{ “Content-Type”: “text/html” });
response.end(index);
}).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
http://www.slideshare.net/IgorShkulipa 50
Пример. Сервер еще чуть-чуть сложнее
var http = require("http");
var url = require("url");
var fs = require("fs");
function Respond(request, response) {
var pathname = url.parse(request.url).pathname;
var index = fs.readFileSync("./" + pathname);
response.writeHead(200, { “Content-Type”: “text/html” });
response.end(index);
}
http.createServer(Respond).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS and Index2</h1>
</body>
</html>