Javascript

Для выполнения программ мы будем использовать nodejs. Создайте файл из примера ниже, сохраните его в файле test.js. Перейдите в консоль и выполните

node test.js

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

Программа на javascript - это последовательность инструкции. Инструкции разделяются точкой с запятой или начинают с разных строк. В состав инструкций могут входить выражения. Выражения возвращают значения. Например,

let r = 5.4;
let area = Math.PI * r**2;
console.log(area);

Первая и вторая инструкции объявляют переменные. Последняя печатает в консоль значение переменной.

По умолчанию инструкции выполняются по порядку расположения в тексте. Для изменения порядка выполнения используют инструкции контроля: ветвления, циклы, переходы.

Рассмотрим инструкции объявления, они объявляют или определяют переменные и функции. Они вводят имя которое будет использоваться позже и присваивают ему значение. В примере выше, в первой строке, мы имеем литерное высказывание 5.4, оно прямо вводит числовое значение. Во второй строке, с права от знака равно, находится высказывание, содержащее оператор умножения, возведение в степень и переменные. Ключевое слово let вводит изменяемую переменную. Ключевое слово const вводит неизменяемую переменную.

Числа

number- тип значений встроенный. Пример,

console.log("24 * 5 =", 24 * 5);
console.log("25 / 5 =", 25 / 5);
console.log("24 + 5 =", 24 + 5);
console.log("24 - 5 =", 24 - 5);
console.log("5 % 2 =", 5 % 2);
console.log("5 < 6", 5 < 6);
console.log("5 === 6", 5 === 6);
console.log("5 !== 6", 5 !== 6);

let x = parseFloat("3.14")//преобразуем строку текста в число
console.log(typeof x) // typeof возвращает тип значения

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

Строки

Встроенный тип значений - string. Для строковых литер можно использовать двойные кавычки, одинарные левые или правые кавычки. Пример,

let name = "Bob" //строковая литерал
console.log(`Hello, ${name}!`)//в строку подставляется значение переменной

Логический тип

В логическом типе всего два значения: ture, false. На них заданны операции: && (и), || (или), ! (отрицание). Пример,

let x = 5
console.log("x < 6 || x > 3 ", x < 6 || x > 3) 
console.log("!(x < 6) = ", !(x < 6))

Задание ветвления

Пример,

let x = 5
if (x < 0)
{
	console.log(`${x} - отрицательное.`)
}
esle if( x === 0)
{
	console.log(`${x} - ноль.`)
}
else
{
	console.log(`${x} - положительно.`)
}

Циклы

Пример,

for(let i = 0; i < 5;++)
{
	console.log(i)
}

Массивы

Элемент массива мы можем получить, указав в квадратных скобках индекс элемента. Нумерация элементов начинается с нуля. Свойство length - число элементов в массиве. Пример,

let l = [1, 5, "Bob", 6] //литерал массива
l.push(9)//Добавляет новый элемент в конец массива
for (let i = 0; i < l.length; i++)
{
	console.log(`l[${i}]=${l[i]}`)
}
//Более удобный способ обработки массива
for(const elem of l)
	console.log(elem);

l.reverse();//меняет порядок элементов
console.log(l);
let l2 = l.slice(1, 4)//создает новый массив с элементами с первого по 3 
console.log(l2)

Функции

console.log("f3(5) =", f3(5)); // Вызов функции.
function f3(x){return x * 3}; // Определение функции,
// такое определение может предшествовать вызову.
const f2 = function (x) { return x * 2}; // Определение функции
const add = (a, b) => {return a + b;} // Третий способ определения функциии
console.log("add(6,5)=",add(6,5))

Объекты

Объект состоит из пар ключ, значение. Чтобы получить значение свойства объекта, можно использовать точку, или квадратные скобки. В следующем примере мы создаём объект, используя литеру объекта.

let person = {name: "Лена", age: 18}//Создали объект
console.log("Привет, ", person.name, "!")
console.log("Привет, ", person["name"], "!")

Модули

Мы можем разбить наш код на отдельные файлы, как в примере ниже. Создадим файл help.mjs.

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

const speedOfLight = 3 * 10**8;

