allforyou

7 лет назад

Академия. Курс "JavaScript для начинающих". Первая неделя

Вторым курсом от @academy, я выбрал курс "JavaScript для начинающих" от Антона Холина. В свое время немного увлекался версткой, с минимальными знаниями в HTML и CSS смог сделать работу за которую получил целых 20$. Теперь же настала очередь выучить JavaScript. Сам курс представлен на образовательной платформе – Stepik.

О курсе

Данный курс поможет ознакомится с основами языка программирования JavaScript и подготовит вас к его практическому применению.

Конспект первой недели

Что же такое JavaScript?

Согласно Википедии JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript.

А если говорить простым языком, то JavaScript (часто сокращают до аббревиатуры JS) - это язык программирования, выполняющийся на стороне пользователя с помощью браузера. Он позволяет управлять элементами веб-страницы - заставлять их менять свои свойства и расположение, двигаться, реагировать на события, такие как перемещение мыши или нажатия клавиатуры, а также создавать множество других интересных эффектов.

Краткая история рождения Javascript

События, в результате которых появился JavaScript, разворачивались в течение шести месяцев, с мая по декабрь 1995 года. Компания Netscape Communications уверенно прокладывала себе путь в области веб-технологи и искала способы дальнейшего развития веб-технологий. Её браузер Netscape Communicator успешно отвоевывал позиции у NCSA Mosaic, первого популярного веб-браузера. Менеджмент разработки браузера был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы. Поэтому Сооснователь Netscape Communications Марк Андрессен и сооснователь Sun Microsystems Билл Джой заключили соглашение о сотрудничестве в разработке подобного языка программирования. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией. Первоначально язык назывался Mocha, затем он был переименован в LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера. На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun.

DOM (Document Object Model) - это объектная модель документа, благодаря которой можно работать с тегами HTML-документа как с деревом объектов, каждый из которых имеет свой уникальный адрес. Обращаясь по этому адресу с помощью JavaScript можно получить доступ к тому или иному HTML-объекту и управлять его свойствами - изменять размер, цвет и т.п.

BOM (Browser Object Model) – это структура, имеющая схожее строение с DOM и включающая в себя элементы браузера - окна браузера, статусная строка, история просмотра и другие. Ею также можно управлять с помощью JavaScript.

Внедрение кода JavaScript в документ HTML

При размещении кода внутри HTML-файла код JavaScript обрамляется тэгом < script >. >Выглядит это примерно так:

< script &>gt;&gt

... JavaScript-код...

< /script >gt>

Теперь рассмотрим пример размещения JavaScript-кода в отдельном файле. Создадим файл с названием myscript.js и поместим в него наш код:

alert("Hello Golos!");

А вызов кода из тела основного HTML-файла теперь будет выглядеть вот так:

<html> <head> <title>Страница с примером кода JavaScript</title>< script src="myscript.js"></script></head> <body> Это текст основной страницы </body> </html>

Составляющие кода JavaScript:

Предложение JavaScript - это фактически команда браузеру, указание, что необходимо выполнить.

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

Блоки JavaScript - это способ сгруппировать предложения вместе. Блок начинается открывающейся фигурной скобкой "{" и заканчивается закрывающейся "}".

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

Однострочные комментарии начинаются с двух слэшей "//" и предотвращают выполнение кода на этой строчке.

Многострочные комментарии начинаются с одного слэша и звездочки "/*" и заканчиваются обратной комбинацией - звездочкой и слэшем "*/". Всё что находится между этими знаками браузер будет считать комментарием.

Переменные и типы данных

Переменные в JavaScript, так же как и в алгебре, используются для хранения значений или выражений. Переменная может иметь имя, например "x" или более информативное имя, например "myPetName".

Для именования переменных JavaScript существует набор правил:

Имена переменных чувствительны к регистру (y и Y это две разных переменных)
Имена переменных должны начинаться с буквы или символов "$" и "_"
Имя переменной может состоять из любых цифр и букв латинского алфавита, а также символов "$" и "_"
В качестве имени переменной нельзя использовать зарезервированные и ключевые слова (break, delete, function, return, typeof, case, do, if, switch, var, catch, else, in, this, void, continue, false, instanceof, throw, while, debugger, finally, new, true, with, default, for, null, try)

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

var Golos;

var Blockchain;

let Golos;

let Blockchain;

Присвоить значение переменной, или инициализировать ее можно на этапе объявления :

