Серия -1 Javascript: Введение

Javascript… звучит похоже на Java, но так ли это на самом деле? Итак, давайте посмотрим, что это на самом деле. Как новичок в javascript, первое, что приходит в голову, это то, что делает javascript? Таким образом, javascript - это, по сути, «язык браузера». Таким образом, это язык, который взаимодействует с нашими веб-страницами. JavaScript работает на стороне клиента в сети, что означает, что он виден пользователям, широко используется для управления поведением веб-страниц, может использоваться для программирования поведения веб-страниц на наступление события. Если вы уже знакомы с C ++ / Java, синтаксис Javascript очень похож на оба этих языка, что упрощает освоение этого языка разработчиком.

Поэтому, прежде чем двигаться дальше, просто обратите внимание, что в этой статье будут дополнительные части, в которых я подробно расскажу о javascript (включая DOM, методы JS, массивы, объект, узел и т. Д.)

Как JavaScript загружается на вашу страницу вместе с HTML CSS за сценой?

JavaScript обычно используется с HTML и CSS. Поэтому, когда веб-страница загружается первой, ей необходимо объединить документ (HTML) со стилем, упомянутым в CSS. Таким образом, он преобразует HTML в DOM (объектная модель документа), о чем будет рассказано в следующей части статьи. Затем браузер извлекает большую часть ресурсов, связанных с HTML-документами, таких как изображения и видео, CSS и JavaScript, но JS обрабатывается немного позже. После получения CSS браузер анализирует его и сортирует различные правила по типам их селекторов в разные сегменты, например элемент, класс, ID, TagName и т. д. После синтаксического анализа на основе селекторов он сопоставляет селекторы со своей DOM, а затем прикрепляет к ним стиль. Теперь JS начинает работать. JS динамически изменяет HTML и CSS для обновления интерфейса с помощью DOM API. Ваша веб-страница обычно загружается и выполняется в том порядке, в котором она отображается в коде. Поэтому, если вы напишете код JS до HTML, CSS будет отображать ошибку.

Сказав это, давайте посмотрим, как Javascript реализован в разных веб-браузерах. Теперь, например, Google Chrome использует движок Google V8. Это также движок, используемый Node.js. Mozilla предоставляет две реализации JavaScript. SpiderMonkey, реализован на C / C ++. Движок Rhino, реализованный на Java. Как они работают, движки JavaScript Mozilla предоставляют общедоступный API, который разработчики могут использовать для интеграции JavaScript в свои приложения / программное обеспечение. Браузеры используют доступный общедоступный API для создания объектов хоста, которые отвечают за отображение модели DOM в JavaScript. Предпочтительной средой хоста для JavaScript являются веб-браузеры.

JS считается динамически интерпретируемым языком программирования. Причина, по которой компиляция - это JS, обрабатываемый во время выполнения. Современные интерпретаторы JavaScript фактически используют метод, называемый «своевременной компиляцией», для повышения производительности. Кроме того, JS можно использовать для сценариев на стороне сервера вместе с другими языками, такими как PHP, Python, Ruby и т. Д.

Теперь, разобравшись с основами того, как работает javascript, что это такое на самом деле, как его реализация, давайте перейдем к тому, как добавить javascript на вашу веб-страницу.

Как добавить JS на свою страницу?

Есть два способа добавления: один - внутри документа HTML, путем включения javascript в тег скрипта. Пример :

В приведенном выше примере показано, как можно добавить сценарий. Итак, ‹script› написано внутри тега ‹body› в HTML. Не паникуйте, когда вы видите незнакомые строки кода на изображении выше, медленно обучаясь. Я думаю, что мы сможем достичь точки, в которой мы сможем писать код самостоятельно.

Другой способ - создать файл с расширением .js в том же каталоге, что и ваш HTML, и добавить имя файла в тег скрипта HTML, например:

<script src="script.js" ></script>

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

Сохранение данных и их инициализация:

Поэтому, когда мы вычисляем или выполняем функцию, нам нужно сохранить информацию перед их выполнением. Итак, в игру вступают переменные. Переменные похожи на контейнер, в котором хранятся нужные вам данные. Он объявляется с помощью var, let или const. До ES6 использовался только «var», и поскольку область видимости var была глобальной для функции, поэтому переменные, объявленные внутри блока функции, были глобальными для функции.

function foo() {
   for (var t= 0; t< 5; t++) { 
      // scope of tshould be within the block
   }
   // t is accessible here as well 
   console.log(t); 
}

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

function foo() {
   for (let x = 0; x < 5; x++) { 
      // now x is only accessible in this block.
   }
   // x is out of the scope here hence will show indefined error  //when tried accessing.
   console.log(x);  
}

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

const x = 10; 
x = 2; // throws "Assignment to constant variable."

Здесь мы увидим, как используется var. Переменные обычно объявляются с использованием var, поскольку он представляет собой глобальное объявление переменной. Например :

var Name ;
var Age ;
var isHuman;

В настоящее время им не присвоены значения, поэтому при выводе будет отображаться undefined.

Name;
Age;
isHuman
// output : undefined

После объявления нам нужно их инициализировать

Name = 'Bob';
 Age  = 33;
isHuman = true;

Переменные могут быть разных типов: логические, числа, строки, массивы, объекты. В приведенных выше примерах мы видим String, Number и boolean.

В следующей статье мы узнаем о массивах и объектах, модели DOM и многом другом.

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