Меня преследовал и пугал Javascript почти десять лет, то есть более 10 лет. Эти годы сделали историю для меня в программировании. Сегодня, обучая одного из моих новых друзей краткому курсу программирования, я наткнулся на некоторые вещи, которыми я должен поделиться, и это Javascript. Попробуем понять это на некоторых примерах.

Введение и история

Интернет был склонен к Javascript, который появился в 1996 году. Компания под названием Netscape, которая была известна своими быстрыми браузерами, в середине 90-х представила его в ECMA International для создания стандартизированного языка, который могли бы реализовать другие браузеры. Я до сих пор помню трепет перед Netscape Navigator в 90-х. Сегодня мы знаем сущность под названием Mozilla, смесь Mosaic и Godzilla. Первой версией был Mosiac Netscape 0.9, выпущенный в 1994 году.

Реализация Javascript в коде браузера

Давайте создадим на рабочем столе папку с именем noobJS и создадим в ней файл index.html. Для шаблонного кода HTML я буду использовать http://htmlshell.com/

Теперь, если вы дважды щелкните файл, он запустится в браузере.

Нажатие кнопки через Vanila JS

<body> <h3>Hello Noobs!</h3> <button id="myFirstButton">Click</button> <script> document.getElementById('myFirstButton').onclick = function(e) { console.log("Yo Noobs!"); } </script> </body>

Чтобы запустить Javascript, мы открываем тег «script», а затем закрываем его с тем же именем тега. Все, что между ними, — это Javascript.

«Документ» — это ссылка на текущий экран, который находится в поле зрения. Теперь использование функции getElementById для документа означает, что Javascript будет искать все элементы, которые имеют идентификатор myFirstButton. Элементом может быть что угодно, от кнопки до H3 или любого HTML-тега, которому можно присвоить идентификатор, просто указав в нем идентификатор.

Теперь, если вы щелкните правой кнопкой мыши в браузере и выберите «Проверить», у нас будет консоль, в которой мы можем распечатать информацию с помощью функции console.log().

Теперь обновите браузер и нажмите кнопку.

Что такое JQuery?

JQuery — это javascript, который упрощает написание и использование. Это похоже на реорганизацию одного и того же языка, чтобы я мог сделать его короче, более сокращенным, а значит, быстрее реализовать. Я хотел бы метафоризировать это как печатать «Смеяться вслух» снова и снова, но я бы предпочел использовать «Лол» и ожидать, что читатель это поймет.

Давайте напишем ту же функцию щелчка на JQuery. Сначала мы импортируем JQuery, используя CDN (сеть доставки контента). Перейдите на https://code.jquery.com/ и нажмите на уменьшенный jQuery Core 3.4.1.

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Noob JS</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head>

Добавьте его в заголовок файла index.html.

<body> ... <button id="mySecondBUtton">JQuery: Click</button> ... </body> <script> document.getElementById('myFirstButton').onclick = function(e) { console.log("Yo Noobs!"); } $('#mySecondBUtton').click((e) => { console.log("Not a Noob Anymore!! Heh!!"); }); </script>

Теперь JQuery после импорта инициализируется тегом «$», а затем идут скобки, которые в кавычках становятся селектором из документа. Если в контексте javascript это getElementBy, это может быть либо класс с точкой, либо идентификатор с хэшем. Поэтому, если вы сравните, это так же коротко, как LOL.

Выполнение вызова GET с использованием Vanila JS

Давайте попробуем получить некоторые данные через Get Call, так что теперь мы общаемся в Javascript. Во-первых, нам нужен Mock API, и у нас есть инструмент для этого. Перейдите на https://www.mocky.io/ и прокрутите вниз до тела. Мы напишем простой ответ в формате JSON (нотация объектов Javascript).

Теперь нажмите «Создать», и это даст вам конечную точку для получения вызова.

Затем создайте новую кнопку и вызовите ее на вкладке скрипта.

<body> ... <button id="myFirstCall">Javascript: Get Data</button> ... </body> <script> ... document.getElementById('myFirstCall').onclick = function(e) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(this.responseText); } }; xhttp.open("GET", "http://www.mocky.io/v2/5da666b83400001528633045", true); xhttp.send(); } ... </script>

В Javascript есть класс, который обрабатывает все API в виде объекта. Этот объект позволяет передавать данные между веб-браузером и веб-сервером. Мы создали объект как var xhttp. Затем мы прослушиваем, есть ли изменение состояния, которое определяет, был ли запущен вызов или нет. this.readyState равно 4, когда все в порядке, что обеспечивает хорошую проверку, чтобы во время вызова мы не сломали код, а ответ 200 означает, что все хорошо, что веб-сервер успешно ответил некоторыми данными. this.responseText содержит необходимые данные, которые мы хотим получить.

Затем мы открываем соединение, а затем отправляем запрос. Давайте обновим страницу и нажмем кнопку.

Как видите, теперь у нас есть ответ со всеми волнистыми скобками. Давайте преобразуем ответ в объект, проанализировав JSON.

if (this.readyState == 4 && this.status == 200) { console.log(JSON.parse(this.responseText)); }

Как вы можете видеть, просто используя JSON.parse(), мы можем преобразовать ответ из волнистого в полезный объект. Чтобы получить сообщение, вы можете использовать следующий код сейчас;

JSON.parse(this.responseText).msg

Совершение вызова с использованием JQuery

Давайте сделаем то же самое с JQuery

<body> ... <button id="mySecondCall">JQuery: Get Data</button> ... </body> <script> ... $('#mySecondCall').click((e) => { $.ajax({ type: 'GET', dateType: 'JSON', url: 'http://www.mocky.io/v2/5da66a18340000a99963304c', success: function (data) { console.log(data); }, error: function (error) { console.log(data); } }); }); ... </script>

Jquery имеет функцию ajax для связи с веб-сервером. Ajax расшифровывается как Advanced Java и XML. Вы предоставляете ему тип вызова, тип ответа и URL-адрес, и он обрабатывает состояния на простом читаемом языке.

Как видите, тот же код был сделан минимальным с тем же типом ответа.

Вывод

Прохождение Vanilla JS действительно дает представление о том, что происходит из первых рук. Я рекомендую всем хотя бы пройти через это, чтобы можно было достичь лучшего уровня понимания, но, с другой стороны, признаю важность экономии времени и хлопот. Повторное изобретение колеса не приносит больших изменений и инноваций, но в настоящее время использование библиотек для ускорения работы и экономии времени — это то, что следует предпочесть.

Полный код ~ index.html

Сравнение Vanilla JS с Jquery для разработки и понимания

использованная литература

https://en.wikipedia.org/wiki/JavaScript https://www.webdesignmuseum.org/web-design-history/mosaic-netscape-0-9-1994 https://en.wikipedia .org/wiki/XMLHttpRequest

Первоначально опубликовано на https://dev.to 16 октября 2019 г.