Makers Week 5: Первая неделя в Javascript, нравится?

Что такое смесь Javascript, jQuery, AJAX, HTML и CSS? Весь веб-сайт, который вы можете получить!

Лондон, Шордич

Пятая неделя в Makers была довольно приятной. Поскольку это была первая неделя с Javascript — наконец-то, Ура! Параллельно была практика с jQuery и CSS.

Итак, начнем, цели на эту неделю:

• Следуйте эффективному процессу изучения javascript(сходства и различия с Ruby, тест-драйв с использованием Jasmine)
• Протестируйте простое внешнее веб-приложение с помощью Javascript (ознакомьтесь с jQuery, взаимодействуйте с API в AJAX, создайте interface.js для приложения в HTML, стилизуйте приложение с помощью CSS)

Как бы приятно это ни было, это был довольно большой заголовок недели, так как нам нужно было преобразовать 2 наших предыдущих проекта из Ruby в Javascript. Это означает, что нам нужно не только изучить базовый синтаксис, но и узнать о тест-драйве с использованием Jasmine вместо RSpec.

К счастью, между Ruby и Javascript есть много общего, но есть и различия.

• Типы данных: число, строка, логическое значение, нуль, неопределенный, символ, объект
• Математические операторы присваивания: -=, *= и /=
• Интерполяция строк: вместо «» в JS используются обратные палочки ` для кавычек строк: console.log(`У меня есть питомец ${myPet}.`)
• Оператор If Else: вместо использования «if..elsif..else» JS использует if(){} else if {}

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

Просто назвать два:

Tuthy и Falsy: в Ruby только null и false оцениваются как ложные, однако в JS, кроме значений null и false, 0 , пустых строк, undefined, NaN также оцениваются как ложные.

• 0
• Пустые строки, такие как "" или ''
• null, которые представляют, когда значения вообще нет
• undefined, которые представляют, когда объявленная переменная не имеет значения
• NaN, или Не число

Возврат. В отличие от неявного возврата в Ruby, в JS вам всегда нужно явно указывать «возврат» при возврате значения.

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

myFunction(5);
function myFunction(y) {
 return y * y;
}
//return 
//25

Перейдем к созданию веб-приложения JS. Поскольку JS применяется только к бизнес-логике, чтобы заставить его взаимодействовать с веб-сервером, люди обычно используют jQuery, который является «легким, пишет меньше». , сделать больше, библиотека JavaScript», цель которой — упростить использование JS на веб-сайте.

С помощью jQuery уже можно создать простое веб-приложение JS. Однако есть еще два помощника, которые сделают приложение еще более крутым: AJAX и CSS.

Так что же такое AJAX? AJAX = асинхронный JavaScript и XML.

Короче; AJAX предназначен для загрузки данных в фоновом режиме и отображения их на веб-странице без перезагрузки всей страницы.

Запрос отправляется путем вызова AJAX, данные в формате JSON извлекаются асинхронно с сервера, а содержимое страницы обновляется без перезагрузки вашей веб-страницы, мы можем получать данные с нашего локального компьютера или сервера, общедоступный API.

Еще один слой — CSS. CSS означает каскадные таблицы стилей. CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или других носителях. Он может управлять макетом нескольких веб-страниц одновременно.

Все элементы HTML можно рассматривать как блоки. В CSS термин блочная модель используется, когда речь идет о дизайне и макете. Блочная модель CSS — это, по сути, блок, который окружает каждый элемент HTML. Он состоит из: полей, границ, отступов и фактического содержимого.

Таким образом, с помощью Javascript, jQuery, AJAX, HTML и CSS вы можете создавать почти все виды веб-приложений по своему желанию!

Это все на этой неделе. Увидимся на следующей неделе：）

==========Главные события недели==============

А. Javascript

Отладка Javascript

Всякий раз, когда вы переходите к новому языку, первое, что вам нужно научиться, это отладка (да, мы любим отладку!!!). Для javascript обычно есть 2 способа сделать это: с помощью console.log() или отладчика, или обоих.

1. console.log()

Airport.prototype.land = function(plane) {
console.log("function called")  
if (plane.isLanded()) {
    console.log("hello1");
  } else if (this.weather.isStormy()) {
    console.log("hello2");
  } else {
    console.log("hello3");
  }

2. Использование пошагового отладчика

Добавьте debugger; к строке в вашей программе, которая, как вы знаете, работает, например:

function sayHi() {
  debugger;
  console.log("hi!");
};
sayHi();

Функция подъема

Поднятие — это поведение JavaScript по умолчанию, когда объявления перемещаются вверх текущей области. Подъем применяется к объявлениям переменных и к объявлениям функций. В связи с этим функции JavaScript можно вызывать до их объявления:

myFunction(5);
function myFunction(y) {
 return y * y;
}
//return 
//25 

Однако функции, определенные с помощью выражения, не поднимаются.

Самовызов функций

Еще одна интересная особенность javascript — самовызов функций. Функциональные выражения можно сделать «самовызывающимися».

Самовызывающееся выражение вызывается автоматически, без вызова. Функциональные выражения будут выполняться автоматически, если за выражением следует символ (). Вы не можете самостоятельно вызвать объявление функции. Вы должны добавить круглые скобки вокруг функции, чтобы указать, что это функциональное выражение:

(function () {
 var x = “Hello!!”; // I will invoke myself
})();

Б. JQuery

jQuery – это облегченная библиотека JavaScript, основанная на принципах "пиши меньше, делай больше".

Цель jQuery — упростить использование JavaScript на вашем веб-сайте. jQuery берет множество общих задач, для выполнения которых требуется много строк кода JavaScript, и оборачивает их в методы, которые можно вызывать с помощью одной строки кода.

jQuery также упрощает многие сложные вещи из JavaScript, такие как вызовы AJAX и манипулирование DOM.

Синтаксис jQuery

С помощью jQuery вы выбираете элементы HTML и выполняете над ними «действия». Синтаксис jQuery создан специально для выбора HTML-элементов и выполнения некоторых действий над элементами.

Основной синтаксис: $(селектор).действие()

• Знак $ для определения/доступа к jQuery
• A (селектор) для «запроса (или поиска)» HTML-элементов.
• действие() jQuery, выполняемое над элементом(ами)

Событие «Документ готов»

$(document).ready(function(){
// jQuery methods go here…
});

Это делается для предотвращения запуска любого кода jQuery до того, как документ будет загружен (будет готов).

Функции обратного вызова

Операторы JavaScript выполняются построчно. Однако с эффектами следующая строка кода может быть запущена, даже если эффект еще не завершен. Это может привести к ошибкам.

Чтобы предотвратить это, вы можете создать функцию обратного вызова. Функция обратного вызова выполняется после завершения текущего эффекта. В приведенном ниже примере есть параметр обратного вызова, который представляет собой функцию, которая будет выполняться после завершения эффекта шоу:

$(“button”).click(function(){
 $(“p”).show(“slow”, function(){
 alert(“The paragraph is now hidden”);
 });
});

Связывание методов

Цепочка методов позволяет нам запускать несколько команд jQuery одну за другой для одного и того же элемента. Например:

$(“#p1”).css(“color”, “red”).slideUp(2000).slideDown(2000);

Метод css()

Метод css() задает или возвращает одно или несколько свойств стиля для выбранных элементов. Чтобы вернуть значение указанного свойства CSS, используйте следующий синтаксис:

css(“propertyname”);

Чтобы установить указанное свойство CSS, используйте следующий синтаксис:

css(“propertyname”,”value”);

Интерфейс программирования DOM

Доступ к HTML DOM можно получить с помощью JavaScript (и других языков программирования). В DOM все элементы HTML определяются как объекты. Программный интерфейс — это свойства и методы каждого объекта.

• Свойство – это значение, которое вы можете получить или установить (например, изменить содержимое элемента HTML).
• Метод – это действие, которое вы можете выполнить (например, добавить или удалить элемент HTML).

В следующем примере содержимое (innerHTML) элемента <p> изменяется на id="demo":

<html>
<body>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello World!”;
</script>
</body>
</html>

В приведенном выше примере getElementById — это метод, а innerHTML — это свойство.

С. АЯКС

Что такое АЯКС?

AJAX = асинхронный JavaScript и XML.

Короче; AJAX предназначен для загрузки данных в фоновом режиме и отображения их на веб-странице без перезагрузки всей страницы. Примеры приложений, использующих AJAX: вкладки Gmail, Google Maps, Youtube и Facebook.

Асинхронность Ajax застает многих новых пользователей jQuery врасплох. Поскольку вызовы Ajax по умолчанию являются асинхронными, ответ не сразу доступен. Ответы можно обрабатывать только с помощью обратного вызова.

Д. CSS

Стилизация HTML с помощью CSS

CSS означает каскадные таблицы стилей. CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или другом носителе. Он может управлять макетом нескольких веб-страниц одновременно.

Синтаксис CSS

Набор правил CSS состоит из селектора и блока объявлений:

h1 {color:blue; font-size:12px;}

• h1: селектор указывает на HTML-элемент, стиль которого вы хотите изменить.
• {}: Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
• цвет/размер шрифта: каждое объявление включает имя свойства CSS и значение, разделенные двоеточием.
• blue/12px:объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений заключаются в фигурные скобки.

Блочная модель CSS

Все элементы HTML можно рассматривать как блоки. В CSS термин «блочная модель» используется, когда речь идет о дизайне и макете.

Блочная модель CSS — это, по сути, блок, который окружает каждый элемент HTML. Он состоит из: полей, границ, отступов и фактического содержимого. На изображении ниже показана блочная модель:

Объяснение различных частей:

• Содержание – содержимое поля, в котором отображаются текст и изображения.
• Заполнение — очищает область вокруг содержимого. Прокладка прозрачная
• Граница — граница, охватывающая отступы и содержимое.
• Поле — очищает область за пределами границы. Маржа прозрачная