Эта тема надеюсь многим помогла.
|
Всем привет!
Нужна помощь, казалось бы, в элементарной штуке. Упёрся в вот в это: var m; var mirror = []; var comb = [1,0,0]; mirror[0] = comb; for(var x = 0; x < 1; x++) { mirror[0][x] = comb[-1]; //m = comb[-1]; } alert(comb[0]); //undefined В общем, впервые столкнулся с тем, что переопределяется переменная (массив), находящаяся справа. Это дополнительный вопрос: как такое возможно? Если внутри цикла выполнить вторую строку, то переопределения элемента массива comb не происходит, то есть работает как полагается. Следовательно, на правую часть каким-то образом влияет многомерный массив слева... Мне нужно переопределить элемент многомерного массива значением из обычного массива. Основной вопрос: как, сохранив основную идею скрипта, избежать переопределения массива справа? Буду признателен за помощь. |
vitoff, а откуда у массива свойство -1? Оно и выдаёт undefined.
|
vitoff, Массив в javascript (да и почти везде) передается по ссылке, не по значению.
То есть технически в результате такой конструкции var comb = [1,0,0]; mirror[0] = comb; mirror - это не просто какой-то отдельный массив [[1,0,0]] Это [ссылка на массив comb]; То есть массив, первым элементом которого является та самая штука, которую вы присвоили, сама переменная, а не значение этой штуки. Более-менее ясно? Это кажется одна из вещей часто путающих новичков в программировании |
Цитата:
Цитата:
Просто раньше с таким не сталкивался, но припоминаю какую-то таблицу связей "переменная-значение". И если я правильно понимаю, то в моём случае mirror[0] не содержал своего значения, а была установлена связь с чужим значением, то есть с comb. Верно? И если верно, то может дадите идею, как это можно обойти, то есть как mirror[0] передать значение, а не связь? Цитата:
|
Цитата:
mirror[0] = comb.slice(); |
vitoff,
Цитата:
Цитата:
Цитата:
Подробнее смотри по ссылке выше. При непонимании можно попробовать прочитать весь раздел сначала Как обойти сказал Рони. Этой строчкой он создает копию массива и присваивает вашей переменной ее. (Однако нужно понимать что если элементами копируемого массива являются ссылки, то их эта штука тоже скопирует). |
Цитата:
var arr = [1,2, [3,4,5]], copy_arr = JSON.parse(JSON.stringify(arr)); arr[2][0] = 99999999; alert(arr); alert(copy_arr); |
Понимать что будет в результате достаточно, грузиться разными способами клонирования объекта и их отличием не надо (пока) =)
|
В общем, свою проблему я решил. Всех, благодарю за помощь.
А эту статью тоже теперь рекомендую новичкам, что бы не попадали в такие ситуации: Цитата:
|
ситуация такого рода...
пытаюсь загрузить страницу в ифраме, а страница грузитса родительском окне. я так понел импортной стренице стоит скрипт которий проверяет находитса ли он в ифраме или нет.. как то можно обойти ? |
karipetrenko, в современном браузере может помочь sandbox, если на конечном сайте нет дополнительных проверок. Но вообще ифреймить того, кто не хочет ифреймиться - плохо.
|
ситуация такого рода...
пытаюсь загрузить страницу в ифраме, а страница грузитса родительском окне. я так понел импортной стренице стоит скрипт которий проверяет находитса ли он в ифраме или нет.. как то можно обойти ? |
Цитата:
|
Как отсортировать числовой массив? Как отсортировать массив объектов по нескольким полям?
|
|
Gozar, как реализовать вывод модального окна с вопросом, если клиент закрывает страницу до 5 секунд и до 2 страниц просмотра?
|
https://agroum.ru/catalog/generatory-elektrostancii/
Можно ли здесь организовать вывод модального окна, которое будет ловить посетителя ? |
Как задать свой вопрос?
Киньте ссылку, чтобы я мог задать свой вопрос!
Нигде не нашёл этого... :help: |
|
Всем привет!
Есть несколько мелких вопросов: 1. Почему счетчик, вызванный первым способом, работает корректно, а вторым - нет? let counter = () => { let i = 0; return () => i++; }; let cnt = counter(); console.log(cnt(), cnt(), cnt()); // 0 1 2 console.log((counter())(), (counter())(), (counter())()); // 0 0 0 2. Какой из этих двух вариантов реализации суммирующей функции лучше (выразительнее и быстрее)? let sum = (...arr) => { if (arr.every(item => typeof(item) === "number")) return arr.reduce((acc, cur) => acc + cur, 0) else throw new Error("wrong type"); }; let sum2 = (...arr) => arr.reduce((acc, cur) => { if (typeof(cur) === "number") return acc + cur; else throw new Error("wrong type"); }, 0); 3. Как вообще работает этот код? console.log(20e-1["toString"](2)); // 10 |
1. Во втором случае создаются и сразу вызываются три разных счётчика. Естественно каждый из них находится на нуле.
2. Второй, очевидно: два полных перебора массива против одного. Единственное что else можно убрать, return всё равно прерывает дальнейшее выполнение в случае успеха if. 3. NeX - экспоненциальная запись числа, равносильно: N умножить на 10 в степени X. (т.е. в данном случае: 20 * 10 ** -1 == 2) O["x"]() - вызов метода x объекта O. (отличается от O.x() только тем, что можно использовать строку). N.toString(base) - метод приводящий число N к строке в base системе счисления. (в данном случае двоичной: 2 == 102 ) |
1. Почему не получается выбрать DOM элемент плеера vimeo?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1 shrink-to-fit=no"> <title>JS</title> </head> <body> <iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0"></iframe> <script src="https://player.vimeo.com/api/player.js"></script> <script> let bar = document.querySelector(".play-bar"); // выбор полосы воспроизведения console.log(bar); // null </script> </body> </html> 2. Есть сайт, у которого на первой странице ссылка на вторую, а на второй - кнопка. Можно ли ввести в консоль на первой странице такой скрипт, чтобы сработал переход по ссылке, а потом клик по кнопке? Нерабочий вариант: let link = document.querySelector("a"); setTimeout(() => { let btn = document.querySelector("button"); btn.click(); }, 5000); link.click(); |
1. iframe - отдельный полноценный документ. В текущем документе существует как элемент только сам iframe. Вам нужно лезть внутрь:
document.querySelector("iframe").onload = function(){ //ждём пока загрузится let bar = this.contentWindow.document.querySelector(".play-bar"); // выбор полосы воспроизведения console.log(bar); }Но работать это будет только если данный код используется под доменом "vimeo.com" или vimeo посылает серверные разрешающие заголовки. В обычном случае это работать не будет: ограничения безопасности. Скорее всего у vimeo есть откртый api для управления. 2. Это возможно при соблюдении двух условий: а) Как и в предыдущем случае, обе страницы должны быть под одним доменом, либо вторая должна посылать рзрешающие заголовки. б) Ссылку открываем в новой вкладке\окне. var win = window.open(link.href); win.onload=function(){ let btn = win.document.querySelector("button"); btn.click(); } |
Пишу библиотеку для работы с классами ES5. Не знаю, как задать имя функции через аргумент метода.
function Classes() { this.createClass = function(className, keys) { this[className] = function(...values) { // здесь как-то надо указать className в качестве имени функции keys.map(key => this[key] = values[keys.indexOf(key)]); }; return this; }; } let classes = new Classes(); classes.createClass("Test", ["a", "b"]); let test = new classes.Test(1, 2); console.log(test); // (anonymous function) {a: 1, b: 2} вместо Test {a: 1, b: 2} Нашел подходящий способ с использованием new Function(), однако не могу в нем разобраться: function renameFunction(name, fn) { return (new Function(`return function (call) { return function ${name} () { return call(this, arguments) }; };`)())(Function.apply.bind(fn)); // здесь какая-то магия со сменой контекста }; let Book = renameFunction("Book", function (title) { this.title = title; }); let book = new Book("Cookbook"); console.log(book); Автор примера выше лихо завернул, можно проще: function rename(name, prop) { return new Function(`return function ${name} (val) { this.${prop} = val; // сначала писал this[${prop}], но это не работало }`); } let Test = rename("Test", "type")(); let test = new Test("js"); console.log(test); // Test {type: "js"} |
Привязка к <button> клавитуры hotkeys
case "w":alert('текст сообщения!');break; без проблем работает
как привязать событие на клик <button id="up">▲</button> по аналогии с нажатием мышью ? Вот пример моего html <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Р РѕР±РѕС‚</title> <link rel="stylesheet" href="script.css"> <script src="/jquery.js"></script> <script src="/script.js"></script> </head> <body> <div id="wrapper"> <button id="up">▲</button> <button id="left">◄</button> <button id="right">►</button> <button id="down">▼</button> </div> </body> <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script> <script type="text/javascript"> hotkeys('w,s,a,d', function(event,handler) { switch(handler.key){ case "w":document.getElementById('up').click();break; case "s":document.getElementById('down').click();break; case "a":document.getElementById('left').click();break; case "d":document.getElementById('down').click();break; } }); </script> </html> пример script.js var robot = { ports: { up: 6, right: 13, left: 19, down: 26 }, ready: function() { console.log('started'); $('#up, #right, #left, #right, #down').on({ mousedown: robot.start, mouseup: robot.end }); }, start: function() { robot.send(this.id, 1); }, end: function() { robot.send(this.id, 0); }, send: function(port, value) { $.ajax({ type: 'POST', url: '/GPIO/' + robot.ports[port] + '/value/' + value }); } }; $(document).ready(robot.ready); |
Кодер Кой-Команд
<html><head> <title>Koyaanisqatsi Instructions Encoder</title> <style> body { font-size:2em; } input { font-size:1em; width:90%; } </style> <script> function parse_vector(text) { var i, j; var prd = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; var ofs = 0, sign = 1, scan = 0, mode = 0; var codes = [], code, parts, part; var uses, used = 0, using, usings = [], base; if(text.match(/[0-7_]+#/)) mode = +(text.replace(/0/g, "8").replace(/_/g, "9").match(/(\d+)/)[1]), parts = text.replace(/[0-7_]+#/, "").match(/(D\d)|(\+\d*D\d)|([-+]\d+)/gi); else parts = text.match(/(D\d)|(\+\d*\*?D\d)|([-+]?\d+)/gi); if(parts) { if(parts[0].match(/^D\d$/i)) base = +(parts[0].substr(-1)); else if(parts[0].match(/[-+]\d+/)) ofs = +(parts[0].substr(1)), base = 9; for(part of parts) { if(part.match(/\+\d*D\d/i)) { prd[+(part.substr(-1))] += isFinite(parseInt(part.substr(1))) ? parseInt(part.substr(1)) : 1; } else if(part.match(/[-+]\d+/)) { if(part.match(/-\d+/)) sign = -1; ofs = +(part.substr(1)); } } for(i = 0; i <= 9; ++ i) { j = -1; while((prd[i] >> (j + 1)) > 0) ++ j; if(scan < j) scan = j; } usings.push(base); while(scan >= 0) { uses = 0; using = []; i = usings.pop(); code = []; if((prd[i] >> scan) > 0) { prd[i] -= 1 << scan; uses |= 1 << i; code.push(i); if(scan > 0 && ((prd[i] >> (scan - 1)) & 1) > 0) using.push(String(i)); } for(i = 0; i <= 9; ++ i) { if((prd[i] >> scan) > 0) { uses |= 1 << i; code.push(String(i)); if(scan > 0 && ((prd[i] >> (scan - 1)) & 1) > 0) using.push(i); } } if((used & uses) == 0) codes.push(String(base)); codes = codes.concat(code); for(i = 0; i <= 9; ++ i) { if((prd[i] >> scan) > 0) prd[i] -= 1 << scan; } -- scan; used = uses; usings = [base].concat(using); } } i = codes.length; while(-- i >= 0) codes[i] += String(ofs % 10), ofs = (ofs / 10) | 0; while(ofs > 0) codes.unshift(base + String(ofs % 10)), ofs = (ofs / 10) | 0; if(sign < 0) codes.unshift(base + "0"); if(typeof mode != "number") mode = mode ? Number(mode[1]) : 0; while(mode > 0) codes.unshift((mode % 10) + "0", (mode % 10) + "0"), mode = (mode / 10) | 0; return codes.join(" "); } function encode(el) { var alu = { ADD:10, ADC:10, INC:10, DEC:11, SBB:11, SUB:11, AND:12, CLR:12, CON:12, DIS:13, OR:13, SET:13, EOR:14, NOT:14, XOR:14, FOR:15, MOV:15 }; var rex = /(?<Label>[^:;"'`\s]*(?::))?(?:\s)*(?<Instruction>[A-Z]*)(?<Junk>[\d_]*)(?:\s*)(?<Operand1>[^\s,;"'`]*)(?:[,\s]*)?(?<Operand2>[^\s,;"'`]*)?(?:[,\s]*)?(?<Operand3>[^\s,;"'`]*)(?:[,\s]*)?(?:(?:("(?:\\.|.)*?")|('(?:\\.|.)*?')|(`(?:\\.|.)*?`)|[^;"'`]*)*)*(\.*)/i; var part = rex.exec(el.value); var command = (part.groups.Instruction + " " + part.groups.Operand1 + (part[4] ? "," + part[4] + (part[5] ? "," + part[5] : "") : "")).toUpperCase(); var arg = []; var inf = []; var __, _ = []; var encode = "", codes = ""; var prefixes = ""; var junks = ""; var group = part.groups.Instruction .replace(/^(ADC|ADD|AND|CON|DIS|EOR|FOR|MOV|OR|SBB|SUB|XOR)$/i, "ALU") .replace(/^(CLR|DEC|INC|NOT|SET)$/i, "UNA"); var no_carry = (part[2].match(/^(ADD|SUB)$/i)) ? "CE " : ""; if(part[2].toUpperCase() in alu) encode = alu[part[2].toUpperCase()]; for(var j = 4; j <= 6 && j < part.length; ++ j) { if(part[j] && part[j] != "") { if(part[j].match(/^(BC\d|D\d\+)$|[-+]\d+$|^[0-7_]*#/g)) _.push("@"), arg.push(prefixes = parse_vector(part[j].toUpperCase().replace("BC", "D"))); else _.push(part[j]), arg.push(part[j]); } else arg.push(""); } if(part.groups.Junk) junks = part.groups.Junk.replace(/_/g, "9").replace(/0/g, "8").replace(/(\d)/g, "$10 $10 "); inf.push(0); __ = part[2].toUpperCase() + (_.length > 0 ? " " + _.join() : ""); __ = __.search.bind(__); _ = group + (_.length > 0 ? " " + _.join() : ""); _ = _.search.bind(_); switch(0) { case __(/MOV (A0|FLG|FLAGS|PSW),@$/i): codes = "AA A0 :: 0F"; break; case __(/MOV @,(A0|FLG|FLAGS|PSW)$/i): codes = ":: A0"; break; case _(/UNA @$/i): codes = "AA A0 :: 0_"; break; case _(/EXI$/i): codes = "AA A0 0E"; break; case _(/SWP @,D[0-9]$/i): codes = "AY A0 :: yF"; break; case _(/SWP D[0-9],@$/i): codes = "AX A0 :: xF"; break; case __(/MOV @,([ABCD][0-9])$/i): codes = ":: Yy"; break; case _(/ALU @,D[0-9]$/i): codes = "AY A0 ~:: y_"; break; case _(/INF D[0-9]$/i): codes = "AX A0 #xF"; break; case _(/EHI|EI|STI$/i): codes = "AD A0 #0C"; break; case _(/UNA D[0-9]$/i): codes = "AD A0 #x_"; break; case _(/SWP (A[1-9]|[BC][0-9]),@$/i): codes = "AX A0 :: xF"; break; case _(/SWP @,(A[1-9]|[BC][0-9])$/i): codes = "AY A0 :: yF"; break; case _(/ALU @,(A[1-9]|[BC][0-9])$/i): codes = "AY A0 ~:: y_"; break; case __(/MOV (A0|FLG|FLAGS|PSW),(A[1-9]|[BC][0-9])$/i): codes = "AY A0 #yF"; break; case _(/UNA (A[1-9]|[BC][0-9])$/i): codes = "AX A0 #x_"; break; case _(/ALU D[0-9],@$/i): codes = "XA Xx ~:: 0_"; break; case _(/OUF D[0-9]$/i): codes = "XA Xx #0F"; break; case _(/UNA D[0-9],CF$/i): codes = "XA Xx #0_"; break; case _(/ALU (A[1-9]|[BC][0-9]),@$/i): codes = "XA Xx ~:: 0_"; break; case __(/MOV (A[1-9]|[BC][0-9]),(A0|FLG|FLAGS|PSW)$/i): codes = "XA Xx #0F"; break; case _(/UNA (A[1-9]|[BC][0-9]),CF$/i): codes = "XA Xx #0_"; break; case _(/LEA D[0-9],@$$/i): codes = "XX Xx :: xF"; break; case _(/ORD @,(A[1-9]|[BCD][0-9]),(A[1-9]|[BCD][0-9])$$/i): codes = "YZ Yy :: zF"; break; case _(/ALU D[0-9],@,D[0-9]$/i): codes = "XZ Xx :: z_"; break; case _(/ALU D[0-9],D[0-9]$/i): codes = "XY Xx #y_"; break; case _(/LEX (A[1-9]|[BCD][0-9]),@,(A[1-9]|[BC][0-9])$$/i): codes = "XZ Xx :: zF"; break; case _(/ALU D[0-9],@,(A[1-9]|[BC][0-9])$/i): codes = "XZ Xx :: z_"; break; case _(/OUT D[0-9],(A[1-9]|[BC][0-9])$/i): codes = "XY Xx #yF"; break; case _(/ALU D[0-9],(A[1-9]|[BC][0-9])$/i): codes = "XY Xx ~#y_"; break; case _(/ALU (A[1-9]|[BC][0-9]),@,D[0-9]$/i): codes = "XZ Xx ~:: z_"; break; case _(/IN (A[1-9]|[BC][0-9]),D[0-9]$/i): codes = "XY Xx #yF"; break; case _(/ALU (A[1-9]|[BC][0-9]),D[0-9]$/i): codes = "XY Xx ~#y_"; break; case _(/ALU (A[1-9]|[BC][0-9]),@,(A[1-9]|[BC][0-9])$/i): codes = "XZ Xx ~:: z_"; break; case _(/ALU (A[1-9]|[BC][0-9]),(A[1-9]|[BC][0-9])$/i): codes = "XY Xx ~#y_"; break; case _(/ALU R[0-9]$/i): codes = "~#x_"; break; case _(/ALU R,@,R[0-9]$/i): codes = "~:: z_"; break; case _(/REG [ABCD][0-9],[ABCD][0-9],[ABCD][0-9]$/i): codes = "#Xx #Yy #Zz"; break; case _(/REG [ABCD][0-9],[ABCD][0-9]$/i): codes = "#Xx #Yy"; break; case _(/REG [ABCD][0-9]$/i): codes = "#Xx"; break; case _(/ARG [ABCD][0-9],[ABCD][0-9]$/i): codes = "#XY Xx Yy"; break; case _(/ARG [ABCD][0-9],[ABCD]$/i): codes = "#XY Xx"; break; case _(/ARG [ABCD],[ABCD]$/i): codes = "#XY"; break; case _(/BRK|HA?LT$/i): codes = "#00"; break; case _(/(HA?LT|JU?MP) @$/i): codes = ":: 00"; break; case __(/(CLR|ERA) [ABCD]F$/i): codes = "#XE"; break; case __(/(CMP|FLP|INV|NOT) [ABCD]F$/i): codes = "#Xx"; break; case __(/SET [ABCD]F$/i): codes = "#XE #Xx"; break; case _(/(BRK|HA?LT|JU?MP|LOOP|RET) @,[ABCD]F$/i): codes = ":: Yy"; break; case _(/DO @,[ABCD]F$/i): codes = ":: YE"; break; case _(/(BRK|HA?LT|JU?MP|LOOP|RET) @,[ABCD]F,[ABCD]F$/i): codes = ":: YZ"; break; case _(/(BRK|HA?LT|JU?MP|LOOP|RET) @,[ABCD]F,[ABCD]E$/i): codes = "ZF :: YZ ZF"; break; case _(/(BRK|HA?LT|JU?MP|LOOP|RET) @,[ABCD]E,[ABCD]F$/i): codes = "YF :: YZ YF"; break; case _(/(BRK|HA?LT|JU?MP|LOOP|RET) @,[ABCD]E,[ABCD]E$/i): codes = "YF ZF :: YZ ZF YF"; break; } if(codes != "") { codes = codes .replace(/::/g, (junks + prefixes).trim()) .replace(/#/g, junks) .replace(/~/g, no_carry) .replace(/_/g, encode.toString(16)) .replace(/X/g, arg[0].charAt(0)) .replace(/x/g, arg[0].charAt(1)) .replace(/Y/g, arg[1].charAt(0)) .replace(/y/g, arg[1].charAt(1)) .replace(/Z/g, arg[2].charAt(0)) .replace(/z/g, arg[2].charAt(1)) .toUpperCase() .split(/\s/); } else codes = ["Error"]; document.querySelector(el.dataset.for).textContent = codes.join(" "); } </script> </head> <body> <input type=text data-for='#Dump' placeholder='Type assembly at here' list=Samples onchange='encode(this)' spellcheck=false> <pre id=Dump></pre> <datalist id=Samples> <option value='JUMP #D8+65536'>Jump [BC<sub>8</sub>+65536]</option> <option value='SET CF'>Set Carry Flag</option> <option value='INF D5'>Query Information about Port #5 and set Flags ZF/CF/OF/SF</option> <option value='IN A4,D5'>Input data from Port #5 to Register A4</option> <option value='ADC A7,C3'>Add C<sub>3</sub> to A<sub>7</sub> with Carry</option> <option value='ADD86 A7,C3'>Add C<sub>3</sub> to A<sub>7</sub> in mode #86</option> <option value='INC A7'>Increment Register A<sub>7</sub></option> <option value='SBB A1,#D2'>Subtract from Register A<sub>1</sub> data from Memory cell pointed by D<sub>2</sub> with Borrow</option> <option value='SUB #D2,A1'>Subtract from Memory cell pointed by D<sub>2</sub> the Register A<sub>1</sub></option> <option value='DEC 7#D2'>Decrement Memory cell pointed by D<sub>2</sub> in mode #7</option> <option value='LEA D1,#D2+3D3+4D4+56789'>Load Effective Address: Like x86-LEA</option> <option value='LEX C1,#D2+3D3+4D4+56789,B0'>Lexical transform: Like x86-XLAT</option> <option value='ORD #D1+234,D5,D6'>Put in Order Data from Memory and Register pairs BC<sub>6</sub> and set to BC<sub>5</sub> the average</option> <option value='ORD #D1+234,C5,B6'>Put in Order Data from Memory and Register pairs BC<sub>6</sub> and set to C<sub>5</sub> the average</option> </datalist> </body> |
Цитата:
Number.prototype.__defineGetter__ ("test", function(){ this.TEST = 'Test'; return this; } ); Number.prototype.__defineGetter__ ("Show", function(){ alert(this.TEST); return this; } ); const a = new Number() alert((a.test).Show) У стрелочных функций есть особенность работы с this... |
Симуляция микросхемы К155ИЕ8 в графике
<html> <head> <title>SN7497 simulation & Line drawing</title> <script> var hCnv; var cnt97; var set97; function sn7497() { cnt97 = (cnt97 + 1) & 0x3F; return (set97 & 0x20) > 0 && (cnt97 & 0x01) == 0x01 ? 1 : (set97 & 0x10) > 0 && (cnt97 & 0x03) == 0x02 ? 1 : (set97 & 0x08) > 0 && (cnt97 & 0x07) == 0x04 ? 1 : (set97 & 0x04) > 0 && (cnt97 & 0x0F) == 0x08 ? 1 : (set97 & 0x02) > 0 && (cnt97 & 0x1F) == 0x10 ? 1 : (set97 & 0x01) > 0 && (cnt97 & 0x3F) == 0x20 ? 1 : 0; } function main() { hCnv = document.querySelector("canvas").getContext("2d"); cnt97 = 0; set97 = 0; loop(); } function loop() { var x = 0, y, z; hCnv.fillStyle = "blue"; if(cnt97 > 0 || set97 > 0) hCnv.fillRect(0, 0, hCnv.canvas.width / 2, hCnv.canvas.height); else hCnv.fillRect(0, 0, hCnv.canvas.width, hCnv.canvas.height); hCnv.fillStyle = "yellow"; for(y = 0; y <= 64; ++ y) { hCnv.fillRect(x * 4, y * 4, 4, 4); z = sn7497(); x += z; if(z) hCnv.fillRect(256 + cnt97 * 4, set97 * 4, 2, 3); } set97 ++; if(set97 > 63) set97 = 1; setTimeout(loop, 50); hCnv.fillStyle = "blue"; hCnv.fillRect(256, set97 * 4, 256, 3); } </script> </head> <body onload='main()'> <canvas width=512 height=256></canvas> </body> |
Alikberov,
вам влом написать function? |
Цитата:
По-этому, сейчас прощупываю способы попутного указания свойств числам, чтобы сократить количество функций. (Чтобы на каждые «PCMPEQB»/«PCMPEQW»/«PCMPEQD»/«PCMPEQQ» не писать отдельные функции, а описать одну «PCMP» и вызывать её примерно вот так «BigInt(m).EQ.D.PCMP(n)», чтобы эти попутные «EQ» и «D» передавали маску, ширину слова и тип сравнения…) Но, оказывается, JavaScript знаю довольно плохо…:lol: |
Alikberov,
1. Стрелочная функция захватывает this при создании и не меняет его при вызове, т.е. твоё Number.prototype.__defineGetter__ ("ME", () => { this.PERSON = "Me"; return this; });Равносильно: var arrowThis = this; Number.prototype.__defineGetter__ ("ME", function () { arrowThis.PERSON = "Me"; return arrowThis; }); Где в arrowThis будет лежать в данном случае глобальный this, который в нестрогом режиме равен window, в строгом - undefined. 2. BigInt - это не Int64, это реально длинная арифметика, и она условно безгранична (ограниченна только платформой). |
Симуляция индикаторной микросхемы ИПВ72А-4/5X7
<html> <head> <title>ИПВ72А-4/5x7</title> <meta http-equiv="refresh" content="300; url=https://www.chipfind.ru/datasheet/proton/ipv72a45h7l.htm"> <script> var hIPV; var ctx; var mtx; var mask = 0; var data = 0; var tick = 0; var time = 0; var delay = 0; var speed = 1; // ...?speed=1 var fading = -1; // ...?fade=1 var stream = [ // ...?stream=D1_8E-6E-4E_1F-7F-5F_15-75-55_1F-7F-5F_15-75-55_1B-7B-5B_0E-6E-4E // 12 10 8 5 4 3 2 1 // DI \C EN Y5 Y4 Y3 Y2 Y1 // D7_D6_D5_D4_D3_D2_D1_D0 // ----------------------- // 1 1 0 <-- Prepare display start // 1 0 0 <-- Strobe first line // 0 1 1 <-- Display line // 0 1 0 <-- Prepare next line // 0 0 0 <-- Strobe next line // 0 1 1 <-- Display line // 0 1 0 <-- Prepare next line // 0 0 0 <-- Strobe next line 0xD1, 0x91, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x1F, 0x7F, 0x5F, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x1F, 0x7F, 0x5F, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1E, 0x7E, 0x5E, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1F, 0x7F, 0x5F, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1F, 0x7F, 0x5F, 0x0E, 0x6E, 0x4E, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x0E, 0x6E, 0x4E ]; function main() { const user_stream = window.location.href.match(/stream=([0-9_A-F+-]+)/i); const user_speed = window.location.href.match(/speed=(\d+)/i); const user_fade = window.location.href.match(/fade=(\d+)/i); const pins = "Y1 Y2 Y3 Y4 Y5 CH DO EN +5 C 0V DI".split(/\s+/); hIPV = document.getElementById("IPV"); ctx = hIPV.getContext("2d"); ctx.clearRect(0, 0, hIPV.width, hIPV.height); mtx = ctx.getImageData(0, 0, 400, 128); for(var i = 0; i < mtx.data.length; i += 4) { mtx.data[i] = 255; mtx.data[i + 1] = 0; mtx.data[i + 2] = 0; mtx.data[i + 3] = 0; } ctx.fillStyle = "white"; ctx.fillRect(0, 0, 208, 256); ctx.strokeStyle = "black"; ctx.beginPath(); ctx.lineWidth = 2; ctx.rect(108, 7, 88, 240); ctx.rect(148, 94, 40, 75); ctx.rect(158, 130, 10, 20); ctx.moveTo(128, 7); ctx.lineTo(128, 247); ctx.rect(7, 7, 20, 160); for(var i = 0; i < 7; ++ i) { ctx.moveTo(108, 28 + (i + 4) * 20); ctx.lineTo(128, 28 + (i + 4) * 20); ctx.moveTo(7, 28 + i * 20); ctx.lineTo(27, 28 + i * 20); } ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 1; for(var i = 0; i < 12; ++ i) { ctx.moveTo(88, 16 + i * 20); ctx.lineTo(108, 16 + i * 20); ctx.textAlign = "right"; ctx.strokeText(String(i + 1), 104, 12 + i * 20); ctx.textAlign = "left"; ctx.strokeText(pins[i], 110, 20 + i * 20); } ctx.strokeText("4x", 132, 135); ctx.textAlign = "center"; ctx.strokeText("5x7", 168, 115); for(var i = 0; i < 8; ++ i) { ctx.moveTo(27, 16 + i * 20); ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20); ctx.strokeText(`D${i}`, 17, 20 + i * 20); } ctx.stroke(); if(user_stream) { stream = []; for(const data of user_stream[1].split(/[-_+]+/)) stream.push(parseInt(data, 16)); } if(user_speed) speed = parseInt(user_speed[1]); if(user_fade) fading = -parseInt(user_fade[1]); show(); } function show() { var digit; var x, y; var p, err; var fire; for(digit = 0; digit < 4; ++ digit) { err = [-1, 0, 1/4, 1.4][digit]; for(y = 0; y < 7; ++ y) { for(x = 0; x < 5; ++ x) { fire = ((data >> (4 - x)) & 1) > 0 && ((mask >> (digit * 7 + y)) & 1) > 0 && (data & 0x20) > 0 ? 255 : fading; p = (100 * digit + 12 * 400 * y + x * 12 + 8 + Math.floor(err * y)) * 4; mtx.data[p + 3] += fire; mtx.data[p + 3 + 4] += fire; mtx.data[p + 3 + 8] += fire; mtx.data[p + 3 + 12] += fire; mtx.data[p + 3 + 16] += fire; mtx.data[p + 3 + 20] += fire; mtx.data[p + 3 + 24] += fire; mtx.data[p + 3 + 1600] += fire; mtx.data[p + 3 + 1600 + 4] += fire; mtx.data[p + 3 + 1600 + 8] += fire; mtx.data[p + 3 + 1600 + 12] += fire; mtx.data[p + 3 + 1600 + 16] += fire; mtx.data[p + 3 + 1600 + 20] += fire; mtx.data[p + 3 + 1600 + 24] += fire; mtx.data[p + 3 + 3200] += fire; mtx.data[p + 3 + 3200 + 4] += fire; mtx.data[p + 3 + 3200 + 8] += fire; mtx.data[p + 3 + 3200 + 12] += fire; mtx.data[p + 3 + 3200 + 16] += fire; mtx.data[p + 3 + 3200 + 20] += fire; mtx.data[p + 3 + 3200 + 24] += fire; mtx.data[p + 3 + 4800] += fire; mtx.data[p + 3 + 4800 + 4] += fire; mtx.data[p + 3 + 4800 + 8] += fire; mtx.data[p + 3 + 4800 + 12] += fire; mtx.data[p + 3 + 4800 + 16] += fire; mtx.data[p + 3 + 4800 + 20] += fire; mtx.data[p + 3 + 4800 + 24] += fire; mtx.data[p + 3 + 6400] += fire; mtx.data[p + 3 + 6400 + 4] += fire; mtx.data[p + 3 + 6400 + 8] += fire; mtx.data[p + 3 + 6400 + 12] += fire; mtx.data[p + 3 + 6400 + 16] += fire; mtx.data[p + 3 + 6400 + 20] += fire; mtx.data[p + 3 + 6400 + 24] += fire; mtx.data[p + 3 + 8000] += fire; mtx.data[p + 3 + 8000 + 4] += fire; mtx.data[p + 3 + 8000 + 8] += fire; mtx.data[p + 3 + 8000 + 12] += fire; mtx.data[p + 3 + 8000 + 16] += fire; mtx.data[p + 3 + 8000 + 20] += fire; mtx.data[p + 3 + 8000 + 24] += fire; } } } ctx.putImageData(mtx, 236, 76); for(var z = 0; z < 2; ++ z) { ctx.strokeStyle = ["blue", "red"][z]; ctx.fillStyle = ["grey", "silver"][z]; ctx.beginPath(); for(var i = 0; i < 8; ++ i) { if(((data >> i) & 1) == z) { ctx.moveTo(27, 16 + i * 20); ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20); ctx.fillRect(8, 8.5 + i * 20, 18, 17.5); ctx.strokeText(`D${i}`, 17, 20 + i * 20); } } ctx.stroke(); } if(tick == 1 && (data & 0x40) == 0) mask = ((mask & 0x07FFFFFF) << 1) | ((data & 0x80) >> 7); tick = (data & 0x40) >> 6; data = stream[time]; if(-- delay < 0) { delay = speed; if(++ time >= stream.length) time = 0; } requestAnimationFrame(show); } </script> <style> body { margin :0 0 0 0; } canvas { background-image:url('https://optochip.org/docum/store/factory/series/140509/1487235592-2-4687.jpg'); background-position: 178px -34px; background-size :77%; } </style> </head> <body onload='main()'> <canvas id=IPV width=640 height=256></canvas> </body> |
Цитата:
Цитата:
|
Alikberov,
для this Number Number.prototype.__defineGetter__ ("ME", function() { this.PERSON = "Me"; return this; }); |
Интерактивный генератор УГО микросхем
<html> <head> <title>Logisim Part Design Generator</title> <script> var hDesigner; var hDesign; var hModel; function draw() { const ctx = hDesign; const dsg = hDesigner.value.split(/\r?\n/); // var model = []; // let fnt = { PIDS :"9px Serif", PINS :"7px Serif" }; let part = ""; let mode; let i; let y = 0; let maxy = 0; let space; let measure; // function setPin(font, anchor, x, y, text, circle) { model.push(' <text font-family="' + font.split(" ")[1] + '" font-size="' + parseInt(font) + '" text-anchor="' + anchor + '" x="' + x + '" y="' + y + '">' + text + '</text>'); if(circle < 0 || circle > 0) { model.push(' <ellipse cx="' + x + '" cy="' + (y - 3) + '" fill="none" rx="3.0" ry="3.0" stroke="#000000" stroke-width="2"/>'); model.push(' <polyline fill="none" points="' + x + ',' + (y - 8) + ',' + (x + 24 * circle) + ',' + (y - 8) +'" stroke="#000000" stroke-width="1"/>'); } } // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); for(const str of dsg) { const rex = /([-.]|(\d+)([:;]\d+)*(_?)([A-Z]+)?(\d+)?(:(\d+))?(["']?))/ig; const rxp = /[-.]|(\d+)(([:;]\d+)+)?(_?)([A-Z]+)((\d+)?(:\d+)?)(["']?)/i; const dsc = (/(\w+)?\t*(.+)?/i).exec(str); var data; var last; var order; var names; var pin; if(dsc[1] != "") mode = dsc[1], y = 20; if(mode in fnt) fnt[mode] = dsc[2]; else if(dsc[2]) { for(const pin of dsc[2].match(rex)) { if(pin) { if(pin == "-") { y += 10; ctx.beginPath(); switch(mode) { case "PINPUT": ctx.moveTo(19, y); ctx.lineTo(49, y); model.push(``); break; case "PINOUT": ctx.moveTo(122, y); ctx.lineTo(92, y); break; } ctx.stroke(); } else if(pin != ".") { data = pin.match(rxp); if(data) { last = parseInt(data[1]); order = [last]; if(data[2]) { for(const col of data[2].match(/[:;]\d+/g)) { const next = parseInt(col.substr(1)); if(col.charAt(0) == ";") order.push(last = next); else if(last < next) while(last < next) order.push(++ last); else while(last > next) order.push(-- last); } } last = parseInt(data[6]); names = [last]; if(data[8]) { for(const col of data[8].match(/[:;]\d+/g)) { const next = parseInt(col.substr(1)); if(col.charAt(0) == ";") names.push(last = next); else if(last < next) while(last < next) names.push(++ last); else while(last > next) names.push(-- last); } } else names = [data[6]]; } if(data) space = data[9] == '"' ? 30 : data[9] == "'" ? 20 : 10; else space = 10; switch(mode) { case "PART": part = dsc[2].split(/\t+|\s+/); break; case "PINPUT": ctx.beginPath(); i = 0; ctx.font = fnt.PINS; ctx.textAlign = "right"; for(const id of order) { setPin(fnt.PINS, "end", 19 ,y + space * i + 8, id); ctx.strokeText(id, 19, y + space * i ++ + 8); } i = 0; ctx.font = fnt.PIDS; ctx.textAlign = "left"; for(const id of names) { if(data[4] == "_") { ctx.ellipse(19, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true); measure = ctx.measureText(data[5] + id); ctx.moveTo(22, y + space * i + 5); ctx.lineTo(22 + measure.width, y + space * i + 5); } setPin(fnt.PIDS, "start", 22, y + space * i + 13, data[5] + id, data[4] ? +1 : 0); ctx.strokeText(data[5] + id, 22, y + space * i + 13); ++ i; } ctx.stroke(); y += space * (i - 1) + 10; break; case "PINOUT": data = pin.match(rxp); ctx.beginPath(); i = 0; ctx.font = fnt.PINS; ctx.textAlign = "left"; for(const id of order) { setPin(fnt.PINS, "start", 122 ,y + space * i + 8, id); ctx.strokeText(id, 122, y + space * i ++ + 8); } i = 0; ctx.font = fnt.PIDS; ctx.textAlign = "right"; for(const id of names) { if(data[4] == "_") { ctx.ellipse(122, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true); measure = ctx.measureText(data[5] + id); ctx.moveTo(122, y + space * i + 5); ctx.lineTo(122 - measure.width, y + space * i + 5); } setPin(fnt.PIDS, "end", 119, y + space * i + 13, data[5] + id, data[4] ? -1 : 0); ctx.strokeText(data[5] + id, 119, y + space * i ++ + 13); } ctx.stroke(); y += space * (i - 1) + 10; break; } } else y += 10; } else y += 10; } } maxy = Math.max(maxy, y); } ctx.beginPath(); ctx.rect(19, 10, 103, maxy); ctx.moveTo(49, 10); ctx.lineTo(49, 10 + maxy); ctx.moveTo(92, 10); ctx.lineTo(92, 10 + maxy); ctx.textAlign = "center"; ctx.strokeText(part[1], 70, 20); ctx.strokeText(part[2], 70, maxy); ctx.stroke(); setPin(fnt.PIDS, "center", 70, 20, part[1]); setPin(fnt.PIDS, "center", 70, maxy, part[2]); hModel.value = model.join("\r\n"); } function main() { hModel = document.getElementById("Model"); hDesigner = document.getElementById("Designer"); hDesigner.addEventListener("keyup", draw); hDesign = document.getElementById("Design").getContext("2d"); draw(); } </script> <style> body { background-color:silver; } </style> </head> <body> <textarea id=Designer rows=6 cols=100 onkeyup='draw()'> PINS 7px Serif PIDS 9px Serif PART I8257 DMA ВТ57 PINPUT 7HLDA..-.12CLK.-.6RDY.-.13RES..-19:16DRQ0:3'-.11_CS PINOUT 10HRQ-4_MEMR 2_IOWR 1_IORD-32:35;37:40A0:7-30:26;23:21D0:7-8STB 9AEN-14_DAC2 </textarea><br /> <canvas id=Design width=300 height=400></canvas><br> <textarea id=Model rows=6 cols=100></textarea> <script>main();</script> </body> |
Кaк получить доступ к исходному тексту стиля на странице, включая форматирование (табуляцию, комментарии и т.д.):
<style> .myStyle { background-color:red; /* The Red background */ }</style>Почему-то нету в структурах исходного (моего же) стиля, как я его вставил в документ (не внешний css-файл).:no: Спасибо!:thanks: |
Alikberov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> .myStyle { background-color: red; /* The Red background */ } </style> </head> <body> <script> document.addEventListener("DOMContentLoaded", function() { let elem = document.querySelector("style"); alert(elem.textContent); }) </script> </body> </html> здесь создайте свою тему, тама есть кнопа ![]() |
Цитата:
Спасибо за CSS-подсказку!:thanks: Ещё один вопрос: А можно ли ускорить как-то собственные скрипты, сгенерированные на лету? Разрабатываю оболочку с кучей getter/setter'ов и столкнулся с чудовищной просадкой производительности. Надеялся, что если всё упаковать в «new Function», то браузер хоть какую-то оптимизацию произведёт… Но, производительность ниже плинтуса!:haha: P.S.: Стоит ли смотреть в сторону «asmjs», если используются сплошные BigInt'ы? |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 02:00. |