var Golos = 1;

let Blockchain = "Bitcoin";

Инициализация уже объявленной переменной делается без директивы var :

Golos = 1;

Blockchain = "Bitcoin";

Переменные в JavaScript могут быть Локальными и Глобальными.

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

Глобальные переменные объявляются вне функций и к ним могут обращаться все функции и скрипты на странице. Уничтожаются такие переменные при закрытии страницы.

Типы данных в JavaScript

Тип данных number образуется, если переменной, в качестве значения, присваивается любое число.

Тип переменной String получается если значение, присвоенное переменной, заключить в одинарные или двойные кавычки.

Логический тип данных - boolean: это всего лишь два варианта значения переменной - true (правда или логическая 1) и false (ложь или логический 0). Этот тип данных используется при применении операторов сравнения, логических операций и операторов ветвления.

Тип данных undefined переменная имеет в тот момент, когда она объявлена, но еще не инициализирована, то есть ее создали, а значение еще не присвоили.

Операции в JavaScript

Примеры арфиметических операторов (y = 10):

Сложение "+"

Выражение x = y + 2 даст результат x = 12; y = 10;

Вычитание "-"

Выражение x = y - 2 даст результат x = 8; y = 10;

Умножение "*"

Выражение x = y * 2 даст результат x = 20; y = 10;

Деление "/"

Выражение x = y / 2 даст результат x = 5; y = 10;

Остаток от деления (он же - деление по модулю) "%"

Выражение x = y % 4 даст результат x = 1; y = 10;

Инкремент "++" - эта операция производит увеличение аргумента на единицу, т.е. выражение x++ будет эквивалентно выражению x = x + 1.

Декремент "--" - эта операция производит уменьшение значения переменной на единицу, т.е. х-- эквивалентно x = х - 1.

Примеры операторов присваивания (x = 5; y = 10):

Оператор "=" - это обычный оператор присваивания.

Выполнение x = y приведет к x = 10.

Оператор "+=" - это присваивание со сложением

Выполнение x += y приведет к x = 15, эквивалентно x = x + y

Оператор "-=" - это присваивание с вычитанием

Выполнение x -= y приведет к x = -5, эквивалентно x = x - y

Оператор "*=" это присваивание с умножением

Выполнение x *= y приведет к x = 50, эквивалентно x = x * y

Оператор "/=" - это присваивание c делением

Выполнение x /= y приведет к x = 0.5, эквивалентно x = x / y

Операторы сравнения бывают такими: равно ==, строго равно ===, не равно !=, строго не равно !==, больше чем >, меньше чем <, больше или равно >=, меньше или равно <=

Примеры логических операторов (x = 8; y = 5): оператор && (Логическое И) x < 10 && y > 1 это true оператор || (Логическое ИЛИ) x == 6 || y == 6 это false оператор ! (Логическое НЕ) !(x == y) это true

Условные предложения

В JavaScript имеется два варианта условных предложений: конструкция if ... else и конструкция switch. Первая из них используется для выполнения некоторого кода, если указанное условие истинное.

if (условие) {

код для выполнения если условие истинно

}

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

Циклы

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

Цикл For используется в тех случаях, когда мы можем определить заранее - сколько раз должен выполниться заданный блок кода. Синтаксис команды выглядит так :

for (переменная = начальное_значение; //первым задается начальное значение переменной-счетчика переменная <= конечное_значение; //после этого задается условие, которое проверяется при выполнении каждого цикла переменная = переменная + шаг) //и наконец последним задается операция изменения состояния переменной-счетчика { исполняемый код}

Например:

for (i = 1; i < 5; i = i + 1) { console.log("i = " + i); }

Теперь рассмотрим цикл while. В нем происходит выполнение блока кода пока заданное условие истинно. Синтаксис выглядит следующим образом :

while (переменная == конечное значение) {  

//конечно в цикле может использоваться любой оператор сравнения, не только ==

исполняемый код

}

Например :

var x = 1; //объявляем и инициализируем переменную, которую //мы будем использовать как условие цикла while (x <= 5) {console.log(" x= " + x);x = x + 1;}

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

Ключевое слово continue прерывает текущую итерацию цикла и переходит к следующей.

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

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

Конспект составлен в рамках проекта Академия.
Условия участия и список курсов для изучения можно найти в соответствующем посте.
Курс по которому составлен текст можно найти здесь .