HTML do zmiennej w JS – jak?

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Witam, chciałbym przyporządkować część kodu HTML do zmiennej w JS i w potrzebie wyświetlić ją. Nie wiem jak to zrobić. Jakieś pomysły?

Kopiuj

pseudokod

var zmienna = [[
// ... zawartość (może zawierać bezpośrednio znaki: <, >, &) ...
      <p>
      <a href="/mylink/article1"><img style="float: left; margin-right: 5px;" height="80" src="/mylink/image" alt=""/></a>
      Author Names
      <br/><em>Date</em>
      <br/>Paragraph of text describing the article to be displayed</p>
]];
document.writeln(zmienna);

edytowany 2x, ostatnio: Aniol83 2020-05-23 10:25

urke

2020-05-23 10:43

~~urke~~2020-05-23 10:43

Rejestracja:prawie 5 lat
Ostatnio:prawie 3 lata
Postów:360

Skoezystaj z interpolacji stringa.
Nawet nie pytam po co tam masz tablice tablic.

DevTomT

2020-05-23 10:53

DevTomT2020-05-23 10:53

Rejestracja:prawie 8 lat
Ostatnio:ponad 4 lata
Postów:12

Kopiuj

const myHtml = `<div>Some <strong>lorem ipsum</strong> text</div>`;
...
document.querySelector('.myEl').innerHTML = myHtml;

Aniol83

2020-05-23 19:21

Aniol832020-05-23 19:21

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Znaki tablic były jako pseudo kod, nie miała nic wspólnego z rzeczywistością. Pojawił mi się kolejny problem. Strona działa joko get z pobieraniem zmiennych do php i wykonuje dwa razy skrypt php nie wiem dlaczego.

Kopiuj

