DarkGoodWIN - JavaScript. Учебник начального уровня
Здесь можно скачать бесплатно " DarkGoodWIN - JavaScript. Учебник начального уровня" в формате fb2, epub, txt, doc, pdf. Жанр: Науки: разное, год 2011. Так же Вы можете читать книгу онлайн без регистрации и SMS на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
JavaScript. Учебник начального уровня
Автор:
Издательство:
неизвестно
Жанр:
Год:
2011
ISBN:
нет данных
Скачать:
Скачивание начинается... Если скачивание не началось автоматически, пожалуйста нажмите на эту ссылку.
Вы автор?
Жалоба
Жалоба
Все книги на сайте размещаются его пользователями. Приносим свои глубочайшие извинения, если Ваша книга была опубликована без Вашего на то согласия.
Напишите нам, и мы в срочном порядке примем меры.
Напишите нам, и мы в срочном порядке примем меры.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "JavaScript. Учебник начального уровня"
Описание и краткое содержание "JavaScript. Учебник начального уровня" читать бесплатно онлайн.
Несколько слов об особенностях JavaScript, другими словами - что я знал об этом языке до начала его изучения. Первое и главное: JS код легко интегрируется в HTML разметку и является де факто стандартом для интернет браузеров. Из этого следует, что если вы совершенно не знаете HTML - JS, вероятнее всего, будет для вас бесполезна. В данном опусе я постараюсь разжевать всё максимально детально, но надо иметь в виду, что HTML и JS идут бок о бок, дополняя, а не заменяя друг друга. Для тех, кто сталкивался раньше с Delphi программированием или чем-то подобным можно, в первом приближении, привести такую аналогию: HTML - это форма, а JS - сам код программы.
Другая важная особенность языка - высокая интерактивность. Процитирую фразу, которую мне многократно доводилось слышать: "JavaScript - это событийно ориентированный язык программирования". Что это значит? Это означает, что вы можете написать кусок кода, который выполнится когда пользователь нажмёт на кнопку, можете написать кусок кода, который выполнится когда вы только подведёте к ней курсор мышки. Для Java Script и то и другое - события и она умеет на них реагировать.
Отличительная особенность языка и кода на нём - то, что результат можно увидеть имея лишь один из современных браузеров. То есть вам не нужно ставить и настраивать какие-то компиляторы, среды программирования и так далее. Для запуска любого из приведённых ниже примеров - достаточно набрать текст в любом редакторе (блокноте, например), изменить расширение на html и открыть при помощи браузера. Всё.
Начнём первый проект.
Как пример, иллюстрирующий написание программ на JavaScript, я выбрал известную игру сапёр. Сделал я это не осмысленно, просто я попытался нарисовать таблицу и поменять в ней что–то при нажатие на ячейку. Сделал и подумал, да это же почти сапёр!
Сразу скажу, что никакой особенной графики в программе не будет, зачастую следует различать создание интерфейса приложения и программирования его логики. Несмотря на то, что разделить их бывает не всегда просто — задача эта важная и нужная.
Ладно, перейдём к делу. Давайте пока просто попробуем нарисовать таблицу:
<html>
<head>
</head>
<body>
<table id=«tbl8765875120451524678» border=«2» width=«80%" height=«80%">
<tr>
<td>
cell11
<td>
cell12
<tr>
<td>
cell21
<td>
cell22
</table>
</body>
</html>
cell11 cell12 cell21 cell22
Как видно из кода, всё новое для нас заключено внутри тэга table. Собственно этот тэг и добавляет таблицу в документ.
Непосредственно в открывающем тэге выставляются ряд атрибутов, давайте коротко поговорим о каждом:
«id» — это идентификатор таблицы, именно с его помощью мы будем использовать таблицу в JavaScript. В общем случае — это произвольная строка. Для этого примера я его сделал равным «tbl» + идентификатор поста в блоге, чтобы не было наведённых проблем, а именно, если из другого скрипта (а он может быть в соседнем посте) будет обращение к элементу с тем же «id», что и в этом скрипте — наша табличка может тоже модифицироваться, что нежелательно.
«border» — это размер так называемого бордюра вокруг ячеек. Как это лучше сказать по–русски… Окантовка, наверное ближе всего. Мы указали, что бордюр будет шириной в два пикселя (пиксель — это как бы единица длины экрана монитора, причём самая маленькая, то есть не может быть пол пикселя). Можете поэкспериментировать со значением этого атрибута, его, например, можно сделать равным нулю и тогда ячейки совсем не будут разделены.
«width» — это ширина нашей таблицы. Можно было задать её в пикселях, как и толщину бордюра, но, в данном случае, как мне кажется, уместнее использовать относительную величину. А именно, 80% от ширины нашего документа. Следует всегда иметь ввиду, что реальный размер пикселя зависит и от разрешения экрана и от его размера. В одном случае объект шириной в 1000 пикселей может занимать половину ширины экрана, а в другом он может на экран не влезть.
«height» — тэг аналогичный тэгу «width», только он отвечает за высоту нашей таблички. Мы его также сделали равным 80%. Более подходящим вариантом было бы сделать таблицу квадратной, беря 80% от минимума высоты и ширины документа, но я решил излишни не усложнять код.
Далее идёт тэг «tr», он означает начало новой строки таблицы.
Следом за ним идёт тэг «td», означающий начало следующей колонки (ячейки в строке).
После тэга «td» идёт текст «cell11». Это тот текст, что будет написан в нашей первой ячейке. Затем опять переход к следующей ячейке, надпись «cell12», новая строка и там ещё две ячейки.
Пока эта таблица ничего не умеет, да и маловата она для сапёра, не интересно играть будет. Думаю стоит сделать её побольше, только вот не хочется для каждой ячейки писать по две строчки, плюс ещё по одной на каждую строку. Эдак у нас для поля 10х 10 получится 210 строчек текста на одну только таблицу, которая ничего не умеет. Может можно сделать это как–то компактнее? Давайте поговорим об этом в следующей главе.
Как программирование помогает сделать вашу страничку компактнее.
Помните пример из прошлой главы? Там мы рисовали табличку из четырёх ячеек на чистом HTML. Глава закончилась на том, что для создания таблицы 10х 10 ячеек будет нужно 210 строк внутри основных тэгов. Посмотрим, сумеем–ли мы сделать текст более компактны с помощью JavaScript.
Вот, что получилось у меня:
<html>
<head>
head>
<script>
function initTable()
{
var rowCount = 10;
var colCount = 10;
var tbl = document.getElementById(«tbl»);
for (var i = 0; i < rowCount; i++)
{
var row = tbl.insertRow(i);
for(var j = 0; j < colCount; j++)
{
var cell = row.insertCell(j);
cell.innerHTML = 'cell' + i.toString() + j.toString();
}
}
}
script>
<body onload=«initTable();">
<table id=«tbl» border=«2» width=«80%" height=«80%">
table>
body>
html>
В итоге получается такая табличка:
Начнём анализ с содержимого тэга «body». В самом открывающем тэге появился новый атрибут «onload». Как можно предположить из названия, этот атрибут отвечает за то, какое действие выполнится после загрузки страницы. В нашем примере мы указали, что после загрузки страницы должна выполниться некая функция, которая называется «initTable». Более подробно об этом поговорим несколько ниже.
Что ещё поменялось в тэге «body»? Мы убрали всё содержимое тэга «table». Это вполне логично, так как заполнять его мы решили при помощи скрипта.
Раз уж упомянули слово скрипт, придётся отдуваться. «script» — это самый большой тэг в примере к этой главе, но, как вы видете, он всё–таки значительно меньше 210 строк. Внутри него нет ничего, кроме скрипта на JavaScript. А теперь внимание, требуется перестроиться, внутри этого тэга больше не будет привычных для HTML конструкций. И если в HTML разбиение кода на смысловые блоки происходило с помощью тэгов, то теперь это будет происходить с помощью фигурных скобок.
Первое, что мы встречаем в нашем скрипте — строчку «function initTable()». Таким синтаксисом в JavaScript объявляется функция. Что же такое функция в данном контексте — по сути — это фактически самостоятельный скрипт (на самом деле часть скрипта), которая может выполнять какие–то действия. Более подробную информацию я приведу позже, для понимания данного примера достаточно знать того, что я уже написал.
Кстати, обратили внимание, название функции совпадает с тем, что мы задали в атрибуте «onload» тэга «body». Это означает, что именно эта функция выполнится после того, как страница загрузится.
Название функции, разумеется, может быть отличным от того, что привёл я, на поведение функции оно никак не влияет, однако, для улучшения читабельности кода, следует давать функциям названия перекликающиеся с тем, что функция делает.
Далее мы переходим к следующей строчке, в ней всего один символ, открывающая фигурная скобка. Как я уже упоминал, она служит обозначением начала нового блока. Это значит, что с этого момента и до достижения парной ей фигурной скобки, весь код будет относиться к функции «initTable()».
Как узнать какая скобка парная данной? Есть нехитрый алгоритм. Представьте, что до неё у вас ноль скобок, вот вы дошли до открывающей скобки и уже одна скобка, дошли до следующей открывающей — их две. Потом, допустим, закрывающая, после неё снова осталась одна. И так следует прибавлять единицу для открывающих и вычитать для закрывающих до тех пор, пока вы не получите ноль. Та закрывающая скобка, после которой ваш «счётчик» обнулился и будет парной к первой открывающей.
Применив алгоритм, получим, что весь код внутри тэга «script» относится к нашей функции.
Длинная глава получается, надо было отдельно поговорить про функции, отдельно потом про переменные, но, я в этой работе решил идти не от понятий, не от терминов, а от функционала, чего и пытаюсь придерживаться.
Так вот, мы переходим непосредственно к телу функции (её содержимому). Первая её строка выглядит так: «var rowCount = 10;". Давайте по порядку. Ключевое слово «var» говорит о том, что в этой строке мы будем объявлять новую переменную. После этого слова идёт название переменной, а затем (не обязательно), ей присваивается значение. Равнозначно было бы написать:
var rowCount;
rowCount = 10;
но это, как вы понимаете длиннее.
Так что же такое переменная? Попробую объяснить на пальцах. Переменная — это нечто, имеющее имя и соответствующее ему значение. Например, вы родились 29 ноября. Тогда имя соответствующей переменной «число вашего рождения», я её значение — 29 ноября (только не пробуйте именовать переменные кириллицей или используя пробелы, так делать нельзя, я так назвал для удобства, а вот «dateOfYouBirth», если я не ошибся в правописании, которое у меня, как и у Винни Пуха хромает, хотя оно есть, вполне нормальное название для этой переменной).
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "JavaScript. Учебник начального уровня"
Книги похожие на "JavaScript. Учебник начального уровня" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о " DarkGoodWIN - JavaScript. Учебник начального уровня"
Отзывы читателей о книге "JavaScript. Учебник начального уровня", комментарии и мнения людей о произведении.