Forum Pasja Informatyki - JavaScript

Dwa zdarzenia następujące po sobie na jednej stronie

Mon, 22 Sep 2025 20:36:11 +0000

Jak w tytule - istnieje możliwość użycia dwóch zdarzeń myszy następujących po sobie w tym samym pliku .html? Z tego co zauważyłem jedynie pierwszy link z listy jest interpretowany. Istnieje jakiś separator?

Pytanie teoretyczne.

addeventlistener czy zamiast funkcja inline js

Wed, 21 May 2025 20:48:53 +0000

Taki offtop, niby funkcja inline jest złą praktyką, ale czy na pewno?

AI

Jeśli dodajesz nasłuchiwacze zdarzeń (addEventListener) do elementów, które później usuwasz poprzez container.innerHTML = "", event listenery NIE są automatycznie czyszczone. Elementy zostają usunięte z DOM-u, ale ich referencje mogą pozostać w pamięci, co może prowadzić do wycieków pamięci.

Garbage Collector nie usunie event listenera, dopóki nie przestanie być używany w kodzie. Jeśli jakiś obiekt nadal ma referencję do usuniętego elementu, będzie on "żył" w pamięci.

gra do dokończenia

Sat, 26 Apr 2025 19:08:28 +0000

dzień dobry

zaczęłem tworzyć gre z wykorzystaniem canvas ale z niej zrezygnowałem bo czuję że nie dam rady jej dokończyć bo dopiero zdobywam doświadczenie związane z tworzeniem gier. po za tym jestem już sfrustrowany bo pracuję już nad tym kilka godzin a efekty są niewielkie. Myślę jednak że sama gra może mieć potencjał więc aby go nie marnować zostawiam ją do dokończenia (lub napisania jej od nowa bo jak pisałem wyżej nie mam w tworzeniu gier, więc kod z punktu widzenia zaawansowanych programistów jest raczej kiepski)

sama gra polegałaby w moim zamyśle ma tym, że na dole ekranu jest gracz który musi bronić się przed zombie nadchodzącymi z góry na 1 z 5 ścieżek. gracz może zmieniać ścieżki (platformy na których stoi) klikając na nie. przegrywa jeśli zombie dotrą do muru osłaniającego gracza i go zniszczą. planowałem dodać też uplepszenia obrażeń gracza, prędkości, broni, itp. z czasem mogły by się pojawiać różne, mocniejsze typy zombie. narazie gra jest na etapie że jest gracz, mur, tło, gracz i zombie mogą się przemieszczać , a zombie traci hp i umiera jeśli gracz w niego trafi. próbowałem teraz dodać system fal, ale gdy odpalam gre po pewnym czasie wszystko się jakoś dziwnie przemieszcza i wogóle jest jakiś haos, podejrzewam że to przez obracanie zombie, ale można to usunąć poprostu obracając fizycznie pliki bez robienia tego w canvas. w każdym razie już poprostu nie chce mi się tego kończyć, nie mam komputera a telefon ma ograniczone możliwości.

jeśli zdecydujesz się ją dokończyć to przepraszam za złe ścieżki do plików - tworzyłem to na telefonie a z niego nie da się (chyba) przesyłać folderów na strony więc poprostu przesłałem pliki bez zmiany ścieżek bo trochę ich było a mi się nie chciało ich zmieniać.

pliki: https://gofile.io/d/14dG5h

Image component w NextJS 14

Tue, 11 Feb 2025 08:56:40 +0000

Witam, miał ktoś może problem z nextowym komponentem Image, który nie ładował wybiórczych zdjęć dostępnych z api? Mam ExpressAPI na osobnym porcie adresu, które służy do uploadu i downloadu zdjęć, generalnie to działa. Informacje o fotkach mam na mongodb atlas. Problem pojawia się gdy chcę wyświetlić wszystkie zdjęcia z danego albumu. Jak się okazuje optymalizacja obrazów nexta coś świruje i wybiórcze fotki wywalają błąd 404 (zawsze te same - i nie, raczej nie jest to wina uszkodzonych plików ponieważ jak wrzucę samą jedną fotkę, która wcześniej się nie pojawiała to nagle magicznie działa) - pomimo tego że są dostępne jak wkleję w przeglądarkę zoptymalizowany link.
Gdy wyłączą optymalizację obrazów nexta no to śmiga, natomiast zależy mi żeby ją zachować.

Spotkał się ktoś kiedyś z podobnym problemem?

Fullscrean w phaser 3

Mon, 27 Jan 2025 22:01:17 +0000

W głównej scenie gry próbuje najpierw ustawić okno gry w trybie fullscrean a następnie po 3 sekundach wrócić do pierwotnych ustawień, niestety działa to tylko w jedną stronę i nie mogę wrócić co początkowego rozmiaru okna (okno wciąż zajmuje cały ekran a chciałbym aby znajdowało się w ramce na środku ekranu). kod odpowiedzialny za te funkcje znajduję się poniżej. Bardzo proszę o pomoc

this.time.delayedCall(3000,()=>{
            
            this.scale.scaleMode = Phaser.Scale.FIT; 
            this.scale.autoCenter = Phaser.Scale.CENTER_BOTH; 
            this.scale.refresh(); 
        });
        this.time.delayedCall(6000,()=>{
            this.scale.scaleMode = Phaser.Scale.NONE;
            this.scale.resize(1280, 600);
            this.scale.refresh();

        });

WebSocket połączenie 2 komputerów

Fri, 24 Jan 2025 20:56:56 +0000

Skoro już mowa o prawdziwym Janusz sofcie, czy znacie jakieś pozycje książkowe najlepiej po Polsku, by można było napisać własne https://www.mathwhiteboard.com/, bo praktyce Paint i Skype są dużo lepsze, tylko nie można rysować na jednym płótnie. I Paint nie ma svg, i gumka jest do niczego. Z dodaniem funkcjonalności do strony offline nie ma problemu.

Koncepcje mam i kod szkice strony offline mam. YouTube (po angielsku) przejrzałem(tylko jakiś wirus się wkradł) i wiem co nieco o WebSocket. MDN też odwiedziłem.

1) Norton lub Eset jako VPN i portable node.js. Czy to dobry pomysł.

2) Może https://firebase.google.com/, ale pewnie trzeba będzie podać kartę czy coś, a ja nie lubię takich rozwiązań.

3) Przesyłanie przez blob czy to dobry pomysł?

4) Ewentualnie inne rozwiązania.

Problem z raycastingiem

Wed, 25 Dec 2024 23:33:26 +0000

Próbuje napisać prostą grę w stylu dooma w Phaser, jednak mam pewien problem z raycastingiem. Dla linii poniżej postaci wszystko działa prawidłowo, jednak dla tych których przecięcie znajduje się nad postacią wyświetlane są błędne pozycje przecięć co można zobaczyć na obrazku poniżej (zielone punkty oznaczają zarejestrowane przecięcia). Poniżej zamieszczam także algorytm który ustala te punkty. Bardzo proszę o pomoc

createHits(){
        for(let i=0;i<80;i++){

            this.hits[i].distance=0;
            this.hits[i].x=0;
            this.hits[i].y=0;
            this.hits[i].id=0;
            const hits=this.layer.getTilesWithinShape(this.rays[i]);
            let closerTile=null;
            let distance=0;
            let first=true;
            let tempDistance=0
            hits.forEach(tile=>{
                if(tile.index!=-1){
                    tempDistance=Phaser.Math.Distance.Between(tile.pixelX+300,tile.pixelY+300,this.player.x,this.player.y);
                    if(first||(tempDistance<distance)){
                        distance=tempDistance;
                        closerTile=tile;
                        first=false;
                    }
                }
            })
            if(first){
                
                continue;
            
            }
            let temp=[];
            temp.push({x:closerTile.pixelX,y:closerTile.pixelY})
            temp.push({x:closerTile.pixelX+600,y:closerTile.pixelY})
            temp.push({x:closerTile.pixelX+600,y:closerTile.pixelY+600})
            temp.push({x:closerTile.pixelX,y:closerTile.pixelY+600})
            
            let searchPoint;
            if(!(searchPoint=this.findLine(temp,this.rays[i],this.player)))
                continue;
            
            this.hits[i].distance=Math.sqrt((searchPoint.x-this.player.x)**2+(searchPoint.y-this.player.y)**2);
            this.hits[i].x=searchPoint.x;
            this.hits[i].y=searchPoint.y;
            this.hits[i].id=3;
            
        }
    }

    findLine(corners,ray,player){
        const edges = [
            { x1: corners[0].x, y1: corners[0].y, x2: corners[1].x, y2: corners[1].y }, // Górna krawędź
            { x1: corners[1].x, y1: corners[1].y, x2: corners[2].x, y2: corners[2].y }, // Prawa krawędź
            { x1: corners[2].x, y1: corners[2].y, x2: corners[3].x, y2: corners[3].y }, // Dolna krawędź
            { x1: corners[3].x, y1: corners[3].y, x2: corners[0].x, y2: corners[0].y }  // Lewa krawędź
        ];
    
        let closestPoint = null;
        let closestDistance = Infinity;
    
        edges.forEach(edge => {
            const intersection = new Phaser.Geom.Point();
            if (Phaser.Geom.Intersects.LineToLine(ray, edge, intersection)) {
                const dist = Phaser.Math.Distance.Between(player.x, player.y, intersection.x, intersection.y);
                if (dist < closestDistance) {
                    closestDistance = dist;
                    closestPoint = intersection;
                }
            }
        });
    
        return closestPoint;
    }

Skrypt w formie shortcode - problem z ładowaniem

Thu, 19 Dec 2024 12:45:04 +0000

Cześć,

dodałem sobie na Wordpressie kod z Trading View i przerobiłem go na shortcode. Zarówno Firefox jak i Chrome mają problem. Co ciekawe chrome działał i nagle przestał, firefox od początku nie wyświetlał. W konsoli widzę takie błędy:

