Komendy w konsoli developerskiej

Komendy w konsoli developerskiej

Wątek przeniesiony 2023-04-11 09:40 z JavaScript przez Riddle.

JZ
  • Rejestracja:prawie 2 lata
  • Ostatnio:ponad rok
  • Postów:3
0

Witam, ostatnio postanowiłem zacząć programować (hobbistycznie), wczoraj pierwszy raz napisałem jakąś bardzo prostą stronę za pomocą HTML i CSS. Postanowiłem dodaj na niej element zaprogramowany w JavaScript, lecz gdy próbuję wpisać jakąś komendę, ta nie pokazuje się na stronie.Bez tytułu.png
Czy jest ktoś w stanie pomóc mi to naprawić?
Tak wygląda fragment kodu HTML.

Kopiuj
<!DOCTYPE html>
<html>
    <head>
        <title>Barcelona</title>
        <link rel = "stylesheet" href ="style.css"/>
    </head>
    <body>
        <header>
            <h1>Barcelona</h1>
            <a class="button" href="#more">Czytaj dalej</a>
                <div class="switch">
                    <button aria-label="Przełącznik trybu nocnego">
                        <div class="icon"></div>
                    </button>
                </div>
        </header>
        <main>
    <section class="more" id="more">
                <h2>Barcelona</h2>
                    <p></p>
            </section>
        </main>
        <script src="app.js"></script>
    </body>
</html>

Kod JavaScript

Kopiuj
document.querySelector ("button");

console.log("test");

Dodam jeszcze że korzystam z programu Visual Studio Code oraz że gdy spisuję komendę w "document.querySelector ("button");" w konsoli w przeglądarce to komenda działa.

edytowany 2x, ostatnio: Riddle
obscurity
  • Rejestracja:około 6 lat
  • Ostatnio:około 6 godzin
0

ale gdzie i co się ma pokazać? Wpisywanie komend w konsoli powoduje jednoczesne wyświetlenie wartości wyrażenia, więc:

document.querySelector ("button");

wpisane w konsoli to odpowiednik:

console.log(document.querySelector ("button"));

w skrypcie, a

console.log("test")

w konsoli to odpowiednik

console.log(console.log("test"))

Jeśli chcesz żeby działało tak jak w konsoli to każdą linijkę skyptu owiń w console.log. Ale to nie najlepszy sposób debugowania - w visual code możesz ustawiać breakpoiny, zatrzymywać wykonywanie, wykonywać kod linijka po linijce i podglądać wartości w dowolnej chwili.
W normalnym kodzie pewnie chcesz przypisać wynik pierwszego wyrażenia do zmiennej (var / let / const) i coś z nim potem zrobić.
Proponuję przerobić jeszcze parę lekcji z jakiegoś tutoriala zanim zaczniesz zadawać pytania na forum


"A car won't take your job, another horse driving a car will." - Horse influencer, 1910
edytowany 2x, ostatnio: obscurity
CZ
  • Rejestracja:ponad 2 lata
  • Ostatnio:4 miesiące
  • Postów:25
0

Gdzie miałoby Ci się to pokazać? W tym kodzie JavaScript pobierasz wszystkie elementy button nawet ich nigdzie nie przypisując, a potem wypisujesz w konsoli "test" co widać poprawnie na screenie

JZ
  • Rejestracja:prawie 2 lata
  • Ostatnio:ponad rok
  • Postów:3
0

Bez tytułu.png
brakuje mi takiego zapisu, żeby po wsianiu komendy ta znalazła dany obiekt. Ściągnąłem również gotową stronę która zawiera taki przełącznik i po wklejeniu tamtych kodów to w javascript wyskakują błędy.

edytowany 2x, ostatnio: Jzru
JZ
  • Rejestracja:prawie 2 lata
  • Ostatnio:ponad rok
  • Postów:3
0

Już wszystko udało mi się wyjaśnić. Po prostu kod działa lecz się nie wyświetla.

JB
A może o tobie chodziło o "document.querySelector("BUTTON").click();" ?
JB
  • Rejestracja:około 2 lata
  • Ostatnio:3 dni
  • Lokalizacja:Holandia
  • Postów:843
0

Nie baw się w querySelector, używaj wszędzie querySelectorAll()[].
Nie używaj małych liter w querySelectorAll, wszędzie duże.
document.querySelector("BUTTON") - wskazuje Ci na przycisk ale nic z nim nie robi, komenda np. mogła by wyglądać tak - document.querySelectorAll("BUTTON")[0].innerText="Ala ma kota, ala zwariowała".


