Różnica pomiędzy console.log() a document.write()

Różnica pomiędzy console.log() a document.write()
AK
  • Rejestracja:ponad 2 lata
  • Ostatnio:ponad 2 lata
  • Postów:1
0

Witam,
jestem na samym początku przygody z java script.
Jak na razie wszystko wydaje mi się zrozumiałe (składnia języka, zmienne itd) poza jedną kwestią (techniczną).
W kursach, które czytam/oglądam jest bardzo dużo odwołań do konsoli.

Jest dla mnie zrozumiały sposób kodowania na takiej zasadzie, że piszę w notatniku, zapisuję plik jako np index.html i w nim jak napiszę powiedzmy document.write to tak funkcja powoduje wyświetlenie się ciągu znaków.
Natomiast nie rozumiem, czemu ma służyć kodowanie "pod konsolę" czyli np. pisanie console.log co powoduje wyświetlenie napisu w konsoli. Przecież programy piszemy dla klienta/odbiorcy po co pisać kod który jest użyteczny tylko i wyłącznie przy wykonywaniu go na konsoli?
Czegoś tu nie rozumiem, czy pisanie poleceń typu console.log jest tylko elementem treningowym/ sprawdzaniem programu czy jest tu jakaś inna logika.
Przecież finalny odbiorca nie będzie odpalał kodu pod konsolą.

z góry dzięki za pomoc

edytowany 1x, ostatnio: Riddle
IN
Jak chcesz sobie skrócić czas praktykowania dawaj na moją stronkę infinityhost.cba.pl (jeszcze trochę jej brakuje do końca prac ale główną funkcjonalność już ma). Tam klik, klik i Ci wszystko działa i wyświetla.
opiszon
  • Rejestracja:prawie 3 lata
  • Ostatnio:około 12 godzin
  • Postów:779
2

Zanim nauczysz się pisać duże systemy musisz się nauczyć podstaw języka itp.
W normalnych językach ćwiczy się to w aplikacjach konsolowych, w js tego odpowiednikiem jest logowanie na konsolę.

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:minuta
  • Postów:8410
1
AdamKowalski2022 napisał(a):

Jest dla mnie zrozumiały sposób kodowania na takiej zasadzie, że piszę w notatniku, zapisuję plik jako np index.html i w nim jak napiszę powiedzmy document.write to tak funkcja powoduje wyświetlenie się ciągu znaków.

Zostaw to document.write. Najlepiej tego w ogóle nie używać. Z document.write jest problem, że jak użyjesz tego po załadowaniu strony, to cała treść zostanie nadpisana (spróbuj otworzyć konsolę w przeglądarce i napisać document.write("Hello") i zobaczysz, co się stanie).

Jeśli chcesz dodać coś na stronę (tekst, jakiś element HTML itp.), to możesz to zrobić za pomocą interakcji z DOM np.
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Natomiast nie rozumiem, czemu ma służyć kodowanie "pod konsolę" czyli np. pisanie console.log co powoduje wyświetlenie napisu w konsoli. Przecież programy piszemy dla klienta/odbiorcy po co pisać kod który jest użyteczny tylko i wyłącznie przy wykonywaniu go na konsoli?

Idąc tą logiką, to zlikwidujmy studzienki kanalizacyjne, bo przecież wodę dostarcza się do mieszkań, więc po co dodatkowo budować studzienki kanalizacyjne, które są użyteczne tylko dla robotników? Przecież finalny odbiorca wody nie będzie wchodził do kanałów XD

Ogólnie console.log jest dla programisty, żeby mógł sobie coś potestować, a nie dla końcowego użytkownika.

No chyba, że to apka konsolowa działająca w Node.js, wtedy console.log po prostu wyświetla tekst na standardowe wyjście.


edytowany 1x, ostatnio: LukeJL
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:35 minut
  • Lokalizacja:Laska, z Polski
  • Postów:10056
2

Nie używaj w ogóle nigdy document.write().

IN
  • Rejestracja:ponad 2 lata
  • Ostatnio:około 2 lata
  • Postów:60
0

Ja tam cały czas jadę na innerHTML i iframe.srcdoc. Mój "profesor" używa na ćwiczeniach console.log ale mnie to wkurza, to okienko otwarte z boku. Daję ładne tło , ładną czcionkę, wyróżnienie kolorem ważniejszych aspektów i jest ślicznie i estetycznie. Ale ja dopiero zaczynam więc może się nie znam. - odpowiadam. --- Opiszon --- uczę się , testuje, analizuję - w sumie po to infinityhost.cba.pl poza tym jak robię wyjście w html to mogę generować też działanie na poszczególnych obiektach, mogę dawać opcje "title" itp. Biorę np. objectGetOwnPropertyNames na np. window i dostaje spis funkcji, klikam na nazwe alert i mogę ją wywołać. I tak z różnymi funkcjami. Nie wszystkie działaja. Czasami mam problem z parametrami przekazywanymi do nich. ----