Firefox:

Chrome:

Mój kod:

// Funkcja obsługująca shortcode
function tv_shortcode( $atts ) {
 
    $atts = shortcode_atts(
        array(
            'chart' => '', // Domyślnie pusty, jeśli nie podany
			'width' => '640',
			'height' => '400'
        ),
        $atts,
        'chart_shortcode'
    );

    if ( !empty( $atts['chart'] ) ) {
        $chart_html = '
            <!-- TradingView Chart BEGIN -->
            <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
            <script type="text/javascript">
                var tradingview_embed_options = {};
                tradingview_embed_options.width = "' . esc_js( $atts['width'] ) . '";
                tradingview_embed_options.height = "' . esc_js( $atts['height'] ) . '";
                tradingview_embed_options.chart = "' . esc_js( $atts['chart'] ) . '";
                new TradingView.chart(tradingview_embed_options);
            </script>
            <p><a href="https://pl.tradingview.com/chart/' . esc_js( $atts['chart'] ) . '/"></a></p>
            <!-- TradingView Chart END -->
        ';
        return $chart_html;
    } else {
        return 'Proszę podać adres wykresu w atrybucie chart.';
    }
}

add_shortcode( 'tv_chart', 'tv_shortcode' );

I w ten sposób dodaje sobie wykresy na jakiejś tam stronie: [tv_chart chart='tutaj adres wykresu']. Nawet jak testuje dodanie tylko jednego to jest ten sam problem.

Żaden ze mnie ekspert programowania więc proszę o pomoc z czym problem i jak go rozwiązać.

Symulowanie kliknięcia klawisza w JS

Sat, 16 Nov 2024 10:46:24 +0000

Witam,

piszę skrypt do strony i natrafiłem na problem. Muszę zasymulować kliknięcie przycisku na klawiaturze. Powinna się wtedy wykonać operacja, która wykonałaby się przez normalne kliknięcie tj.: jeśli był zaznaczony input i JS "kliknie" literę s to w inpucie pojawi się s, jeśli na stronie jest jakaś funkcja przypisana pod klawisz 'E' to jeśli JS "kliknie" E to wykona się ta funkcja itd...

Szukałem rozwiązań, jednak w większości są to poradniki jak rozpoznać, który klawisz ZOSTAŁ KLIKNIĘTY, a nie jak KLIKNĄĆ ten przycisk. Podejrzewam, że jest jakieś zdarzenie dotyczące wciśnięcia klawisza, ale jeśli to prawda to nie wiem jak wywołać zdarzenie.

Z góry dzięki,

Pozdrawiam.

NuxtJS renderowanie SSR a odpowiedzi JSON

Wed, 18 Sep 2024 13:33:43 +0000

Witajcie, mam problem ze zrozumieniem SSR, może ktoś mi to rozjaśnić

wchodzę na stronę główną przekierowuje mnie na /login, która wyświetla się w network jako html

loguje się a w network widzę zwrócone json ze statusem 200 i tokenem ?!

po poprawnym logowaniu przekierowuje usera do /about gdzie wykonuje zapytanie o uprawnienia będzie ich może z 20 opcji może więcej, i całość powinna trafić do mnie jako SSR - gotowy html, dobrze to rozumiem ?

czemu widzę JSON? w network

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    "@/assets/main.css",
  ],
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  ssr: true,
  app: {
    baseURL: "/",
  },
  runtimeConfig: {
    public: {
      apiUrl: process.env.VITE_API_URL || 'http://localhost:3000',
    },
    private:{
      JWT_SECRET: process.env.JWT_SECRET,
      COOKIE_NAME: process.env.COOKIE_NAME,
      COOKIE_MAX_AGE: process.env.COOKIE_MAX_AGE,
      COOKIE_SECURE: process.env.COOKIE_SECURE
    }
  },
  routeRules:{
    "/**":{
      ssr: true,
      appMiddleware: ["auth"],
    }
  },
  devServer:{
    port: 3001,
    host: '0'
  }
});

<template>
  <div>
    <h1>Strona About</h1>
    <div v-if="role === 'HA'">Treść dla administratora tutaj</div>
    <div v-else>Treść dla użytkownika tutaj</div>
  </div>
</template>

<script setup lang="ts">
import { useAsyncData } from '#app';

const { data } = await useAsyncData('userRole', async () => {
  const response = await $fetch(`${useRuntimeConfig().public.apiUrl}/api/userRole`, {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  return response;
});

const role = data.value.role;
</script>

a nie działa to jak w php, po zalogowaniu się dostaje gotowy index.php

Dropdown menu JavaScript

Tue, 20 Aug 2024 08:02:35 +0000

Witam, mam pytanie do bardzej doświadczonych kolegów, czy można moj kod napisać lepiej albo go ulepszyć ?

const dropdowns = document.querySelectorAll('.navbar-item.has-dropdown');

const removeActive = (ignored) => {
      dropdowns.forEach(drop => {
            if (drop !== ignored) {
                  drop.classList.remove('is-active');
            }
      });
};

dropdowns.forEach(dropdown => {
      dropdown.addEventListener('click', () => {
            removeActive(dropdown);
            dropdown.classList.toggle('is-active');
      });
});

Ścieżki w webpacku.

Fri, 02 Aug 2024 07:53:20 +0000

Hej wszystkim!

Mam taki problem - otóż mam projekt zrobiony przy użyciu Webpacka. Problemem jest to że przy buildowaniu projektu ścieżki nie są poprawnie wczytywane.

Z ciekawości zmieniłem w jednym z plików:
<link rel="icon" type="image/png" href="/src/assets/img/favicon.png"/>
na:
<link rel="icon" type="image/png" href="./src/assets/img/favicon.png"/>

Po dodaniu kropki przed /src/ favicona się pojawiła.

Jeżeli chodzi o mój config webpackowy to wygląda tak:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const plugins = require("./plugins");
const loaders = require("./loaders");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isDev = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: "production",
  entry: {
    index: "./src/app.js",
  },
  devtool: isDev ? "inline-source-map" : false,
  stats: { warnings: false, children: true }, // Hide warnings, show children stats
  output: {
    filename: "scripts/[name].js",
    path: path.resolve(__dirname, "/dist"),
    clean: true,
  },
  devServer: {
    headers: {
      'Cache-Control': 'public, max-age=31536000'
    }
  },
  module: {
    rules: loaders,
  },
  resolve: {
    extensions: [".js", ".css", ".vue"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
  plugins: [
    ...plugins,
    new HtmlWebpackPlugin({
      title: 'Caching',
    }),
  ],
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: isDev ? "named" : "total-size",
  },
};

Napomknę tylko że projekt był wcześniej utrzymywany na Linuxie, a teraz korzystam z Windows.

komendy w ifie w funkcji

Sun, 30 Jun 2024 16:58:53 +0000

Witam, nie ukrywam, ze miałem duży problem z interpretowaniem, bloków kodu. Jednak udało mi się zrobić na zasadzie:

rozdziel ; a w cele funkcji zapisuj komendy bez ; na końcu.
a w samym bloku do interpetowania funckji dodawaj do ciała funkcji na koniec lini ;

.lecz spotkałem duży problem, gdyż gdy stworze funkcje z ifem w środku, w którym z kolei będą komendy, funkcja zostanie zainterptretowana ale if nie będzię pasować. Czy ktoś ma jakieś rozwiązanie tego? oczywiście wiem ze gdybym napisał prawdziwy interpreter to nie miałbym tego problemu.

kod: https://codepen.io/hist-oria/pen/PovrdQW

z góry dziękuje za pomoc

wywoływanie funkcji z obiektu . ale z dopasowania match

Mon, 24 Jun 2024 18:25:38 +0000

problem taki ze chce

let text = 'Maths.floor(5.7)';
const Maths = {
    pow: function(w, p) {
        return Math.pow(w, p);
    },
    round: function(x) {
        return Math.round(x);
    },
    floor: function(y) {
        return Math.floor(y);
    }
};

let reg = /(\w+)\.(\w+)\((\d+\.?\d*)\)/;
let match = text.match(reg);

próbiwałem z róznymi rzeczmai ale nic nie pomogło wiec

chce ze by

załuzmy mamy zmienne

name = match[1];

func = match[2]

arg = match[3]

a nastepnie chce zrobic tak

name.func(arg);

czyli jesli wpisze Maths.floor(5.3); to powinno zostac wywołane Maths.floor ale to nie działa

no ktos pomoze

moja historia:

pomysląłem ze w moim pseudo interpreterze zamist uzywac dla kazdej funckji wbudoanej miec dopasowanie mozna zrobci jedno dla kazdej co jest bardzo dla mnie optymalne proste i oszczedne

interpretowanie operatorów dla komendy takie pytanie

Thu, 20 Jun 2024 19:12:24 +0000

takie pytanie co do pewnnych rzeczy w powinno sie w interpreterze uzywac osobnych dopasowan dla operatorów i dla komend bo z tego co widziąłem cos w przykądowym kompilatorze to jest to troche zrobione w sposób łaczenia i to mnie zaciekawiło gdyz w sumie nie wiem czy mój interpreter jest poprawny tez uzywałem w nim dla date i time osobnych wyrazen regularnych .btw zapomniałem napisa co dodaniu tego(ogołnie to gdzie to znikneło przeciez to dodałem ach niewazne ) . wie ktos cos na ten temat?

Wczytywanie grafik w aplikacji React

Wed, 19 Jun 2024 13:46:21 +0000

Witam,
tworzę aplikację React (typescript) i mam pewien problem z ikonami. Aplikacja posiada wiele ikon, są one przechowywane w plikach svg i wyświetlane w znaczniku img.

/* Przykład */

import icon from '../icons/icon.svg'

const Component = () => {
   return <>
      <img src={icon} alt='Ikona' />
   </>
}

export default Component

Problem polega na tym, że gdy jakiś komponent jest renderowany, to ikona doczytuje się dopiero po krótkiej chwili.

W jaki sposób mogę wczytać wszystkie ikony do pamięci przeglądarki na samym początku, aby później nie doczytywały się z opóźnieniem?

Czy dobrym pomysłem było by utworzenie komponentów dla ikon, które zwracały by kod svg? (Aktualnie aplikacja wykorzystuje ponad 60 ikon, choć ze wzglądu na warianty kolorystyczne liczba potencjalnych komponentów byłaby nieco mniejsza). Chodzi mi o coś w tym stylu:

const IconA = () => {
   return <svg width="25" /* [...] */ >
       /* [...] */
   </svg>
}

export default IconA

Dziękuję!

moja zmora - interpretowanie wielu lini

Tue, 11 Jun 2024 20:43:26 +0000

mecze sie z tym od paru dni ale no


function runCode() {
    const code = document.getElementById('editor').innerText;
    const consol = document.getElementById('console');

    consol.innerHTML = '';
    interpret(code, consol);
}

function interpret(code, consol) {
    let lines = code.split('\n');
    let error = false;
    const Variable = {};

    for (let i = 0; i < lines.length; i++) {
        let line = lines[i].trim();

        let Wrm = /write\s*:\s*(?:"([^"]*)"|(\w+))/;
        let sRm = /sum:\s*((\d+)(?:\s*,\s*\d+)*)\s*;/;
        let Erm = /equal:\s*(\d+)\s*,\s*(\d+)\s*\[([+\-*\/])\];/;
        let Nrm = /nemo\s+(\w+)\s*=\s*(?:"([^"]*)"|([^;]+));/;
        let Drm = /del:\s+(\w+);/;
        let Frm = /^for\((\d+),\s*(\w+)\):\[(?:"([^"]*)"|([^"\]]*))\];/;
        let NSrm = /nemos\s+(\w+)\s*=\s*\[([^\]]*?)\];/;
        let Crm = /clear:\s+(\w+);/;

