• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana globalnej w funkcji i załadowanie skryptu

VPS Starter Arubacloud
0 głosów
204 wizyt
pytanie zadane 24 marca 2017 w JavaScript przez Mizatake Nowicjusz (170 p.)
edycja 24 marca 2017 przez Mizatake

Mam pytanie odnośnie 3 lekcji w JavaScript. Chciałem dodać tam możliwość dodania hasła poprzez użytkownika, by można grać multiplayer, niestety wydaje mi się, że tak zrobić jak ja nie można, bo w żaden sposób to nie działa.. Myślę, że problem leży w  'if(haslo != "") window.onload = start;', aczkolwiek nie wiem. Pomoże ktoś? :)

 

Oto fragmenty kodów: 

<div id="container">
	
		<div id="board">SZUBIENICA</div>
		<div id="gallows">
			<img src="img/s0.jpg"/>
		</div>
		<div id="alphabet">Podaj nowe hasło: <input type="text" id="field"/>
		<input type="submit" value="Zatwierdź hasło" onclick="przypisz_haslo()"/><!=JAVA_SCRIPT=></div>
		<div style="clear:both;"></div>
	
var haslo = "";

function przypisz_haslo(){
	haslo = document.getElementById("field").value;	
}

if(haslo != "") window.onload = start;
	
haslo = haslo.toUpperCase();

var dlugosc = haslo.length;
var ile_skuch = 0;

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");
var lose = new Audio("lose.wav");
var win = new Audio("win.wav");

var haslo1 = "";

...

 

1 odpowiedź

+1 głos
odpowiedź 24 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Gdy następuje zczytanie pliku JS, wykonuje te polecenia które zostały zapisane globalnie (W dobrych praktykach importy modułów, przepisanie interfejsów zdarzeń blabla) . Czyli on odrazu sprawdza warunek (w tym przypadku zawsze to będzie prawda, bo sprawdza haslo="", a czy póżniej czy wcześniej przepisałeś zbytnio go nie obchodzi (plik JS się wykonał).

Po trzecie, submit obsługuje zdarzenie wysłania request do servera --> https://www.w3.org/wiki/HTML/Elements/input/submit

Zmień type z submit na button.
komentarz 25 marca 2017 przez Mizatake Nowicjusz (170 p.)
Okej :) Czyli submit mam zamienic na button. Ale w takim razie jak zrobic by miec mozliwosc gry na wpisanym wczesniej przez uzytkownika hasle?
1
komentarz 25 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Poczytaj o budowie widoków (Jeżeli ma to działąć bezprzeładowania strony(SPA)) oraz OPP, MVC.

Pytanie jak chcesz daną grę obsłużyć, Czy to gra sieciowa(jakaś przeglądarkowa)(po przez requesty do servera) czy klient z połączeniami na websocketach serverem zarządzającym. Za bardzo nie wiem jak wygląda architektura po takim kawałku kodu.

Co do pytania masz kilka rozwiązań. Pakujesz hasło do cache przeglądarki (mało bezpieczne) bądż hashujesz i tylko przesyłasz klucze . (Używając cryptoJS, nie pisz sam takich narżędzi, jeżeli twoje pojęcie o matematyce dyskretnej jest nikłe. Hashe wysyłasz na server i czekasz na odpowiedż (AJAX). Bądż używasz protokołu HTTPS + Certyfikat SSL.

Inne:

Jeżeli hasło jest przechowywane w postaci ciastka. 

https://developer.mozilla.org/pl/docs/Web/API/Document/cookie

Musisz na poziomie inicjacji twojego API, sprawdzić jaki widok wstrzelić dla usera.

Przykład:

import React from 'react';
import ReactDom from 'react-dom';
import CookiesService from 'cookiesService.js'


class App extends React.Component {
constructor (){
super();
this.state = {
result: "";
}
this.cookiesService = new CookieService ();
}
  cookiesExist (){
 this.state =  cookiesService.isCookie("password");
  }
  render (){
    
    return (
      <FormApi  idForm={this.state}/>
    );}
}

ReactDom.render(<App nameForm="formExample" />, document.getElementById('app'));

To jest jak za pomocą Reacta zbudować. Wygląda to dziwne,ale jest to bardzo proste. React opiera się na dwóch rzeczach prop (Obiekt) state (stan). Obiekt mówi mu tyle co ma co ma z nim zrobić (np: przekazac do kontrolerów (w dużym uproszczeniu). Stan mówi mu , co mam zrobić jak dostanę taki stan, mówiąc inaczej jaki widok ma zbudować (z komponentów (komponenty to jest virtualDOM) . Dobry tutorial jest na youtube. Przekazalem stan kolejnemu komponentu FormApi , zależności od stanu API zbuduje taki widok bądż inny widok no i ustali co dalej z tym robimy. Ale jak to zrobić, musisz sobie sam znależć :). Przykład Reactowej aplikacji masz tutaj -->

https://github.com/PatrykMaternicki/translatorComponent

CookiesService sprawdza czy dane ciastko istnieje (w MDN znajdziesz) .

Have fun :)

komentarz 27 marca 2017 przez Mizatake Nowicjusz (170 p.)
Dzięki wielkie za odpowiedź :) Aczkolwiek chodziło mi o coś innego, taka wiedza, o której mówisz to jeszcze nie mój poziom :D dopiero uczę się języków webowych. Chodziło mi po prostu by mogły 2 osoby na 1 komputerze w to zagrać. Czyli.. jakby ująć to w praktyce.. Ktoś koło mnie siedzi, zakrywa oczy, ja wpisuje hasło, a potem on próbuje odgadnąć co to jest. Taki prosty schemacik :D Aczkolwiek nie wiem jak posłać to hasło do js. Chciałem to zrobić w ten sposób, że w HTML mam te 'podaj hasło' w divach, a potem po kliknięciu w button ładuje się js i podmienia poprzez innerHTML te divy i zamiast 'podaj hasło' wskakuje tam plansza do gry z haslem. Da się to w ten sposób zrobić, czy nie bardzo? :D
komentarz 27 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Tak. Powiedzmy, że ładuje się nasza aplikacja.

