Как создавать интерактивные веб-сайты с помощью JavaScript

Узнайте, как использовать JS, чтобы сделать статические веб-сайты интерактивными

Прочтите статью или посмотрите видео!

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

Во-первых, мы воспользуемся Sublime для создания файла index.html с обычной шаблонной информацией, а также создадим быструю кнопку здесь, в нашем теге body.

Посмотрим на страницу, а там наша кнопка.

Затем мы создадим папку js и поместим в нее файл с именем script.js - это условное имя. Затем мы свяжем этот JS-файл с нашим кодом так же, как мы делали это для нашего CSS и фреймворка начальной загрузки в предыдущих руководствах. Он войдет в наш главный тег.

И теперь у нас есть JavaScript! Пока ничего не изменится, но мы настроены и готовы писать код. Теперь предположим, что мы хотели удивить нашего друга скрытым сообщением. Когда они впервые загружают экран, появляется только кнопка «Щелкните здесь», но если они нажимают кнопку, скрытое сообщение раскрывается. Итак, сначала давайте сделаем это сообщение скрытым, и мы добавим немного CSS, чтобы оно сначала было скрыто ...

Теперь, обновив страницу, мы видим, что, хотя мы написали этот элемент в коде, он скрыт, потому что мы установили для свойства display значение none.

Все, что нам нужно сделать, это написать код JavaScript, чтобы при нажатии кнопки открывалось сообщение, и мы переходили в наш script.js и записывали функцию. Чтобы создать функцию, мы напишем ключевое слово function, а затем имя функции - здесь это manifestMessage. Если бы нам нужно было добавить в функцию параметры, мы бы поместили их в круглые скобки, но нам не нужно сейчас об этом беспокоиться, поэтому мы не будем ничего помещать внутрь. Затем мы можем добавить тело нашей функции - что она на самом деле будет делать при вызове метода ShowMessage (). Внутри нашей функции мы получим доступ к документу переменной (также известному как наш HTML-документ), а затем получим элемент с id hiddenMessage (наш абзац, который мы создали ранее). Затем мы обратимся к стилю этого элемента, другими словами, к CSS, и установим для его свойства display значение «block».

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

Обновив страницу, давайте проверим это. Когда мы нажимаем кнопку, отображается сообщение.

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

Хотя это может показаться крутым, манипуляции с CSS - не единственное, на что способен JavaScript. Мы также могли бы добавить обратный отсчет к этому отпуску, чтобы каждый раз, когда пользователь нажимал кнопку обратного отсчета, дата отпуска приближалась. Возвращаясь к коду, мы добавим кнопку с id countDownButton и onclick action countDown ().

Затем мы создадим div и поместим эти атрибуты style и id из абзаца в div, чтобы скрыть сообщение и обратный отсчет.

Перейдя к JavaScript, чтобы заставить обратный отсчет работать, мы напишем нашу функцию ключевого слова и назовем функцию countDown. Опять же, мы не будем указывать ему параметры и перейдем к реализации нашего метода. Мы создадим переменную с ключевым словом var и назовем ее currentVal. Его значением будет текст элемента с идентификатором countDownButton, который можно получить с помощью свойства innerHTML. Затем у нас будет другая переменная с именем newVal и присвоить ей значение currentVal минус 1 - так мы отсчитываем! Затем мы установим текст countDownButton на новое значение, взяв его с помощью функции getElementById и установив для его свойства innerHTML значение newVal.

Это даст нам обратный отсчет и обновит страницу ... У нас есть кнопка обратного отсчета!

Однако вы можете заметить, что иногда обратный отсчет идет ниже нуля. Чтобы предотвратить это, мы можем добавить так называемое if-выражение. Обычно мы говорим, что новое значение по умолчанию для кнопки равно нулю, но если текущее значение кнопки равно 1 или выше, то мы вычтем (обратный отсчет) один и позволим ему новое значение для кнопки. В противном случае значение кнопки будет нулевым, значением по умолчанию.

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

Это введение в JavaScript и то, как с его помощью сделать ваши веб-сайты интерактивными. Здесь мы написали обычный JavaScript, что означает, что мы не использовали никаких дополнительных библиотек в нашем коде. На следующей неделе мы узнаем о библиотеке JavaScript под названием jQuery и о том, как она может немного упростить нам задачу. Тогда увидимся.

То, что нужно запомнить:

<!-- How to Import a JS File -->
<script src="pathToFile/fileName.js"></script>
<!-- How to Write a Function -->
function functionName() {
	// body of the function
}
<!-- How to Change CSS of an ID on the Page -->
document.getElementById("idName").style.property = 'value';
<!-- How to Run a Function on Button Click -->
< button onclick="functionName()">buttonName</button>
<!-- Create a Variable -->
var nameOfVariable = value;
<!-- How to Use an If-Statement -->
if (condition) {
	// do this if the condition is true
}
<!-- How to Set Text of an HTML Element in JS -->
document.getElementById("idName").innerHTML = 'newTextInElt'

Плюс немного дополнений:

<!-- Comments in JavaScript -->
// this is a comment
<!-- How to Use an If-Else Statement -->
if (condition) {
	// do this if the condition is true
} else {
	// do this if the condition is false
}
<!-- More Arithmetic in JavaScript -->
var x = 10; // a variable named x
var y = 11; // a variable named y
var z = x * y; // z evaluates to 110
// You can also add, subtract, divide, and mod. 
<!-- Writing a Function with Parameters -->
function functionName(x, y) {
	var r = x + y;
    document.getElementById("result").innerHTML = r;
}
<!-- Calling a Function with Parameters -->
< button onclick="functionName(5, 10)">buttonName</button>

Код из этого сообщения в блоге