////////////////////////////////////////////////////

        const MTrm = /(\w+)\s*=\s*(\w+)\[\]/;

        
///////////////////////////////////////////////////
        
        let matchW = line.match(Wrm);
        let matchS = line.match(sRm);
        let matchE = line.match(Erm);
        let matchN = line.match(Nrm);
        let matchD = line.match(Drm);
        let matchF = line.match(Frm);
        let matchNS = line.match(NSrm);
        let matchC = line.match(Crm);

//////////////////////////////////////////////////

        const MTmatch = line.match(MTrm);
        
//////////////////////////////////////////////////
    
           if (matchW) {
             
                let text = matchW[1];
                let varB = matchW[2];
        
                if (text) {
                    consol.innerHTML += text + '<br>';
                } else if (Variable.hasOwnProperty(varB)) {
                    consol.innerHTML += Variable[varB] + '<br>';
                } else {
                    error = true;
                }
            }
        
        else if (matchS) {
            let numer = matchS[1].split(',').map(Number);
            let sum = 0;

            for (let j = 0; j < numer.length; j++) {
                sum += numer[j];
            }
          
         
            consol.innerHTML += `${sum} <br>`;
        } else if (matchE) {
            let vl1 = parseFloat(matchE[1]);
            let vl2 = parseFloat(matchE[2]);
            let pseudooperator = matchE[3];
            let result;

            switch (pseudooperator) {
                case '+':
                    result = vl1 + vl2;
                    break;
                case '-':
                    result = vl1 - vl2;
                    break;
                case '*':
                    result = vl1 * vl2;
                    break;
                case '/':
                    result = vl1 / vl2;
                    break;
                default:
                    error = true;
                    break;
            }

            consol.innerHTML += `${result}<br>`;
        } else if (matchN) {
            if (MTmatch) {
                let TimeName = MTmatch[1];
                let TimeType = MTmatch[2];
                let DATETIMES = new Date(); 
        
                switch (TimeType) {
                    case 'TimeDate':
                        Variable[TimeName] = `${DATETIMES.getHours()}.${DATETIMES.getMinutes()}.${DATETIMES.getSeconds()}|${DATETIMES.getDate()}.${DATETIMES.getMonth() + 1}.${DATETIMES.getFullYear()}`;
                        break;
                    case 'Time':
                        Variable[TimeName] = `${DATETIMES.getHours()}.${DATETIMES.getMinutes()}.${DATETIMES.getSeconds()}`;
                        break;
                    case 'Date':
                        Variable[TimeName] = `${DATETIMES.getDate()}.${DATETIMES.getMonth() + 1}.${DATETIMES.getFullYear()}`;
                        break;
                    default:
                        error = true;
                        break;
                }
            } else {
                let variableName = matchN[1];
                let variableValue = matchN[2];
                Variable[variableName] = variableValue;
        }
    }      else if (matchD) {
            let varDB = matchD[1];
            if (Variable.hasOwnProperty(varDB)) {
                delete Variable[varDB];
            }
        }
          else if (matchF){
              console.log(matchF);
              let li = matchF[1];
              let opr = matchF[2];
              let warc = matchF[3];
              let warcs = matchF[4];

            for (let i = 1; i <= li; i++) {

                switch (opr) {
                    case 'write':

                        if (warc) {
                            consol.innerHTML += `${warc}<br>`;
                        } else if (Variable.hasOwnProperty(warcs)) {
                            consol.innerHTML += `${Variable[warcs]}<br>`;
                        } else {
                            error = true;
                        }
                        break;
                    default:
                        error = true;
                        break;
                }

            }
        }
          else if (matchNS){
            let arrayname = matchNS[1];
              const elm = matchNS[2].split(',').map(element => element.trim());


              Variable[arrayname] = elm;
          }
            else if(matchC){
                
            }
          
          else {
            error = true;
        }
    }

    if (error) {
        consol.innerHTML = 'Error!';
    }
}

wiem ten kod jets nie do koncony i nie działa dokładnie jeszce ale no

gdy kod jest podzielony na linie a kazda linia interpretowana osobno to co zrobic by interpretowało komendy wieloliniowe

regaxy dla wieku lini - interpreter

Sat, 08 Jun 2024 14:39:16 +0000

witam własnie napodkałem problem i to duzy czy ktos wie jak za pomoca regaxa pod czas gdy kod jest podzielony na linie interpretowac to

.funckt hej(){

}
mi nie działa bo to jakby pojedyncza linia jets interpretowana nie te wszytskie i jak to rozwiązac

zmienne - interpreter

Fri, 07 Jun 2024 18:29:56 +0000

witam zacząłem tworzyc zmienne i same zmienne udało mi sie stworzyc tylko mam problem z uzyciem write do wypisania zmiennej udało mi sie podzielic na 2 1 to z "" a 2 to bez "" ale ogólnie gdy wypisuje zawartosc obiektu to undefined choc wszystko niby sie zgadza

        if (matchW) {
            console.log(Variable);
            console.log(matchW);
            let text = matchW[1];
            let varB = matchW[2];

            if (text){
                consol.innerHTML += text + '<br>';
            }
            else if (varB){
                console.log(varB)
                consol.innerHTML += Variable[varB] + '<br>';
            }
    }

czy ktos pomoze ?

dodatkowe dane:

Object
1. "hej ": "hello"
2. [[Prototype]]: Object

SCRIPT.js:86

Array(3)
1. 0: "write: hej"
2. 1: undefined
3. 2: "hej"
4. groups: undefined
5. index: 0
6. input: "write: hej;"
7. length: 3
8. [[Prototype]]: Array(0)

SCRIPT.js:94hej

SCRIPT.js:96undefined

a w edytor wpisuje nemo hej = "hello";

write: hej; a to cały kod oprócz funkcji jak show menu import i export

function runCode() {
    const code = document.getElementById('editor').innerText;
    const consol = document.getElementById('console');

    consol.innerHTML=' ';
    interpret(code, consol);
}

function interpret(code, consol) {
    let lines = code.split('\n');
    let error = false;
    const Variable = {};

    for (let i = 0; i < lines.length; i++) {
        let line = lines[i].trim();

        let Wrm = /write\s*:\s*(?:"([^"]*)"|(\w+))/;
        let sRm = /sum:\s*((\d+)(?:\s*,\s*\d+)*)\s*;/;
        let Erm = /equal:\s*(\d+)\s*,\s*(\d+)\s*\[([+\-*\/])\];/;
        let Nrm = /nemo\s+([\w\s]+)\s*=\s*"(.*?)";/;

        let matchW = line.match(Wrm);
        let matchS = line.match(sRm);
        let matchE = line.match(Erm);
        let matchN = line.match(Nrm);

        if (matchW) {
            console.log(Variable);
            console.log(matchW);
            let text = matchW[1];
            let varB = matchW[2];

            if (text){
                consol.innerHTML += text + '<br>';
            }
            else if (varB){
                console.log(varB);
                consol.innerHTML += Variable[varB] + '<br>';
            }
    }   else if (matchS) {
            let numer = matchS[1].split(',').map(Number);
            let sum = 0;

            for (let j = 0; j < numer.length; j++) {
                sum += numer[j];
            }

            consol.innerHTML += `${sum} <br>`;
        } else if (matchE) {
            let vl1 = parseFloat(matchE[1]);
            let vl2 = parseFloat(matchE[2]);
            let pseudooperator = matchE[3];
            let result;

            switch (pseudooperator) {
                case '+':
                    result = vl1 + vl2;
                    break;
                case '-':
                    result = vl1 - vl2;
                    break;
                case '*':
                    result = vl1 * vl2;
                    break;
                case '/':
                    result = vl1 / vl2;
                    break;
                default:
                    error = true;
                    break;
            }

            consol.innerHTML += `${result}<br>`;
        }  else if (matchN) {
            
                let variableName = matchN[1];
                let variableValue = matchN[2];
                Variable[variableName] = variableValue;
            }
            
        else {
            error = true;
        }
    }

    if (error) {
        consol.innerHTML = 'Error!';
    }
}

