Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do projektu interaktywnych przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam pull request.
Składnia
if (warunek) wyrażenie1 warunek Wyrażenie, które jest uważane za prawdziwe lub fałszywe . instrukcja1 Instrukcja wykonywana, jeśli warunek jest prawdziwy. Może być dowolną instrukcją, w tym dalej zagnieżdżonymi instrukcjami if. Aby wykonać wiele instrukcji, użyj instrukcji blokowej ((...)), aby pogrupować te instrukcje. Aby nie wykonywać żadnych instrukcji, użyj pustej instrukcji. statement2 Instrukcja, która jest wykonywana, jeśli warunek jest fałszywy i istnieje klauzula else. Może być dowolną instrukcją, w tym instrukcjami blokowymi i dalej zagnieżdżonymi instrukcjami if.Opis
Wiele instrukcji if...else można zagnieżdżać w celu utworzenia klauzuli else if. Zauważ, że w JavaScript nie ma słowa kluczowego elseif (w jednym słowie).
if (warunek1) stwierdzenie1 else if (warunek2) stwierdzenie2 else if (warunek3) stwierdzenie3 ... else stwierdzenieN
Aby zobaczyć, jak to działa, wyglądałoby to tak, gdyby zagnieżdżenie było odpowiednio wcięte:
If (warunek1) instrukcja1 else if (warunek2) instrukcja2 else if (warunek3) ...
Aby wykonać wiele instrukcji w ramach klauzuli, użyj instrukcji blokowej ((...)), aby pogrupować te instrukcje. Ogólnie rzecz biorąc, dobrą praktyką jest zawsze używanie instrukcji blokowych, zwłaszcza w kodzie zawierającym zagnieżdżone instrukcje if:
If (warunek) ( oświadczenia1 ) else ( oświadczenia2 )
Nie myl prymitywnych wartości logicznych prawda i fałsz z prawdziwością lub fałszem obiektu boolowskiego. Dowolna wartość, która nie jest false , undefined , null , 0 , -0 , NaN , ani pustym ciągiem (""), i jakikolwiek obiekt, w tym obiekt logiczny, którego wartość jest fałszywa, jest uważany za prawdziwy, gdy jest używany jako warunek. Na przykład:
Varb = new Boolean(false); if (b) // ten warunek jest prawdziwy
Przykłady
Korzystanie z if...else
if (znak_szyfru === from_znak) ( wynik = wynik + to_znak; x++; ) else ( wynik = wynik + czysty_znak; )Korzystanie z innego, jeśli
Zauważ, że nie ma innej składni if w JavaScript. Jednakże, możesz napisz go ze spacją między else i jeśli:
If (x > 50) ( /* postępuj właściwie */ ) else if (x > 5) ( /* postępuj właściwie */ ) else ( /* postępuj właściwie */ )
Przypisanie w ramach wyrażenia warunkowego
Nie zaleca się używania prostych przypisań w wyrażeniu warunkowym, ponieważ przypisanie może być mylone z równością podczas przeglądania kodu. Na przykład nie używaj następującego kodu:
Jeśli (x = y) ( /* zrób właściwą rzecz */ )
Jeśli musisz użyć przypisania w wyrażeniu warunkowym, powszechną praktyką jest umieszczanie dodatkowych nawiasów wokół przypisania. Na przykład:
If ((x = y)) ( /* zrób właściwą rzecz */ )
Specyfikacje
| Specyfikacja | Status | Komentarz |
|---|---|---|
| ECMAScript Najnowsza wersja robocza (ECMA-262) |
Projekt | |
| ECMAScript 2015 (6 wydanie, ECMA-262) Definicja „instrukcji if” w tej specyfikacji. |
standard | |
| ECMAScript 5.1 (ECMA-262) Definicja „instrukcji if” w tej specyfikacji. |
standard | |
| ECMAScript 3. edycja (ECMA-262) Definicja „instrukcji if” w tej specyfikacji. |
standard | |
| ECMAScript 1. wydanie (ECMA-262) Definicja „instrukcji if” w tej specyfikacji. |
standard | początkowa definicja |
Kompatybilność z przeglądarką
Tabela zgodności na tej stronie jest generowana na podstawie uporządkowanych danych. Jeśli chcesz wnieść swój wkład w dane, wejdź na https://github.com/mdn/browser-compat-data i wyślij nam pull request.
Zaktualizuj dane zgodności na GitHub
| Pulpit | mobilny | serwer | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrom | Brzeg | Firefox | Internet Explorer | Opera | safari | widok na Androida | Chrome na Androida | Firefox dla Androida | Opera na Androida | Safari na iOS | Samsung Internet | Node.js | |
| Jeśli inaczej | Pełna obsługa Chrome 1 | Krawędź Pełne wsparcie 12 | Pełna obsługa Firefoksa 1 | IE Pełne wsparcie 3 | Opera Pełne wsparcieTak | Safari Pełne wsparcie Tak | Pełna obsługa WebView dla systemu Android 1 | Pełna obsługa Chrome na Androida 18 | Pełna obsługa Firefoksa na Androida 4 | Pełna obsługa Opery Android Tak | Safari iOS Pełna obsługa Tak | Samsung Internet Android Pełna obsługa 1.0 | nodejs Pełne wsparcie Tak |
Reg.ru: domeny i hosting
Największy rejestrator i dostawca hostingu w Rosji.
Ponad 2 miliony nazw domen w serwisie.
Promocja, poczta dla domeny, rozwiązania dla biznesu.
Już ponad 700 tysięcy klientów na całym świecie dokonało wyboru.
Bootstrap Framework: szybki responsywny układ
Kurs wideo krok po kroku na temat podstaw układ adaptacyjny w frameworku Bootstrap.
Naucz się składać w prosty, szybki i wydajny sposób, korzystając z potężnego i praktycznego narzędzia.
Uzupełnij zamówienie i zdobądź pieniądze.
*Najedź myszą, aby wstrzymać przewijanie.
Wstecz do przodu
Funkcje i warunki if-else w JavaScript
Często z przy użyciu JavaScript istnieje potrzeba wykonania różne działania w różnych warunkach.
Na przykład napisałeś skrypt, który sprawdza, z której przeglądarki korzysta odwiedzający podczas odwiedzania Twojej witryny. Jeśli jest to Internet Explorer, należy załadować stronę specjalnie zaprojektowaną dla IE, jeśli jest to jakakolwiek inna przeglądarka, należy załadować inną wersję tej strony.
Ogólna składnia konstrukcje if-else następny:
If (warunek) ( akcja ) else ( akcja2 );
Jako przykład rozważ ten kod:
If (browser=="MSIE") ( alert("Korzystasz z IE") ) else ( alert("Nie korzystasz z IE") );
Zauważ, że używane są wszystkie małe litery. Jeśli napiszesz „JEŻELI”, wystąpi błąd.
Zwróć też uwagę, że do porównania używany jest podwójny znak równości (==).
Jeśli napiszemy przeglądarka="MSIE", wtedy po prostu przypisujemy wartość MSIE nazwa zmiennej przeglądarka.
Kiedy piszemy przeglądarka=="MSIE", JavaScript "rozumie", że chcemy porównać, a nie przypisywać wartości.
Więcej trudne warunki jeśli można je po prostu stworzyć, dodając je na przykład do części w przeciwnym razie już istniejąca struktura Jeśli inaczej:
If (warunek) ( działanie1 ) else ( if (inny warunek) ( działanie2 ) else ( działanie3 ); );
Na przykład:
If (browser=="MSIE") ( alert("Korzystasz z IE") ) else ( if (browser=="Netscape") ( alert("Korzystasz z Firefoksa") ) else ( alert("Używasz nierozpoznana przeglądarka: )")); );
Operatory logiczne AND, OR i NOT
Dla jeszcze bardziej elastycznego wykorzystania projektu Jeśli inaczej można używać tak zwanych operatorów logicznych.
I napisane jako && i jest używany, gdy więcej niż jeden warunek musi być sprawdzony pod kątem prawdziwości.
Na przykład: Jeśli w lodówce są jajka, a w lodówce jest bekon, to możemy jeść jajka z bekonem.
Składnia jest następująca:
If (warunek1 && warunek2) ( akcja ) if (godzina==12 && minuta==0) ( alert("Południe!") );
Lub napisane jako || i jest używany, gdy chcemy sprawdzić prawdziwość co najmniej jednego z dwóch lub więcej warunków. (Możesz uzyskać || trzymając klawisz Shift i klawisz \)
Na przykład: Jeśli w lodówce jest mleko lub w lodówce jest woda, to mamy coś do picia.
Składnia jest następująca:
If (warunek1 || warunek2) ( akcja ) if (godzina==11 || godzina==10) ( alert("Jeszcze nie ma południa!") );
Nie napisane jako ! i służy do negacji.
Na przykład: Jeśli w lodówce nie ma jajek ani bekonu, nie możemy jeść ani jajek, ani bekonu.
Składnia to:
If (!(warunek)) ( akcja ) if (!(godzina==11)) ( alert("Nie jest godzina 11") );
Funkcje w JavaScript
Zamiast po prostu dodawać JavaScript do strony, aby przeglądarka wykonała kod, gdy do niego dotrze, możesz sprawić, by skrypt działał tylko wtedy, gdy zostanie uruchomione zdarzenie.
Załóżmy na przykład, że stworzyłeś JavaScript, którego zadaniem jest zmiana koloru tła strony po kliknięciu określonego przycisku. W takim przypadku musisz „powiedzieć” przeglądarce, że ten skrypt nie powinien być wykonywany tylko dlatego, że kolejka do niego dotarła.
Aby uniemożliwić przeglądarce wykonanie skryptu po załadowaniu, musisz napisać skrypt jako funkcję.
W tym przypadku kod JavaScript nie zostanie wykonany, dopóki nie „poprosimy” go o to w specjalny sposób.
Patrzeć na podany przykład skrypt napisany jako funkcja:
Kliknij przycisk, aby zobaczyć, co robi ten skrypt:
Jeśli linia alert("Witaj!"); nie zostanie napisany wewnątrz funkcji, to zostanie wykonany za każdym razem, gdy przeglądarka dotrze do tego wiersza. Ale ponieważ napisaliśmy to wewnątrz funkcji, ta linia nie jest wykonywana, dopóki nie klikniemy przycisku.
Wywołanie funkcji (tj. wywołanie do niej) następuje w tej linii:
Jak widać umieściliśmy przycisk na formularzu i dodaliśmy wydarzenie onClick="mojafunkcja()" dla przycisku.
W przyszłych lekcjach przyjrzymy się innym typom zdarzeń, które uruchamiają funkcje.
Ogólna składnia funkcji jest następująca:
Nazwa funkcji funkcji(zmienna1, zmienna2,..., zmiennaN) ( // Tu pojawia się treść funkcji, co ona robi )
Aparat ortodontyczny: { oraz } wskazać początek i koniec funkcji.
Typowym błędem przy tworzeniu funkcji jest nieostrożność i ignorowanie znaczenia wielkości liter. Słowo funkcjonować powinno być dokładnie funkcjonować. Opcja funkcjonować lub FUNKCJONOWAĆ spowoduje błąd.
Ponadto zastosowanie wielkie litery odgrywa również rolę w nazywaniu zmiennych. Jeśli masz funkcję o nazwie mojafunkcja(), a następnie próba zaadresowania go jako mojafunkcja(), MOJA FUNKCJA() lub MojaFunkcja() spowoduje błąd.
Podobał Ci się materiał i chcesz podziękować?
Po prostu podziel się z przyjaciółmi i współpracownikami!
Zobacz też:
zm a = 10; varb = (a>1) ? 100:200; ostrzeżenie(b);
Jeśli stan a>1 prawda, to zmienna b przypisz wartość 100 , w przeciwnym razie zmienna b ma przypisaną wartość 200 .
Zadanie Js 3_4. Uzupełnij kod: 3 zmienne lokalne są deklarowane za pomocą słowo kluczowe zm. Konieczne jest przypisanie wartości następującego operatora trójargumentowego do zmiennej max: jeśli a jest większe niż b , to zwróć a , w przeciwnym razie zwróć b .
Fragment kodu:
jeśli (a*b< 6) { result = "Мало"; } else { result = "Много"; }
Pytania do samokontroli:
- Jaka jest składnia operatora trójargumentowego?
- Ile argumentów ma operator trójargumentowy?
Instrukcja Switch w javaScript - switch
Instrukcja switch javascript służy do testowania zmiennej pod kątem wielu wartości:
Składnia:
switch (zmienna lub wyrażenie) ( case opcja1: //..blok instrukcji.. break case opcja2: //..blok instrukcji.. break default: //..blok instrukcji.. )
Wartość zmiennej lub wyrażenia jest sprawdzana: w każdym walizka sprawdzana jest jedna z wartości, w przypadku odpowiedniej wartości wykonywany jest jeden lub drugi blok wyciągów odpowiadający danemu walizka.
Blokuj zaczynając od oficjalne słowo wartość domyślną można pominąć. Wyciągi blokowe zostaną wykonane, jeśli żadna z wymienionych wartości we wszystkich walizka nie pasuje.
Ważny: Wyrażenie break jest wymagane po każdej rozważanej wartości zmiennej (po każdej walizka); jeśli nie zostanie użyty, wyświetlą się wszystkie poniższe stwierdzenia
Porównaj z operatorem JEŚLI:
zm a = 2; switch(a) ( case 0: // if (a === 0) case 1: // if (a === 0) alert("Zero lub jeden"); // wtedy wypisz... break; 2: // if (a === 2) alert("Dwa"); // then output... break; default: // else alert("Many"); // w przeciwnym razie output... )
Jak pogrupować wiele opcji?
Aby wykonać te same instrukcje, można pogrupować kilka walizka. Jak w powyższym przykładzie:
Przypadek 0: przypadek 1: alert("Zero lub jeden"); przerwanie; ...
Gdy a = 0 i a = 1, wykonywana jest ta sama instrukcja: alert("Zero lub jeden");
Przykład 4: Poproś użytkownika o wprowadzenie koloru. Wyślij tłumaczenie do język angielski wprowadzony kolor. Dla koloru "niebieski" oraz "niebieski" dają taką samą wartość.
✍ Rozwiązanie:
- Utwórz stronę internetową ze szkieletem html i tagiem scenariusz.
- Zainicjuj zmienną kolor
- Sprawdź wartość zmiennej za pomocą konstrukcji przełącznik, wyprowadzając dla każdej wartości odpowiednie tłumaczenie:
- Na kwiaty "niebieski" oraz "niebieski" wykonaj grupowanie:
- Zorganizuj dane wyjściowe dla tych kolorów, które nie są dostarczane przez program:
- Przetestuj skrypt w przeglądarce.
| var color = prompt("Jaki kolor?" ) ; |
var color = prompt("Jaki kolor?");
switch (kolor) ( case "red" : alert("red"); break; case "green": alert("green"); break; // ...
Jeśli zmienna kolor ma wartość "czerwony", a następnie wyprowadza do okno modalne tłumaczenie - "czerwony" i wyjście z budowy (przerwa ;). Jeśli zmienna kolor ma wartość "zielony", następnie wyświetl tłumaczenie - "zielony" w oknie modalnym i wyjdź z konstrukcji (przerwa;).
// ... case "niebieski": case "niebieski": alert("niebieski"); przerwanie; //...
Jeśli zmienna kolor ma wartość „niebieski” lub zmienna kolor ma wartość "niebieski", następnie wyświetl tłumaczenie - "niebieski" w oknie modalnym i wyjdź z konstrukcji (przerwa;).
| // ... domyślnie : alert( „Nie mamy informacji o tym kolorze”) ) // wyłącznik krańcowy |
// ... default: alert("y nie mamy informacji o tym kolorze") ) // koniec przełącznika
Zadanie Js 3_6. Znajdź i napraw błędy w następującym fragmencie kodu:
| 14 15 16 17 | numer_zmiennej = monit ( „Wpisz numer 1 lub 2:”) ; switch (liczba) ( wielkość liter "1" ( document.write ( " Jeden " ) ; ) ; przerwa ; wielkość liter "2" ( document.write ( "Dwa" ) ) ) ; przerwa ; default ( document.write ( „Wprowadzono wartość inną niż 1 i 2”) ; } ; } |
var number = prompt("Wprowadź liczbę 1 lub 2:"); switch (liczba) ( case "1" ( document.write("Jeden"); ); break; case "2" ( document.write("Dwa"); ); break; default ( document.write("Wprowadziłeś wartość inna niż 1 i 2"); ); )
Zadanie Js 3_7. Co wyświetli się na ekranie po wykonaniu poniższego kodu?:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | wartość zmiennej = "2" ; switch (wartość) ( wielkość liter "1" : wielkość liter "2" : wielkość liter "3" : document.write ("Hello" ) ; break ; wielkość liter "4" : wielkość liter "5" : document.write ("Świat" ) ;domyślnie : document.write("Błąd" ) ; ) |
wartość zmiennej = "2"; switch (wartość) ( case "1": case "2": case "3": document.write("Hello"); break; case "4": case "5": document.write("World" ); domyślnie: document.write("Błąd"); )
Zadanie Js 3_8. Zapytaj użytkownika o numer - liczbę wron na gałęzi. W zależności od wprowadzonej liczby (nie więcej niż 10), wyświetl komunikat: - Siedzisz na oddziale 1 wrona- Siedząc na gałęzi 4 wrony- Siedząc na gałęzi 10 wron
- W zależności od wprowadzonej liczby zmienia się końcówka słowa. "wrona".
- Aby to sprawdzić, użyj instrukcji switch javascript.
- ratować ta strona w folderze wyników (przyda się do dalszej pracy).
Pytania do samokontroli:
- W takim przypadku jest to właściwe, ponieważ operator warunkowy użyj konstrukcji przełącznik?
- Jaki jest cel domyślnego bloku w oświadczeniu? przełącznik?
- Czy konieczne jest użycie instrukcji break w konstrukcji? przełącznik?
- Jak odbywa się grupowanie dla wielu opcji wartości w operatorze przełącznik?
Instrukcje pętli w javaScript - For
Składnia:
for(początkowa wartość licznika; warunek; przyrost licznika) ( //..blok instrukcji.. )
Ważny: Pętla javascript for jest używana, gdy wiadomo z góry, ile razy należy powtórzyć cykliczne akcje (ile iteracji ma pętla)
- Wyrażenie przypisania jest używane jako wartość początkowa licznika iteracji: na przykład i=0 - licznik pętli zaczyna się od zera:
- Jako przyrost licznika wskazany jest krok, o który licznik powinien się zwiększać: na przykład wskazuje, że każdej iteracji pętli będzie towarzyszył jej wzrost o 1 :
- Warunkiem pętli jest wartość końcowa licznika: na przykład i10 zatrzymuje pętlę:
for(var i = 0; warunek; przyrost licznika) ( //.. blok instrukcji.. )
for(var i = 0; warunek; i++) ( //..blok instrukcji.. )
for(zmienna i = 0; i<10; i++) { //..блок операторов.. }
Rozważ przykład użycia pętli for w javascript:
Przykład 5: Wypisz sekwencję liczb 0 1 2 3 ... 9 , każda cyfra - z nowej linii. 0 1 2 ... 8 9
✍ Rozwiązanie:
- Aby wyświetlić ciąg liczb, użyjemy licznika pętli for, który powinien zmienić swoją wartość z 0 zanim 9 zgodnie z kolejnością.
- Więc dla początkowa wartość licznika pętli ustaw wartość na 0 ; jak warunki cyklu ustaw wartość końcową - ii=9; krok licznika powinien być równy 1 (i++), ponieważ różnica między członkami ciągu jest jedna:
- Przetestuj skrypt w przeglądarce.
dla (zmienna i=0; i<10; i++)
{
document.write(i+"
");
}
W tym przykładzie wartości licznika pętli są wyświetlane na ekranie, ponieważ odpowiednio przyrost licznika i++ pojawi się na ekranie 0 1 2 3 ... 9
, a każda cyfra - z nowej linii (tag
).
Zadanie Js 3_9. 1 zanim 15 .
- Użyj licznika pętli jako sekwencji liczb dla.
- Dla zmiennej adder użyj identyfikatora zmiennej suma.
Fragment kodu:
Dla (var i=...;...;...)( suma = suma + ...; ) ...
Instrukcje zakończenia pętli przerwanie oraz kontynuować w JavaScript. Operator Wyjście
Instrukcja break przerywa wykonywanie całego ciała pętli, tj. wychodzi z pętli w javaScript.
Podczas gdy instrukcja continue przerywa wykonywanie bieżącej iteracji pętli, ale kontynuuje wykonywanie pętli od następnej iteracji.
Rozważ działanie przerwy i kontynuuj wypowiedzi na przykładzie:
Przykład: Zapoznaj się z algorytmem fragmentu kodu. Co zostanie wydane?
Fragment kodu:
| 1 2 3 4 5 6 | dla (zmienna i= 0 ; i<
10
;
i++
)
{
if
(i==
4
)
continue
;
document.write
(i+
" " ) ; jeśli (i== 8 ) przerwa ; ) |
dla (zmienna i=0; i<10;i++)
{
if (i==4) continue;
document.write(i+"
"); jeśli (i==8) pęknie; )
✍ Rozwiązanie:
- W trzecim wierszu przykładu znajduje się warunek, dzięki któremu liczba 4 nie będzie wyświetlany: operator kontynuować przejdzie do następnej iteracji pętli bez ukończenia bieżącej.
- W linii nr 5 pętla jest opuszczona, ale liczba 8 zostanie wydrukowany na ekranie, ponieważ instrukcja output znajduje się przed warunkiem (w czwartym wierszu). Po spotkaniu przerwanie, interpreter wyjdzie z pętli.
- To. na ekranie będzie: 0 1 2 3 5 6 7 8 - każda cyfra w nowej linii.
Zadanie Js 3_10. Wydrukuj sumę wszystkich liczb całkowitych z 1 zanim 15 , wyłączając z sumy liczbę 5 oraz 7 .
Wyjdź z instrukcji
Język javasctipt udostępnia operator wyjścia z kodu programu - operator wyjścia.
Najczęściej operator służy do wykluczenia błędu wejściowego użytkownika.
Rozważ przykład:
Przykład 6: Poproś użytkownika o wprowadzenie numeru. Jeśli nie liczba, wyświetl komunikat „Potrzebny jest numer!” i zatrzymaj program.
✍ Rozwiązanie:
- Zainicjuj zmienną numer wartość wprowadzona przez użytkownika w oknie modalnym:
- Używając funkcji parseInt do konwersji ciągu znaków na liczbę całkowitą, sprawdź, czy wartość wejściowa jest liczbą:
- Sprawdź wartość zmiennej numer za pomocą funkcji isNaN:
- Za pomocą zasada "kłamstwa" zorganizować kontrolę wartości zmiennej x. Jeśli wartość nie jest liczbowa, wydrukuj odpowiednią uwagę i zakończ program:
- Aby kontynuować program (jeżeli wprowadzona wartość była liczbą) należy wyświetlić następujące okno z pytaniem o wprowadzenie:
- Przetestuj skrypt w przeglądarce.
var number = prompt("Proszę wprowadzić liczbę");
liczba=parseInt(liczba); // zwraca NaN - nie liczbę
Jeśli wprowadzono nieliczbę, funkcja zwróci wartość NaN. nie numer- nie liczba).
x = isNaN(liczba); // zwróci true, jeśli wartość nie jest liczbowa
Funkcja isNaN zwraca wartość PRAWDA jeśli zmienna nie jest liczbą
if (x)( alert("Potrzebna liczba!"); exit; // program exit )
alert("Podaj drugą liczbę");// jeśli nie wpiszesz żadnej liczby, operator nie zostanie wykonany
Pytania do samokontroli:
- Wymień trzy parametry pętli dla i wyjaśnij ich cel.
- Które instrukcje mają na celu wyjście z pętli i jej przerwanie? Podaj przykłady ich użycia.
- Do czego służy operator? Wyjście?
Czy można mieć wiele liczników w jednym FOR?
Ciekawa praca z pętlą for jest możliwa przy użyciu jednocześnie dwa liczniki w cyklu.
Rozważ przykład:
Przykład 7: Korzystając ze skryptu, wypisz w trzech wierszach następujące pary zmienna-wartość: i=0 j=2 i=1 j=3 i=2 j=4
✍ Rozwiązanie:
- Zorganizuj dwa liczniki w pętli for: licznik i do wyprowadzenia sekwencji 0 1 2 , licznik j do wyprowadzenia sekwencji 2 3 4 :
- Aby uzyskać dane wyjściowe z każdej linii, użyj znacznika
:
| 1 2 3 | dla (i= 0 , j= 2 ; i< 10 , j< 5 ; i++, j++ ) { } |
dla(i=0, j=2; i<10, j<5; i++, j++) { }
Każdy z trzech parametrów pętli for ma teraz dwie wartości, które są wymienione Oddzielone przecinkami(na przykład pierwszy parametr z dwiema wartościami: i=0, j=2). Same parametry są wymienione przez średnik(;).
| 1 2 3 4 | dla (i= 0 , j= 2 ; i<
10
,
j<
5
;
i++,
j++
)
{
document.write
(" i=" , i, "j=" , j) ; ) |
dla(i=0, j=2; i<10, j<5; i++, j++)
{
document.write("
i=", i, "j=",j); )
Generowanie strony „w locie”: jak to jest?
Przed wykonaniem kolejnego zadania rozważ przykład dynamiczne budowanie strony html za pomocą javascriptu.
Przykład 8:
- Konieczność dynamicznego generowania list punktowanych i numerowanych na stronie internetowej na podstawie danych wprowadzonych przez użytkownika: poproś użytkownika o wprowadzenie widok listy(numerowane (numer 1) lub wypunktowane (numer 2)), a następnie liczba pozycji na liście.
- W zależności od odpowiedzi wyświetl tagi listy punktowanej lub numerowanej z wymaganą liczbą elementów.
- Jeśli wprowadzono nieistniejący typ listy, wyślij wiadomość "Wprowadź właściwy typ!" i wyjdź z programu ().
Zapamiętajmy tagi:
znaczniki listy numerowanej:
| <ol > <li > <li > <li > </ol> |
Tagi listy punktowanej:
var listType=prompt("Wprowadź "1" dla listy punktowanej, "2" dla listy numerowanej");
- , dla oznaczonego (numer 2) - tag
- . W przypadku wprowadzenia innej wartości wydrukuj notatkę i zakończ program:
- Zainicjuj zmienną Kolvo wartość wprowadzona przez użytkownika w oknie modalnym:
- Aby przekonwertować wartość ciągu na wartość liczbową, użyj funkcji parseInt:
- Ponieważ listy są zamykane odpowiednimi tagami, wyprowadzamy tagi zamykające w zależności od typu listy:
- ") else ( alert("Wpisz poprawny typ"); exit; )
var kolvo=prompt("Podaj liczbę punktów");
dla (zmienna i=1; i<=kolvo; i++) document.write("");
| if (listType== "1") document.write("" ) else if (listType== "2" ) document.write ("" ) ; |
if (listType=="1") document.write("
Zadanie Js 3_11.
Napisz skrypt wyświetlający tagi Wejście(elementy sterujące) różnych typów, w zależności od wprowadzonej liczby:
1
- pole tekstowe,
2
- przycisk,
3
- radio(przełącznik).
Należy również poprosić o liczbę wyświetlanych tagów.
Zapamiętajmy tagi:
Dla 1 - pole tekstowe: Dla 2 - przycisk: Dla 3 - radio:
Przykładowe dane wyjściowe:
Zadanie Js 3_12. Narysuj szachownicę 9x9 za pomocą javascript dla pętli. „Rysowanie” tablicy następuje po tagach HTML tabeli:
Zapamiętajmy tagi:
| <table border="1" width="30%"> <tr > <td >-</td> | -</td> </tr> </tabela> |
| - | - |
- Aby narysować 9 linii, musisz zorganizować zewnętrzną pętlę for z licznikiem i .
- Aby narysować 9 komórek w każdym rzędzie, musisz zorganizować wewnętrzną (zagnieżdżoną) pętlę for z licznikiem j .
- Aby narysować znaczniki komórek i wierszy, użyj metody document.write.
Wynik:
Do tego:
- Wyświetl tabliczkę mnożenia w komórkach tabeli za pomocą liczników pętli (i oraz j).
- Wyświetl pierwszy wiersz i pierwszą kolumnę na czerwonym tle (atrybut bgcolor komórki tabeli):
<tdbgcolor="czerwony">-</td> -
Wynik:
Pytania do samokontroli:
- Wyjaśnij, co oznacza pojęcie „dynamiczne budowanie strony”?
- Jaka konstrukcja językowa jest najczęściej używana podczas dynamicznego budowania strony?
Instrukcje pętli w javaScript - While
Składnia instrukcji while to:
while (warunek) ( //..blok instrukcji.. );
Przykład: Wyświetl w oknie dialogowym potęgi od dwóch do 1000 (2, 4, 8...512). Użyj metody alert()
✍ Rozwiązanie:
- Lista skryptów:
- Przetestuj wynik w przeglądarce.
| 1 2 3 4 5 | zmienna a = 1 ; podczas< 1000 ) { a*= 2 ; alert(a) ; } |
zm a = 1; podczas< 1000){ a*=2; alert(a); }
a*=2 → stosowana jest operacja przypisania złożonego: iloczyn połączony z przypisaniem, tj. to samo co a = a*2
Jak działają instrukcje break i continue w pętli while?
Przykład:
| zmienna a = 1 ; podczas< 1000 ) { a*= 2 ; if (a== 64 ) continue ; if (a== 256 ) break ; alert(a) ; } |
zm a = 1; podczas< 1000){ a*=2; if (a==64) continue; if (a==256) break; alert(a); }
Potęgi dwóch będą wyświetlane do 128 włącznie, a wartość 64 zostanie pominięty. Tych. w oknach dialogowych zobaczymy: 2 4 8 16 32 128
Zadanie Js 3_13. Jakie wartości wygeneruje poniższy fragment kodu?
licznik var = 5; podczas (licznik< 10) { counter++; document.write("Counter " + counter); break; document.write("Эта строка не выполнится."); }
Zadanie Js 3_14. Napisz kod budowy X do pewnego stopnia tak za pomocą pętli while. Zapytaj wartości zmiennych i wyświetl wynik za pomocą alert() .
Dodaj kod:
| 1 2 3 4 5 6 7 8 9 | zmienna x = ...; zróżnicować = ...; licznik = 1 ; liczba = x; while (...) ( chislo= x* ...; counter= ...; ) alert(chislo) ; |
zmienna x = ...; zróżnicować = ...; licznik = 1; liczba=x; while (...)( chislo=x*...; counter=...; ) alert(chislo);
A Napraw błąd w programie przeznaczonym do znalezienia silni liczby:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var counter = monit("Wprowadź liczbę" ) ; zmienna silnia = 1 ; dokument.zapis( „Silnik liczby:”+ licznik + "!= " ); do ( if (licznik == 0 ) ( silnia = 1 ; break ; ) silnia = silnia / licznik; licznik = licznik + 1 ; ) while (licznik > 0 ) ; document.write (silnia) ; |
var counter = monit("Wprowadź liczbę"); var silnia = 1; document.write("Silnik liczby: " + licznik + "! = "); do ( if (licznik == 0) ( silnia = 1; przerwa; ) silnia = silnia / licznik; licznik = licznik + 1; ) while (licznik > 0); dokument.zapis(silnia);
Zadanie Js 3_16. Zmodyfikuj program do wprowadzania danych przez użytkownika:
Pytaj o nazwę użytkownika, dopóki użytkownik nie wprowadzi nazwy użytkownika (tj. pole jest faktycznie wypełnione, a klawisz anulowania nie jest naciśnięty). Kiedy nazwa jest wpisana, a następnie wyprowadzaj "Cześć imię!". dokument.
Jak znaleźć błędy w javascript?
W niektórych przypadkach kod na stronie nie działa z jakiegoś nieznanego powodu. Gdzie szukać błędu? W takich przypadkach możesz użyć instrukcji try..catch.
Instrukcja try..catch próbuje wykonać fragment kodu, a jeśli w kodzie jest błąd, możliwe jest wyświetlenie go na ekranie.
Błąd jest przechowywany w obiekcie e.message.
Rozważ działanie operatora na przykładzie:
Przykład: napisz operator z błędem w programie. Sprawdź, czy nie ma błędu w rzekomym błędnym kodzie: jeśli jest błąd w kodzie, wyślij wiadomość "obsługa błędów: nazwa błędu". Po sprawdzeniu błędnej instrukcji, niezależnie od tego, czy jest błąd w kodzie, wyślij komunikat "kroki wykończeniowe"
✍ Rozwiązanie:
- Jako komunikat o błędzie użyjemy metody prompt(), napisanej z błędem - komunikat (). Umieść komunikat o błędzie w bloku try:
- Komunikat o błędzie należy umieścić w bloku catch:
- Umieść ostatnią wiadomość, którą chcesz wyświetlić niezależnie od tego, czy w kodzie jest błąd, umieść ją w bloku finally:
alert("przed"); try ( promt("wprowadź numer"); // instrukcja z błędem )
Spróbuj z angielskiego. - "try", w ten sposób umieszczamy instrukcję try przed fragmentem kodu, który może zawierać błąd (w naszym przypadku rzeczywiście wystąpił błąd).
| 6 7 8 9 | połów (e) ( alert ( "obsługa błędów: "+e.wiadomość); ) |
catch(e) ( alert("obsługa błędów: "+e.message); )
Jeśli rzeczywiście występuje błąd, instrukcja catch (z angielskiego „to catch”) przechowuje ten błąd w obiekcie e. W przyszłości może być wyświetlany w oknie dialogowym - e.message .
wreszcie ( alert("akcje wykańczające"); ) alert("po");
Jeśli nadal występuje błąd, to interpreter po jego wyjściu w naszym przykładzie przełączy się na wykonanie bloku catch, a następnie w końcu (z angielskiego „completion”, „finally”), który będzie wykonywany zawsze, niezależnie od czy wystąpił błąd, czy nie. Nawet jeśli wystąpił błąd w bloku catch.
Ważny: Ostatni blok w konstrukcji jest opcjonalny.
Zadanie Js 3_17. Uruchom powyższy przykład z następującymi modyfikacjami:
Streszczenie:
Lekcja obejmowała następujące operatory i konstrukcje języka javascript:
Wyrażenia warunkowe JavaScript:
Instrukcje pętli:
Zadanie końcowe Js 3_18.
Stwórz grę dla dwojga:
- Program prosi pierwszego gracza o wprowadzenie liczby od 1 zanim 100 (drugi gracz nie widzi wprowadzonego numeru). Następnie drugi gracz jest proszony o odgadnięcie wprowadzonej liczby. Odpowiedzią jest wiadomość "mało" lub "dużo" w zależności od wprowadzonej odpowiedzi. Jeśli gracz zgadnie poprawnie, wyświetlane są gratulacje. Jeśli nie zgadnie, gra toczy się dalej (aż do odgadnięcia liczby).
- Oblicz liczbę prób i zwróć wynik, gdy liczba zostanie odgadnięta.
Pytania do samokontroli:
- Kiedy należy używać pętli For In? Podaj przykład jego użycia.
- Jaki jest cel instrukcji try..catch?
- Wyjaśnij cel każdego bloku instrukcji try..catch.
W życiu codziennym często konieczne jest podjęcie jakiejś decyzji, w zależności od jakiegoś stanu. Na przykład, jeśli w weekend pogoda będzie ciepła, to pojedziemy nad morze, w przeciwnym razie, jeśli jest pochmurno, będziemy siedzieć w domu.
W programowaniu jest to również bardzo powszechne. Do tego są dwie instrukcje warunkowe, są to if-else i switch-case. W tym artykule opowiem o instrukcji if-else, a w następnym o switch-case.
Składnia instrukcji warunkowej if-else następny:
Jeśli warunek jest spełniony, to wykonywany jest kod z bloku if, w przeciwnym razie, jeśli warunek jest fałszywy, to wykonywany jest kod z bloku else.
Dla lepszego zrozumienia weźmy taki prosty przykład, mamy pewną ilość pieniędzy i chcemy kupić samochód, a tu taki stan od razu powstaje, jeśli mamy wystarczająco dużo pieniędzy, to możemy kupić ten samochód, w przeciwnym razie Nie mogę.
Pieniądze Var = 35000; // Powiedzmy, że mamy 35 000 euro // Samochód, który chcemy kupić kosztuje 50 000 euro. I występuje następujący warunek if(money > 50000)( document.write("Możemy kupić samochód"); )else( document.write("Za mało pieniędzy na zakup samochodu"); )
Zapisujemy dokument, otwieramy go w przeglądarce i widzimy, że na stronie pojawił się następujący komunikat: „Nie ma wystarczającej ilości pieniędzy na zakup samochodu”. Gdybyśmy mieli więcej niż 50 000 euro, kod z bloku if zostałby wykonany. Gdybyśmy mieli dokładnie 50 000 euro, to również nie moglibyśmy kupić samochodu, ponieważ 50 000 to nie więcej niż 50 000. Aby warunek w tym przypadku był spełniony, musimy wpisać znak większy lub równy ( >=) .
Komentarz! Operacja logiczna równa się zapisywana jest dwoma znakami równości (==). Istnieje również operacja logiczna mniejsza lub równa (
za pomocą nawiasów klamrowych
Jeśli jest tylko jeden operator, nawiasy klamrowe są opcjonalne, jeśli w bloku jest więcej niż jeden operator, wymagane są nawiasy klamrowe.
Powyższy przykład będzie działał dobrze bez nawiasów klamrowych, ponieważ oba bloki zawierają tylko jedną instrukcję.
Wewnątrz, jeśli możesz napisać dowolne operacje logiczne czy są proste czy złożone. Możesz także użyć operatorów AND (&&) i OR (||).
Komentarz! Obecność bloku else jest opcjonalna.
Na przykład, jeśli a jest równe b, a c jest równe d, wyświetlamy odpowiedni komunikat, w przeciwnym razie, jeśli nie ma innego bloku, po prostu przechodzimy do następnej linii.
Var a = 4, b = 4, c = 8, d = 8; if((a == b) && (c == d)) document.write("a równa się b AND c równa się d"); document.write("Następny wiersz kodu");
instrukcja if-else if-else
Po bloku if może następować jeden lub więcej bloków if, a na końcu jest blok else. Jest to przydatne, gdy musisz użyć więcej niż jednego warunku.
Dla lepszego zrozumienia weźmy przykład z życia codziennego. Na przykład mamy pewną liczbę placówek. Jeśli mamy tylko jedno gniazdko w pokoju, to możemy podłączyć tylko jedno urządzenie, jeśli są dwa gniazdka, to możemy podłączyć dwa urządzenia, a jeśli jest więcej, to możemy podłączyć wszystkie urządzenia z domu do sieci elektrycznej .
Przejdźmy teraz do programowania.
var gniazdo = 2; // Liczba gniazd w domu if(socket == 1) document.write("
Możemy podłączyć tylko jedno urządzenie
"); else if(socket == 2)( document.write("Możemy podłączyć tylko dwa urządzenia
"); document.write("Na przykład telewizor i laptop
"); )else( document.write(");Możemy podłączyć wszystkie urządzenia z domu do sieci elektrycznej
"); }W zależności od wartości zmiennej gniazda zadziała jeden lub drugi blok kodu. Jak zapewne już zrozumiałeś, jeśli socket jest równe 1, to pierwszy blok kodu będzie działał. Jeśli gniazdo ma wartość 2, to zadziała drugi blok kodu, a jeśli gniazdo ma inną wartość (nawet liczbę ujemną), zadziała trzeci blok kodu.
Skrót od jeśli jeszcze
Skrótu można użyć, gdy w zależności od określonego warunku zmienna może otrzymać taką lub inną wartość.
Np. jeśli wartość zmiennej a jest większa od wartości zmiennej b, to do zmiennej x piszemy następujący komunikat: „Zmienna a jest większa niż zmienna b”, w przeciwnym razie piszemy, że „Zmienna a jest mniejsza niż zmienna b ”.
Var a = 50, b = 100, x; x = (a > b) ? "
Zmienna a jeszcze zmienna b
" : "Zmienna a mniej zmienna b
"; //Wypisz wynik document.write(x);To wszystko, co chciałem ci powiedzieć w tym artykule. Instrukcja warunkowa if-else jest używana częściej niż w każdym skrypcie, dlatego bardzo ważne jest, aby ją znać i rozumieć. W następnym artykule opowiem o innej instrukcji warunkowej dotyczącej switch-case.
W tym przykładzie najpierw deklarujemy cztery zmienne za pomocą słowa kluczowego var i od razu przypisujemy im wartości liczbowe. Następnie za pomocą operatorów inkrementacji i dekrementacji zmieniamy wartości liczb. Informacje są wyświetlane za pomocą funkcji Echo(patrz artykuł ""). Aby nie pisać ponownie nazwy obiektu, użyłem konstrukcji z().
Operatory logiczne
Operatory logiczne są używane podczas sprawdzania warunku, aby się nie powtórzył, zrobię skrót: lewy operand to L.O., a prawy operand to P.O.
- && — Boole'a "ORAZ"
- || - "LUB"
- ! - "NIE"
- > - L.O. więcej
- >= - L.O. większe lub równe P.O.
- < - Л.О. меньше П.О.
- <= - Л.О. меньше или равен П.О.
- == - L.O. równa się PO
- != - L.O. nie równa się z P.O.
- |= - L.O. równa się sobie LUB P.O.
- &= - L.O. jest równy sobie ORAZ P.O.
- ^= - WYŁĄCZNIE LUB
Rozważmy teraz następujący skrypt:
| //***************************************** // operacje logiczne// logic_if_else.js //***************************************** var a= 10 , b= 100 , WshShell, tytuł, msg1, msg2, msg3, msg4, vbInformation = 64 ; // Utwórz instancję klasy WScript.Shell WshShell = WScript.CreateObject("WScript.Shell" ); tytuł = "Praca z instrukcją warunkową IF ELSE JS"; with(WshShell) ( if (a>= 5 && a<= 100 ) //истина msg1 = "TRUE" ; else msg1 = "FALSE" ; Popup (msg1, 5 , title, vbInformation) ; if (a>= 5 || b== 100 ) //prawda msg2 = "PRAWDA" ; w przeciwnym razie msg2 = "FAŁSZ" ; Popup (msg2, 5 , tytuł, vbInformation) ; //warunkowa instrukcja js if else if (! a) //false msg3 = "PRAWDA" ; w przeciwnym razie msg3 = "FAŁSZ" ; Popup (msg3, 5 , tytuł, vbInformation) ; if (a&= 100 ) //false msg4 = "PRAWDA" ; w przeciwnym razie msg4 = "FAŁSZ" ; Popup (msg4, 5 , tytuł, vbInformation) ; ) |
Podobnie jak w poprzednim skrypcie, tutaj wykorzystałem konstrukcję z aby skrócić kod. Jednak do wyświetlania informacji użyliśmy funkcji wyskakujące okienko(patrz artykuł ""). W rezultacie okna dialogowe zamkną się automatycznie po kilku sekundach. Zauważ, że w tym przykładzie nie użyliśmy nawiasów klamrowych. w instrukcji warunkowej js if są one istotne tylko wtedy, gdy trzeba wykonać nie jeden wiersz kodu, ale kilka.
Na koniec spójrzmy na taki praktyczny przykład, jak rozwiązywanie równania kwadratowego:
| // Rozwiązywanie równania kwadratowego// uravnenije_if_else.js // *********************************************************** zmienna a, b, c, d, x, x1, x2; //Zadeklaruj zmienne a=-2; b=6; c= 20; //Poszukiwanie dyskryminatora d= Matematyka .pow (b, 2 ) - 4 * a * c; jeśli (d== 0 ) ( x= b/ (2 * a) ; msg= „Równanie ma jedno rozwiązanie, x jest dokładnie”+ x ) else ( if (d> 0 ) ( x1= (- b+ Math .sqrt (d)) / (2 * a) ; x2= (- b- Math .sqrt (d) ) / (2 * a) wiadomość= "Równanie ma dwa rozwiązania \n x1 dokładnie"+ x1 + " \n x2 dokładnie "+x2; // instrukcja warunkowa if else js) else msg= "Brak rozwiązania" ; ) WScript.Echo (wiadomość); |