Форум программистов, компьютерный форум, киберфорум
Javascript
Форум программистов и сисадминов Киберфорум > Блоги > javascript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
Старый
Рейтинг: 5.00. Голосов: 1.
Рисование геометрических фигур на плоскости с помощью Canvas API и JavaScript ES5
Запись от 8Observer8 размещена 27.04.2020 в 15:06 / Блог 8Observer8
Показов 2477 Комментарии 0
Метки canvas, javascript
Содержание блога

Скачать исходники: triangle-square-disk-canvas2d-es5.rar (12.5 Кб)
Запуск в песочнице и просмотр кода: https://plnkr.co/edit/XqVPPW2HKQKayvUM?preview

index.html

PHP/HTML
1
2
3
4
5
6
7
8

<!doctype html>
 
<html>
    <body>
        <canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
 
        <script>
            var canvas
...
Старый
Рейтинг: 5.00. Голосов: 1.
Движение ромба зажатыми левой и правой кнопками мыши. WebGL 1.0, JavaScript ES5
Запись от 8Observer8 размещена 16.04.2020 в 17:22 / Блог 8Observer8
Показов 2047 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

Cкачать исходники: move-rhombus-by-mouse-webgl10-es5.zip Запустить в песочнице по клику. Чтобы отображался русский шрифт нужно локальную версию запускать с локального HTTP сервера, а не двойным кликом по index.html

index.html

PHP/HTML
1
2
3
4
5
6

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Move Rhombus by Mouse. WebGL 1.0, JavaScript</title>
...
Старый
Рейтинг: 5.00. Голосов: 1.
Работают unit-тесты, они в деле: 1. Найти количество отрицательных элементов матрицы.
Запись от 8Observer8 размещена 15.04.2020 в 22:03 / Блог 8Observer8
Показов 187 Комментарии 0
Метки javascript, unit-test
Это начало моего ответа на вопрос. Не люблю споры и холивары, потому отвечу в своём блоге с закрытыми комментариями. Мне мой ответ понравился, поэтому сохраню его в блоге. Скорее всего, я его буду дополнять. Может кому-то пригодится.

Цитата Сообщение от Forevers Посмотреть сообщение
1. Найти количество отрицательных элементов матрицы.
В этом первом пункте задания возможны ситуации:
  • Входная матрица пуста, поэтому выбрасывается исключение с текстом исключения:
...
Старый
Рейтинг: 5.00. Голосов: 2.
Примеры с 2D/3D графикой на OpenGL/WebGL, C#/OpenTK, JavaScript, TypeScript, Python и C++
Запись от 8Observer8 размещена 29.02.2020 в 23:36 / Блог 8Observer8. Обновил(-а) 8Observer8 07.12.2025 в 15:36
Показов 20555 Комментарии 57
Содержание блога

Здесь ссылки на OpenGL и WebGL примеры на нескольких языках. Есть несколько примеров на графических API: Canvas 2D (JS), Pixi.js, Phaser, Three.js, SDL, SFML, Pygame и т.д., но в основном - это OpenGL и WebGL. Примеры на Three.js, Babylon.js, Phaser, Pixi.js в теме: Проекты на Three.js и Babylon.js

Серия базовых примеров:

Проще всего начать...
Старый
Рейтинг: 5.00. Голосов: 1.
Создание простейшего чата с клиентом на консольном C# и с сервером на Node.js/socket.io/JavaScript. Бонус - WPF-клиент
Запись от 8Observer8 размещена 12.02.2020 в 17:04 / Блог 8Observer8
Показов 3722 Комментарии 0
Содержание блога

Бонус - клиент на WPF (файл server.js лежит в папке Server). Далее описан консольный проект на C# (клиент) и сервер на Node.js/socket.io/JavaScript.

Создаём пустую папку для сервера. Заходим в папку через консоль. Вводим команды:

npm init -y
npm i socket.io shortid

Создаём файл socket.js и копируем в него код, я написал комментарии к каждой строке:

JavaScript
1