jak ustawic key alt + m zeby obsługiwac te zdarzenie

Tue, 04 Jun 2024 14:59:18 +0000

witam chce do nighttree dodac skróty klawiszowe do pokazywania menu ale stanąłem na tym

const key = {
alt + m
}

i tak sie zastanawiam czy to dobry sposób połaczenia i jak ogolnie to zrobic

Czy linki które są otwierane za pomocą onclick="window.open('https://www.example.com/.html','_blank')" są nofollow?

Mon, 03 Jun 2024 10:13:04 +0000

Hej,

Mam pytanie czy takie linki, które są tworzone za pomocą javascript np. onclick="window.open('https://www.example.com/.html','_blank')" są nofollow czy dofollow dla przeglądarki. Jeśli są dofollow to jakim sposobem mogę zrobić aby były nofollow przy założeniach, że nie mogę zmienić generowania tego kodu tylko mogę modyfikować taki jaki już jest wygenerowany?

javascript komunikat o błędzie (funkcja anonimowa)

Mon, 03 Jun 2024 07:36:08 +0000

Witam, mam pewien problem którego nie do końca rozumiem, mam dwa pliki js w jednym znajduje się tablica:

var __config_name {
'zmienna1' : `m_1234`,
'zmienna2' : `m_5678`,
}

i w drugim pliku też mam tablicę:

var update = {
__config_name['zmienna1'] : "GHz",
}

i w konsoli otrzymuje komunikat:

Uncaught SyntaxError: Unexpected token '['

Nie znam się na JS i nie bardzo rozumiem co jest przyczyną takiego błędu, próbowałem zmieniać typ tablicy __config_name z var na const, let ale nic to nie dało

Pobieranie danych z checkboxa

Thu, 30 May 2024 19:48:32 +0000

Dzień dobry!

Chciałbym, aby użytkownik wybrał jedną lub więcej rybek, a jego wybór się zapisał. Zrobiłem to:

// elementy sekcji fish
const fish__type_1 = document.querySelector("#daniomargaritatus");
const fish__type_2 = document.querySelector("#aphyosemionaustrale");
const fish__type_3 = document.querySelector("#corydorashabrosus");
const fish__type_4 = document.querySelector("#corydorasaeneus");
const fish__type_5 = document.querySelector("#pseudomugilgertrudy");
const fish__type_6 = document.querySelector("#poeciliasphenops");
const fish__type_7 = document.querySelector("#bettasplendens");
const fish__type_8 = document.querySelector("#trichopodusleerii");
const fish_list = [fish__type_1, fish__type_2, fish__type_3, fish__type_4, fish__type_5, fish__type_6, fish__type_7, fish__type_8];

Elementy HTML pobrane, lista zrobiona. (linie 19-28)

let selected_fish_type;
let selected_fish_type_list = [];

Zmienne przygotowane. (linie 55-56)

const get_fish_type = () => {
    for (let element of fish_list) {
        if (element.checked) {
            selected_fish_type = element.value;
            selected_fish_type_list.push(selected_fish_type);
        }
    };
};

Funkcja zrobiona. (linie 162-169)

    get_fish_type();

... i wywołana. (linia 231)

I nie wyświetla listy rybek. Gdzie jest błąd? Proszę o pomoc.

Jakby co, to załączam całość JS:

const start = document.querySelector(".start");
const dimensions = document.querySelector(".dimensions");
const subsoil = document.querySelector(".subsoil");
const fish = document.querySelector(".fish");
const summary = document.querySelector(".summary");

// elementy sekcji dimensions
const dimensions__lenght = document.querySelector(".dimensions__lenght__input");
const dimensions__width = document.querySelector(".dimensions__width__input");
const dimensions__height = document.querySelector(".dimensions__height__input");

// elementy sekcji subsoil
const subsoil__height = document.querySelector(".subsoil__height__input");
const subsoil__type_1 = document.querySelector("#sand");
const subsoil__type_2 = document.querySelector("#finegravel");
const subsoil__type_3 = document.querySelector("#coarsegravel");
const subsoil_list = [subsoil__type_1, subsoil__type_2, subsoil__type_3];

// elementy sekcji fish
const fish__type_1 = document.querySelector("#daniomargaritatus");
const fish__type_2 = document.querySelector("#aphyosemionaustrale");
const fish__type_3 = document.querySelector("#corydorashabrosus");
const fish__type_4 = document.querySelector("#corydorasaeneus");
const fish__type_5 = document.querySelector("#pseudomugilgertrudy");
const fish__type_6 = document.querySelector("#poeciliasphenops");
const fish__type_7 = document.querySelector("#bettasplendens");
const fish__type_8 = document.querySelector("#trichopodusleerii");
const fish_list = [fish__type_1, fish__type_2, fish__type_3, fish__type_4, fish__type_5, fish__type_6, fish__type_7, fish__type_8];

// elementy sekcji summary
const p1 = document.querySelector(".p1");
const p2 = document.querySelector(".p2");
const p3 = document.querySelector(".p3");

const p4 = document.querySelector(".p4"); //tymczasowe
const p5 = document.querySelector(".p5"); //tymczasowe
const p6 = document.querySelector(".p6"); //tymczasowe
const p7 = document.querySelector(".p7"); //tymczasowe
const p8 = document.querySelector(".p8"); //tymczasowe
const p9 = document.querySelector(".p9"); //tymczasowe
const p10 = document.querySelector(".p10"); //tymczasowe

// przyciski
const btn1 = document.querySelector(".start__button");
const btn2 = document.querySelector(".dimensions__button");
const btn3 = document.querySelector(".subsoil__button");
const btn4 = document.querySelector(".fish__button");
const btn5 = document.querySelector(".summary__button");

let aqua_lenght;
let aqua_width;
let aqua_height;
let soil_height;
let selected_soil_type;
let selected_fish_type;
let selected_fish_type_list = [];


const get_dimensions_lenght = () => {
    aqua_lenght = dimensions__lenght.value;
};

const get_dimensions_width = () => {
    aqua_width = dimensions__width.value;
};

const get_dimensions_height = () => {
    aqua_height = dimensions__height.value;
};

const get_subsoil_height = () => {
    soil_height = subsoil__height.value;
};

//Obliczenia i ich wyniki (B-E) v v v

let glass_thickness_mm;
let glass_volume;
let glass_weight;
let aqua_netto_volume;
let subsoil_volume;
let subsoil_density;
let subsoil_weight_kg;
let total_weight_kg;

const get_subsoil_type = () => {
    for (let element of subsoil_list) {
        if (element.checked) {
            selected_soil_type = element.value;
            break;}
        else {
            selected_soil_type = "default";
        }
    };
};

const calculate_subsoil_density = () => {
    if (selected_soil_type == "sand") {
        subsoil_density = 2.6;
    }
    else if (selected_soil_type == "finegravel") {
        subsoil_density = 2.2;
    }
    else if (selected_soil_type == "coarsegravel") {
        subsoil_density = 1.8;
    }
    else {
        subsoil_density = 2;
    }
};

const calculate_glass_thickness = () => {
    let lh = (aqua_lenght * 1) + (aqua_height * 1);
    if (lh > 170) {
        glass_thickness_mm = 12;
    }
    else if (lh > 140) {
        glass_thickness_mm = 1;
    }
    else if (lh > 120) {
        glass_thickness_mm = 8;
    }
    else if (lh > 90) {
        glass_thickness_mm = 6;
    }
    else if (lh > 70) {
        glass_thickness_mm = 5;
    }
    else {
        glass_thickness_mm = 4;
    }
};

const calculate_glass_volume = () => {
    let glass_bottom = aqua_lenght * aqua_width * glass_thickness_mm / 10;
    let glass_front_back = aqua_lenght * aqua_height * glass_thickness_mm / 10 * 2;
    let glass_left_right = aqua_width * aqua_height * glass_thickness_mm / 10 * 2;
    glass_volume = glass_bottom + glass_front_back + glass_left_right;
};
 
const calculate_glass_weight = () => {
    glass_weight = glass_volume * 2.5;
};

const calculate_aqua_netto_volume = () => {
    let aqua_brutto_volume = aqua_lenght * aqua_width * aqua_height;
    aqua_netto_volume = aqua_brutto_volume - glass_volume;
};

const calculate_subsoil_volume = () => {
    subsoil_volume = (aqua_lenght - 2 * glass_thickness_mm / 10) * (aqua_width - 2 * glass_thickness_mm / 10) * soil_height;
};

const calculate_subsoil_weight_kg = () => {
    subsoil_weight_kg = subsoil_volume * subsoil_density / 1000;
};

const calculate_total_weight_kg = () => {
    total_weight_kg = ((glass_weight + aqua_netto_volume) / 1000) + subsoil_weight_kg;
};

const get_fish_type = () => {
    for (let element of fish_list) {
        if (element.checked) {
            selected_fish_type = element.value;
            selected_fish_type_list.push(selected_fish_type);
        }
    };
};

//Obliczenia i ich wyniki (B-E) ^ ^ ^

const refresh_data = () => {
    glass_thickness_mm = 0;
    glass_volume = 0;
    glass_weight = 0;
    aqua_netto_volume = 0;
    subsoil_density = "";
    subsoil_density = 0;
    subsoil_volume = 0;
    subsoil_weight_kg = 0;
    total_weight_kg = 0;
    selected_fish_type = "";
    selected_fish_type_list = [];
}

const display_summary = () => {
    calculate_glass_thickness();
    calculate_glass_volume();
    calculate_glass_weight();
    calculate_aqua_netto_volume();
    calculate_subsoil_density();
    calculate_subsoil_volume();
    calculate_subsoil_weight_kg();
    calculate_total_weight_kg();

    p1.textContent = glass_thickness_mm;
    p2.textContent = subsoil_weight_kg;
    p3.textContent = total_weight_kg;
    
    p4.textContent = glass_volume; //tymczasowe
    p5.textContent = glass_weight; //tymczasowe
    p6.textContent = aqua_lenght; //tymczasowe
    p7.textContent = aqua_width; //tymczasowe
    p8.textContent = aqua_height; //tymczasowe
    p9.textContent = subsoil_density //tymczasowe
    p10.textContent = selected_fish_type_list //tymczasowe
};

