JavaScript для начинающих

JavaScript — вступает в игру, когда нам нужно произвести какие-то действия на стороне клиента, который обратился к нашей веб-странице.

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

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

Подключение JavaScript

Вставка скрипта прямо в код страницы

Можно вставить JS код прямо внутри страницы.

<script>
   alert("Hi there!"); //some JS code here
</script>

Вынос кода в отдельный файл

Можно вынести JavaScript код во внешний файл и использовать на странице ссылку на него

<script src=”js-script.js”></script>

Закрывающий тег в этом случае обязателен.

Лучше всего вставлять скрипты перед закрывающим тегом </body>

Переменные

Имена переменных

Имена переменных можно начинать с большой или маленькой буквы, подчеркивания или знака $.

В имени могут быть цифры, но начинать название переменной с цифры нельзя.

JavaScript чувствителен к регистру: mytext и myText — это две разные переменные.

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

Объявление переменных

Для объявления переменных в Javascript используется var.

var myText; //undefined
 myText = "Hi!";
 alert(myText);

Сразу после объявления переменной ее значение равно undefined.

Можно при объявлении присвоить переменной значение:

var myText = "Hi!";

Также можно объявить несколько переменных в одном var:

var sum = 4 + 5,
    myText = "Hi!";

При присвоении значения var можно опустить, но лучше этого не делать.

Типы переменных

В JavaScript можно использовать строки:

var myText = "Hello !";

целые числа:

var myNumber = 10;

Дробные числа:

var pi = 3.14;

Логические значения:

var isBoolean = false;

Детали синтаксиса JavaScript

Комментарии

Комментарии в одной строке выделяются «//». Все, что идет после этих символов, считается комментарием.

Чтобы закомментировать несколько строк, нужно использовать «/*» чтобы обозначить начало комментария, и «*/» для обозначения конца комментария

/*
here is commented code
and it's also comment
*/

Разделение операторов

Для разделения операторов нужно использовать «;»

Желательно, но не обязательно, использовать пробелы для улучшения читаемости текста.

Работа со строками

var str = 4 + 5 + "7"

даст строковое значение «97» в str

var str2 = "7" + 4 + 5

даст строковое значение «745» в str2

Дело в том, что значение при сложении вычисляется последовательно  — слева направо. Когда складывается 2 числа — результатом становится число. Когда складывается строка и число, число воспринимается как строка и происходит объединение двух строк.

Перевод строки в число

Для перевода строки в число используются parseInt() и parseFloat()

Данные функции получают два аргумента. Первый — это строка, которая будет переведена в число и второй — основание системы счисления, которое будет использовано для перевода. Для трактования строки как десятичного числа, нужно использовать 10 в качестве второго аргумента

var myNumber = parseInt("345", 10);

Функции JavaScript

Функции в JavaScript объявляются следующим образом:

function myFunction() {
    Some JS code
}

Для возврата значения нужно использовать return:

function myMultiplication(paramOne, paramTwo) {
    return paramOne * paramTwo
}

Можно объявить «анонимную» функцию, опустив указание имени для функции.

Функцию можно передать как параметр в другую функцию, указав ее имя.

Объекты

Все в JavaScript является наследником Object.

Создание нового объекта

var person = new Object(); // создание объекта person

person.firstname = "Andrew"; // добавляем первый атрибут
person.lastname = "Peterson";// добавляем второй атрибут
person.getFullName = function() {// добавляем метод
     return this.firstname + " " + this.lastname;
}

Второй, более краткий вариант создания объекта

var person = { // создание объекта person
    firstname : "Andrew",
    lastname : "Peterson",
    getFullName : function() {
         return this.firstname + " " + this.lastname;
    }
}

Работа со свойствами объекта

var me = new Object();

me[«name»] = «Serg»;
me.age = 33;

Массивы  в JavaScript

Создание массива

var arr = new Array(11, "Hello!",  true); // Создание массива

Новый способ записи

var arr = [11, "Hello!",  true]; // Создание массива

Работа с массивами в JavaScript

Количество элементов в массиве

var length = arr.length; // 3

Добавление элементов в массив — push

arr.push("A new value");

Извлечение последнего элемента массива — pop

var lastValue = arr.pop();

 

Объединение массивов

var arr2 = [2, 3, 4];
var longArray = arr.concat(arr2); // Объединение двух массивов arr и arr2 в один longArray

Join — слияние всех элементов массива

var longString = arr.join(":") // "11:Hello!:true"

Сравнение и логические функции в JavaScript

Больше-меньше

var isTrue = 6 >= 5; // больше или равно

Равенство

var isFalse = 1 == 2; // равно
isTrue = 1 != 2; // неравно

var alsoTrue = "6" == 6;

Идентичность

var notIdentical = "3" === 3 // false, поскольку типы данных не совпадают
notIdentical = "3" !== 3 // true, поскольку типы данных не совпадают

Оператор IF

if (5 < 6) {
    alert("true!");
} else {
    alert("false!")
}

Оператор SWITCH

var lunch = prompt("What do you want for lunch?","Type your lunch choice here");

switch(lunch){
  case 'sandwich':
    console.log("Sure thing! One sandwich, coming up.");
    break;
  case 'soup':
    console.log("Got it! Tomato's my favorite.");
    break;
  case 'salad':
    console.log("Sounds good! How about a caesar salad?");
    break;
  case 'pie':
    console.log("Pie's not a meal!");
    break;
  default:
    console.log("Huh! I'm not sure what " + lunch + " is. How does a sandwich sound?");
}

Логическое AND — &&

if (1 == 1 && 2 == 2) {
    alert("true!");
}

Логическое OR — ||

if (1 == 1 || 2 == 3) {
    alert("true!");
}

Логическое NOT — !

if (!(1 == 1)) {
    alert("false!");
}

Циклы

FOR

for (var i = 0; i < 10; i = i + 1) {
    alert(i);
}

var names = [ "Sergey", "Andrey", "Petr" ];

for (var i = 0, len = names.length; i < len; i = i + 1) {
    alert(names[i]);
}

WHILE

while (true) { // Бесконечный цикл
    alert("This will never stop!");
}

var names = [ "Sergey", "Andrey", "Petr" ];

while (names.length > 0) {
    alert(names[i]);
}

DO WHILE

do {
    alert("This will never stop!");
} while (true) { // Бесконечный цикл

Строки

text = "Blah blah blah blah blah blah Eric \
blah blah blah Eric blah blah Eric blah blah \
blah blah blah blah blah Eric";

Substrings

Sometimes you don’t want to display the entire string, just a part of it. For example, in your Gmail inbox, you can set it to display the first 50 or so characters of each message so you can preview them. This preview is asubstring of the original string (the entire message).

Code:

"some word".substring(x, y) wherex is where you start chopping and yis where you finish chopping the original string.

The number part is a little strange. To select for the «he» in «hello», you would write this: "hello". substring(0, 2);

Think of there being a marker to the left of each character, like this: 0-h-1-e-2-l-3-l-4-o-5.

If you chop at 0 and again at 2 you are left with just he.

More examples:

1. First 3 letters of «Batman»
"Batman".substring(0,3)

2. From 4th to 6th letter of «laptop»
"laptop".substring(3,6)