Javascript

доступен в браузере. Инструменты разработчика F12

JavaScript vs ECMAScript - почитайте сами

Версии JavaScript. Язык развивается. Разные браузеры знают разные версии и возможности языка.

let x = 10 - это новая конструкция, чтобы ввести переменную, есть не везде. Переменная вводится как в Java, в текущем блоке. var x = 10 - поддерживают все, появилось вместе с языком. Вводит переменную на всю функцию.

читать про возможности на сайте MDN (источник) или Can I Use (удобный поиск)

Сейчас принято компилировать новый JS, который не понимают браузеры, в старый. Webpack одна из самых распространенных технологий, чтобы удобно программировать на современном JS.

Мы пишем на старом JS.

Отличия JS от Java

1. В программе ни в каком виде не указываются типы.

let x = 10 вместо int x = 10;

1. Отличие в функциях.

function f(a, b, c) {
    return a + b * c;
}

вводим функцию, никаких типов.

функции могут быть внутри функций:

function f(a) {
    function g(x) {
        return a + x;
    }
    console.log(g(10)); //аналог system.out.println();
}

Вызов f(5) - напечатает 15.

Функцией можно пользоваться до того места, где она определена. Но функция видна только в блоке, т.е. внутри фигурных скобок. Т.е. функция g не видна вне функции f.

1. Функции в JS это объекты первого рода, т.е. их можно хранить в переменных, возвращать из других функций.

let f = function(x) { return x + 1; } // функция безымянна. Но хранится в переменной f
let g = function(x) { return x * 2; }
let h;
if (...)
    h = f;
else
    h = g;
console.log(h(10)); //11 или 20 в зависимости от условия

function f(a) {
    return function(x) {
        return a + x;
    }
}

let t = f(1); //получили функцию, которая увеличивает аргумент на 1
console.log(t(10)); //11
console.log(t(2)(10)); //12

Задача про летающие шарики

Есть прямоугольник. В нем нарисованы кружки. Кружки летят по прямой, но отражаются от стенок прямоугольника.

let x = 40 let y = 50 let vx = 10 let vy = 15; //скорость по y let r = 7; //радиус const W = 400 const H = 350 //высота и ширина прямоугольника

Эти параметры меняются со временем. Постоянно меняются x и y, периодически меняются vx и vy в моменты отражений.

1. сначала нарисуйте прямоугольник и внутри него кружок с указанным радиусом и координатами.
2. Добавьте анимацию, пусть кружок едет со скоростью vx по x и vy по y. См. пример с прямоугольником, только там скорости одинаковые, обе SPEED.
3. Отражение.
4. попробуйте сами создать массив, чтобы шариков стало несколько, а в следующий раз обсудим вместе.

Отражение:

внутри step() проверка. if (x + r > H) vy = -vy. Добавьте еще 3 таких проверки для всех сторон прямоугольника.

итого, step - это 4 проверки и сдвиг x. x = x + ??? * vx, где ??? зависит от времени.

Позже мы сделаем формулу чуть лучше, потому что иначе шарики чуть заходят за стороны.