Работа с js и JQuery
Автор: admin Дата: 2018-05-24 11:39:17
В программировании часто приходится писать скрипты, как стороне сервера, так и на стороне клиента.
На стороне клиента скрипты обрабатываются в форме js скриптов. Иногда такие скрипты оборачиваются в дополнительные js-фреймворки, такие как JQuery. JQuery - современный js-фреймворк для обработки событий в браузере, а также создания, анимации, особенностей frond-end программирования.
Само выполнение скрипта выполняется в обрамлениях тега: <script></script> Соответственно, чтобы вызвать чистый js, либо JQuery, нужно делать обращения через подобные обертки В параметре src пишется адрес подключения библиотеки, которая будет подключена к скрипту. Без параметра src тег <script></script> подразумевает выполнение кода frond-end контекта.
Вот как выполняется обращение к js-скрипту:
<html>
<body>
<h1>Скрипт</h1>
<script type="text/javascript">
alert("Выполнение скрипта js осуществлено!")
</script>
<h1>Тест страница</h1>
</body>
</html>
Чтобы подключить JQuery библиотеку, нужно выполнить один из способов подключения:
1. Способ первый.
Скачать локально библиотеку JQuery и кинуть ее в каталог веб-проекта, после чего подключить:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Веб-проект</title>
<!--Подключение данных файла jquery-2.2.3.min.js в каталоге js -->
<script src="js/jquery-2.2.3.min.js"></script>
</head>
<body>
</body>
</html>
2. Способ второй.
Сделать обращение к библиотеки удаленной с JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Веб-проект</title>
<!--Подключаем файл удаленный по нижеуказанному адресу-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
На самом деле подключить скрипты можно в любой части кода HTML, хоть в футере, хоть в теге head.
Другое дело, что если вы подключите в неправильном порядке библиотеки, то они могут неправильно работать, и выдавать ошибки кода на уровне frond-end контента. В консоли браузера такие ошибки протоколируются, и легко можно увидеть нарушения в формировании контента страницы.
После того, как правильно подключена библиотека JQuery, можно делать обращения к html-документу:
<code>
$(document).ready(function(){
//Здесь пишется код
});</code>
Например, вот такой код:
<code>
$(document).ready(function(){
$("#form_button").click(function(){
console.log('В консоль браузера выведется текст! Кнопка с именем form_button нажата!');
})
});</code>
Техонология Ajax - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).
Чтобы написать ajax запрос через обертки JQuery, выполняем следующий код:
<code>
$.ajax({
type: 'POST',
url: 'news.php',
data: 'category=Global&dateNew=2018-10-10',
success: function(data){
$('.divnews').html(data);
}
}); </code>
Например, вот такой запрос, где:
type - означает метод передачи данных (POST, либо GET).
url - адрес страницы на которой будет выполняться ajax запрос.
data - данные, которые будут переданы на страница news.php в формате POST-данных
success - ответные данные от страницы news.php на которой будут выполнены определенные программные операции.
Все такие данные загружаются в блок класса divnews.
На странице news.php может быть примерно такой код:
<code class="code123">
<?
// Считывание данных из ajax-запроса:
$category = $_POST['category'];
$dateNew = $_POST['dateNew'];
// Коннект с базой данных через расширение mysqli для работы с базами данных:
$connect = new mysqli("localhost", "root", "", "manager");
// читаем новости из базы данных категории Global на дату 10.10.2018
$result = $connect->query("select * from BD_News where ((category = '".$category ."') && (dateNew = '".$dateNew."'))");
$row = $result->fetch_object();
// отправляем все данные в формате JSON обратно нашему основному скрипту, где был вызван метод ajax (index.php)
//формат JSON выглядит так:
// "ключ1":"значени1", "ключ2":"значени2" и т.д.
echo '{"new_id":"'.$row->new_id.'",
"new_title":"'.$row->new_title.'",
"new_text":"'.$row->new_text.'",
"new_author":"'.$row->new_author.'"}';
?>
</code>
Собственно вот так вкратце рассказал о работе с js и JQuery.