document.addEventListener("content-loaded",init);

Mówimy, przeglądarce, jeżeli strona się załaduje , uruchom init.

function init (){

if (cookiesExist()){

runGame();

}

else{

runReg();

}

sprawdzam, czy ciastko istnieje (tam gdzie moje haslo player1, player2);

function cookiesExist ();
if (document.cookie != null) return true; return false;
}

jak nie istnieje , to uruchom runReg()

function runReg(){
... Kod do budowy formularza....
}

Prościej się nie da ;d

 

komentarz 27 marca 2017 przez Mizatake Nowicjusz (170 p.)
Okej :D Tylko jak to teraz dodać do kodu i czy konieczne są te ciastka? :D Chce na stronie wpisać hasło i zatwierdzić, a nie wiem jak ten kod ma się do tego (jak już wspominałem jestem początkujący :D)
komentarz 27 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Ciastko jest przechowywane na komputerze (przez jakiś tam określony okres). Powyższy pseudokod sprawdza czy ciastko istnieje, jeżeli istnieje może wyświetlić grę i system do logowania do gry (sprawdzasz input z ciastkiem) , jeżeli nie to wyświetla się formularz i tu ustawiasz odpowiednie ciastka.
komentarz 27 marca 2017 przez Mizatake Nowicjusz (170 p.)
edycja 27 marca 2017 przez Mizatake
Poprzez onclick mam wczytac funkcje, ktora przypisze mi wartosc do ciastka, a nastepnie zaladuje skrypt?

Funkcja init od czego jest? Bo się już z nią kiedyś spotkałem
komentarz 27 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Nie sprawdż to --> https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Po załadowaniu strony, funkcja sprawdza czy istnieje ciastko. Button ma wysyłać żądanie do ciastka, bądż do gry. 

Tu masz przykład jak ja to rozwiązałem w swojej grze kółko i krzyżyk:

import {Game} from './Game.js';
document.addEventListener('DOMContentLoaded', function () {loadGame();})
function loadGame(){
  var GameMenager = new Game();
  GameMenager.init();
  document.getElementById('startApp').addEventListener('click',
  function(){
  GameMenager.run();
  }
  , 'false')

Po załadowaniu strony, addEventListener wywołuje tą funkcję loadGame. loadGame inicjuje klasę gameMenager (podstawowe moduły gry) i tworzy kolejny listener, który sprawdza dane. 

<section class='form' id='form' >
  <table>
    <form action=''>
    <tr>
      <td><p class='rowForm'>Player 1:</p> </td> <td> <input id='player1' type='text' value='namePlayer1' /> </td>
    </tr>
    <tr>
      <td><p class='rowForm'> Player 2:</p> </td> <td> <input id='player2' type='text' value='namePlayer2' /> </td>
    </tr>
    <tr>
      <td>
        <select  id='roundOptions'>
          <option selected value="1"> 1 round </option>
          <option value="2"> 2 round</option>
          <option value="3"> 3  round </option>
        </select>
    </td>
    </tr>
    <tr>
      <td>  </td> <td> <button type='button' id='startApp'> PLAY </button></td>
    </tr>
  </form>
    <table>
</section>

Do inicjacji całego Api. Taką funkcję sobie wymyśliłem.

komentarz 27 marca 2017 przez Mizatake Nowicjusz (170 p.)
Bardzo ciekawe, aczkolwiek nie na moją obecną wiedzę :). Pobawiłem się tymi podstawami co umiem i udało mi się osiągnąć cel. Zamiast robić onload, po prostu wywoływałem funkcje poprzez funkcje i zrobiłem bardzo dużo zmiennych globalnych. To załatwiło sprawę i gra śmiga jak chciałem :) Dzięki za pomoc!

Podobne pytania

0 głosów
2 odpowiedzi 153 wizyt
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 17 czerwca 2020 w Bezpieczeństwo, hacking przez Tine Użytkownik (690 p.)

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...