JavaScript 101 - снова

JavaScript 101 - снова

Изучаю JavaScript в четвертый раз

Я плохо разбираюсь в JavaScript. Это моя ахиллесова пята .

Когда в 2012 году друг попросил меня стать со-руководителем и соавтором мастерской Intro to JavaScript Workshop, я согласился, хотя и был напуган. Но в своей добродушной манере она успокоила мои нервы и сказала: Не волнуйтесь, это всего лишь вводный курс. Знаешь что? Получилось просто отлично.

Одна вещь в обучении - это подготовка к неизбежному «почему?» Когда вы привыкаете что-то делать, это просто становится мышечной памятью (памятью мозга?). Когда кто-то спрашивает: «Почему мне нужно ставить точку с запятой здесь, а здесь нет?» нельзя просто сказать «потому что».

Но в истинном стиле «используй или потеряй» я постоянно учусь и забываю, переучиваюсь и забываю, так как в конечном итоге я пишу JavaScript очень спорадически.

Пытаясь углубить в голову терминологию, определения, синтаксис, основные принципы и правила, я сделал несколько заметок для себя и решил поделиться ими здесь.

Надеюсь, четвертый раз будет для меня шармом! Преамбула, готово.

Обзор JavaScript

Программирование. Обычно преобразует данные в последовательность нулей и единиц для связи с компьютером. В JavaScript данные разделяются на значения.

Значения. Каждое значение имеет тип, который определяет роль, которую оно играет. Ниже перечислены семь основных типов.

Типы:

• Числа - целые и десятичные числа (например, 10, 10.001).
• Строки - символы, включая пробелы. Должен заключаться в кавычки (например, «Как дела?»)
• Логические значения - истина или ложь (ключевое слово)
• Не определено - означает «У меня нет ценности»
• Null - означает «У меня нет значения» - обратите внимание, что это похоже на (но логически отличается от) Undefined
• Объекты - см. Ниже
• Функции - см. Ниже

Комментарии: используется для добавления заметок в коде, но не входит в состав инструкций для компьютера.

// single line comment
/* 
  Comments that are
  longer than one line. 
*/

Выражение: инструкции, данные компьютеру, фрагмент кода, который всегда выдает значение. Может быть любым типом JavaScript. Значение также может быть выражением.

Есть два типа выражений: те, которые просто имеют значение, и те, которые присваивают значение переменной.

Пример консоли REPL Chrome:

> 1 + 1  // expression
> 2  // value
> 2  // expression
> 2  // value
> variableName = 1 + 1  // expression
> 2  // value

Заявления: также инструкции для компьютера, но не всегда возвращает значение. Может состоять из одного или нескольких выражений, ключевых слов или операторов. Операторы заканчиваются точкой с запятой , чтобы указать конец инструкции.

Пример консоли REPL Chrome:

> 1 + 1;  // can be an expression or statement
> 2  // value
> variableName = "hello"; // can be an expression or statement
> "hello" // value
> var variableName = "hello"; // statement only — doesn't return a value
> undefined

Ключевое слово: специальные слова, зарезервированные в JavaScript для обозначения определенного поведения. Список ключевых слов MDN

Блокировать утверждения: используется для группировки нуля или более утверждений. Заключен в пару фигурных скобок {} для создания блока. Однострочные операторы должны заканчиваться точкой с запятой, но сам блок - нет. Обычно используется с операторами потока управления.

var singleLineStatement = "hello"; // needs semi-colon
if (condition === "something"){
    var singleLineStatement = "hello"; // needs semi-colon
    var anotherStatement = "hi"; // needs semi-colon
} // does not need semi-colon

Переменные

Обновление: 23 октября 2017 г. - ознакомьтесь с этой статьей об использовании var vs let vs const.

Используется в качестве контейнера для хранения значения и / или сбора данных, которые будут использоваться позже по мере необходимости. Ключевое слово var используется для объявления переменной и создания ее. Фактическое имя переменной создается вами, программистом.

Чтобы переменная удерживала значение, ее необходимо присвоить с помощью оператора = . Значения можно присвоить переменной с помощью одного или двух операторов.

var greeting; // no value assigned yet
greeting = "Hello!"; //value assigned here
// variable declared and value assigned in one line
var greeting = "Hello!"; 

Функции

Используется для группировки кода / инструкций и сохранения их в описательных именах. Содержит многоразовые фрагменты кода. Сначала определите функцию, но она не будет запущена, пока вы не вызовете функцию. Функции можно использовать внутри других функций.

JavaScript содержит множество встроенных функций, которые заставляют код делать разные вещи. Пример: alert () создает всплывающее окно, а prompt () создает всплывающее окно, которое запрашивает ввод данных пользователем.

Определение функции
Создавайте свои собственные функции с помощью функции keyword. Чтобы реализовать его, необходимо определить функции. Имя функции создается вами, программистом. Выберите описательное имя.

Функции также должны быть вызваны, чтобы они действительно запускались и выполняли инструкции. Функции вызываются с использованием имени функции, за которым следует скобка.

