Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo' . И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo' .
Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write() мы использовали двойные кавычки ("), а в конструкции alert() — только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Yo')" — то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой — нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки — сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo").
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения о некоторых из них мы получим в данном описании, однако не о всех. Поэтому обращайтесь пожалуйста к соответствующему справочнику, если Вы хотите узнать, какие обработчики событий еще существуют.
Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был передан функции JavaScript alert . Такое ограничение накладывается по соображениям безопасности. Такое же выпадающее окно Вы можете создать и с помощью метода prompt(). Однако в этом случае окно будет воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может принять вид системного сообщения и попросить читателя ввести некий пароль. А если текст помещается в выпадающее окно, то тем самым читателю дается понять, что данное окно было создано web-браузером, а не вашей операционной системой. И поскольку данное ограничение наложено по соображениям безопасности, Вы не можете взять и просто так удалить появившееся сообщение.
Функции
В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. Поэтому уже теперь мне необходимо рассказать об этом важном элементе языка.
В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. Давайте, к примеру, напишем скрипт, печатающий некий текст три раза подряд. Для начала рассмотрим простой подход:
Закрыть
Как отключить рекламу?
И такой скрипт напишет следующий текст
Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:
В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!
document.write("Это JavaScript!
}
Все команды скрипта, что находятся внутри фигурных скобок — {} — принадлежат функции myFunction() . Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции — Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То естькак раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.
Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость — что это такое, мы увидим позже.
Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:
Here you can test this example:
Здесь при нажатии на кнопку осуществляется вызов функции calculation() . Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result . Переменную мы можем определить с помощью ключевого слова var . Переменные могут использоваться для хранения различных величин — чисел, строк текста и т. д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т. е. 5 + 12). После этого в переменный result будет размещено число 17 . В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.
Часть 2: Документ HTML
Иерархия объектов в JavaScript
В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, Вы сможете быстро понять на следующем примере. Рассмотрим простую HTML-страницу:
My homepage</p><p></head></p><p><body bgcolor=#ffffff></p><p><center></p><p><img src="home.gif" name="pic1" width=200 height=100></p><p></center></p><p><p></p><p><form name="myForm"></p><p>Name:</p><p><input type="text" name="name" value=""><br></p><p>e-Mail:</p><p><input type="text" name="email" value=""><br><br></p><p><input type="button" value="Push me" name="myButton" onClick="alert('Yo')"></p><p></form></p><p><p></p><p><center></p><p><img src="ruler.gif" name="pic4" width=300 height=15></p><p><p></p><p><a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a></p><p></center></p><p></body></p><p></html></p></div></div>
</div>
</div>
<div class="row d-flex">
<div class="order-md-0 order-1 col-12 col-md-6 text-center pr-md-0">
<a class="btn btn-light btn-block text-truncate"
href="https://litlife.club/books/122986/read?page=1">
Предыдущая страница
</a>
</div>
<div class="order-md-1 order-0 col-12 col-md-6 text-center mb-2 mb-md-0">
<a class="btn btn-primary btn-block text-truncate"
href="https://litlife.club/books/122986/read?page=3">
Следующая страница
</a>
</div>
</div>
</main>
<footer id="footer" class="col-12 footer pl-260px ">
<div class="pb-3">
<div class="mb-2 p-2 text-center btn-margin-bottom-1">
<!-- Yandex.RTB R-A-1774424-2 -->
<div id="yandex_rtb_R-A-1774424-2"></div>
<script>window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
renderTo: 'yandex_rtb_R-A-1774424-2',
blockId: 'R-A-1774424-2'
})
})</script>
</div>
<div class="mb-2 px-3">
<a class="text-decoration-none" href="https://litlife.club/topics?order=last_post_created_at_desc">
<i class="fas fa-fire" style="color:red"></i> Последние обсуждаемые темы
</a>
</div>
<div class="list-group">
<a href="https://litlife.club/posts/823897/go_to"
class="d-flex list-group-item item list-group-item-action" data-id="561"
data-forum-id="53883">
<div style="width:calc(100% - 60px);">
<div class="mb-2 d-flex align-items-center flex-wrap">
<div class="d-inline-block mr-2 text-truncate">
Помогите вспомнить книгу. Фантастика и фэнтези.
</div>
</div>
<div class="d-flex align-items-center flex-wrap small">
<div class="">
<img class="lazyload rounded pull-left lazyload img-fluid rounded text-center" itemprop="image"
alt="Марияшка"
data-srcset="/assets/images/no_image_unknown.png?id=7397332f8546ba1a3fb7b7d3a32e2ab9&w=40&h=40&q=85 2x, /assets/images/no_image_unknown.png?id=7397332f8546ba1a3fb7b7d3a32e2ab9&w=60&h=60&q=80 3x"
style="max-width: 20px; max-height: 20px;"
data-src="/assets/images/no_image_unknown.png?id=7397332f8546ba1a3fb7b7d3a32e2ab9&w=20&h=20&q=90"/> </div>
<div class="ml-2 mr-2">
<span style="color: #E14900" class="">Марияшка</span> </div>
<div class="">
<span data-toggle="tooltip" data-placement="top" style="cursor:pointer" title="1 час назад. Вторник">3 сентября 2024 22:36</span> </div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center pl-3" style="width:60px;">
<div class="text-decoration-none d-flex flex-column flex-md-row justify-content-center align-items-center">
<i class="far fa-comment d-inline-block"></i>
<div class="d-inline-block text-center ml-md-1">46923</div>
</div>
</div>
</a>
<a href="https://litlife.club/posts/823892/go_to"
class="d-flex list-group-item item list-group-item-action" data-id="564"
data-forum-id="53883">
<div style="width:calc(100% - 60px);">
<div class="mb-2 d-flex align-items-center flex-wrap">
<div class="d-inline-block mr-2 text-truncate">
Помогите вспомнить книгу. Детская литература. Сказки.
</div>
</div>
<div class="d-flex align-items-center flex-wrap small">
<div class="">
<img class="lazyload rounded pull-left lazyload img-fluid rounded text-center" itemprop="image"
alt="Середняков Никита"
data-srcset="https://litlife.club/storage/698/187/_user/Serednakov_Nikita_1725390874.png?w=40&h=40&q=85 2x, https://litlife.club/storage/698/187/_user/Serednakov_Nikita_1725390874.png?w=60&h=60&q=80 3x"
style="max-width: 20px; max-height: 20px;"
data-src="https://litlife.club/storage/698/187/_user/Serednakov_Nikita_1725390874.png?w=20&h=20&q=90"/> </div>
<div class="ml-2 mr-2">
<span style="color: #E14900" class="">Середняков Никита</span> </div>
<div class="">
<span data-toggle="tooltip" data-placement="top" style="cursor:pointer" title="8 часов назад. Вторник">3 сентября 2024 15:21</span> </div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center pl-3" style="width:60px;">
<div class="text-decoration-none d-flex flex-column flex-md-row justify-content-center align-items-center">
<i class="far fa-comment d-inline-block"></i>
<div class="d-inline-block text-center ml-md-1">2936</div>
</div>
</div>
</a>
<a href="https://litlife.club/posts/823890/go_to"
class="d-flex list-group-item item list-group-item-action" data-id="3437"
data-forum-id="518932">
<div style="width:calc(100% - 60px);">
<div class="mb-2 d-flex align-items-center flex-wrap">
<div class="d-inline-block mr-2 text-truncate">
Пещера дракона 2024
</div>
</div>
<div class="d-flex align-items-center flex-wrap small">
<div class="">
<img class="lazyload rounded pull-left lazyload img-fluid rounded text-center" itemprop="image"
alt="Загудаева Ольга"
data-srcset="//litlife.club/data/user_data/0/110000/119300/119332/1_95c0.jpg?w=40&h=40&q=85 2x, //litlife.club/data/user_data/0/110000/119300/119332/1_95c0.jpg?w=60&h=60&q=80 3x"
style="max-width: 20px; max-height: 20px;"
data-src="//litlife.club/data/user_data/0/110000/119300/119332/1_95c0.jpg?w=20&h=20&q=90"/> </div>
<div class="ml-2 mr-2">
<span style="color: #E14900" class="">Загудаева Ольга</span> </div>
<div class="">
<span data-toggle="tooltip" data-placement="top" style="cursor:pointer" title="11 часов назад. Вторник">3 сентября 2024 12:32</span> </div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center pl-3" style="width:60px;">
<div class="text-decoration-none d-flex flex-column flex-md-row justify-content-center align-items-center">
<i class="far fa-comment d-inline-block"></i>
<div class="d-inline-block text-center ml-md-1">218</div>
</div>
</div>
</a>
</div>
<!--noindex-->
<div class="text-small p-2">
Для правильной работы сайта используйте <span style="color:red">только последние</span> версии браузеров:
Chrome, Opera, Firefox.
В других браузерах работа сайта не гарантируется. Похоже вы используете: ClaudeBot
</div>
<div class="d-flex p-2 flex-column flex-md-row">
<div class="mb-2 text-center text-md-left" style="font-size:40px">
<a href="https://litlife.club/away?url=https%3A%2F%2Fvk.com%2Flitlife.club" target="_blank" rel="nofollow"
style="text-decoration: none;">
<i class="fab fa-vk color-vk"></i>
</a>
<a href="https://litlife.club/away?url=https%3A%2F%2Fwww.facebook.com%2Fgroups%2Flitlife.club%2F" target="_blank"
rel="nofollow"
style="text-decoration: none;">
<i class="fab fa-facebook-square color-facebook"></i>
</a>
<a href="https://litlife.club/away?url=https%3A%2F%2Fok.ru%2Flitlife.club" target="_blank" rel="nofollow"
style="text-decoration: none;">
<i class="fab fa-odnoklassniki-square color-odnoklassniki"></i>
</a>
</div>
<div class="mb-2 p-2 text-center btn-margin-bottom-1 ">
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/faq">
FAQ - часто задаваемые вопросы</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/authors/how_to_start_selling_books">
Как начать продавать книги</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate d-none" href="https://litlife.club/users_refer">
Партнерская программа</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/topics/222">
Попросить модератора</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate" href="https://litlife.club/rules">
Правила сайта и форума</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate" href="https://litlife.club/rules_publish_books">
Правила публикации и редактирования книг</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/contacts">
Контакты</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/for_rights_owners">
Для правообладателей</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/privacy_policy">Политика конфиденциальности</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate"
href="https://litlife.club/purchase_rules">Пользовательское соглашение с покупателем</a>
<a class="btn btn-sm btn-light text-nowrap text-truncate" data-toggle="collapse" href="#collapseMore"
role="button"
aria-expanded="false" aria-controls="collapseMore">
Еще
</a>
<div class="collapse" id="collapseMore">
<a class="btn btn-sm btn-light" href="https://litlife.club/books?order=rating_avg_down">
<h3 class="h6">Лучшие книги</h3>
</a>
<a class="btn btn-sm btn-light" href="https://litlife.club/awards">
<h3 class="h6">Литературные премии</h3></a>
<a class="btn btn-sm btn-light" href="https://litlife.club/keywords">
<h3 class="h6">Ключевые слова</h3></a>
<a class="btn btn-sm btn-light" href="https://litlife.club/books?si=only">
<h3 class="h6">Самиздат</h3></a>
<a class="btn btn-sm btn-light" href="https://litlife.club/books?rs=complete">
<h3 class="h6">Полные книги</h3></a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=fb2&download_access=open">
<h3 class="h6">Книги fb2</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=epub&download_access=open">
<h3 class="h6">Книги epub</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=docx&download_access=open">
<h3 class="h6">Книги docx</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=mobi&download_access=open">
<h3 class="h6">Книги mobi</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=odt&download_access=open">
<h3 class="h6">Книги odt</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=rtf&download_access=open">
<h3 class="h6">Книги rtf</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=txt&download_access=open">
<h3 class="h6">Книги txt</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=doc&download_access=open">
<h3 class="h6">Книги doc</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=mp3&download_access=open">
<h3 class="h6">Книги mp3</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=ogg&download_access=open">
<h3 class="h6">Книги ogg</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=pdf&download_access=open">
<h3 class="h6">Книги pdf</h3>
</a>
<a class="btn btn-sm btn-light"
href="https://litlife.club/books?Formats=djvu&download_access=open">
<h3 class="h6">Книги djvu</h3>
</a>
</div>
</div>
<div class="mb-2 p-2 text-center text-md-right">
<a href="https://sites-reviews.com/ru/litlife.club">
<img srcset="https://sites-reviews.com/sites_rating/2x/litlife.club.png 2x, https://sites-reviews.com/sites_rating/3x/litlife.club.png 3x"
data-src="https://sites-reviews.com/sites_rating/1x/litlife.club.png" width="88" height="31" border="0"
alt="Рейтинг и отзывы о сайте litlife.club"/>
</a>
<!--LiveInternet counter-->
<script type="text/javascript"><!--
document.write("<a rel=\"nofollow\" href='//www.liveinternet.ru/click' " +
"target=_blank><img class=\"lazyload\" src='//counter.yadro.ru/hit?t21.1;r" +
escape(document.referrer) + ((typeof (screen) == "undefined") ? "" :
";s" + screen.width + "*" + screen.height + "*" + (screen.colorDepth ?
screen.colorDepth : screen.pixelDepth)) + ";u" + escape(document.URL) +
";" + Math.random() +
"' alt='' title='LiveInternet: показано число просмотров за 24" +
" часа, посетителей за 24 часа и за сегодня' " +
"border='0' width='88' height='31'><\/a>")
//--></script><!--/LiveInternet-->
<!-- Yandex.Metrika informer -->
<a href="https://litlife.club/away?url=https%3A%2F%2Fmetrika.yandex.ru%2Fstat%2F%3Fid%3D34745015%26amp%3Bfrom%3Dinformer"
target="_blank" rel="nofollow">
<img src="https://informer.yandex.ru/informer/34745015/3_0_FFFFFFFF_EFEFEFFF_0_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика"
title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)"
class="lazyload ym-advanced-informer" data-cid="34745015" data-lang="ru"/>
</a>
<!-- /Yandex.Metrika informer -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () {
(m[i].a = m[i].a || []).push(arguments)
};
m[i].l = 1 * new Date();
k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(34745015, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
</script>
<noscript>
<div><img class="lazyload" src="https://mc.yandex.ru/watch/34745015" style="position:absolute; left:-9999px;" alt=""/></div>
</noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
<!--/noindex-->
</div>
</footer>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="chaptersList" tabindex="-1" role="dialog" aria-labelledby="chaptersListTitle"
aria-hidden="true" data-href="https://litlife.club/books/122986/sections/list_go_to">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sectionsListTitle">Главы</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Загрузка
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal" id="common_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Результаты поиска: <span class="title_query"></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-header">
<form class="w-100" action="https://litlife.club/search">
<div class="form-group mb-0">
<input name="query" type="text" required
minlength="3"
class="form-control" placeholder="Название книги, имя автора, серии, подборки" value="">
</div>
</form>
</div>
<div class="result">
<h1 class="spinner text-center py-5">
<i class="fas fa-spinner fa-spin"></i>
</h1>
</div>
</div>
</div>
</div>
<div class="modal" id="QRCodeDialog" tabindex="-1" role="dialog" aria-labelledby="QRCodeRemoveModal" data-url="https://litlife.club/qrcode">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="QRCodeRemoveModal">QR код текущей страницы</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="text-align: center; font-size:36px;">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
</div>
</div>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"
title="Нажмите, чтобы вернутся к верху экрана"
data-toggle="tooltip" data-placement="left">
<i class="fas fa-caret-up"></i>
</a>
<a id="to-bottom" href="#" class="btn btn-primary btn-lg to-bottom " role="button"
title="Нажмите, чтобы перейти в низ экрана"
data-toggle="tooltip" data-placement="left">
<i class="fas fa-caret-down"></i>
</a>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ru.js"></script>
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1.3/sisyphus.min.js"></script>
<script src="//litlife.club:6001/socket.io/socket.io.js"></script>
-->
<script src="/assets/js/app.js?id=5f84a93cb20ad5f69d0c401cfdd8f605"></script>
<script src="/assets/js/books.old.page.js?id=12b039e29fc0daa04265a03ae7e4f7a9"></script>
<style type="text/css">
</style>
</body>
</html>