const go_to_dimensions = () => {
    dimensions.style.display = "flex";
    start.style.display = "none";
};

const go_to_subsoil = () => {
    get_dimensions_lenght();
    get_dimensions_width();
    get_dimensions_height();
    subsoil.style.display = "flex";
    dimensions.style.display = "none";
};

const go_to_fish = () => {
    get_subsoil_height();
    get_subsoil_type();
    fish.style.display = "flex";
    subsoil.style.display = "none";
};

const go_to_summary = () => {
    get_fish_type();   
    summary.style.display = "flex";
    fish.style.display = "none";  
    display_summary();              
};                                  

const go_to_start = () => {
    refresh_data();
    start.style.display = "flex";
    summary.style.display = "none";
};

btn1.addEventListener("click", go_to_dimensions);
btn2.addEventListener("click", go_to_subsoil);
btn3.addEventListener("click", go_to_fish);
btn4.addEventListener("click", go_to_summary);
btn5.addEventListener("click", go_to_start);

Nieprawidłowe ścieżki do czcionek w pliku css w wersji produkcyjnej (Electron, Vue, Webpack)

Sat, 25 May 2024 16:09:18 +0000

Po zbudowaniu aplikacji, czcionki się nie wczytują z powodu nieprawidłowych ścieżek: np. w pliku css url do czcionki wygląda ''app:///fonts/Saira-Regular.579c1ad5.ttf" a powinno być "app://./fonts/Saira-Regular.579c1ad5.ttf" ( jest "///" zamiast "//./"). Co ciekawe problem nie występuje w pliku html, pliki css i js mają prawidłowe ścieżki, tylko w css podczas używania url() ścieżka się psuje.

Na dev problem nie występuje..

Załączam link do commita w którym występował ten problem: https://github.com/vxidfunctixn/Diary/tree/c6d80cfa59490f19500d72758080cdcf13656af6

canvas-wypisywanie wzoru struktury zwiążku chemicnego

Mon, 06 May 2024 22:00:54 +0000

witam mam problem którego nie mogłem rozwiązac wiec postanowiłem sie zapytac chce wypisac wzór

O

/ \

H H

troche tu sie psuje jednak nie moge poprawnie ustworzyc tego bo pozycje nie są odpowiednie i sie psuje znaczy pozycje ze np ctx.filltext(" o", 50, 100); to te spacje znikają a nie powinny i czy ktos mi pomoze z groy dziekuje kod:

<!doctype html>
<html lang="pl">
<head>


    <title>chemia</title>
    <style>


        body{

        background-color: grey;



}
        #obraz{

            border: 3px solid #2E8B57;
            background-color: black;





}


        
    </style>

    
</head>
<body>


    <input type="text" id="nazwa" placeholder="skrót pierwiastka">
    <input type="submit" onclick="zrob()" value="zobacz">

    <canvas id="obraz" width="500" height="500"></canvas>


    <script>

const canvas = document.getElementById("obraz");
const ctx = canvas.getContext("2d");

