Основы JavaScript

В данной статье мы рассмотрим основы JavaScript, разберёмся с синтаксисом данного языка и различными техниками применения.

План:

• Начало работы на JavaScript
• Синтаксис JavaScript
  • Комментарии
  • Подключение файлов js
  • Стандарт ES5
  • Переменные и константы
  • Типы данных
  • Условный оператор
  • Приведение типов
  • Циклы
  • Функции
  • Свойства и методы
  • Массивы
  • Методы для работы с массивом
  • Объекты

Для выполнения JavaScript требуется специальная программа — браузер. Во все современные браузеры встроен интерпретатор языка JavaScript.

JavaScript позволяет:

1. Добавлять, удалять, редактировать элементы страницы и их содержимое
2. Производить какое-либо действия в зависимости от действий пользователя
3. Посылать запросы к серверу

Документация разработчиков: developer.mozilla.org

Начало работы на JavaScript

Первое с чего следует начать это установить IDE или редактор кода. Здесь дело вкуса, главное нужно понимать разницу между редакторами и IDE. Об этом читайте в этой статье: Редакторы кода и IDE

когда Вы приняли решение где писать код необходимо понять где смотреть результат. Мы уже говорили что JavaScript выполняет браузер, но недостаточно установить какой-то из них, настоящий front-end разработчик, back-end разработчик или верстальщик имеют на своей машине все популярные браузеры.

Для создания первого скрипта необходимо в тело html страницы добавить javascript код, выглядит это следующим образом:

1
2
3

<script>
    alert('Мой первый скрипт');
</script>

Синтаксис JavaScript

Комментарии