alert(); // calling the alert function

Есть два способа определить функцию: как объявление или как выражение. Оба работают одинаково, но браузер загружает и выполняет код несколько иначе.

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

Синтаксис

function nameOfFunction(){
    // code to be executed
}

Пример

myFunction(); // calling the function
// defining the function
function myFunction() { 
    alert("This is a function declaration!"); 
} 

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

Синтаксис

var nameOfFunction = function(){
    // code to be executed
};

Пример

myFunction(); // calling function
// defining function
var myFunction = function() { 
    alert("This is a function expression!"); 
};
> TypeError: undefined is not a function

При использовании выражения функции функция должна вызываться после определения, чтобы выполнить код. Вот полезное обсуждение переполнения стека.

Самовыполняющиеся / немедленно вызываемые функциональные выражения (IFFE)
Самовызывающаяся функция означает функцию, которая вызывается сразу после того, как она была определена. И это все, что я хочу сказать. Прочтите этот пост для получения дополнительной информации.

Синтаксис

(function() {
    // code to be executed
}());

// alternative syntax
(function() {
    // code to be executed
})();

Функции и точки с запятой

Объявления функций содержатся в блоке, обозначенном {}, поэтому точка с запятой не требуется.

function myFunction() {
    // do stuff here
}

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

var myFunction = function() {
    // do stuff here
};

Самозапускающиеся функции также требуют точки с запятой.

(function () {
    // do stuff here
})();

Еще одно полезное обсуждение переполнения стека.

Функции с параметрами / аргументами

Функции могут быть более гибкими и многоразовыми с различными параметрами за счет определения параметров. Функции могут использоваться с нулевым или большим количеством параметров.

function myFunction(){
    alert("No parameters!");
}
function anotherFunction(param1, param2){
    alert("The two parameters are: " + param1 + "," + param2);
}

Когда функция вызывается, передаваемые данные называются аргументами. Эти аргументы затем передаются в параметры функции.

// calling a function with no parameters
myFunction();
/* 
  calling the function and passing two different 
  sets of arguments into param1 and param2 
*/
anotherFunction("hello", "hi");
anotherFunction("goodbye", "bye");

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

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

return без выражения

function myMessage(){
    alert("First message.");
    return;
    alert("Second message will not log.");
}
myMessage();

Будет только предупреждать «Первое сообщение».

return с выражением

function makePizza(toppings){
    return toppings;
}
var myPizza = makePizza("pepperoni & mushrooms");
alert(myPizza);

Функция makePizza была назначена переменной myPizza. Аргумент «пепперони и грибы» передается в начинки параметр. Затем в предупреждении будет отображаться «пепперони и грибы».

Объекты

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

Создание объекта
Как и переменные, объект необходимо сначала определить, прежде чем его можно будет использовать.

Определение пустого объекта

var myObject = new Object();
var myObject = {};

Оба приведенных выше примера можно использовать для определения объекта, {} - это сокращение для new Object ()

Добавление значений к объекту
Переменные называются свойствами, когда они связаны с объектами.
Функции называются методами, когда они связаны с объектами.

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

Методы также назначаются свойству как значение. Каждая пара свойство / значение, также называемая парой ключ / значение, должна быть разделена запятой, если это не последний элемент.

var myObject = {};
myObject = {
    myProperty : "value",
    anotherProperty : "another value",
    myMethod : function(){ 
        // code to be executed 
    } // closes function
};

Его также можно определить и присвоить значения за один шаг.

var myObject = {
    myProperty : "value",
    anotherProperty : "another value",
    myMethod : function(){
        // code to be executed 
    } // closes function
};

Добавление свойств и методов к объекту
Есть много способов (конечно) добавить новые свойства и методы к объекту после его создания:

// defining object with 2 properties
var myDinner = {
    appetizer: "salad",
    main: "chicken"
};

Добавление свойств с использованием точечной записи
Синтаксис: objectName.propertyName

myDinner.side = "rice";
myDinner.dessert = "ice cream";
myDinner.dinnerTime = function(){
    // start eating
}

Добавление свойств в квадратных скобках
Синтаксис: objectName [«propertyName»]

myDinner["side"] = "rice";
myDinner["dessert"] = "ice cream";
myDinner["dinnerTime"] = function(){
    // start eating
}

Еще одно удобное обсуждение Stack Overflow.

Извлечение элемента из объекта
. Вы можете извлекать свойства из объекта, используя тот же синтаксис, что и добавление свойства (точечная запись или запись в квадратных скобках).

myDinner.side; // will return "rice"
myDinner["dessert"]; // will return "ice cream"

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

myDinner.dinnerTime(); // will run the dinnerTime function

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

var firstName = "Christina";
// apply existing javascript property .length using dot notation
var numberOfLetters = firstName.length;
alert(numberOfLetters);