function zrob() {
    let pier = document.getElementById("nazwa").value;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (pier === "H") {
        ctx.font = "50px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("Wodór  [h]", 50, 70);
        
        ctx.font = "10px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "top"; 
        ctx.fillStyle = "white";
        
        let tekst = "Wodór jest najlżejszym pierwiastkiem chemicznym, posiadającym atomową liczbę protonów równą jeden. Jest to gaz bezbarwny, bez smaku i zapachu. Jego najczęstsze izotopy to prot (jedyny stabilny izotop) oraz deuter (z jedenastką neutronów) i tryt (z dwunastką neutronów), stanowiące izotopy promieniotwórcze. Występuje w wielu związkach chemicznych, w tym w wodzie oraz związkach organicznych, takich jak węglowodory. Wodór jest niezbędny do życia, występując w postaci wody, składnika większości substancji organicznych i odgrywając kluczową rolę w procesach biochemicznych. Ponadto, wodór jest powszechnie wykorzystywany w przemyśle, zwłaszcza w produkcji amoniaku do nawożenia roślin oraz w produkcji wodoru i wodorowęglanu sodu.";

        let maxWidth = canvas.width - 100;
        let x = 50; 
        let y = 250; 
        let words = tekst.split(' '); 
        let line = ''; 


        for (let i = 0; i < words.length; i++) {
            let testLine = line + words[i] + ' ';
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            if (testWidth > maxWidth && i > 0) {
                ctx.fillText(line, x, y);
                line = words[i] + ' ';
                y += 25; 
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
    }


    if (pier === "H20") {
        ctx.font = "50px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("woda [H20]", 50, 70);

        
        ctx.font = "10px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "top"; 
        ctx.fillStyle = "white";
        
        let tekst = "";

        let maxWidth = canvas.width - 100; 
        let x = 50; 
        let y = 250; 
        let words = tekst.split(' '); 
        let line = '';

        for (let i = 0; i < words.length; i++) {
            let testLine = line + words[i] + ' ';
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            if (testWidth > maxWidth && i > 0) {
                ctx.fillText(line, x, y);
                line = words[i] + ' ';
                y += 25; 
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
    }




    
}





        
    </script>




    
</body>
</html>

drzewo danych

Wed, 01 May 2024 12:54:09 +0000

witam chciałem zrobic drzewo danych z uzyciem zmiennych tablic obiektów itp ale nie wiem jaki sposób najlepszy a takze jak by to zrobic

własny jezyk programowania-pozycje dwóch operatorów

Thu, 25 Apr 2024 18:53:36 +0000

witam razem z chatem gbt mamy problem z pewną rzeczxą

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interpreter języka</title>
</head>
<body>
    <h1>Interpreter języka</h1>

    <script>
        // Tworzenie obiektu reprezentującego interpreter języka
     let interpreter = {
            parse: function(code) {
                let tokens = code.split(' ');
                let opr2 = parseFloat(tokens[2]); 
                let opr1 = parseFloat(tokens[0]); 
                let opr = tokens[1];
                let oprText = tokens.slice(1).join(' ');
                return { opr1, opr2, opr, oprText };
            },
        
            // Funkcja wykonująca operację na podstawie sparsowanego kodu
            execute: function(parsedCode) {
                switch (parsedCode.opr) {
                    case '+':
                        return parsedCode.opr1 + parsedCode.opr2;
                    case '++':
                        return (parsedCode.opr1 + parsedCode.opr2) * 2;
                    case 'write':
                        return parsedCode.oprText;
                    default:
                        throw new Error('Nieznany operator: ' + parsedCode.opr);
                }
            }
        };

        let code = 'write hello';
        
        let parsedCode = interpreter.parse(code);
        let result = interpreter.execute(parsedCode);
        console.log('Wynik:', result); // Oczekiwany wynik: 8
    </script>
</body>
</html>

jak widac albo i nie nie moge z chatem gbt rozwiązac problemu bo jak działa write to plus nie działa ze wzgledu na pozycje tokenów z ifami itp próbowalismy ale nic a jak plus działa to nie działa write bo nie istnieje operator hello

JavaScript + TIA Portal

Thu, 25 Apr 2024 07:19:11 +0000

Cześć,

Chciałbym odczytać ze sterownika różne zmienne z poziomu web serwera za pomocą JavaScript.
Obecnie mam takie coś:

Fragment pliku .js:

let test_value;

$(document).ready(function(){
    $.ajaxSetup({ cache: false });

    setInterval(actuall_time, 1000)
    setInterval(function() {

        $.get("PLC_com_state.htm", function(result){
            test_value = result;
        });

    },2000);
});

Plik "PLC_com_state.htm":

:="test":

Tag na sterowniku:

Teraz tak, jak wezmę w komentarz fragment:

$.get("PLC_com_state.htm", function(result){
            test_value = result;
        });

.. to strona użytkownika działa ok ale jak usunę komentarz (fragment jest aktywny) zrywa mi połączenie z PLC, nie można go znaleźć w sieci i jedyne co zostaje to restart sterownika.

Nie wiem co może być przyczyną ani jakie dodatkowe informacje są potrzebne, sterownik na jakim pracuję: 6es7510-1sk03-0ab0 [CPU 1510SP F-1 PN].

Czy ktoś wie o co chodzi, jest w stanie pomóc, Jeśli są potrzebne dodatkowe informację to chętnie udzielę.

Przechwytywanie zmian klas ze slidera

Mon, 22 Apr 2024 14:36:00 +0000

Witam wszystkich bardzo serdecznie. Jestem dość początkujący i utknąłem z jednym problemem. Niestety nie mogę dodać pełnego kodu, jednak objaśnię tutaj strukturę oraz zastosowane rozwiązania.

Korzystam ze slidera SplideJS.

Struktura wygląda mniej więcej tak:

<section>
<div class='city__table'>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
</div>
<div class='city__table'>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
<a href="#" data-city-link="miasto" > Nazwa miasta</a>
</div>
<div>
<ul class='SplideJS'>
<li data-city-name> Tutaj zdjęcie miasta </li>
<li data-city-name> Tutaj zdjęcie miasta </li>
<li data-city-name> Tutaj zdjęcie miasta </li>
</ul>
</div>
</section>

Dwa pierwsze divy generowane są przez PHP (lista 40 miast podzielona na dwa divy po równo)
atrybut data-city-link posiada nazwę miasta pobraną z tablicy owych miast

Trzeci div zawiera slider (SplideJS) i zawiera zmieniające się zdjęcia co 4 sekundy, każdy element listy ma dopisany atrybut data-city-name, który jest identyczny z atrybutem data-city-link

Aktualnie widoczny slide otrzymuje ze SplideJS klasę "is-active".

Teraz mój problem:

Chciałbym w JS przechwycić aktualnie wyświetlony slajd, odczytać z niego atrybut data, odnaleźć w jednym z poprzednich divów ten sam atrybut data oraz nadać na czas widoczności slajdu inną klasę dla <a> o odpowiednim atrybucie data.

Próbowałem to wykonać za pomocą:

1. Pobrania wszystkich elementów poprzez querySelectorAll( poprzez klasę ). W pętli for spróbowałem ustawić MutationObserver korzystając stąd: Developer Mozilla
Niestety nic to nie dało - jest ogromne prawdopodobieństwo, że coś robiłem źle lub kompletnie nie zrozumiałem działania MutationObserver. Chciałem tutaj wkleić kod, jednak nerwy wygrały i usunąłem cały kod, pozostawiając jedynie pobranie elementów...

2. Nie znalazłem także żadnego eventu w addEventListener aby mógł pasować do mojego problemu.

Prosiłbym chociaż o nakierowanie mnie, abym mógł w jakiś sposób to rozwiązać.

Sweetalert nie wyświetla komunikatu

Thu, 18 Apr 2024 16:52:35 +0000

Cześć,

wróciłem do tego kodu po jakimś czasie. Zapamiętałem, że działał, ale może czegoś nie zapisałem. Wydaje mi się, że wszystko jest ok, ale może widzicie więcej. Nie wyświetla się komunikat o wygranej i remisie w grze w kółko i krzyżyk, mimo, że trzy pola otrzymują taką samą klasę.. Od razu zaznaczam. Załączyłem skrypt SweetAlerta ;)

https://codepen.io/Skulak13/pen/XWQxyjy

speechSynthesis

Mon, 08 Apr 2024 21:50:56 +0000

witam, dlaczego mi to w .join nie wchodzi? za duże?

const arr = [];
window.speechSynthesis.onvoiceschanged = function() 
{
    for (let i = 0; i < 322; i++) 
    {
        var name = window.speechSynthesis.getVoices()[i].name;
        arr.push(name);
    }
    return arr;
}                
function get_arry() 
{
    return arr;
}
const viovcer = get_arry();
const viovcer_join = viovcer.join("");
const btoa_viovcer = btoa(viovcer_join);
//window.location= "?voices=" + encodedArray;
console.log(btoa_viovcer);

druga funkcja niepotrzebna ale już kombinuje z tym join

Canvas animacja bloków

Mon, 08 Apr 2024 11:12:22 +0000

Witam ,mam taki problem bo muszę się dowiedzieć jak tworzyć w pętlach np 4 obiekty bo myślę że dodać kilka obiektów lae wolę być pewnym i potrzebuje pomocy z animacją w canvas'ie oto kod :

// pamiec                                                                 
const animacja = document.getElementById("ekran").value;

const magazyn = [];

// pamiec

// tworzenie 
  
  function nowy ()
{

  for (let i = 0; i < 4; i++) {
    const blok = {
    }
}
// tworzenie 

// animacja

// animacja

Postanowiłem sobie Tak posortować komentarzami

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>Zderzac hadronów!</title>
  <link rel="stylesheet" href="wyglad.css" type="text/css">
  <script src="zrodło.js"></script>
</head>
<body>
  
  <div id="com">
  
   <canvas width="400" height="300" id="ekran"></canvas>
    
    
  
    
  </div>
</body>
</html>

czytanie tekstu js

Sun, 07 Apr 2024 18:27:56 +0000

dubluje? i zmieniają się pozycje głosów, czy to naturalna procedura? np głos z 271 przeskakuje na pozycję 222 ?

pytam bo jeżeli to normalne to będzie trzeba wywoływać całą listę przed za każdym razem

window.speechSynthesis.onvoiceschanged = function() 
{
	const utterance = new SpeechSynthesisUtterance();
	utterance.text = "test czytania window wywołania - głos działa sprawdzone - ale dubluje -dlaczego? pomóż koleżanko i kolego";
	utterance.voice = window.speechSynthesis.getVoices()[222];
	utterance.pitch = 1.4; 
	utterance.rate = 1.0;
	window.speechSynthesis.speak(utterance);
	console.log(window.speechSynthesis.getVoices());
};

jak resetować timer js za każdym razem gdy odświeżam stronę

Sat, 06 Apr 2024 09:55:21 +0000

<div id="timer"></div>

const Interval = setInterval(setTimer, 1000);
function setTimer() 
{
	const d = new Date();
	const seconds = d.getMinutes() * 60 + d.getSeconds();
	const fseconds = 480;
	const timeleft = fseconds - (seconds % fseconds);
	const result = parseInt(timeleft / 60) + ":" + (timeleft % 60);
	if(timeleft==1)
	{
		window.location = "";
	}
	document.getElementById("timer").innerHTML = result;
	//console.log(seconds);
};

Pytanie o Elektronika.push();

Mon, 01 Apr 2024 19:40:39 +0000

Witam bo mam pytanie jak zrobić żeby dodawać metodą push zmieną

Dodawanie i usuwanie z tablicy elementów

Mon, 01 Apr 2024 14:59:21 +0000

Witam potrzebuje się dowiedzieć dwóch a nawet 3 rzeczy 1.jak zweryfikować jaką opcje wybrałem w tagach <option> i 2.jak dodawać elementy do tablicy ? I 3.jak usuwać elementy z tablicy bo wpadłem na pomysł sortowania kod:

const Elektronika = [""];

const  jedzienie = [""];

const Meble = [""];

function posortuj()
{
    
    
    
    
}

I dalej nie wiem co zrobić

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>srotownik!</title>
  <link rel="stylesheet" href="scena.css" type="text/css">
  <script src="kulisy.js">
  </script>
</head>
<body>
  
  <div id="dodawanie"> DODAJ NOWY PRZEDMIOT !
    <br>
    <br>
    <select id="kategoria">
      <option>Elektronika</option>
      <option>jedzienie</option>
      <option>Meble</option>
      
      
    </select>
    
  <input type="text" id="nowy" > 
   
    <input type="button" value="dodaj" onclick="posortuj()">
  
    
    
    
  </body>
</html>

Oczywiście jeszcze później dodam opcje wypisywania z tablicy elementów ale to później .pomoże ktoś z góry dziękuję?

Jak wypisać całą tablice jednym if w przypadku np populacja: drugi rząd .PKB:?

Fri, 29 Mar 2024 08:31:56 +0000

function pokaz_dane_kraju()
{
  
    const polska = ["populacja:37milionów","pkb:679,4 miliarda USD ","połozenie:Europa sródkowa","prezydent:Andziej duda","ustrój:Demokracja","Sojusz:Unia Europerska/Nato","Waluta:Zł","Rok:2021"]; 
    const niemcy = ["populacja:83,2 milionów","pkb:4,26 tryliardów USD","połozenie:sródkowa Europa ","prezydent:Frank-Walter Steinmeier","ustrój:Demokracja ","sojusz:Unia Europerska/Nato ","Waluta:Euro","rok:2021"];
    const francja = ["populacja:67,75 miliona","pkb:2,958 tryliarda USD","połozenie:Europa zachodnia","prezydent:Emmanuel macron","ustrój:Demokracja","sojusz:Unia Europejska/nato","Waluta:Euro","rok:2021"];
    const usa = ["populacja:331,9 miliona","pkb:23,32 tryliarda USD,","połozenie:Ameryka północna ","prezydent:Joe Biden","ustrój:Demokratyczna republika","sojusz:Nato","Waluta:dolar","rok:2021"];
    const rosja = ["populacja:143,4 miliona","pkb:1,779 tryliarda ","połozenie:północną Azję i północno-wschodnią i wschodnią część Europy,","prezydent:putin","ustrój:demokratyczny","sojusz:Jest członkiem wielu międzynarodowych organizacji, m.in. jednym z pięciu stałych członków Rady Bezpieczeństwa ONZ, G20, Euroazjatyckiej Unii Gospodarczej, Wspólnoty Niepodległych Państw, Szanghajskiej Organizacji Współpracy i odgrywa znaczącą rolę w polityce światowej.","Waluta:Ruble","rok:2021"];
    
    const Unia_Europejska = ["populacja:448,4 mln","pkb:14,5 bln euro.","połozenie:Europa","prezydent:brak","ustrój:Demokracja","sojusz:on and czesciowo nato","Waluta:Euro","rok:2021"];
    const kraj = document.getElementById("nazwa").value.trim();
    
   


    if (kraj == "Polska") document.getElementById("populacja").innerText= polska[0];
    if (kraj == "Polska") document.getElementById("pkb").innerText= polska[1];
    if (kraj == "Polska") document.getElementById("połozenie").innerText= polska[2];
    if (kraj == "Polska") document.getElementById("prezydent").innerText= polska[3];
    if (kraj == "Polska") document.getElementById("ustrój").innerText= polska[4];
    if (kraj == "Polska") document.getElementById("sojusz").innerText= polska[5];
    if (kraj == "Polska") document.getElementById("waluta").innerText= polska[6];
    if (kraj == "Polska") document.getElementById("rok").innerText= polska[7];
   
    if (kraj == "Niemcy") document.getElementById("populacja").innerText= niemcy[0];
    if (kraj == "Niemcy") document.getElementById("pkb").innerText= niemcy[1];
    if (kraj == "Niemcy") document.getElementById("połozenie").innerText= niemcy[2];
    if (kraj == "Niemcy") document.getElementById("prezydent").innerText= niemcy[3];
    if (kraj == "Niemcy") document.getElementById("ustrój").innerText= niemcy[4];
    if (kraj == "Niemcy") document.getElementById("sojusz").innerText= niemcy[5];
    if (kraj == "Niemcy") document.getElementById("waluta").innerText= niemcy[6];
    if (kraj == "Niemcy") document.getElementById("rok").innerText= niemcy[7];
    
    if (kraj == "Francja") document.getElementById("populacja").innerText= francja[0];
    if (kraj == "Francja") document.getElementById("pkb").innerText= francja[1];
    if (kraj == "Francja") document.getElementById("połozenie").innerText= francja[2];
    if (kraj == "Francja") document.getElementById("prezydent").innerText= francja[3];
    if (kraj == "Francja") document.getElementById("ustrój").innerText= francja[4];
    if (kraj == "Francja") document.getElementById("sojusz").innerText= francja[5];
    if (kraj == "Francja") document.getElementById("waluta").innerText= francja[6];
    if (kraj == "Francja") document.getElementById("rok").innerText= francja[7];
    
    
    if (kraj == "Usa") document.getElementById("populacja").innerText= usa[0];
    if (kraj == "Usa") document.getElementById("pkb").innerText= usa[1];
    if (kraj == "Usa") document.getElementById("połozenie").innerText= usa[2];
    if (kraj == "Usa") document.getElementById("prezydent").innerText= usa[3];
    if (kraj == "Usa") document.getElementById("ustrój").innerText= usa[4];
    if (kraj == "Usa") document.getElementById("sojusz").innerText= usa[5];
    if (kraj == "Usa") document.getElementById("waluta").innerText= usa[6];
    if (kraj == "Usa") document.getElementById("rok").innerText= usa[7];
    
    if (kraj == "Rosja") document.getElementById("populacja").innerText= rosja[0];
    if (kraj == "Rosja") document.getElementById("pkb").innerText= rosja[1];
    if (kraj == "Rosja") document.getElementById("połozenie").innerText= rosja[2];
    if (kraj == "Rosja") document.getElementById("prezydent").innerText= rosja[3];
    if (kraj == "Rosja") document.getElementById("ustrój").innerText= rosja[4];
    if (kraj == "Rosja") document.getElementById("sojusz").innerText= rosja[5];
    if (kraj == "Rosja") document.getElementById("waluta").innerText= rosja[6];
    if (kraj == "Rosja") document.getElementById("rok").innerText= rosja[7];
    
    if (kraj == "Unia Europejska") document.getElementById("populacja").innerText= Unia_Europejska[0];
    if (kraj == "Unia Europejska") document.getElementById("pkb").innerText= Unia_Europejska[1];
    if (kraj == "Unia Europejska") document.getElementById("połozenie").innerText= Unia_Europejska[2];
    if (kraj == "Unia Europejska") document.getElementById("prezydent").innerText= Unia_Europejska[3];
    if (kraj == "Unia Europejska") document.getElementById("ustrój").innerText= Unia_Europejska[4];
    if (kraj == "Unia Europejska") document.getElementById("sojusz").innerText= Unia_Europejska[5];
    if (kraj == "Unia Europejska") document.getElementById("waluta").innerText= Unia_Europejska[6];
    if (kraj == "Unia Europejska") document.getElementById("rok").innerText= Unia_Europejska[7];
    
    
}    
    
    


["populacja:","pkb:","połozenie:","prezydent:","ustrój","sojusz:","Waluta:","rok:"];

Witam chciałbym żeby zamiast tych 7 if używać jednego w tym przypadku żeby wysło jak te 7 if tylko że jeden powie ktoś jak by to zrobić? I HTML

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>inf!</title>
  <link rel="stylesheet" href="graf.css" type="text/css">
  <script src="wach.js">
  </script>
</head>
<body>
  
  
    
    <input type="text" id="nazwa">
  <br>
  <br>
  <input type="submit" value="pokaz dane" onclick="pokaz_dane_kraju()">
    
  

  <div id="dane">
    <div id="populacja">populacja:</div>
    <div id="pkb">pkb:</div>
    <div id="połozenie">połozenie:</div>
    <div id="prezydent">prezydent:</div>
    <div id="ustrój">ustrój:</div>
    <div id="sojusz">Sojusz:</div>
    <div id="waluta">Waluta:</div>
     <div id="rok">Rok:</div>
  </div>
  
</body>
</html>

Parę pytań js

Tue, 26 Mar 2024 14:20:15 +0000

Witam ,mam parę odnośnie js .1.zeby wystylizować rzeczy używając js trzeba użyć np dokument.,,,,,,,,,,,,,,,,,,.style.background k czy na diva też zadziała czy trzeba żeby diva wystylizować użyć czegoś podobnego aż kolwiek innego?.2.potrzebuje wyjaśnienia dokładnego jak tworzyć w js obiekty takie jak div ,INPut itp .i ogólnych rad

Warunek z tablicą w if i inne

Mon, 25 Mar 2024 13:49:18 +0000

witam robię takiego coś własne ćwiczenia byle tłumacza liter pomoże ktoś bo coś bo nie dzała np nie wiem jak zrobić w warunku w if'wie takie coś if(textJ == A[1]) żeby to działało pomoże ktoś ? Taki oto kod

const A = ["a","et"]
const S = ["s","p"]

function wybierz jezyk()
{
     
    
const = document.getElementById("jezyk").value;         
    
    
    if(jezyk == "polski")  polski();
    
}

function polski()
{
    const textJ = document.getElementById("text").value ;                      
    
    if (textJ == A[1] ) document.getElementById("textTrans").innerHTML=A[0];
    
    
}
function Francuski()
{
    
    
    
    
}

Z stringami też nie działa próbowałam więc bez stringów i HTML

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>translate</title>
  
  <link rel="stylesheet" href="indexink.css" type="text/css">
  <script src="indix.js">
  </script>
</head>
<body>
 <select id="jezyk">
  <option value="polski">Polski</option>
  <option value="Francuski">Francuski</option>
 </select>
  <input type="text" id="text" >
  <br>
  </br>
  <input type="submit" value="tlumacz" onclick="wybierz jezyk()">
  
  
   <div id="textTrans">
  
  
   </div>
  

  
  
</body>
</html>

Otwieranie funkcji z if

Mon, 25 Mar 2024 13:22:05 +0000

To może durne pytanie ale jak przy użyciu if z funkcji włączyć inną funkcje

Wybieranie tablic

Sun, 24 Mar 2024 03:26:21 +0000

Witam cza da się zrobić system wybierania tablic np że jedna tablica ma nazwe psychic a druga fire i wypisywania tego .ps wiem że tablice te są pewnie złe ale za bardzo nie umiem w tablice mam taki kod .

const = psychic ;
pokemon[1] ="Espurr";
pokemon[2] ="meowstic";
pokemon[3] ="abra";
pokemon[4] ="kadabra";
pokemon[5] ="alakazam";

function wypisz()
{
    const numerpokemona = documentGetElementById("numer").value
    
    if(numerpokemona)
                                                                      
    
    
}

<!DOCTYPE html>

<html>
<head>
  
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>STATY </title>
  <link rel="stylesheet" href="STYLESTAT.css" type="text/css">
  <script src="aray.js" ></script>
</head>
<body>  
  
  <div id="strona">
  
     <div id="indexdex">
    
       <input type="text" id="typ"   > TYP POKEMONA 
       <br>
       </br> 
       <input type="text" id="numer" > NUMER POKEMONA
    <br>
    </br>
       <input type="submit" value="to?" onclick="wypisz">
       
       
    
     </div>
  
  </div>
  
</body>
</html>

body
{
  background-color: grey;
}

#strona
{
  height: 1500px;
  width: 900px;
  margin-right: auto;
  margin-left: auto;
  background-color: gray;
  padding: 30px;
}

#indexdex
{
  padding-left: 250px;
  font-size: 35px;
  
}

input 
{
  width: 300px;
  height: 35px;
  font-size: 35px;
  
}

Usunięcie diva po wpisaniu słowa

Tue, 19 Mar 2024 21:20:30 +0000

WITAM,czy powie mi ktoś jak zrobić by po

const wykonaj_button = document.querySelector('#wykonaj-button');
wykonaj_button.addEventListener('click', utworz);
 
function utworz() {
  const kwadrat = document.querySelector('#kwadrat');
  const ile_kwadraty = kwadrat.querySelectorAll('div').length;
  const MAKSYMALNA_KWADRATY = 15;
   
  if (ile_kwadraty >= MAKSYMALNA_KWADRATY) {
    alert(`Utworzyłeś maksymalną ilość kwadratów (${MAKSYMALNA_KWADRATY})`);
    return;
  }
   
  const value = document.querySelector('#pole-input').value.trim();  
  if (value.toLowerCase() === 'nowy div') {
    kwadrat.innerHTML += '<div></div>';
  }
}

<input type="text" id="pole-input" value="nowy div">
<button type="button" id="wykonaj-button">wykonaj</button>
 
<div id="kwadrat"></div>

#kwadrat {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
#kwadrat div {
  width: 100px;
  height: 100px;
  border: 2px solid red;
}

wpisaniu słowa usuń diva div usunął się i mógł to robić tyle i istnieje divów

Czemu zmiana else if na samo if w tym przypadku zmienia działanie mojego kodu

Wed, 13 Mar 2024 15:09:34 +0000

Robię w js taką funkcję, która sprawdza, czy podana liczba jest dodatnia, ujemna, czy równa zero.

const response = document.querySelector('#response');

function chceckNumber(x)
{
    if (typeof x !== "Number")
    {
        response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    }
    if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }
    else if (x > 0)
    {
        response.textContent = 'Podana liczba jest dodatnia';
    }
    else if (x < 0)
    {
        response.textContent = 'Podana liczba jest ujemna';
    }
    else if (x == 0)
    {
        response.textContent = 'Podana liczba jest równa zero';
    }
}

window.addEventListener('keydown', (event) => {
    if (event.key === "Enter")
    {
        const inputValue = document.querySelector('#number').value;
        chceckNumber(inputValue);
    }
})

Podany wyżej kod działa prawidłowo, ale gdy zmienię warunek

if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }

else if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }

co w efekcie daje taki kod

const response = document.querySelector('#response');

function chceckNumber(x)
{
    if (typeof x !== "Number")
    {
        response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    }
    else if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }
    else if (x > 0)
    {
        response.textContent = 'Podana liczba jest dodatnia';
    }
    else if (x < 0)
    {
        response.textContent = 'Podana liczba jest ujemna';
    }
    else if (x == 0)
    {
        response.textContent = 'Podana liczba jest równa zero';
    }
}

window.addEventListener('keydown', (event) => {
    if (event.key === "Enter")
    {
        const inputValue = document.querySelector('#number').value;
        chceckNumber(inputValue);
    }
})

sprawia, że bez względu na wartość w polu tekstowym wyświetla się odpowiedź, że podana wartość jest nieprawidłowa.

Czy ktoś wie dlaczego tak się dzieje? Jestem bardzo ciekwawy, czemu to tak działa

koło fortuny - jak zawsze trafić środek ćwiartki

Thu, 07 Mar 2024 11:06:11 +0000

hej, czy w takim kole po zakręceniu da się zrobić aby zawsze wypadało na środek danej ćwiartki czyli:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: #34495e;
    }

    /*WRAPPER*/
    #wrapper {
        margin: 40px auto 0;
        width: 266px;
        position: relative;
    }

    #txt {
        color: red;
    }

    #inner-wheel-sec {
        width: 250px;
        height: 250px;
        transform: rotate(-13deg);
    }

    /*WHEEL*/
    #wheel {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        transform: rotate(0deg);
    }

    #wheel:before {
        content: '';
        position: absolute;
        border: 4px solid rgba(0, 0, 0, 0.1);
        width: 242px;
        height: 242px;
        border-radius: 50%;
        z-index: 1000;
    }

    #inner-wheel {
        width: 100%;
        height: 100%;

        -webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
        -moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
        -o-transition: all 6s cubic-bezier(0, .99, .44, .99);
        -ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
        transition: all 6s cubic-bezier(0, .99, .44, .99);
    }

    #wheel div.sec {
        position: absolute;
        width: 50%;
        height: 50%;
        transform-origin: bottom right;
        transform: rotate(calc(60deg * var(--i)));
        clip-path: polygon(0 0, 75% 0, 100% 100%, 0 75%);
    }



    #spin {
        width: 68px;
        height: 68px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -34px 0 0 -34px;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
        z-index: 1000;
        cursor: pointer;
    }
