od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperJeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Tym rozdziałem powoli zbliżamy się do końca tej części tego kursu, w której chciałem omówić język JavaScript,
jako tzw. core, czyli takie jądro języka JavaScript niezależne od środowiska uruchomieniowego.
Do tej pory, jak widzisz, cały czas te skrypty uruchamiamy w przeglądarce.
Ale ja ci wspominałem, że JavaScript może być uruchamiany
czy to jako Node.js, w tej platformie czy jeszcze w wielu innych miejscach.
I to co do tej pory omawiamy.
Jest to język JavaScript, który wszędzie powinien działać.
Natomiast dopiero później będziemy omawiać obiektowy model dokumentu, o którym Ci już wspominałem, który
jest dostępny w przeglądarce i dzięki temu taką wyraźną kreską oddzielimy sobie sam język JavaScript od
tego co możemy za jego pomocą zrobić w przeglądarce internetowej.
Chciałbym jeszcze w tym rozdziale omówić kilka wbudowanych obiektów, które są w skrócie dostępne a konkretnie
tzw. konstruktorów i zaczniemy od string. Przejdziemy od razu do kodu i wytłumaczę Ci na czym rzecz polega.
Do tej pory mówiłem ci, że możemy utworzyć sobie nowy string na przykład w ten sposób. Używamy albo cudzysłowu
albo apostrofów i mamy utworzony taki ciąg znaków.
Wspominałem również, że w JavaScript mamy kilka prymitywnych typów i wartości, a wszystko inne jest obiektem,
więc prymitywne typy wartości to był właśnie string, boolean, czyli prawda lub fałsz, number, null oraz
undefined.
Natomiast, jeżeli chodzi o string, boolean oraz number, to okazuje się że choć taki zapis jak to zrobiłem
to jest utworzenie typu prymitywnego, to możemy również utworzyć obiekty lub za nas będą one tworzone,
co teraz chce ci pokazać.
Więc jeśli teraz byśmy chcieli w console.log wyświetlić sobie typeof n, to ty już wiesz, że będzie to
string.
Zatem przechodzę tutaj. Odświeżam i nie mam tutaj żadnego zdziwienia jest to string.
Natomiast możemy również w inny sposób utworzyć taki string, co chciałbym uczynić tutaj pod spodem. Nazwiemy sobie
to powiedzmy n1,
nie ma to znaczenia i teraz użyję magicznego operatora new, który jest w JavaScript'cie dostępny.
Jeszcze o nim będę mówił szczególnie w drugiej części tego kursu, gdzie poruszę programowanie obiektowe
i możemy napisać string z dużej litery.
Tutaj zakończymy średniakiem, a tutaj wpiszemy również Ania.
No i na pierwszy rzut oka również teoretycznie utworzyliśmy sobie string.
Teraz jeszcze gwoli wyjaśnienia.
Samo string, gdybyśmy wpisali typeof string w ten sposób, jest to funkcja operator new w JavaScript'cie pozwala
nam operować wyłącznie na funkcjach.
I właśnie dlatego taki string jest to funkcja w JavaScript
jest to nazywane funkcją konstruktora i kiedy właśnie użyjemy przed tym operatora new pozostaje nam
zwrócony obiekt.
Zawsze będzie to obiekt, czyli zmiennej n1 mamy referencje do obiektu.
Jeżeli teraz napiszę typeof n1, to zobaczysz, że już to nie będzie string, ale to będzie object.
No i teraz o co chodzi.
Przy okazji widzisz, że mój edytor mi wyświetlił ostrzeżenie.
Nie powinniśmy z takiego zapisu korzystać.
A dlaczego ci go pokazałem?
Teraz ci wytłumaczę.
Otóż stringi zapisane w taki sposób, mają pewne właściwości i metody, które jeszcze w tej lekcji poruszę.
Czyli moglibyśmy w konsoli np. skorzystać z właściwości length, tak jak na tablicach.
Pamiętasz, pokazywałam, że długość tablicy możemy sprawdzić
właściwością length
podobnie jest z stringiem. Na stringu możemy się odwołać do kropka length i zostanie nam zwrócone ile
liter w takim string'u się znajduje zobaczymy.
Jest to 4.
No, ale właśnie teraz, co tutaj się wydarzyło.
Mówiłem, ci że wartości prymitywne nie są obiektami.
A pamiętasz, że tylko obiekty posiadają właściwości tak jak tutaj.
Oraz metody, więc skąd taka wartość prymitywna jak ten string. Ma metodę czy w tym przypadku właściwość
length
Otóż właśnie, jeżeli utworzymy sobie taki zapis, czyli wartość prymitywną, a następnie na takim stringu będziemy
chcieli skorzystać z jakiejś właściwości lub metody, to za naszymi plecami JavaScript wykona właśnie
coś takiego.
Czyli weźmie tę wartość prymitywną i przerzuci ją przez taki konstruktor string.
To co zostanie zwrócone jest to obiekt i ten właśnie obiekt zawiera już takie właściwości i metody, do
których można się odwołać. Jeszcze co jest ważne?
Mówiłem ci, że obiekty mają właściwości i metody również dowolnie i możemy przypisywać.
Więc jeśli teraz do n1, wiem, że jest to obiekt, przypisze sobie jakąś właściwość. Mogę ją dowolnie nazwać,
myValue równa się 23.
To teraz po przejściu tutaj. Mogę się odwołać do n1, myValue.
Jak widzisz ona tutaj się znajduje.
Natomiast, jeżeli byśmy się odwołali do n myValue to za naszymi plecami,
ten prymityw zostanie z niego zrobiony właśnie obiekt. Do obiektu się odwołamy.
Skorzystamy z myValue, czyli naszej jakiejś tam właściwości teraz wymyślonej. Przypiszemy ją.
Ale, jeżeli będę chciał się odwołać n myValue, to jej tutaj nie ma,
czyli warto wiedzieć, że za naszymi plecami taki string zostanie skonwertowany do obiektu. Zostanie
na nim wywołana np. taka właściwość jak tutaj wywołałem i ten obiekt znika.
Czyli tutaj poprawnie dodałem do w tym miejscu utworzonego za naszymi plecami obiektu 23,
ale to później od razu zniknęło.
Czyli jest taka różnica gdybyśmy korzystali z new string, to zawsze będzie to obiekt, a jeżeli skorzystamy z prymitywów
i później odwołamy się do właściwości, czy metody gdzie on zostanie konwertowany szybko na obiekt to
ten obiekt później znika.
To jest taka istotna różnica. Natomiast takiego zapisu w ogóle nie musimy korzystać, ale jest on dla nas
dostępny.
Natomiast jest inny zapis, z którego będziemy korzystać częściej i napiszę tutaj np. n2 i będzie to po
prostu string.
Wspomniałem ci, że string jest to funkcja i bez operatora new również możemy na niej operować i ona wtedy
zachowuje się inaczej.
Jeżeli teraz tutaj podam na przykład 32, wieżesz, że jest to number.
To zobacz, co zostanie zwrócone do n2. Wpiszmy
sobie tutaj typeof n2 i jak widzisz jest to string.
Jeżeli odwołam się do n2, to również widzisz, że jest to po prostu string.
Czyli w ten sposób, za pomocą funkcji string, możemy konwertować inne wartości do stringów.
Czyli jeżeli będziemy mieli number, a chcemy to zamienić na string, to możemy bez trudu to zrobić właśnie
w taki sposób i tutaj już nie obiekt, ale wartość prymitywna zostaje zwrócona.
Na koniec chciałbym ci jeszcze pokazać kilka bardzo przydatnych metod, które są na stringach dostępne.
Jak wspomniałem na takich właśnie stringach, zapisanych w sposób prymitywny.
One będą bez problemu dostępne, bo za naszymi plecami to zostanie w ten sposób konwertowane do obiektu.
Więc przejdźmy sobie tutaj, ja od razu ich trochę wkleję i będę chciał ci szybko wytłumaczyć.
Oczywiście znajdziesz również w ściągawce, którą dla ciebie przygotowałem w PDF'ie i tam będzie to dokładnie
opisane, więc bardzo serdecznie zachęcam cie do tego, aby sobie z tymi metodami eksperymentował, aby je
zapamiętać.
Wrzucam je teraz tutaj i na początek jest to length. Już Ci to pokazałem, może to sobie wykomentujemy. Length zwróci nam
zawsze
długość ciągu znaków. W tym przypadku 4. Kolejna,
jest to takie odwołanie się tablicowe, to może wykomentujemy, co jest bardzo ciekawe.
To string'i zachowują się trochę jak tablice. Pamiętasz, że w tablicach mogliśmy się do poszczególnych indeksów
odwoływać i na stringu jest podobnie.
Więc jeżeli napiszę n. Mamy tutaj tę wartość 1, to odwołamy się do indeksu pierwszego, czyli zero to jest
a, tak jak w tablicach, 1 to jest n.
Czyli w tym przypadku zwrócimy sobie n.
Zobaczmy dokładnie tak się stało.
Czyli po takim stringu moglibyśmy iterować np. pętlą for bez żadnego problemu.
Pod spodem mamy alternatywę i lepiej z takiej metody korzystać.
Jak widzisz kropka charAt.
1.
Działa to dokładnie w ten sam sposób. Mówimy, że chcemy pobrać tutaj znak, który jest na pozycji 1, a 0
to będzie zawsze pierwszy znak i teraz nie widzisz, że to jest metoda, więc odwołałem się do metody na
typie prymitywnym właśnie za jej plecami jest on cały czas konwertowane do obiektu.
Tutaj zostaje nam zwrócone właśnie w tym przypadku n i ten obiekt znika.
Nic nie zmienia się w n i cały czas jest tutaj typ prymitywny. Wykomentuje.
Przejdźmy dalej.
Kolejna bardzo przydatna metoda, jest to indexOf i ona nam pozwoli sprawdzić czy w danym ciągu znajduje
się inny ciąg.
Gdyby tutaj było jakieś dłuższe zdanie, chciałbyś sprawdzić czy jakiś wyraz w nim się znajduje.
To możesz właśnie się odwołać tak jak tutaj, do Ania, indexOf nia,
czyli linia tutaj się znajduje.
Zobaczmy, co zostanie dla nas zwrócone.
Jak widzisz, jeden i teraz zapytasz dlaczego.
Otóż jeżeli taki ciąg zostanie w tym ciągu znaleziony, to zostaje nam zwrócony indeks,
gdzie on się zaczął,
czyli a jest to 0, n jest to 1.
Tutaj się to zaczęło,
nia, czyli jedynka została nam zwrócona.
I teraz mógłby się zastanowić, po co nam będzie to potrzebne.
Otóż, zauważ co będzie jeżeli będę chciał w Ania, wyszukać Anna, taki ciąg tam się nie znajduje.
I zobacz zostało minus jeden dla nas zwrócone.
Dzięki temu będziemy mogli w if'ie sobie sprawdzić if n indexOf Anna
równa się minus 1, to wtedy wiemy, że taki ciąg nie znajduje się w tym ciągu.
Pamiętaj, aby nie używać tego w if'ie bezpośrednio, w ten sposób, bo może zostać zwrócone 0.
Jeżeli napisze Ania, to mamy zwrócone 0, dlatego że Ania została dopasowana już od samego początku, a pamiętasz, że
zero w instrukcji warunkowej if, działa jak false, czyli zawsze trzeba porównywać z minus 1. Anna,
będzie to minus 1.
I właśnie w ten sposób możemy sprawdzić czy jakiś ciąg w innym się znajduje.
Kolejna bardzo przydatna metoda, jest to metoda replace, która pozwala nam zamienić pewne znaki na inne.
Czyli tutaj mówimy Anna.
Ania konkretnie, replace nia na na, czyli pierwszy parametr jest to coś czego szukamy.
W tym przypadku nie ma.
Jeżeli zostanie znalezione, to chcę to zamienić na to co podaje w drugim parametrze, czyli na ne na. Teraz
Ania zamienimy na Anna, co jest bardzo ważne.
Ten string Ania nie został zmieniony, czyli wykonaliśmy to na tym stringu.
Zostało to tutaj zwrócone, ale ten string się nie zmienił.
Czyli tutaj moglibyśmy utworzyć zmienną i do niej przypisać to, co co zostaje zwrócone.
Jest to bardzo przydatne czasami, jeżeli chcemy na przykład zamienić nazwę jakiegoś pliku z SVG na PNG
i tak dalej.
Myślę, że jeszcze będziemy z tego korzystać i pokażę ci praktyczne przykłady.
Następnie mamy kilka metod, które są przydatne do wycinania podciągów.
Pierwsza z nich jest to slice, bardzo podobna do tej, która jest na tablicach i tutaj jako pierwszy parametr
podajemy Index od którego chcemy zacząć.
0 to znaczy, że od początku, a jako drugi jest to indeks do,
czyli dokąd chcemy wyciąć.
Znowu tutaj nie będziemy zmieniać tego string'u, tylko nowy zostanie zwrócony i zobacz co się stanie.
Powiedziałem, że chcę wyciąć od zerowego do pierwszego.
Więc tylko a zostało zwrócone, dlatego że pierwszy indeks jest do n,
czyli do niego chciałem wyciąć, ale bez uwzględnienia tego indeksu, czyli samo a,
Gdybym chciał wyciąć dwie pierwsze literki, to do indeksu drugiego, czyli dotąd dwie pierwsze literki
zostałyby bez problemu wycięte, jak widzisz An. Kolejna z takich metod, która jest dosyć podobna jest
to substr i tutaj również podajemy indeks, od którego chcemy zacząć.
Natomiast drugi parametr, to nie jest indeks do którego chcemy wycinać, ale ilość znaków,
czyli możemy tutaj napisać 0 i n i zostanie nam zwrócone
a, jeżeli napiszę, że chcę wyciąć dwa znaki, to dwa znaki zostaną wycięte, czyli An i tutaj zwrócone.
Kolejna metoda jest to metoda split. Bardzo nam przydatna, jeżeli na stringu wywołamy metodę split to
zostanie nam zwrócona tablica.
I tutaj możemy podać na jakich znakach chcemy taką tablicę rozdzielić, taki string konkretnie, a tutaj jaka ma być
długość tablicy.
Ten parametr nie jest konieczny, więc mogę go usunąć.
Zauważ, co stanie się kiedy na takim stringu Ania wywołam metodę split i przekaże jej pusty ciąg znaków.
Zapiszmy i zobaczmy. Jak widzisz została zwrócona tablica, gdzie mamy każdą literkę w osobnym indeksie
czy w osobnej komórce tablicy.
Jeżeli miałbym tutaj na przykład Ania Kowalska, to mógłbym napisać, że chcę rozdzielić taki string na
spacji.
Działa to w ten sposób, że jak spacja zostanie znaleziona, to jest ona usuwana, a elementy pomiędzy nią
są dzielone w ten sposób będziemy mieli tablicę Ania oraz Kowalska.
Podobnie byłoby gdybym tutaj napisał spacje i np. byłoby to Kowalska Nowak to mógłbym powiedzieć że
chce rozdzielić na pauzie i mielibyśmy
Ania Kowalska, Nowak. W ten oto sposób. Drugi parametr, jak wspomniałem może tutaj ograniczać ilość elementów
tablicy, więc jeśli napiszę 1, to tylko jeden element zostanie tutaj przypisany, ale zazwyczaj z tego drugiego
parametru nie korzystamy.
Zróbmy to w ten sposób i będziemy mieli imię oraz nazwisko.
Dwie ostatnie metody bardzo przydatne często wykorzystywane od razu obydwie komentuje.
Jest to tu lower case
i tu upper case.
Możesz się domyślić, że ta metoda zamieni nam string na małe litery, a ta na wielkie, więc zobaczmy jak
to wygląda.
Jak widzisz wszystkie literki tutaj zostały zamienione na małe, a w drugim przypadku wszystkie zostały
zamienione na duże.
To nie są wszystkie metody, które są dostępne na stringach. Natomiast większość z nich z których będziesz
korzystał, a wszystkie znajdziesz pod linkiem, który również zamieściłem w PDF'ie.
Właśnie w tej sekcji gdzie opisuję stringi.
Mam nadzieję, że zrozumiałeś na czym polega tworzenie nowego obiektu oraz jak w locie taka prymitywna
wartość jest konwertowane na string, dzięki czemu możemy z takich metod jak tutaj na niej korzystać.
Mimo tego że nie utworzyliśmy obiektu, co jeszcze warto zapamiętać, to fakt że gdyby chciał jakąś inną
wartość na przykład tutaj numbers skonwertować na string, to możesz użyć takiego zapisu i skorzystać
z funkcji string.
Obiekt String · 1 min
var n = "Ania Kowalska-Nowak";
var n1 = new String("Ania");
var n2 = String(32);
// console.log( typeof n2 );
// console.log( n.length );
// console.log( n.length );
// console.log( n[1] );
// console.log( n.charAt(1) );
// console.log( n.indexOf("Anna") );
// console.log( n.replace("nia", "nna") );
// console.log( n.slice(0, 2) );
// console.log( n.substr(0, 2) );
// console.log( n.split(" ") );
console.log( n.toLowerCase() );
console.log( n.toUpperCase() );