JavaScript — один из самых популярных языков программирования для создания интерактивных и динамических веб-приложений. Это клиентский язык сценариев, добавляющий веб-страницам интерактивность и отзывчивость. С ростом популярности веб-приложений значительно возрос спрос на разработчиков JavaScript. JavaScript — это язык программирования, используемый для создания динамичных и интерактивных веб-сайтов. Например, он позволяет вам: Показывать сообщение, когда пользователь нажимает кнопку. JavaScript также можно использовать на стороне сервера для написания бэкэнда или API вашего веб-сайта. В этом контексте он называется Node или NodeJs. Во внешнем интерфейсе JavaScript часто используется в сочетании с HTML и CSS. В этом блоге мы углубимся в основы JavaScript, включая его синтаксис, типы данных, функции и управляющие структуры. Являетесь ли вы новичком или опытным разработчиком, этот блог предоставит вам необходимые знания для начала работы с JavaScript.
Как я уже сказал, JS часто используется в сочетании с HTML и CSS, для его работы необходимо подключить свой js-файл. Вы можете написать код js в основной части вашего тега HTML или использовать внешний файл, для чего вам нужно соединить ваш файл js с файлом HTML.
Теперь вы знаете, как подключить файл js. Итак, давайте начнем изучать темы JavaScript.
Первая основная вещь в js — это переменная. Переменные JavaScript используются для хранения значений данных. В js есть три переменные, которые можно объявить с помощью ключевых слов var, let или const.
Лучше всего использовать ключевые слова let и const. let позволяет вам объявлять переменные, ограниченные областью действия оператора block или выражения, в котором он используется, в отличие от ключевого слова var, которое объявляет переменную глобально, или локально для всей функции независимо от области блока. Другое различие между var и let заключается в том, что к последнему можно получить доступ только после того, как будет достигнуто его объявление. Объявление const создает константы с областью действия блока. , очень похоже на переменные, объявленные с использованием ключевого слова let. Значение константы нельзя изменить путем переназначения и нельзя повторно объявить (т. е. через объявление переменной). Однако если константа является объектом или массивом, ее свойства или элементы можно обновить или удалить. Таким образом, основное различие между ключевым словом let и const заключается в том, что вы можете переназначить переменную let, но не можете переназначить const.
пусть age = 25;
age = 30;
В этом примере переменной age сначала присваивается значение 25, а затем оно обновляется до 30.
const pi = 3,14;
В этом примере pi — это имя переменной, а 3.14 — это значение, присваиваемое переменной. После того как pi присвоено значение =3.14, его нельзя переназначить на новое значение.
Попытка переназначить значение переменной const приведет к ошибке:
const pi = 3,14;
pi = 3,1416; // Это приведет к ошибке
Как я уже сказал, переменные const полезны, когда вам нужно объявить значение, которое не должно изменяться во всей программе. Например, вы можете использовать const для объявления значения, представляющего математическую константу или параметр конфигурации, который не следует изменять.
Важно отметить, что переменные const не являются неизменяемыми, а это означает, что значение, которое они содержат, по-прежнему может быть изменено, если это изменяемый тип данных, такой как массив или объект. Другими словами, хотя вы не можете переназначить новое значение самой переменной const, вы все же можете изменить свойства или элементы значения, которое она содержит.
const fruit = ["яблоко", "банан", "апельсин"];
fruit.push("груша"); // Это разрешено, так как сам массив изменяем
Как правило, рекомендуется использовать const для значений, которые не следует переназначать, и let для значений, которые могут изменяться в ходе выполнения программы.
Вторая основная вещь в js — это Типы данных. JavaScript имеет несколько типов данных, включая числа, строки, логические значения, массивы и объекты. Вот обзор наиболее распространенных типов данных в JavaScript:
Число. Тип данных number используется для хранения числовых значений, таких как целые числа и числа с плавающей запятой.
codelet age = 23; let price = 4.99;
Строка. Тип данных string используется для хранения текстовых значений, таких как имена, адреса и сообщения.
let name = "Ahsan"; let address = "Mirpur, Dhaka";
Boolean. Тип данных boolean используется для хранения значений true или false, которые часто используются для принятия решений в условных операторах.
let isStudent = true; let isEmployed = false;
Null. Тип данных null используется для представления преднамеренного отсутствия значения, что означает, что переменная намеренно пуста или ей не присвоено значение.
let myVar = null;
Не определено. Тип данных undefined используется для представления переменной, которая была объявлена, но еще не получила значение, или функции, которая не имеет возвращаемого значения.
let myVar; console.log(myVar); // This will output "undefined"
Объект. Тип данных object используется для хранения коллекций пар "ключ-значение", таких как свойства и методы.
let person = {
name: "Ahsan",
age: 23,
address: "Mirpur,Dhaka"
};
Массив. Тип данных array используется для хранения упорядоченных коллекций значений, часто имеющих один и тот же тип данных.
let fruits = ["apple", "banana", "orange"];
Функция. Тип данных function используется для хранения блока кода, который можно выполнять и повторно использовать в программе.
function sayHello(name) {
console.log("Hello, " + name);
}
Третье основное свойство js — это условия и циклы. Как и в других языках программирования, условные операторы используются для принятия решений на основе определенных условий. В JavaScript есть несколько условных операторов, включая if, else if и switch. Циклы используются для многократного выполнения блока кода. В JavaScript есть несколько типов циклов, в том числе for, while и do...while.
Четвертая основная вещь в js — это Событие. В JavaScript событие — это действие или событие, которое происходит в браузере, например, когда пользователь нажимает кнопку или веб-страницу. финишная загрузка. События используются для запуска кода JavaScript, который может реагировать и изменять поведение веб-страницы.
Вот пример присоединения прослушивателя событий к элементу кнопки в JavaScript:
let button = document.querySelector("#myButton");
button.addEventListener("click", function() {
console.log("Button clicked!");
});
В этом примере querySelector используется для выбора элемента кнопки с идентификатором «myButton». Затем метод addEventListener используется для присоединения прослушивателя событий к кнопке, прослушивающего событие «щелчок». При нажатии кнопки будет выполнена функция внутри прослушивателя событий, которая в этом случае записывает сообщение в консоль.
Существует множество различных типов событий, которые можно прослушивать в JavaScript, в том числе:
- Нажмите
- Наведение курсора
- Keydown
- Нагрузка
- Прокрутить
Слушатели событий также могут быть прикреплены ко многим различным типам элементов, таким как кнопки, ссылки и поля формы. Используя события в JavaScript, разработчики могут создавать динамические и интерактивные веб-страницы, которые реагируют на ввод данных пользователем и другие действия, происходящие в браузере.
Пришло время узнать о манипулировании DOM. Объектная модель документа (DOM) — это программный интерфейс, который позволяет JavaScript манипулировать HTML и CSS веб-страницы. JavaScript можно использовать для добавления или удаления элементов со страницы, изменения текста и стилей, а также обработки взаимодействия с пользователем. Манипуляции с DOM в JavaScript включают доступ и изменение объектной модели документа (DOM) веб-страницы. DOM — это древовидная структура, представляющая HTML-элементы веб-страницы, и ею можно манипулировать с помощью JavaScript для динамического обновления содержимого и внешнего вида веб-страницы.
Вот несколько распространенных методов манипулирования DOM в JavaScript:
Выбор элементов. Методы querySelector и querySelectorAll можно использовать для выбора элементов из модели DOM с помощью селекторов CSS.
let element = document.querySelector("#myElement");
let elements = document.querySelectorAll(".myClass");
В этом примере querySelector используется для выбора элемента с идентификатором 'myElement', а querySelectorAll используется для выбора элемента со всеми классами с именем 'myClass'.
Изменение свойств элемента. После выбора элемента можно изменить его свойства, такие как текстовое содержимое, содержимое HTML и атрибуты.
element.textContent = "Hello";
element.innerHTML = "<strong>Hello</strong>";
element.setAttribute("new__id", "12345");
Создание и добавление элементов. Новые элементы можно создавать с помощью метода createElement, а затем добавлять к модели DOM с помощью метода appendChild.
let newElement = document.createElement("div");
newElement.innerHTML = "<h1>Hello Again</h1>";
document.body.appendChild(newElement);
Удаление элементов. Элементы можно удалить из модели DOM с помощью метода remove.
element.remove();
Используя эти и другие методы, разработчики могут манипулировать DOM в JavaScript для создания динамических и интерактивных веб-страниц. Ниже приведен краткий список распространенных API-интерфейсов в сценариях веб-страниц и XML-страниц с использованием модели DOM.
document.querySelector(selector)document.querySelectorAll(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()window.location.href()Window.onload()window.scrollTo()
В этом блоге мы узнаем об основных вещах JavaScript. Если вы хотите узнать больше об основных вещах, вы можете посетить w3school, mdn. Мы изучим сложные темы в следующей части. Следите за обновлениями…
