Javascript na stronie jak działa

Czy zastanawiałeś się kiedyś, jak działa programowanie komputerowe, ale nie zrobiłeś nic bardziej skomplikowanego w Internecie niż przesłanie zdjęcia na Facebook?

Jesteś we właściwym miejscu.

Dla kogoś, kto nigdy wcześniej nie był kodowany, koncepcja stworzenia strony internetowej od zera – układ, projekt i wszystko – może wydawać się naprawdę zastraszająca. Być może wyobrażasz sobie studentów Harvarda z filmu „The Social Network”, siedzących przy komputerach z gigantycznymi słuchawkami i wykręcającymi kod, i myślisz sobie: „Nigdy bym tego nie zrobił”.

Każdy może nauczyć się kodować, tak jak każdy może nauczyć się nowego języka. W rzeczywistości programowanie przypomina trochę znajomość języka obcego – właśnie dlatego nazywane są językami programowania. Każdy z nich ma własne reguły i składnię, których należy się uczyć krok po kroku. Te reguły są sposobem, aby powiedzieć komputerowi, co ma robić. Mówiąc dokładniej, w programowaniu internetowym są one sposobami mówienia twoim przeglądarkom, co mają robić.

Celem tego postu jest nauczenie, w prostym języku angielskim, podstaw HTML, CSS i jednego z najpopularniejszych języków programowania, JavaScript. Ale zanim zaczniemy, dowiedzmy się, jakie faktycznie są języki programowania.

Co to jest język programowania?

Programowanie lub kodowanie przypomina rozwiązywanie puzzli. Zastanów się nad ludzkim językiem, takim jak angielski lub francuski. Używamy tych języków do przekształcania myśli i pomysłów w działania i zachowania. W programowaniu cel układanki jest dokładnie taki sam – kierujesz tylko różnymi rodzajami zachowań, a źródłem tego zachowania nie jest człowiek. To jest komputer.

Język programowania to nasz sposób komunikowania się z oprogramowaniem. Osoby używające języków programowania są często nazywane programistami lub programistami. Oprogramowanie, które mówimy za pomocą języka programowania, może polegać na tym, aby strona internetowa wyglądała w określony sposób lub aby obiekt na stronie poruszał się, jeśli użytkownik wykona określone działanie.

Programowanie w tworzeniu stron internetowych

Tak więc, gdy projektantowi stron internetowych zostanie postawiony cel końcowy, taki jak „utwórz stronę internetową z tym nagłówkiem, czcionką, tymi kolorami, zdjęciami i animowanym jednorożcem idącym po ekranie, gdy użytkownicy klikną ten przycisk”, zadanie projektanta stron internetowych polega na przyjęciu tego wielkiego pomysłu i podzieleniu go na małe kawałki, a następnie przetłumaczeniu tych fragmentów na instrukcje zrozumiałe dla komputera – w tym ułożeniu wszystkich instrukcji we właściwej kolejności lub składni.

http://sanrahpo1.pl/tworzenie-stron-internetowych
http://sanrahpo1.pl/tworzenie-stron-siedlce
http://sanrahpo1.pl/tworzenie-stron-warszawa
http://sanrahpo1.pl/strony-www-krakow
http://sanrahpo1.pl/strony-www-lodz
http://sanrahpo1.pl/strony-www-poznan
http://sanrahpo1.pl/strony-www-gdansk
http://sanrahpo1.pl/strony-www-szczecin
http://sanrahpo1.pl/strony-www-bydgoszcz
http://sanrahpo1.pl/strony-www-lublin
http://sanrahpo1.pl/strony-www-bialystok

Każda odwiedzana strona internetowa jest budowana przy użyciu sekwencji oddzielnych instrukcji, jedna po drugiej. Twoja przeglądarka (Chrome, Firefox, Safari itd.) Odgrywa dużą rolę w tłumaczeniu kodu na coś, co widzimy na naszych ekranach, a nawet z nim współpracujemy. Łatwo zapomnieć, że kod bez przeglądarki jest tylko plikiem tekstowym – magia dzieje się, gdy umieścisz ten plik tekstowy w przeglądarce. Po otwarciu strony internetowej przeglądarka pobiera HTML i inne języki programowania oraz interpretuje je.

HTML i CSS w rzeczywistości nie są językami programowania technicznego; to tylko informacje o strukturze i stylu strony. Ale zanim przejdziesz do JavaScript i innych prawdziwych języków, musisz znać podstawy HTML i CSS, ponieważ znajdują się one na froncie każdej strony internetowej i aplikacji.

Na początku lat 90. HTML był jedynym językiem dostępnym w Internecie. Programiści musieli starannie kodować statyczne strony, strona po stronie. Od tego czasu wiele się zmieniło: teraz dostępnych jest wiele języków programowania komputerowego. W tym poście omówię HTML, CSS i jeden z najpopularniejszych języków programowania: JavaScript.
HTML, CSS i JavaScript: samouczek

Przegląd:

HTML zapewnia podstawową strukturę witryn, która jest ulepszana i modyfikowana przez inne technologie, takie jak CSS i JavaScript.
CSS służy do sterowania prezentacją, formatowaniem i układem.
JavaScript służy do kontrolowania zachowania różnych elementów.

Teraz omówimy każdy z nich indywidualnie, aby pomóc Ci zrozumieć role, które każda gra na stronie, a następnie omówimy, jak pasują do siebie. Zacznijmy od dobrego starego HTML.
HTML

HTML jest rdzeniem każdej strony internetowej, bez względu na złożoność witryny lub liczbę zaangażowanych technologii. Jest to niezbędna umiejętność dla każdego profesjonalisty. Jest to punkt wyjścia dla każdego, kto uczy się, jak tworzyć treści w Internecie. Na szczęście dla nas jest zaskakująco łatwy do nauczenia się.
Jak działa HTML?

HTML oznacza HyperText Markup Language. „Język znaczników” oznacza, że ​​zamiast używać języka programowania do wykonywania funkcji, HTML używa znaczników do identyfikowania różnych rodzajów treści i celów, które służą one stronie internetowej.

Pokażę ci, co mam na myśli. Spójrz na artykuł poniżej. Gdybym poprosił Cię o oznaczenie rodzajów treści na stronie, prawdopodobnie zrobiłbyś to całkiem nieźle: u góry jest nagłówek, a pod nim podtytuł, treść i kilka obrazów u dołu, a następnie jeszcze kilka bitów tekstu.

Języki znaczników działają w taki sam sposób, jak przed chwilą, gdy oznaczyłeś te typy treści, z wyjątkiem tego, że używają do tego kodu – w szczególności używają tagów HTML, zwanych również „elementami”. Te tagi mają dość intuicyjne nazwy: tagi nagłówka, tagi akapitu, tagi obrazu i tak dalej.

Każda strona internetowa składa się z kilku tagów HTML oznaczających każdy rodzaj treści na stronie. Każdy typ treści na stronie jest „zawinięty”, tj. Otoczony tagami HTML.

Na przykład słowa, które teraz czytasz, są częścią akapitu. Gdybym kodował tę stronę od zera (zamiast używać edytora WYSIWG w COS HubSpot), zacząłbym ten akapit od otwierającego tagu akapitu:

Część „znacznik” jest oznaczona otwartymi nawiasami, a litera „p” informuje komputer, że otwieramy akapit zamiast jakiejś innej zawartości.

Po otwarciu tagu zakłada się, że cała następująca treść jest jego częścią, dopóki tag nie zostanie „zamknięty”. Kiedy akapit się skończy, wstawię zamykający tag akapitu: . Zauważ, że znaczniki zamykające wyglądają dokładnie tak samo jak znaczniki otwierające, z tym wyjątkiem, że po lewym nawiasie kątowym występuje ukośnik. Oto przykład:

To jest akapit.

Korzystając z HTML, możesz dodawać nagłówki, formatować akapity, kontrolować podział linii, tworzyć listy, wyróżniać tekst, tworzyć znaki specjalne, wstawiać obrazy, tworzyć łącza, budować tabele, kontrolować styl i wiele więcej.

Aby dowiedzieć się więcej na temat kodowania w HTML, polecam zapoznanie się z naszym przewodnikiem po podstawowym HTML oraz korzystanie z bezpłatnych klas i zasobów w codecademy – ale na razie przejdźmy do CSS.
CSS

CSS oznacza Cascading Style Sheets. Ten język programowania decyduje o tym, jak elementy HTML witryny powinny faktycznie pojawiać się na froncie strony.