obscurity
co to za bzdury
JB
niby pytanie, a bez znaku zapytania. Pewnie definicja też wypaczona. "Jeśli przywiązujemy lub przykładamy wagę do czegoś, to uważamy to za ważne, nadajemy temu szczególne znaczenie. Wyraz „waga” oznacza tu: „ważność, znaczenie czegoś”. Zatem początkowe zdanie powinno brzmieć: Marek przywiązywał wagę do szczegółów." - z tym chyba też masz problem.
obscurity
Marek przywiązywał wagę do szczegółów. co to za bzdury?
JB
hierarchia ważności? Ocena wpływu danej informacji na obiekt, jego stan i funkcje. Masz problem z oceną.
obscurity
Potrzebujesz pomocy
JB
Raczej Ty. Dla innych bzdurą jest wymiana spostrzeżeń między ludźmi którzy operują w obszarze definicji, tworzą z nich obiekty dołączają metody i zamieniają w narzędzia. Oh, to przecież ... Ty xD Więc wiemy co Ty robisz i co ja robię, skoro tak skrajnie oceniamy pewne mechanizmy.
obscurity
Ok, daj znać jak mefedron zejdzie. Nadal ciekaw jestem skąd wziąłeś takie bzdury.
JB
Gdybyś miał w sobie gen ciekawości dopytywałbyś o to co uważasz za bzdury. Brzmi logicznie, co?
obscurity
No w zasadzie pierwsza rzecz tutaj którą napisałeś logicznie. Myślałem że właśnie to robię, ale jak nie to rozbiję to: Nie baw się w querySelector, używaj wszędzie querySelectorAll()[]. - co to za bzdurka? Nie używaj małych liter w querySelectorAll, wszędzie duże. - co to za bzdurka?
JB
Czas, chodzi mi o czas. Być może używaliśmy różnych przeglądarek, ja straciłem jakiś tam czas z życia, bo mi przeglądarka nie reagowała na małe litery w querySelectorAll();. Teraz używam dużych i wszystko pięknie działa. A querySelectorAll() jak dla mnie jest wygodniejsze, zawsze jedna metoda, zyskuję czas nie zastanawiając się z czego skorzystać. A dla Ciebie jaką wartość ma czas? U mnie to jest czas x ilość zastosowań, nie pozwoliłem, żeby ta wartość znacząco wpłyneła na moje życie.
Gouda105
@johnny_Be_good: Czasem warto przełożyć swój czas na czytelność i wydajność kodu. Prawdopodobnie w trakcie dopisywania All(...)[0] zdążyłbyś się domyślić, że trzeba użyć querySelector. Jest to nie tylko bardziej czytelne - osoba, która analizuje kod od razu wie, że takich elementów nie jest więcej niż 1, ale też i wydajniejsze - korzystanie z querySelectorAll jest o 63% wolniejsze (https://jsbench.me/8tlgh1c29w/1). Prawdą jest, że to minimalne różnice i nawet zazwyczaj zaleca się ignorowanie ich na rzecz czytelności kodu, ale w tym przypadku to by ją nawet poprawiło
JB
Chłopak jest na etapie "Witam, ostatnio postanowiłem zacząć programować (hobbistycznie)," - napisze 63% mniej kodu (wolniej to będzie robił) - nabędzie 63% mniej doświadczenia. Chiny postawiły na ilość kosztem jakości obecnie ----"Równocześnie uruchomienie reaktora to krok w kierunku opanowania technologii fuzji jądrowej, która może stać się źródłem najczystszej energii. Reaktor odtwarza bowiem reakcje zachodzące w jądrze Słońca". Ilość czy jakość - minimalna różnica - efekt gdzie indziej - sztuczne słońce.
JB
@Gouda105: "Czasem warto przełożyć swój czas na czytelność i wydajność kodu." -- "Tropic Thunder"- "A Monkey could do your Job." xD A teraz wyjdź z piwnicy i pooglądaj starców, powinieneś trafić na takich co walczą o każdą sekundę. Jak ta "Sędzia Judy" z serialu na tv4. Ja spotkałem już w życiu takiego 53 latka, czyli pół starego ale już takiego co do niego coś zaczęło docierać. Porozmawiaj z nimi o czasie.
Gouda105
Nie do końca wiem o co Ci chodzi, ale nie wypowiadaj się na temat moich umiejętności programowania bo nie masz do tego kompetencji. Mam 16 lat i od 11 roku życia się tym zajmuję, udzielam się tutaj na forum od jakiegoś czasu i (wydaje mi się) ludzie doceniają moje odpowiedzi. Jeśli chodzi o siedzenie w piwnicy to zawiodę Cię nie jestem piwniczakiem - mam znajomych i zainteresowania , jestem mistrzem pomorza w kickboxingu
JB
dobrze, dobrze, już się nie gniewaj, jeszcze całe gimnazjum przed Tobą (johnny_Be_good_tarmosi_Goud105_po_czuprynie)
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)