В JavaScript есть два вида комментариев: однострочные (//) и многострочные (/**/)

Подключение файлов js

Подключение файлов js может быть как внутри тегов head, после закрывающего тега html

1

<script src="js/script.js"></script>

Если указан атрибут src, то содержимое тегов script игнорируется.

Для асинхронной загрузки js файла существует два атрибута async или defer.

async — какой скрипт будет первым загружен тот и выполнится

defer — вне зависимости от скорости загрузки сначала будет выполнен тот скрипт что выше в коде.

1
2
3
4
5
6
7

// какой быстрее загрузится тот и выполнится первым
<script src="script1.js" async></script>
<script src="script2.js" async></script>
 
// сначала выполнится script1.js а потом script2.js
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

Атрибуты async и defer работают только для подключаемых внешних файлов. (там где есть атрибут src)

Стандарт ES5

Из-за поддержки старых решений браузеров накопился большой ряд проблем. Внедрение нового стандарта ECMAScript 5 (ES5) позволило решить данную проблему, отказавшись от поддержки ненужного функционала.

Для указания, что ваш код написан в новом стандарте необходимо указать вначале следующую директиву:

1
2
3

"use strict";
// код по современному стандарту ES5
...

Отсутствие поддержки браузеров < IE9

Переменные и константы

1
2
3
4
5
6
7

var b;
var i = 1;
var a1 = 2;
var stringName = "text";
var c1= 'text', c2 = 25;
 
var VALUE_P = 3.14; // константа (можно изменить, отличие данного языка, но это не рекомендуется)

Ключевое слово var обязательно для нового стандарта.

Типы данных

1
2
3
4
5
6
7
8
9

var a = 12.4; // number
var s = "text"; // string
var flag = true; // boolean
var b = null; // null
var user = { name: "root" }; // object
 
// Infinity - при делении на ноль
// undefined - не присвоено значение
// NaN - Ошибка вычислений (например из-за не соответствия типов)

Определить тип переменной можно через оператор typeof

Условный оператор

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
// оператор условия
if (условие) {
  оператор при true
}
else{
  оператор при false
}
 
 
// интервал
switch(значение){
   case 1: операторы break;
   case 2: операторы break;
   default: операторы break;
}

Приведение типов

1
2

var a = String(1); // "1" string
var a = Number("1"); // 1 number

Циклы

1
2
3
4
5
6
7
8
9
10
11
12
13

 
while(условие) {
  // тело цикла
}
 
do{
  // тело цикла
} 
while (условие);
 
for (начало; условие; шаг) {
  // тело цикла
}

Прерывание цикла — break. Переход к следующей итерации — continue

Функции

1
2
3
4
5
6
7
8
9
10
11
12
13

function имя(параметры) {
  код функции
  // return возвращаемое значение;
}
 
// два варианта работы с функциями
function sum(a, b) {
  return a + b;
}
 
var sum = function(a, b) {
  return a + b;
}

Функции с параметрами:

1
2
3
4
5
6
7

function go(a,b) {
  alert("a="+a+", b="+b);
}
 
go(1);     // a=1, b=undefined
go(1,2);   // a=1, b=2
go(1,2,3); // a=1, b=2, третий аргумент не вызовет ошибку

Является ошибка следующая запись:

1
2
3
4
5
6

function sum(a) {
  ...
}
function sum(a, b, c) {
  ...
}

Может быть только одна функция с именем sum, которая вызывается с любыми аргументами.

Свойства и методы

К любому элементу можно применить свойство или метод.

1
2
3
4
5

var s = "text";
s.length; // свойство
 
var text = "text";
text.toUpperCase(); // метод

Метод имеет скобки, свойство нет!

Массивы

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var mass1 = []; // пустой массив
 
var mass2 = ["text1", "text2"];
mass2[0]; // выбор элемента массива
mass2.length // длина массива
 
// или
var mass3 = new Array("text1", "text2");
 
 
// Многомерные массивы
var mass4 = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Массив может содержать элементы любого типа!

1
2
3

 
var mass3 = [ 10, 'text', { name: 'Вася' }, true ];
arr[2].name; выбор элемента массива и обращение к его свойству name

Методы для работы с массивом

1. pop — удаляет последний элемент из массива и возвращает его

   1 2	var mass2 = ["text1", "text2"]; mass2.pop(); // удалили последний

   var mass2 = ["text1", "text2"]; mass2.pop(); // удалили последний

2. push — добавляет элемент в конец массива:

   1 2	var mass2 = ["text1", "text2"]; mass2.push("text3"); // добавили элемент в конец массива

   var mass2 = ["text1", "text2"]; mass2.push("text3"); // добавили элемент в конец массива

3. shift — удаляет из массива первый элемент и возвращает его

   1 2	var mass2 = ["text1", "text2"]; mass2.shift(); // удалили первый

   var mass2 = ["text1", "text2"]; mass2.shift(); // удалили первый

4. unshift — добавляет элемент в начало массива

   1 2	var mass2 = ["text1", "text2"]; mass2.unshift("text0"); // добавили в начало массива

   var mass2 = ["text1", "text2"]; mass2.unshift("text0"); // добавили в начало массива

5. split — преобразует строку в массив

   1 2	var s = "text1, text2"; var mass = s.split(', '); // результат массив из 2 элементов

   var s = "text1, text2"; var mass = s.split(', '); // результат массив из 2 элементов

6. join — преобразует массив в строку

   1 2	var mass2 = ["text1", "text2"]; var s = mass2.join(' '); // строка из массива с разделителем " "

   var mass2 = ["text1", "text2"]; var s = mass2.join(' '); // строка из массива с разделителем " "

7. delete — удаление элемента массива

   1 2	var mass2 = ["text1", "text2"]; delete mass2[1];

   var mass2 = ["text1", "text2"]; delete mass2[1];

Объекты

1
2
3
4
5

var obj = new Object();
 
// или
 
var obj = {};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

var obj = {
   o1: "значение 1",
   o2: "значение 2"
};
 
 
 
// создание объекта
    var a = 10;
    var my_obj = {
        свойство1 : 'значение1',
        'свойство 2' : "значение2",
        num : a,
        obj2 : {
            s1 : 1,
        },
        method1 : function(){
            // метод
        },
        method2 : myMethod,
        get summ(){ // свойство my_obj.summ
            return this.num + 5;
        },
        set summ(value){ // свойство my_obj.summ = 7;
            this.num = this.num + value;
        }
    };
 
    function myMethod(){
 
    }
 
// или
var my_obj1 = new Object({s1 : 1});
 
// обращение к свойству объекта
my_obj.num;
my_obj['num'];
 
obj.o1; // вызов элемента объекта
 
delete obj.o2; // удаление элемента
 
 
// перебор свойств объекта
var a = 10;
var my_obj = {
        свойство1 : 'значение1',
        'свойство 2' : "значение2",
        num : a,
        obj2 : {
            s1 : 1,
        },
        method1 : function(){
            // метод
        },
        method2 : myMethod
};
function myMethod(){
 
}
 
for (var key in obj) {
  // этот код будет вызван для каждого свойства объекта
  // ..и выведет имя свойства и его значение
  alert( "Ключ: " + key + " значение: " + obj[key] );
}
 
// Обращение к свойству объекта
my_obj.num;
my_obj['num'];
 
// проверка существования свойства
if('s1' in obj){
 
}

Создание объекта из другого:

1

var my_obj2 = Object.create(my_obj1); // в скобках указываем прототип свойства которого будут наследоваться