// Подключаем нужные библиотеки
...
Старый
Рейтинг: 5.00. Голосов: 1.
Заливаем холст заданным цветом на WebGL 1.0 и JavaScript.
Запись от 8Observer8 размещена 20.10.2019 в 14:50 / Блог 8Observer8
Показов 1228 Комментарии 0
Метки javascript, webgl
Это одно из самых коротких приложений на WebGL 1.0 и JavaScript, которое определяет цвет фона холста и закрашивает этим цветом холст. Вы можете запустить это приложение в песочнице (на Plunker'е), посмотреть результат, прочитать код, сделать Fork, что-то закодить, сохранить, послать ссылку друзьям: https://next.plnkr.co/edit/nGf... ml&preview А главное, что такое приложение будет кроссплатформенным, то есть оно...
Старый
Рейтинг: 5.00. Голосов: 1.
Определение клика мыши по объекту на JavaScript, TypeScript, WebGL, C# и OpenGL 3.1
Запись от 8Observer8 размещена 14.06.2019 в 01:43 / Блог 8Observer8
Показов 4379 Комментарии 2
Содержание блога

Советую книгу на русском из первого сообщения темы: Небольшие примеры на WebGL. Лучше читать сразу на английском, он в книге довольно простой: WebGL Programming Guide. Matsuda & Lea. По предыдущим ссылкам можно скачать архив с примерами к книге и запустить примеры в песочнице JSFiddle (через VPN). В книге используется самописная библиотека для работы с векторами и матрицами. Лучше взять намного более продвинутую glMatrix, которая всю необходимую...
Старый
Рейтинг: 5.00. Голосов: 1.
Specs for Node.js Calculator using Jasmine and JavaScript 5
Запись от 8Observer8 размещена 24.02.2019 в 20:37 / Блог 8Observer8
Показов 1289 Комментарии 0
Метки javascript, node.js
Blog content

Let's write an executable documentation for server side calculator.

Specifications:
  • "Add(a, b)" method must to sum positive numbers. Specification name: Add_SumPositiveNumbers_ReturnsSum
  • "Sub(a, b)" method must to subtract positive numbers. Specification name: Sub_SubtractPositiveNumbers_ReturnsSub

Instruction:
  • Create the "calculator-nodejs-jasmine-es5" folder
  • Run these commands to install Jasmine locally:
...
Старый
Рейтинг: 5.00. Голосов: 1.
Specifications for Calculator using Jasmine and JavaScript 5
Запись от 8Observer8 размещена 23.02.2019 в 15:14 / Блог 8Observer8
Показов 1273 Комментарии 0
Метки javascript
Blog content

Specifications:
  • "Add(a, b)" method must to sum positive numbers. Specification name: Add_SumPositiveNumbers_ReturnsSum
  • "Sub(a, b)" method must to subtract positive numbers. Specification name: Sub_SubtractPositiveNumbers_ReturnsSub

Source Code: https://github.com/8Observer8/... asmine-es5

Instruction:
  • Create the "calculator-jasmine-es5" folder
  • Search in the Internet: cdn jasmine
  • Create the "SpecRunner.html
...
Старый
Рейтинг: 5.00. Голосов: 1.
Deploying Game Server on Heroku
Запись от 8Observer8 размещена 17.02.2019 в 20:58 / Блог 8Observer8
Показов 1493 Комментарии 0
Метки gamedev, heroku, javascript
Blog content

Heroku is a free hosting. Let's deploy the application from this instruction: Emit and Broadcast JSON using Socket.io and JS/ES5

You need to register on https://heroku.com/ and complete this official instruction: Getting Started on Heroku with Node.js

Go here: https://dashboard.heroku.com/apps and create a new application. For this you need to press "New" button in right top corner. Select "create new app". I created a new application...
Старый
Рейтинг: 5.00. Голосов: 1.
Emit and Broadcast JSON using Socket.io and JS/ES5
Запись от 8Observer8 размещена 17.02.2019 в 18:36 / Блог 8Observer8
Показов 1352 Комментарии 1
Метки javascript, json, socket.io
Blog content

I will show differences between "emit" and "broadcast" on server side.

In short:
  • "emit" sends JSON data to a connected client
  • "broadcast" sends JSON data to every client except the connected client

At first time create a connection between the server and the client using this instruction: 101. Socket.io Connection, JS/ES5

We have this callback function in "app.js":

JavaScript
1

io.sockets.on("connection",
...
Старый
Рейтинг: 5.00. Голосов: 1.
Socket.io Connection, JS/ES5
Запись от 8Observer8 размещена 15.02.2019 в 17:59 / Блог 8Observer8
Показов 1680 Комментарии 1
Метки javascript, socket.io
Blog content

I will try to explain a process in step-by-step how to prepare server but it will be good if you will watch this video tutorial in parallel: Setup & Sending Files. Node.js Tutorial Guide
Youtube


You need to download and install Node.js: https://nodejs.org/en/download/

At first test let's create a very simple server script locally that will write in the console terminal*"client connected" when client will be connected to...
Старый
Рейтинг: 5.00. Голосов: 1.
How to write a prototype of the Snake Game using JavaScript/ES5, HTML5 Canvas API
Запись от 8Observer8 размещена 06.02.2019 в 21:49 / Блог 8Observer8
Показов 1558 Комментарии 0
Метки canvas, html, javascript
Blog content

Let's make a very simple classic snake game. For example, if we have a snake head with 10x10 pixels then we will move our snake by a step with 10 pixels using timer.

Create a "index.html" file with a canvas element and set the size for the canvas element:

PHP/HTML
1
2
3
4
5
6
7
8

<!DOCTYPE html>
 
<head>
    <title>Snake</title>
</head>
 
<body>
    <canvas width="200" height="200"
...
Старый
Рейтинг: 5.00. Голосов: 1.
How to improve workflow, productive of coding and code quality of our web Applications and Games
Запись от 8Observer8 размещена 05.12.2018 в 12:05 / Блог 8Observer8
Показов 1439 Комментарии 0
Метки javascript, typescript
Blog content

Hi. I know how to improve workflow, productive of coding and code quality of our web Applications and Games. We can write specifications by Jasmine framework. I wrote a simple example how to write specs for Kata from CodeWars in TypeScript. It may be usefull for JS-developers too. See my short description and project on GitHub. This is an example how to run Jasmine Unit Tests in TS on Playground. I will rewrite my Snake Game to 3D with Unit Tests. I will give you a link...
Старый
Рейтинг: 5.00. Голосов: 2.
Пишем JSFuck-транслятор
Запись от diadiavova размещена 04.06.2018 в 01:23
Показов 4685 Комментарии 0
Метки javascript, jsfuck
  1. О чем пойдет речь
  2. Базовые понятия
  3. Приступим к написанию кода
  4. Дополним базовый словарь
  5. Работа с функциями
  6. Использование encodeURI вместо escape
  7. Несколько мыслей по поводу оптимизации вывода
  8. Оптимизация работы с fromCharCode
  9. Немного тестов
О чем пойдет речь

Для начала цитата из Википедии
JSFuck is an esoteric programming style of JavaScript, where code is written using only six characters: [,], (, ), !, and +. The name is derived from Brainfuck, an esoteric
...
Аватар для diadiavova
Старый
Игра точки Java Script на Canvas
Запись от Red_Pain размещена 19.05.2018 в 22:46
Показов 2236 Комментарии 0
Метки gamedev, games, javascript
Игра точки на Java Script, вопрос как реализовать закраску поля, если вокруг выделены все точки одного цвета.
Заранее спасибо, код прилагается.
JavaScript
1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
 
<body>
 
<canvas  id="my_canvas" width= 520px  height="520px" style="display:block;
...
Старый
Рейтинг: 2.50. Голосов: 2.
И снова музыка VK
Запись от diadiavova размещена 07.11.2017 в 13:09
Показов 7863 Комментарии 0
  1. Предварительные замечания
  2. Получение данных о треке
  3. Получение прямой ссылки
  4. Скрипт для Tampermonkey
Предварительные замечания

На тему скачивания музыки из социальной сети "В контакте" я уже писал ранее, но с тех пор кое-что изменилось, так что скрипты, актуальные для того времени - больше не работают. Мало того, "вконтактик"...
Аватар для diadiavova
Старый
Портирование примеров на C#/OpenGL/OpenTK с JS/WebGL из книги Коичи Мацуды и Роджера Ли
Запись от 8Observer8 размещена 10.03.2017 в 07:12 / Блог 8Observer8
Показов 1609 Комментарии 0
Метки c#, javascript, opengl, opentk, webgl
Содержание блога

Нахожусь в процессе портирования примеров на C#/OpenGL/OpenTK из книги: WebGL. Программирование трехмерной графики

К настоящему моменту портировал все примеры из второй и третьей главы: Ch02Ch03.rar

Оригинальные примеры можно скачать одним архивом с официального сайта: https://sites.google.com/site/webglbook/

Примеры этих глав перенёс на jsfiddle.net:...
Старый
Рейтинг: 5.00. Голосов: 1.
Несколько мыслей об HTA
Запись от diadiavova размещена 03.03.2017 в 13:49
Показов 12942 Комментарии 0
  1. Об HTML-приложениях.
  2. Краткое сравнение или почему HTA выглядит привлекательно
  3. В поисках утраченного диалога
  4. Не оставлять же все в таком виде
  5. А нельзя ли сделать поудобнее?
  6. Попробуем что-нибудь запустить
  7. Заключение
Об HTML-приложениях.

Клиентские Web-технологии (я сейчас говорю в первую очередь о связке HTM/JavaScript/CSS) уже давно вышли за пределы той ниши, которая была им...
Аватар для diadiavova
Старый
Рейтинг: 5.00. Голосов: 1.
Плазмоиды в Plasma5
Запись от Wyn размещена 04.02.2017 в 06:00
Показов 9881 Комментарии 0
Метки javascript, kde, linux, plasmoid, qml
Маленький очерк о плазмоидах и Plasma5.

Довелось мне написать плазмоид. Скажу сразу, информации по этому поводу нормальной не найдёшь, а та что есть - скорее относится ко временам KDE4. Надеюсь данный очерк вдохновит других людей на написание собственных плазмоидов и избавит их от скакания по ухабам, которые пришлось пережить мне.

Начну пожалуй с материалов, которые представлены KDE.
Development/Tutorials/Plasma5/QML2/GettingStarted предоставляет...
Аватар для Wyn
Wyn
Старый
Рейтинг: 5.00. Голосов: 4.
Анимация летучих мышей на pixi.js
Запись от 8Observer8 размещена 12.01.2017 в 18:16 / Блог 8Observer8
Показов 6261 Комментарии 3
Метки javascript
Содержание блога

Пошаговое создание демки: https://www.cyberforum.ru/java... 96033.html

Песочница: https://plnkr.co/edit/VfaQojVk... ?p=preview

Скачать исходники (в исходниках можно закомментировать эту строку, чтобы мыши не исчезли через 5 секунд: setTimeout(finishAnimation, 5000);)

Описание. Летущие мыши летают по экрану, отскакивают от стенок.

style.css
CSS
1

        html, body {
...
Старый
Рейтинг: 5.00. Голосов: 1.
Книги по графике: HTML5 Canvas, WebGL, ThreeJS и Phaser
Запись от 8Observer8 размещена 13.09.2016 в 09:05 / Блог 8Observer8
Показов 17660 Комментарии 0
Содержание блога

На русском по WebGL:
  1. 2015 - WebGL. Программирование трехмерной графики - Коичи Мацуда, Роджер Ли -> описание -> исходники

На русском по Canvas
  1. 2016 - JavaScript для детей. Самоучитель по программированию -> описание

На английском по Canvas и WebGL:
  1. 2011 - 11 - Foundation HTML5 Animation with JavaScript - Billy Lamberta, Keith Peters -> description and source code
  2. 2012 - 05 - Core HTML5 Canvas Graphics, Animation, and Game Development
...
Старый
Полезности QML
Запись от Wyn размещена 29.04.2016 в 15:21
Показов 3429 Комментарии 0
Метки c++, javascript, qt qml
Общий QML

Оглавление
  1. Основы
    1. Правила QML
    2. Свойства и соединения
    3. Динамическое создание объектов
    4. JavaScript
    5. Перевод приложения
  2. Взаимодействие между QML и C++
    1. Основы
      1. Нерегистрируемые в QML объекты
      2. Регистрируемые в QML объекты
    2. Реализация специфичных для QML типов и аттрибутов
      1. Прикреплённые объекты и аннотации
      2. Модификаторы свойств
      3. Определение свойства по-умолчанию для QML-объектов в С++
      4. Получение уведомлений об инициализации объекта
  3. Рекомедации
...
Аватар для Wyn
Wyn
Старый
Взаимодействие между QML и C++
Запись от Wyn размещена 29.04.2016 в 15:12
Показов 7634 Комментарии 0
Метки c++, c++ qt, javascript, qt qml
Общий QML

Оглавление
  1. Основы
    1. Правила QML
    2. Свойства и соединения
    3. Динамическое создание объектов
    4. JavaScript
    5. Перевод приложения
  2. Взаимодействие между QML и C++
    1. Основы
      1. Нерегистрируемые в QML объекты
      2. Регистрируемые в QML объекты
    2. Реализация специфичных для QML типов и аттрибутов
      1. Прикреплённые объекты и аннотации
      2. Модификаторы свойств
      3. Определение свойства по-умолчанию для QML-объектов в С++
      4. Получение уведомлений об инициализации объекта
  3. Рекомедации
...
Аватар для Wyn
Wyn
Старый
Рейтинг: 5.00. Голосов: 1.
Рекомендации по QML
Запись от Wyn размещена 29.04.2016 в 15:04
Показов 9714 Комментарии 0
Общий QML

Оглавление
  1. Основы
    1. Правила QML
    2. Свойства и соединения
    3. Динамическое создание объектов
    4. JavaScript
    5. Перевод приложения
  2. Взаимодействие между QML и C++
    1. Основы
      1. Нерегистрируемые в QML объекты
      2. Регистрируемые в QML объекты
    2. Реализация специфичных для QML типов и аттрибутов
      1. Прикреплённые объекты и аннотации
      2. Модификаторы свойств
      3. Определение свойства по-умолчанию для QML-объектов в С++
      4. Получение уведомлений об инициализации объекта
  3. Рекомедации
...
Аватар для Wyn
Wyn
Старый
Рейтинг: 4.67. Голосов: 3.
Общий QML
Запись от Wyn размещена 15.04.2016 в 14:30
Показов 8161 Комментарии 10
Метки javascript, qml
Данный цикл статей представляет собой частично FAQ, частично шпаргалку различных костылей и описаний подводных камней, встречаемых при работе с QML. В данную статью постепенно будут заноситься вся подобная платформонезависимая информация о QML. Для специфичных знаний о конкретных платформах - PC, Android и т.д. будут созданы отдельные статьи, на которые будет дана ссылка в конце документа.

Любая конструктивная критика, пожелания и отзывы - приветствуются. Сообщения по поводу...
Аватар для Wyn
Wyn
Старый
CustomButtons часть 9-я. Код, сохранение параметров и отедльные приложения.
Запись от diadiavova размещена 31.03.2016 в 11:43
Показов 3045 Комментарии 0
  1. Структура кода
  2. Кнопки с настраиваемыми параметрами.
  3. Создание отдельного приложения для тестирования инструментов
  4. Кнопки с самомодифицирующимся кодом
Структура кода

Оверлей является наиболее удобным механизмом создания кнопок, вносящих изменение в структуру интерфейса. Тем не менее, используя оверлеи, надо понимать некоторые нюансы их...
Аватар для diadiavova
Старый
CustomButtons часть 7-я. Еще пара слов о GreaseMonkey и букмарклетах.
Запись от diadiavova размещена 17.03.2016 в 11:18
Показов 3259 Комментарии 0
  1. Фильтрация элементов меню в зависимости от адреса страницы
  2. Выполнение скрипта при загрузке страницы
  3. Работа с закладками
Фильтрация элементов меню в зависимости от адреса страницы

В GreaseMonkey есть такая удобная штука: команды скриптов в соответствующем меню отображаются только на тех страницах для которых одни предназначались. Это позволяет не...
Аватар для diadiavova
Старый
CustomButtons часть 6-я. Генерация текста.
Запись от diadiavova размещена 13.03.2016 в 14:23
Показов 2754 Комментарии 0
  1. Генерация текста из шаблонов
  2. Преобразование страницы с помощью XSLT
То, что будет описано в этой статье не относится исключительно к CustomButtons и платформе Mozilla, тем не менее при работе с этим расширением может оказаться полезным.
Генерация текста из шаблонов

Создание HTML-кода для отображения выходных данных и создания диалоговых окон может оказаться процессом достаточно...
Аватар для diadiavova
4 из 5 « 123 4 5 »
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
 Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru