el-ladies

Уроки верстки

Урок 6 — Что такое JavaScript?

• 25-06-2018 •

В прошлых уроках мы рассмотрели основные методы верстки страницы и даже немного уже поговорили о javascript. Сегодня мы рассмотрим более подробно.

Что умеет Javascript?

  • В первую очередь, javascript умеет отслеживать действия пользователя. К примеру, клик мыши или нажатие клавиши на клавиатуре, перемещение курсора, скролл.
  • Менять стили, добавять\удалять HTML тэги, скрывать\показывать элементы
  • Может посылать запросы на сервер, а так же загружать данные без перезагрузки страницы. Это технология называется AJAX

Javascript умеет и многое другое, но пока я не буду забивать вам голову лишней информацией. Это основные функции, которыми вы будете пользоваться постоянно.

See the Pen Get random color on click by Aleksandrs (@CoolS2) on CodePen.0

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

Так же переодически нужно скрывать и отображать некоторые элементы на странице через определенное время или опять же с помощью нажатия на кнопку.

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

Как начать писать на javascript

Javascript уже интегрирован во все браузеры и для того, чтобы начать на нем писать, не нужно никаких подготовок и приложений. Достаточно в html написать следующее:


<script>
// Скрипты
</script>

И внутри тегов script, нужно писать скрипты

Первое что необходимо знать, это как выводить в консоль что либо. Это важно, так как всегда будут возникать ошибки в коде. И чтобы проверить, мы можем в консоль выводить любое сообщение, делается это следующим образом:


<script>
console.log('hello world!');
</script>

Внутри скобок можно написать все что угодно и когда прогрузиться javascript, в консоле вы можете увидеть ваш текст. Чтобы открыть консоль в Chrome, IE, Opera, Firefox нажмите F12 на windows

Переменные — Это имя, создонное вами, в котором может храниться любая информация


<script>
var message;   // Создание переменной
message = 'Hello world!'; // Помещаем строку hello world в нашу переменную message
console.log(message); // Отображаем наше сообщение в консоли
</script>

Любой текст, который мы хотим использовать в дальнейшем, нужно помещать в скобки.

Математика в javascript


<script>
var number = 2 + 5;
console.log(number) // выведет число 7
//
var number = 2 + '5';
console.log(number) // выведет число 25
//
var number = 2 * '5'
console.log(number) // выведет число 10
</script>

Тут начинается самое интересное, в первом случае мы добавляем в переменную сумму чисел 2 и 5. Получается 7, все логично.

Во втором случае получилось 25, потому что у нас 5 как строка и сработала конкатенация

Конкатенация — это склеивание строк в единое целое.


<script>
var h = 'hello';
var w = 'world';
console.log(h + ' ' + w) // вывели слово hello, добавили пробел ' ' и за пробелом слово world
</script>

Дальше стоит поиграться с математикой и конкатенацией, чтобы окончательно понять, как это работает.

Тип данных

В языке javscript 6 типов данных, с 2-мя мы уже познакомились

  • Число «number»
  • Строка «string»
  • Булевый (логический) тип «boolean»
  • Специальное значение «null»
  • Специальное значение «undefined»
  • Объекты «object»

Со всеми типами мы будем знакомиться постепенно и только когда нам этот тип понадобиться


<script>
typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof {} // "object"
</script>

Условия


<script>
var a = 5;
var b = 4;

if(a < b){
console.log('false');
}else{
console.log('true');
}
</script>

Вы практически всегда в своих скриптах будете использовать условия. В данном примере, мы создали 2 переменные с цифрами, а ниже мы сравниваем. Если a меньше b, то вывести в консоль строчку false, если нет, то вывести строчку true.

Функции

Предположим у вас есть 5 кнопок на сайте и все они выполняют одну и ту же функцию, выводит в консоль строчку «hello world». Чтобы не писать каждый раз console.log , мы создаем одну функцию, которая будет отвечать за это.


<script>
function hello(){
	console.log('hello world');
}

hello(); // hello world
</script>

Давайте попробуем разобрать более подробно. Создадим кнопку и при нажатии на нее будет выскакивать окошко с сообщением


<button id="click-btn">Click me</button> // Создали кнопку и задали ей id - click-btn

<script>
function hello(){ // Функция с именем hello, которая будем выводить на экран hello world
	alert('hello world');
}

var button = document.getElementById('click-btn'); // Создали переменную, в которую мы поместили нашу кнопку с id - click-btn

button.addEventListener('click', function () { // 'button' наша переменная, добавляем функцию при нажатии 'click'
  hello(); // При нажатии срабатывает наша функция 'hello', которую мы написали сверху
});
</script>

Все скрипты лучше писать в конце html, так как javascript замедляет прогрузгу страницы

По началу кажется что все это сложно и не понятно, тут поможет только практика или фрэймворк jQuery

Что такое jQuery?

Это библеотека скриптов, с которыми очень удобно работать как новичку, так и профессионалам. Упрощает и укорачивает код в разы, читать свои скрипты становится приятнее и понятнее. В целом полезный инструмент, который я использую постоянно.

Но чтобы его использовать, нужно скачивать файл и вставлять в свой проект или использовать CDN

Скачать файл или взять ссылку CDN можно ТУТ



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> // Подключение jquery

<script>
// Сюда можно уже писать скрипты jquery
</script>

Теперь, когда мы подключили jquery, можно попробовать написать тот же функционал, что мы написали выше


<button id="click-btn">Click me</button> // Создали кнопку и задали ей id - click-btn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> // Подключение jquery

<script>
function hello(){ // Функция с именем hello, которая будем выводить на экран hello world
	alert('hello world');
}

var button = $('#click-btn'); // Создали переменную, в которую мы поместили нашу кнопку с id - click-btn

button.on('click', function(){
  hello(); // При нажатии срабатывает наша функция 'hello', которую мы написали сверху
})
</script>

Все последующие скрипты, я буду писать исключительно на jQuery. Задача этого урока, чтобы вы поняли для чего нужен javascript, его базовые функции и как их использовать

На следующих уроках мы будем разбирать функционал для конкретной задачи и подробно его описывать.

Добавить комментарий

hentai xxx