Opiszon --- ale funkcji pod kliknięcie nie wywołam chyba jak stworzę dnamicznie w pętli np. znacznik B i przy nim atrybut onClik żeby wywoływał daną funkcję obiektu? Ja w ten sposób generuję wszystkie zmienne obiektu i wszystkie funkcje. Ja to generuję masowo. Daję element input, przycisk do zmiany wartości i szybciej wszystko modyfikuję. W końcu nie bez powodu Windows wyparł Dos'a.

edytowany 4x, ostatnio: infinityhost
opiszon
Ale po co to robisz?
opiszon
Komunikaty do konsoli też możesz sobie kolorować i stylować np w Chrome. Okienko i tak masz "otwarte" na stronie, tyle że na stałe... Konsolę z przeglądarki możesz sobie wypiąć i przerzucić np na inny monitor, jako pływające okienko itp. Rozumiem że chcesz coś pokodować w celu nauki, ale nie rozumiem zastosowania zamiast console.log.
IN
Opiszon --- ale funkcji pod kliknięcie nie wywołam chyba jak stworzę dnamicznie w pętli np. znacznik B i przy nim atrybut onClik żeby wywoływał daną funkcję obiektu? Ja w ten sposób generuję wszystkie zmienne obiektu i wszystkie funkcje. Ja to generuję masowo. Daję element input, przycisk do zmiany wartości i szybciej wszystko modyfikuję. W końcu nie bez powodu Windows wyparł Dos'a.
Riddle
@infinityhost i @opiszon Nie wiem czy to widzicie, ale mówicie o dwóch różnych rzeczach. Jeden mówi o widoku aplikacji, jeden o wyjściu standardowym. Także wasza debata nie do końca jest zasadna.
opiszon
@Riddle: tak, zauważyłem. Oryginalny post był edytowany kilkukrotnie. Na początku było tylko o tym że można sobie pokolorować na stronie zamiast wrzucać w okienko. Dlatego dalej nie podejmuję dyskusji ;-)
IN
Riddle właśnie dyskutujemy na temat gdzie lepiej gdzie lepiej wysłać informację.
IN
Jestem pierwszy dzień dzisiaj na forum, wybaczcie.
IN
opiszon a szkoda, bo można tak genialny system obsługi zrobić, że ciężko to opisać. Dla mnie wszelkie pomysły które mi w tym pomogą są bezcenne. Ciężko się oderwać od tematu jak ktoś się zacznie zagłębiać.
opiszon
@infinityhost: spoko, nic się nie stało, początkowo po prostu wydzwięk był inny. Jeżeli potrzebujesz robić rzeczy których nie udostępnia konsola, to spoko. Sprawdź tylko czy na pewno konsola ci tego nie daje. A argumentu Windows > DOS nie przyjmuję w ogóle do wiadomości. Rozumiem że miałeś na myśli GUI > Terminal, a tu można by już sie sprzeczać (już nie mówię nawet o tym że taka konsola w Chrome to nie jest czysty tekst, bo masz interakywne drzewko dom itp...)
IN
@opiszon tak, ja to wszystko widziałem ALE w tym drzewku opcji nie masz możliwości wywołania funkcji po kliknięciu w nią - ja generuję stronę HTML z już podłączonymi eventami które te funkcję uruchamiają. Jak mam dodatkowo pole sticky input to tam klikam a element HTML z podpiętą funkcją może pobrać z niej parametr.
opiszon
Jeżeli koniecznie musi być klikanie to pewnie nie, choć nie demonizowałbym wpisywania z klawiatury szczególnie że jest podpowiadanie składni.
IN
@opiszon ja generuję strone z listą elementów które odnoszą się do własności obiektów. Mają inner Text jako nazwa własności obiektu a sąsiedni z wartością. I zdarzenie już przypięte automatycznie. Pisanie pętli operujących na wszystkich elementach jest w tej konsoli niewygodne. Obecnie używam pola textarea ale zastanawiam się jeszcze nad tym trybem edycji HTML - żeby np. kompilować kod z wnętrza elementu . Tak to wtedy chyba najładniej by wyglądało.
Kliknij, aby dodać treść...

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 <u>underline</u>.

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>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> 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 H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

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)