export {speedOfLight, add};

Создадим файл main.mjs

import {speedOfLight, add} from "./help.mjs"
console.log("add(4, 3) ", add(4,3))
console.log("скорость света =", speedOfLight);

Запуситм программу, выполнив

node main.mjs

Классы

Классы - удобный способ создавать объекты.

// Class
class Person
{
    constructor(name)
    {
        this.name = name
    }

    describe()
    {
        return 'Person named ' + this.name;
    }
}

const jane = new Person("Jane");
console.log(jane.describe())

Canvas

canvas - элемент html, мы будем рисовать на нём. Создайте папку canvas, перейдите в неё. Создайте в ней файл canvas.html.

<!doctype html>
<html>
	<body>
		<canvas width=300 height=300 id="canvas"></canvas>
		<script src="./js/main.js" type="module"></script>
	</body>
</html>

В папке создайте каталог js, в нем файл main.js.

fillRect(x, y, ширина, высота) рисует, закрашенный прямоугольник, верхний левый угол прямоугольника имеет координаты x, y. x - число пикселей вправо, y - число пикселей вниз от левого верхнего угла канваса.

Запустите http-server, выполнив команду http-server. Результат приведён ниже.

Следующий пример создаёт текст на canvas

ctx.font = `20px Arial`//размер шрифта 20 пикселей, шрифт Arial
ctx.fillStyle = 'blue' //цвет текста голубой
ctx.textAlign = 'center'//выравнивание по горизонтали
ctx.textBaseline = 'middle'//выравнивание по вертикали
ctx.fillText('Hello, World', 50, 70) // положение текста 50 пикселйе вправо, 70 вниз 

Ниже то, что мы получили

Нарисуем прямоугольный контур.

ctx.strokeStyle = 'yellow' //цвет контура жёлтый
ctx.lineWidth = 5//задаём толщину контура в 5 пикселей
ctx.strokeRect(10, 20, 50, 70)

Ниже то, что мы получили

Рисуем линии

ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.beginPath()//начало пути
ctx.moveTo(10, 10)//ставим карандаш в точку 10, 10 пикселей
ctx.lineTo(290, 10)//чертим прямую до точки 290 вправо и 10 вниз пикселей  
ctx.lineTo(10, 290)//чертим прямую до точки 10 вправо и 290 вниз пикселей  
ctx.stroke()//линия появляется на экране

Получаем.

Рассмотрим, как можно обработать нажатие на клавишу мышки.

canvas.addEventListener('click', drawRect);

function drawRect(event)
{
	ctx.fillStyle = 'red';
	ctx.fillRect(event.offsetX, event.offsetY, 5, 5);
}

Учебник по canvas вы можете посмотреть, например, здесь.

API браузера

Пример js кода: он изменяет цвет фона страницы, переменной name присваивает значение, введённое в поле с id name, выводит приветствие.

let body = document.querySelector("body");
let name = document.querySelector("#name")
let btnGreet = document.geurySelector("#btnGreet")

function greet(){
	alert("Hello, " + name.value);
	body.style.backgroundColor="aqua";
	}

btn.addEventListener('click', greet) 

Используем элемент html script, чтобы добавить код в веб странице. Код размещаем в конце страницы, так как элементы html используемые в коде должны быть созданы до выполнения кода.

AJAX

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

const nameInput = document.querySelector("#name")
const pOut = document.querySelector("#pOut")

async function search()
{

	let data = {"name": nameInput.value}

	let response = await fetch("/search",
		{
			method: "POST",
			headers:
			{
				"Content-Type": "application/json"
			},
			body: JSON.stringify(data)
		})

	let rows = await response.json()

	html = ''
	for (let row of rows)
	{
		html = html + row["name"] + "<br>"
	}
	pOut.innerHTML = html
}

nameInput.addEventListener("input", search)

На сервере запрос обрабатывает следующий код

@app.route("/search", methods=["POST"])
def search():
    response = json.loads(request.data)
    name = response["name"]
    if name:
        names = db.execute("select * from characters where name like :name", 
            name = name + "%")
    else:
        names = []
    return json.dumps(names)