JS-1

JS-1

JavaScript

JavaScript features

Променливи

var meaningOfLife = 42;       // typeof meaningOfLife = 'number'
var wantedGrade = 6.0;        // typeof wantedGrade = 'number'
var firstLine = "So long\n";  // typeof firstLine == 'string'
var secondLine = 'And thanks for all the fish!'; // no difference between ' and "
var happy = true;             // typeof happy = 'boolean'
var nothing;                  // typeof nothing = 'undefined'

Всичко останало - масиви, обекти, функции и тн - са обекти

Масиви

Индексирана последователност от елементи. Няма ограничение за хомогенност на елементите.

var fibonacci = [undefined, true, 1, 'two', 3.0, 5, 7];

alert(fibonacci[3]);          // 'two'
alert(fibonacci.length);      // 7
alert(fibonacci.indexOf(3));  // 4
alert(fibonacci.indexOf(4));  // -1
alert(fibonacci.slice(1, 3)); // [true, 1]

// push, pop, shift, unshift, sort are also available

// ES5 gives us forEach, map, filter, reduce etc

typeof fibonacci              // object
Array.isArray(fibonacci)      // true

fibonacci.splice(index, removeCount, item1, item2, ...) ¿

  • splice задава индекс от който да премахва removeCount елементи (ако е > 0) и добавя нови елементи (ако се подадат такива аргументи)

    console.log(fibonacci.splice(0, 1, false)); // [undefined]
console.log(fibonacci); // [false, true, 1, 'two', 3.0, 5, 7]
fibonacci.splice(2, 0, 'one');
console.log(fibonacci); // [false, true, 'one', 1, 'two', 3.0, 5, 7]
console.log(fibonacci.splice(3, 1)); // [1]
console.log(fibonacci); // [false, true, 'one', 'two', 3.0, 5, 7]

    Не се използва често, понеже мутира масива и работата с index-и е error prone, но е най-ефективният начин да се премахне елемент от масив

    Може да ползвате arr.filter(e => e !== item) ако искате да получите нов масив без съответни елементи без мутиране на оригиналния

    • Обекти (речници)

    Или още map, хешове, речници, асоциативни масиви и други. Съдържа двойки с ключ и стойност. Ключовете са низове.

    var person = {firstName: 'Chuck', lastName: 'Norris', powerLevel: 9001};

alert(person.firstName);    // Chuck
alert(person['lastName']);  // Norris

    Първият начин (с точката) е за предпочитане.

    Функции

    function add(a, b) {
  return a + b;
}

var add = function (a, b) {
  return a + b;
};

// ES6 arrow function - doesn't work in 13% of browsers
var add = (a, b) => a + b;

console.log(add(1, 2, 5));  // returns 3, ignores last argument

    Условни оператори

    if (cond) {
  ...
} else if (cond) {
  ...
} else {
  ...
}

isHappy ? 'smile' : 'frown';

switch (n) {
  case 1: ... break;
  case 2: ... break;
  default: ...
}

    Цикли

    while (condition) { ... }

do { ... } while (condition);

var cars = ['Audi', 'BMW', 'Mercedes-Benz', 'Opel', 'Porsche', 'Volkswagen'];

for (var i = 0; i < cars.length; i++) {
  console.log(cars[i]);
}

cars.forEach(function(car, index){
  console.log(car);
});

cars.forEach(car => console.log(car));

    Обхождане на речник

    var person = {firstName: 'John', lastName: 'Doe', age: 25};
var txt = '';
for (var key in person) {
  txt += person[key] + ' ';
}

console.log(txt); // John Doe 25
console.log(Object.values(person).join(' ')); // John Doe 25

Object.keys(person);    // ['firstName', 'lastName', 'age']
Object.values(person);  // ['John', 'Doe', 25]
Object.entries(person); // [ ['firstName', 'John'], ['lastName', 'Doe'], ['age', 25] ]

    JavaScript в HTML

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

    Атрибути на script тага:

    async vs defer attributes

    Глобални обекти в браузъра

    • Селектиране на елементи

    <h1 id="page-title">Selection</h1> <ul> <li class="food">Pizza</li> <li class="drink">Water</li> <li class="drink">Wine<li> <li class="food">Burger</li> </ul> 
    var title = document.getElementById('page-title');   // HTMLElement - only 1 element!
var items = document.getElementsByTagName('li');     // HTMLCollection
var foods = document.getElementsByClassName('food'); // HTMLCollection

foods[0].textContent += ' Hut';         // Pizza Hut
title.innerHTML += ' <em>example</em>'; // Selection <em>example</em>
console.log(title.textContent);         // Selection example

// ES5 - use any CSS selector
var water = document.querySelector('.drink');     // only water
var drinks = document.querySelectorAll('.drink'); // water and wine

    Работа с елементи

    // Create
var text = document.createTextNode('text node content');
var div = document.createElement('div');

// Add
div.appendChild(text);
document.body.appendChild(div);

// Delete
var list = document.getElementById('myList');
list.removeChild(list.childNodes[0]);

    Event handling

    Bubbling vs Capturing

    JSON

    AJAX

    AJAX - Demo

    function ajax(url, settings){
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){
    if (xhr.status == 200) {
      settings.success(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  };
  xhr.open(settings.method || 'GET', url, /* async */ true);
  xhr.send(settings.data || null);
}
var url = '../../blog/write-html-css-fast/index.html'; // same domain
var callback = function (text) {
  console.log(text);                    // do something with the data
};

ajax(url, {success: callback});

    Tricky notes

    Next time on W3Tech

    Задача 1

    Направете функция validate(), която да валидира следната форма:

    Ако има невалидно поле, то на страницата трябва да се появи съобщение за грешката и нищо да не се праща до сървъра.

    Ако данните са валидни и се опитаме да изпратим формата, тя трябва да се изпрати (post до register.php).

    Забележки:

    Полезни ресурси:

    Задача 2

    Използвайки ajax функцията от презентацията (или ваша модификация) искаме да изпращаме ajax request вместо нормалното изпращане на формата.

    За целта ще изпратим JSON стринг от типа {"username": "...", "password": "..."}, където сме взели съответните стойности с javascript.

    За да се уверите, че всичко работи - напишете си примерен register.php файл, където да разпакетирате данните от JSON към PHP асоциативен масив. След това можете да проверите дали масивът е наред чрез var_dump().

    Каква е идеята:

    Неща за търсене:

    Въпроси