Популярной комбинацией объектов и методов JavaScript является console.log (). Вместо использования alert (), который может раздражать, console.log (аргумент) будет регистрировать любой аргумент, который вы передаете в консоль браузера. Очень удобно при отладке и тестировании.

Массивы

Массивы также могут использоваться для хранения коллекции значений, НО массивы содержат свои значения в виде числового индекса, а не меток. Думайте о массивах как о коробках для яиц. Все яйца находятся в одной коробке, но у каждого яйца есть свой слот.

Массивы объявляются с помощью ключевого слова var, а квадратные скобки используются для хранения значений, разделенных запятыми. Он может содержать любой тип значения JavaScript.

var eggCarton = [ ];
eggCarton = ["chicken egg", "duck egg", "quail egg", "no egg"];

Индексы массивов ВСЕГДА начинаются с НУЛЯ. НАЧИНАЕТСЯ С НУЛЯ. ВСЕГДА.
Первый элемент в массиве имеет индекс 0. Значения в массиве также могут быть присвоены номеру индекса.

eggCarton[0] = "chicken egg";
eggCarton[1] = "duck egg";
eggCarton[2] = "quail egg";
eggCarton[3] = "no egg";

Добавление нового значения
push () - это встроенный метод, используемый для добавления элемента, который идет в конец массива.

eggCarton.push("goose egg");

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

console.log(eggCarton[1]);

Поток управления

По умолчанию операторы выполняются один за другим в том порядке, в котором они написаны. Поток управления относится к методам, используемым для определения альтернативных направлений потока программы на основе логических решений. (например, операторы if, for, while)

if условные операторы
Используются для принятия решений с вашим кодом в зависимости от возможных обстоятельств. Начинается с ключевого слова if, за которым следуют круглые скобки (), чтобы указать условие для проверки. Фигурные скобки {} обозначают оператор блока для группировки операторов, которые должны выполняться, если это условие истинно. Если условие ложно, ничего не происходит.

if (condition to check for) {
    // statements to be executed if condition is true
}
if (3 > 1) {
    console.log("Three is bigger than 1.");
}

if / else условные операторы
можно добавить else ключевое слово как резервный блок кода, который будет запускаться, если условие не выполняется. Это необязательно.

if (5 < 2){
    console.log("Condition is false. Will not run.");
} else {
    console.log("This statement will run instead.");
}

if / else if / else условные операторы
Проверьте несколько условий, используя else if перед еще. Количество операторов else if, которые можно использовать, не ограничено.

var weather = "sunny";
if (weather === "snowy") {
    console.log("Ugh.");
} else if (weather === "sunny"){
    console.log("Yay! Let’s go to the beach.");
} else if (weather === "clear"){
    console.log("I can live with that.");
} else {
    console.log("I don’t know what the weather is.")
}
> Yay! Let’s go the beach.

Сложные условные выражения
Логические операторы можно использовать для создания сложных условных операторов.

&& представляет собой «и» || представляет «или» ! означает «не»

var smallNumber = 1;
var bigNumber = 100;
if(smallNumber < 10 && bigNumber > 50){
    console.log("Will log if both conditions are true.");
} 
if(smallNumber > 10 || bigNumber > 50) { 
    console.log("Will log if at least one condition is true.");
}
if(smallNumber !== 2){
    console.log("Will log because this condition is true.");
}

Циклы

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

while циклы
Создает цикл, который выполняет оператор (ы) и повторяется до тех пор, пока условие оценивается как истинное.

Если условие никогда не будет ложным, цикл while продолжится и приведет к сбою браузера.

// declaring index variable
var i = 0;
while (i < 3) {
    i++; // increments the value of i by 1 after each loop
    console.log(“The index is “ + i);
}

На каждой итерации цикл увеличивает i на 1.
- Первый проход: индекс равен 1
- Второй проход: индекс равен 2 < br /> - Третий проход: индекс 3

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

for (start; stop; increment) {
    // statements to run as long as condition is true
}
for (var i = 0; i < 5; i++) {
    console.log(“The current count of the loop is “ + i);
}

Имя переменной может быть любым, но использование i является обычным явлением, поскольку оно относится к индексу. В этом примере индекс начинается с 0, останавливается на 4 и добавляет 1 к индексу, пока условие не станет ложным.

Циклы и массивы
for можно использовать для перебора всех элементов в массиве. Вы не можете предполагать, что всегда будете знать, сколько элементов будет в массиве, поэтому метод .length используется для получения общего количества элементов в массиве.

Переменная индекса начинается с 0, потому что индексы массива отсчитываются от нуля, что означает, что первый элемент имеет индекс 0, второй элемент - 1 и т. Д.

var myMeals = ["breakfast","second breakfast","lunch","dinner"];
for(var i = 0; i < myMeals.length; i++){
    console.log("It's " + myMeals[i] + " time.");
}

Журналы:
Время завтрака.
Время второго завтрака.
Время обеда.
Время ужина.

И все, ребята!

Если вы нашли это полезным, посмотрите мою серию статей о HTML и CSS на YouTube Decoded by Christina!