Доброго времени суток дорогой читатель! В этой статье мы будем знакомиться с языком программирования JavaScript. Он выполняется JavaScript-движком браузера уже после того как веб страница сформирована, так как зачастую цель программы на JavaScript динамически изменять содержимое HTML и CSS.
Начнём с того, что писать код можно как в отдельном файле .js так и в html документе, но если мы пишем код в отдельном файле, то его нужно будет подключить с помощью такого тега в <head>
JS - в дальнейшем JavaScript
Простые программы будем писать прямо в html документе.
Начнем с объявления переменных и вывода данных в консоль браузера.
Обычно консоль можно открыть по нажатию клавиши F12.
Ключевое слово var работает почти также, как let, за исключением некоторых отличий, поэтому объявлять переменные можно двумя способами.
console.log() позволяет вывести переменную в консоль браузера.
Вот так это выглядит в браузере
Выполнение программы происходит в фигурных скобках { }. А параметры задаются в обычных скобках ( ). В цикле есть 3 параметра. В первом мы инициализируем переменную и присваиваем ей значение, во втором указываем условие выхода, как в циклах while, в третьем указываем как будет изменяться переменная. i++ прибавляет к i число 1 каждую итерацию, также можно было указать i+=2 и цикл получился бы с шагом 2.
Также и с условием, само условие указывается в скобках после if. Также тут я использовал оператор %, который возвращает остаток от деления. Так, с помощью цикла я вывел четные числа в консоль
Теперь будем взаимодействовать с элементами html. Для этого создадим кнопку <button> и присвоим ей id. А также теперь будем использовать функцию, которую будем вызывать с помощью атрибута onclick.
Вот так выглядит функция в JS. Теперь при нажатии на кнопку в консоли мы получим объект <button>
Теперь можно перейти к взаимодействию с элементами HTML. Сделаем счетчик нажатий на кнопку прямо в ней.
Объявляем глобальную переменную n, а потом в функции прибавляем к ней 1 и в наш полученный HTML элемент с помощью свойства innerHTML. А вообще innerHTML позволяет получить содержимое элемента в виде строки. В итоге получается, что при каждом нажатии на кнопку вызывается эта функция, к переменной прибавляется 1 и текст в кнопке меняется на новый + переменная счетчика.
Вот что получилось
На этом закончим, для начала хватит.
Спасибо за просмотр данной статьи, не болейте!
#программирование #javascript #программированиедляначинающих #программированиеснуля