JavaScript
Синтаксис
Типы данных
Числа и строки
Объекты
Оператор typeof
null и undefined
Операторы
Сравнение переменных
Сравнение переменных
Массивы
Методы массивов
Методы массивов
Функции
Вызов функций
Методы объектов
Способы вставки JS
События
Загрузка документа
Объект document
getElementById()
querySelector(css), querySelectorAll(css)
getElementsByTagName(tag)
Справочная информация
Вопросы?
306.11K
Category: programmingprogramming

JavaScript. Введение. Синтаксис

1. JavaScript

Введение

2. Синтаксис

Объявлять переменные можно через let или var, а константы через const
var x, y;
x = 5; y = 6;
z = x + y;
// объявление переменных
// инициализация переменных
// вычисление значений
Важно помнить:
переменная, объявленная, но никогда не инициализированная будет
иметь значение "undefined";
при повторном объявлении переменной её значение не изменится

3. Типы данных

Примитивные:
1)
число (number)
2)
строка (string)
3)
логический (boolean)
4)
null
5)
undefined
Сложные:
1)
Объект (object)
2)
Функции (function)
Типы в JavaScript – динамические, то есть:

4. Числа и строки

Числа:
Текст:
10.50
“John Doe“
1001
‘John Doe’
123e5 (= 12300000)
123e-5 (= 0.00123)

5. Объекты

6. Оператор typeof

7. null и undefined

8. Операторы

Оператор
Описание
+
Сложение
-
Вычитание
*
Умножение
/
Деление
%
Остаток от деления
++
Инкремент
--
Декремент

9. Сравнение переменных

Оператор
Описание
==
равно
===
равно по типу и значению
!=
не равно
!==
не равно по типу и по значению
>
больше
<
меньше
>=
больше или равно
<=
меньше или равно

10. Сравнение переменных

11. Массивы

Инициализация:
Тип:
Обращение к элементу:
Длина массива:
Цикл for:

12. Методы массивов

.pop()
.push()

13. Методы массивов

.shift()
.unshift()

14. Функции

или
типы параметров и возвращаемого значения не указываются;
возвращать значение необязательно;
Значение параметров по умолчанию – undefined;
typeof myFunction // function;
Object-параметры передаются по ссылке.

15. Вызов функций

По событию (onclick, onload, …)
Из JavaScript кода (из другой функции)
Автоматический (самовызывающиеся функции)

16. Методы объектов

17. Способы вставки JS

в теге элемента:
в <head> и <body> (через тег <script>)
в отдельном *.js файле (через тег <script>)

18. События

19. Загрузка документа

DOMContentLoaded – браузер полностью загрузил HTML и построил DOMдерево
load – браузер загрузил все ресурсы
beforeunload / unload – уход со страницы

20. Объект document

document – объект HTML-страницы. По сути, это корневой DOM-узел
Содержит методы для работы с нодой
DOM

21. getElementById()

Если элементу назначен специальный атрибут id, то можно получить его
прямо по переменной с именем из значения
<div id=“helloWorld”>Пусто!</div>
document.getElementById(“helloWorld").innerHTML = "Hello JavaScript";
<div id=“helloWorld”> Hello JavaScript </div>

22. querySelector(css), querySelectorAll(css)

Вызов querySelectorAll возвращает все элементы внутри элемента, которому
соответствует селектор
<div>
<p>1</p>
<p>2</p>
</div>
var elements = document.querySelectorAll('div’);
for (var i = 0; i < elements.length; i++) {
alert( elements[i].innerHTML ); // 1, 2
}

23. getElementsByTagName(tag)

Метод getElementsByTagName ищет все элементы с заданным тегом внутри
элемента и возвращает их в виде списка
var tableElem = document.getElementById('age-table');
var elements = tableElem.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
var input = elements[i];
alert( input.value + ': ' + input.checked );
}

24. Справочная информация

25. Вопросы?

English     Русский Rules