pseudokod
<script>
if window.innerWidth <= 700) {
const zm_Html = 
`
  <div id="main">
   <div id="main_info1">
   <div><?php require('skrypt.php'); ?></div>
   </div>
`;
document.writeln(zm_Html);
} else {
const zm_Html = 
  <div id="main">
   <div id="main_info1">
   <div><?php require('skrypt.php'); ?></div>
   </div>
`;
document.writeln(zm_Html);
}
</script>

Skrypt w php zrobiony dla testu odczytuje zmienną z pliku txt, dodaje jeden i zapisuje do pliku. Przed odświeżeniem strony w pliku jest wartość 1, po odświeżeniu strony w pliku jest wartość 3. Strona wyświetlona jeden raz w przeglądarce, skrypt php wykonany 2x. Dlaczego? Po wykasowaniu jednej części np po else {}, skrypt php ma wartość poprawną.

urke

2020-05-23 19:33

~~urke~~2020-05-23 19:33

Rejestracja:prawie 5 lat
Ostatnio:prawie 3 lata
Postów:360

Nie znam php i nie chcę poznawać, ale jeśli to coś <?php blablabla ?> omija interpolację w stylu skryptu poniżej, to masz odpowiedź

Kopiuj

const zm4_Html = 
`
  <div id="main">
   <div id="main_info1">
   <div>${console.log('Wykonam się zaraz po załadowaniu skryptu')}></div>
   </div>
`;

edytowany 2x, ostatnio: ~~urke~~ 2020-05-23 19:34

Freja Draco

2020-05-23 20:04

~~Freja Draco~~2020-05-23 20:04

Rejestracja:prawie 7 lat
Ostatnio:ponad 3 lata
Postów:3394

Po co w ogóle jest ten warunek, skoro w obu wypadkach zmienna zm_Html przyjmuje taką samą wartość?

Przy warunku brakuje wiodącego (.
Przy drugiej deklaracji zm_Html brakuje wiodącego ` więc cały kod jest błędny. Otwórz konsolę przeglądarki i zobacz informacje o błędach.

Ogólnym efektem wykonania document.writeln(zm_Html); będzie tu zawsze niepoprawna strona html bez nagłówka itp.

Pomijając powyższe błędy, skrypt powinien wykonać się tylko raz.

Aniol83

2020-05-24 07:51

Aniol832020-05-24 07:51

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Przed warunkiem brakuje ( i wiodącego ` z racji pośpiechu pisania na forum. W skrypcie na stronie jest poprawnie, bez takich znaków wiadome, że wysypałby się. Kod, który tu wklejam jest krótkim wycinkiem modyfikowanym na potrzeby przekazu. Docelowo posiada wszelkie znaczniki html, czcionki czy inne style jak i więcej php. Dlatego nie było sensu wklejać np. 300 linijek aby poprosić Was o pomoc w konkretnym problemie. Dziękuje jednak za wytyczne, docelowo chciałbym poprzez JS i funkcje wykrycia rozdzielczości obrócić kolejność paru boxów. Stylami oczywiście popracować nad poprawnym, estetycznym wyświetleniem strony, natomiast parę boxów zależy mi aby na komórce wyświetlony był w innej kolejności np. main_info2 następnie main_info1 na na wyższej rozdzielczości na opak. Dlatego w obu przypadkach faktycznie użyte będą te same pliki PHP natomiast w różnej kolejności przedstawione na WWW. Jednak nadal jest problemem jest podwójne wykonywanie skryptu PHP. Muszę zrobić delikatny kod podobny do przedstawionego powyżej aby upewnić się, że pomimo braku warunku do wykonania skrypt wew i tak jest uruchamiany.

Aniol83

2020-05-24 10:27

Aniol832020-05-24 10:27

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Zgodnie z potrzebą napisałem stronę zawierającą minimum do pracy ale wszelkie znaczniki do poprawnego działania są zawarte.

Kopiuj

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
 </head>
 <body bgcolor="#000000" text="#ffffff">
  <script type="text/javascript">
   var test = 0;
   document.writeln(innerWidth);
   if (window.innerWidth <= 700) {
    document.writeln("mniejszy");
    test = test+1;
    const zm_Html1 = 
`
     <div><p>Niższa rozdzielczość - test</p></div>
     <div><?php require('skrypt1.php'); ?></div>
`;
    document.writeln(zm_Html1);
   } else {
    document.writeln("większy");
    test = test+1;
    const zm_Html2 = 
`
     <div><p>Wyższa rozdzielczoć - test</p></div>
     <div><?php require('skrypt2.php'); ?></div>
`;
    document.writeln(zm_Html2);
   }
   document.writeln(test);        // wynik poprawny równy 1
  </script>  
 </body>
</html>

Jak widać kod zawiera proste rozpoznanie rozdzielczości wewnętrznej okna przeglądarki i przy ładowaniu strony w zwężonej przeglądarce <= 700 odpala skrypt1.php w innym przypadku skrypt2.php.
Skrypty PHP za to ma proste zadanie:

wyświetlić info do strony www z tekstem odpowiednio informując czy uruchomiony jest nr1 czy nr2
dodać jedną linijkę do pliku info.txt z informacją który skrypt został uruchomiony i godzinę

Problem polega na tym, iż na stronie WWW wynik zmiennej "var test" jest poprawny, wyświetlone informacje ze skryptu PHP adekwatne do uruchomionej rozdzielczości. Natomiast w pliku info.txt widać wyraźnie, że za każdym razem wykonywane jest polecenie zarówno skrypt1.php jak i skrypt2.php. Dlaczego?
Poniżej daje linki do testowo wstawionej strony i wyraźnie widać omawiany problem. Ręcznie klikając w plik skrypt1.php widać dodawanie tylko jednego wiersza czyli PHP działa poprawnie.

Linki:
index.php
skrypt1.php
skrypt2.php
info.txt

Jakieś pomysły co jest nie tak?

edytowany 1x, ostatnio: Aniol83 2020-05-24 10:30

overcq

2020-05-24 12:37

overcq2020-05-24 12:37

Rejestracja:prawie 7 lat
Ostatnio:około 4 godziny
Postów:370

Aniol83 napisał(a):

Problem polega na tym, iż na stronie WWW wynik zmiennej "var test" jest poprawny, wyświetlone informacje ze skryptu PHP adekwatne do uruchomionej rozdzielczości. Natomiast w pliku info.txt widać wyraźnie, że za każdym razem wykonywane jest polecenie zarówno skrypt1.php jak i skrypt2.php. Dlaczego?

Strona jest przetwarzana na serwerze: przed wysłaniem do przeglądarki wykonują się po kolei oba wstawione skrypty, bo takie jest polecenie.

Aniol83

2020-05-24 13:32

Aniol832020-05-24 13:32

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Czyli w jaki sposób rozwiązać zaistniały problem?

overcq

2020-05-24 13:46

overcq2020-05-24 13:46

Rejestracja:prawie 7 lat
Ostatnio:około 4 godziny
Postów:370

Zależy, co chcesz osiągnąć, bo może trzeba inaczej zbudować stronę.
Możesz zawsze użyć Ajax do pobrania tekstu z serwera i wstawić go na stronę. Chociaż moim zdaniem to wszystko da się wykonać po stronie klienta, bez potrzeby wołania serwera o tekst.

Aniol83

2020-05-24 14:30

Aniol832020-05-24 14:30

Rejestracja:około 15 lat
Ostatnio:prawie 5 lat

Docelowo PHP wykonuje całą pracę na urządzeniu a ewentualne wyniki tej pracy, statystyki, zdjęcia czy tekst są tylko raportem. Zależało mi owe raporty inaczej ustawić jako wyniki na stronie względem różnych rozdzielczości dla przejrzystości.

overcq

2020-05-24 14:38

overcq2020-05-24 14:38

Rejestracja:prawie 7 lat
Ostatnio:około 4 godziny
Postów:370

W takim razie można by zrobić program zewnętrzny na serwerze, który by wykonywał te zadania. Skrypt PHP tylko komunikowałby się z tym programem i sprawdzał, czy już są wyniki. A strona u klienta co jakiś czas pobierałaby ten skrypt PHP, by odczytać bieżące wyniki.
No chyba że ten skrypt PHP wykona się szybko, to wtedy nie potrzeba programu zewnętrznego.

Freja Draco

2020-05-25 19:57

~~Freja Draco~~2020-05-25 19:57

Rejestracja:prawie 7 lat
Ostatnio:ponad 3 lata
Postów:3394

Aniol83 napisał(a):

docelowo chciałbym poprzez JS i funkcje wykrycia rozdzielczości obrócić kolejność paru boxów.

Sensowniej będzie to zrobić CSS-em:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.w3schools.com/cssref/css3_pr_order.asp

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj underline.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, , , <kbd>, <del>, , <dfn>, <pre>, <blockquote>, <hr/>, ,  oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H2O i m2 otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

Alt+L - zaznaczenie całej linii
Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

Ctrl+Enter - dodaj post
⌘+Enter - dodaj post (MacOS)

HTML do zmiennej w JS – jak?

urke

urke

Freja Draco

Aniol83 napisał(a):

Freja Draco

Aniol83 napisał(a):

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe