javascript - magazyn scout life

Javascript to język programowania używany do ożywiania witryn internetowych. Widzisz to w akcji za każdym razem, gdy odwiedzasz witrynę, która ma jakąkolwiek interakcję. Nauka Javascript jest szybka, łatwa i przyjemna, ponieważ masz już wszystkie potrzebne narzędzia na swoim komputerze i natychmiast widzisz wyniki. Wypróbuj poniższy prosty przykład krok po kroku, a będziesz na dobrej drodze!

Oprogramowanie do pobrania:Żadne nie są potrzebne

Koszt:Darmowy

Instrukcje dotyczące konfiguracji oprogramowania:Żadne nie są potrzebne

Wymagania sprzętowe:PC, Mac, robot, urządzenie mobilne

Obsługiwane systemy operacyjne:Win, Mac, Linux

Poziom trudności:1 z 5

SPRÓBUJ!

1. Utwórz folder na dysku twardym - nazwij go „JS Demo”

2. Skopiuj ten kod Javascript:

 // JavaScript Document // Note: lines that start with two backslashes are comments - not code!  var bePrepared = function () {        // = = = = = = = declare all the variables = = = = = = = =         var tempF, tempC, myActionText, newText;        //get the temp (F) from the HTML page        tempF = document.getElementById('MyInputTemp').value;         // = = = = = = = convert the temp to Celsius (with only one decimal place)        tempC = (5 / 9 * (tempF - 32)).toFixed(1);        // = = = = = = = evaluate the temp (three categories) = = = = = = =         if (tempF = 60) && (tempC = 75) {                 myActionText = ' Take Sunscreen!';             }        // = = = = = = = build a complete sentence = = = = = = =         newText = 'If the temperature is ' + tempF + ' °F (' + tempC + ' °C): ' + myActionText;       //push the sentence back to the HTML page (using the ID of the markup element: 'myAnswer')       document.getElementById('myAnswer').innerHTML = newText;     };

I wklej do swojego ulubionego edytora tekstu. Notatnik Windows działa dobrze.

3. Zapisz plik jako „JS-Example.js” w nowym folderze utworzonym w kroku 1.

4. Teraz skopiuj ten kod HTML:

       Example Javascript Program for Boy Scout Merit Badge       	 	Javascript Programming Example
           Enter Temperature (°F):

I wklej do swojego ulubionego edytora tekstu. Notatnik Windows działa dobrze.

5. Zapisz ten kod HTML w tym samym folderze i nazwij go „JS-HTML.htm”

6. Kliknij dwukrotnie plik JS-HTML, aby uruchomić przeglądarkę. Wprowadź temperaturę i kliknij przycisk GO, aby zobaczyć wynik. Wypróbuj kilka różnych temperatur.

O PROGRAMIE - WALK THROUGH

1. Plik HTML definiuje tekst i informacje o formatowaniu dla prostej strony internetowej. Możesz zmienić wszystko, co chcesz, aby zobaczyć, jak wpływa to na formatowanie strony. To nie jest tak naprawdę programowanie, ale zabawa jest fajna. To:

za. Tworzy tytuł witryny
b. Mówi kodowi HTML, aby używał JavaScript i gdzie znaleźć kod
do. Formatuje wyświetlany tekst
re. Określa pole tekstowe z ID = „MyInputTemp” (JavaScript będzie tego potrzebował)
mi. Określa przycisk z etykietą „Idź!”
fa. Po naciśnięciu przycisku myszy uruchamia funkcję bePrepared () javascript
sol. wyświetla ciąg w „myAnswer”, który jest tworzony w programie javascript.

2. Plik JavaScript zawiera jedną funkcję o nazwie „bePrepared ()”. Jest uruchamiany za każdym razem, gdy klikniesz przycisk GO (spójrz na metodę „onclick” dla tagu „input” = „Button” w pliku HTML, aby zobaczyć wywołanie funkcji).

3. Funkcja „bePrepared ()”

za. Uzyskuje wartość wprowadzoną w tagu „Input” - „Text”, używając jej identyfikatora: „MyInputTemp”
b. Wartość jest konwertowana na stopnie Celsjusza (z jednym miejscem po przecinku).
do. Wartość Celsjusza jest oceniana za pomocą serii instrukcji IF, a do zmiennej jest przypisywana sugerowana fraza działania: „myActionText”
re. Zdanie jest tworzone przez połączenie lub „konkatenację” statycznego tekstu wraz z wartościami temperatury (st. F i st. C) oraz frazą działania.
mi. Nowa fraza jest wstawiana w ostatnim wierszu strony HTML za pomocą identyfikatora tagu w tym wierszu: „myAnswer”

SPRÓBUJ TEGO

1. Zmień temperatury używane w decyzjach - zmień np. Niższą temperaturę z 60 na 30 stopni. Upewnij się, że zmieniasz go w dwóch miejscach! Zapisz plik i odśwież przeglądarkę (lub zrestartuj stronę) i wprowadź nowe liczby - czy odpowiedzi zmieniły się w nowej temperaturze?

2. Utwórz nowy zakres temperatur od 30 do 60 stopni i wyświetl go - „Przynieś czapkę i rękawiczki!”

3. Zmień brzmienie fraz.

4. Dodaj kolejny tekst - zapytaj na przykład o prędkość wiatru.

5. Dodaj kilka zdań warunkowych oceniających współczynnik odczuwalny.

6. Dodaj tekst, aby wyświetlić wynik odczuwalny.

UCZ SIĘ WIĘCEJ

W3schools.com - Dobrze zorganizowany samouczek z wieloma działającymi przykładami i kodem źródłowym

Webmonkey - Pięcioczęściowy samouczek Javascript

ZASOBY, PORADY, WSKAZÓWKI I WSKAZÓWKI

1. Google Chrome ma fajną funkcję.

- Zainstaluj Google Chrome, jeśli jeszcze go nie masz.

- Otwórz powyższy przykład JS-HTML w Google Chrome (kliknij prawym przyciskiem myszy utworzony powyżej plik JS-HTML i wybierz „Otwórz za pomocą ...” i wybierz Chrome)

- Kliknij ustawienia >> Narzędzia >> Konsola Javascript

Spowoduje to otwarcie okna konsoli wyświetlającego komunikaty o błędach (i kilka innych narzędzi), które pomogą Ci debugować kod.

Ta konsola jest bardzo pomocna podczas debugowania błędów javascript. Większość przeglądarek ma wtyczki, które robią podobne rzeczy.

2. Notepad ++ to świetny darmowy edytor tekstu zaprojektowany specjalnie dla programistów. Sprawdź to tutaj .