</style>

<body>


    <div id="wheel">
        <div id="inner-wheel">
            <div id="inner-wheel-sec">
                <div class="sec" style="--i:1; background-color: red;"></div>
                <div class="sec" style="--i:2; background-color: green;"></div>
                <div class="sec" style="--i:3; background-color: red;"></div>
                <div class="sec" style="--i:4; background-color: green;"></div>
                <div class="sec" style="--i:5; background-color: red;"></div>
                <div class="sec" style="--i:6; background-color: green;"></div>
            </div>
        </div>

        <div id="spin">
            <div id="inner-spin"></div>
        </div>

    </div>


</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>

<script>
    var degree = 1800;
    var clicks = 0;

    $(document).ready(function () {

        $('#spin').click(function () {

            clicks++;

            var newDegree = degree * clicks;
            var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
            totalDegree = newDegree + extraDegree;


            $('#wheel .sec').each(function () {
                var t = $(this);
                var noY = 0;

                var c = 0;
                var n = 700;
                var interval = setInterval(function () {
                    c++;
                    if (c === n) {
                        clearInterval(interval);
                    }

                    var aoY = t.offset().top;
                    $("#txt").html(aoY);
                    console.log(aoY);

                    if (aoY < 23.89) {
                        console.log('<<<<<<<<');
                        $('#spin').addClass('spin');
                        setTimeout(function () {
                            $('#spin').removeClass('spin');
                        }, 100);
                    }
                }, 10);

                $('#inner-wheel').css({
                    'transform': 'rotate(' + totalDegree + 'deg)'
                });

                noY = t.offset().top;

            });
        });



    });

</script>


</html>

konfigurator produktu

Tue, 05 Mar 2024 15:03:52 +0000

hej, na takiej stronie https://www.irsap.com/pl/products/radiator/soul-s u dołu jest konfigurator czy istnieją programy tworzące takie cuda czy w jaki sposób sie do tego zabrać odpowiedni? jakieś podpowiedzi

Jak można dokładnie wykorzystać tablice

Mon, 04 Mar 2024 15:28:21 +0000

Jak dokładnie wykorzystać tablice w js do czego użyć można jakie ma zastosowania jak ją używać ktoś może mi to wytłumaczyć?

Utworzenie diva po wpisaniu słowa

Sun, 03 Mar 2024 13:45:37 +0000

WITAM chciałbym żeby po wpisaniu do INPUTU np slowa nowy div .w divie kwadrat powstał nowy div o ustalonych wymiarach i innych i tak za każdym razem jak to wpisze jednak żeby miało to ograniczoną ilość divów które można stworzyć

function utworz()
{
    
   if 
    
    
}

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>TWORZENIE DIVÓW</title>
  <link rel="stylesheet" href="divy.css" type="text/css">
  <script src="mechanika.js" ></script>
  
</head>
<body>
  
  <input type="text" id="poleinput"/>
  
  <input type="button" value="wyslij" onlick="utworz()"/>
  
  <div id="kwadrat">
    
    
  </div>
  
</body>
</html>

Czy ktos mógłby mi wytłumaczyć jak to zrobić ? Z góry dziękuję

JAK ZMIENIC CZĄNKE DIVA PO WPISANIU TEXT W JS

Sat, 02 Mar 2024 22:46:51 +0000

Czy jest jakaś możliwość żeby po wpisaniu w INPut czegoś została zmieniona czcionka w divie na inną? Nie daje kodu bo chyba nie potrzebny

Aplikacje webowe a przetwarzanie danych statystycznych

Sat, 02 Mar 2024 22:11:28 +0000

Witam,

Jestem na VI semestrze Informatyki i Ekonometrii, co za tym idzie zbliża się czas pisania inżynierki. Wymóg uczelni co do pracy inżynierskiej na tym kierunku jest taki, że musi być w niej zawarta część informatyczna oraz statystyczna/modelowanie danych itp. Z racji na to, że na co dzień siedzę w webówce(głównie laravel i vue) to przez lenistwo chciałbym dostosować to co umiem pod inżynierkę.

Do głowy przyszły mi dwa pomysły:

Pierwszy z nich to napisane aplikacji pokroju e-wizyta, np umawianie wizyt online do przychodni(webówka - część informatyczna), gdzie zbieramy dane od pacjentów i na ich podstawie generujemy raporty(statystyki). Przykładowe dane do gromadzenia:

Wiek pacjenta

Płeć
Miejsce zamieszkania (wieś, miasto do 10 000 mieszkańców, miasto do 100 000 mieszkańców, miasto do 250 000 mieszkańców, większe miasto)
Rodzaj wizyty (konsultacja, badanie, szczepienie, itp.)
Rodzaj ubezpieczenia zdrowotnego (publiczne, prywatne)
Występowanie chorób przewlekłych
Typ lekarza/specjalisty, do którego umawiana jest wizyta
Liczba osób w gospodarstwie domowym pacjenta
Liczba wcześniejszych wizyt w przychodni w ciągu roku
Czy pacjent korzysta z usług opieki zdrowotnej w innych placówkach
Preferowany sposób płatności za wizytę
Liczba zarejestrowanych przypadków danej choroby w określonym obszarze geograficznym
Częstość występowania określonych objawów lub dolegliwości wśród pacjentów
Wybór kanałów komunikacji przez pacjentów (telefon, e-mail, aplikacja mobilna)
Częstotliwość korzystania z recept papierowych vs. elektronicznych
Liczba przypadków nagłych wizyt medycznych vs. umówionych wizyt planowych
Preferowany sposób odbioru wyników badań (osobiście, online)
Pytanie o ocenę nawyków żywieniowych
Wpływ czynników środowiskowych na zdrowie pacjentów
Stopień dostępności usług medycznych w różnych obszarach geograficznych

Martwi mnie trochę obliczanie danych statystycznych, znalazłem libke która ma kilka funkcji związanych ze statystyką, jednak przez to, że nigdy nie miałem do czynienia z pisaniem tego typu rozwiązań to nie jestem pewien czy w ogóle sam zamysł takiej aplikacji jest realny.

Moim drugim pomysłem jest porównanie Reacta i Vue pod względem performance'u. Zamysł byłby taki, aby stworzyć np forum internetowe, jako backend wykorzystać Laravela + Inertie, dzięki czemu tworzenie frontu odpowiednio w Vue i Reactie będzie bazowało na dokładnie tym samym backendzie i systemie routingu, różnica będzie tylko na froncie - czyli to na czym de facto mi zależy. Pytanie które miałbym w tym przypadku to jakie dokładne parametry tych frameworków można mierzyć i przy pomocy jakich narzędzi? Czy zwykłe devtoolsy + react/vue tools zapewniają wszystkie dane które warto byłoby uwzględnić w takiej analizie?

Oczywiście zadając to pytanie nie mam na celu wyciągnięcia gotowego przepisu na temat pracy, jest to bardziej rozeznanie w temacie, żeby potem nie obudzić się z ręką w nocniku. Chętnie również wysłucham innych pomysłów na połączenie webówki i statystyki.

Rozpoznawanie textu

Sat, 02 Mar 2024 17:35:21 +0000

JAK ZROBIC Żeby PO WPISANIU PO WPISANIU DO INPUTU NP HEJ W DIV POJAWIŁ SIE TEXT : WITAM A Jeżeli BY SIE WPISAŁO PA TO POJAWIŁ SIE TEXT DO WIDZENIA WIENKSZĄSZC ROZUMIEM ALE NIE Wiem TO Zrobić

function sprawdz()
{
    var text = document.getElementById("liczba").value;
   
    if (text == hej) document.getElementById("odp").innerHTML="witam";
    else if (text == pa) document.getElementById("odp").innerHTML="do widzenia";

}

I próbowałem też z TEXT.value =="Hej" ale nie dzała