javascript - журнал scout life - О Разведчиках

Javascript - это язык программирования, который используется для оживления веб-сайтов. Вы видите это в действии каждый раз, когда посещаете какой-либо веб-сайт. Изучение Javascript - это быстро, легко и весело, потому что у вас уже есть все необходимые инструменты на вашем компьютере, и вы мгновенно видите результаты. Попробуйте простой пошаговый пример ниже, и вы будете в пути!

Загрузить программное обеспечение:Не нужно

Стоимость:Свободный

Инструкция по установке программного обеспечения:Не нужно

Требования к оборудованию:ПК, Mac, робот, мобильное устройство

Поддерживаемые операционные системы:Win, Mac, Linux

Сложный уровень:1 из 5

ПОПРОБУЙ ЭТО!

1. Создайте папку на жестком диске - назовите ее «JS Demo».

2. Скопируйте этот код 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;     };

И вставьте в свой любимый текстовый редактор. Блокнот Windows работает нормально.

3. Сохраните файл как «JS-Example.js» в новой папке, созданной на шаге 1.

4. Теперь скопируйте этот HTML-код:

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

И вставьте в свой любимый текстовый редактор. Блокнот Windows работает нормально.

5. Сохраните этот HTML-код в той же папке и назовите его «JS-HTML.htm».

6. Дважды щелкните файл JS-HTML, чтобы запустить браузер. Введите температуру и нажмите кнопку GO, чтобы увидеть результат. Попробуйте разные температуры.

О ПРОГРАММЕ - ПРОГУЛКА

1. Файл HTML определяет текст и информацию о форматировании для простой веб-страницы. Вы можете изменить все, что хотите, чтобы увидеть, как это влияет на форматирование страницы. На самом деле это не совсем программирование, но с ним весело играть. Это:

а. Создает заголовок для сайта
б. Указывает HTML-коду использовать Javascript и где его найти.
c. Форматирует отображаемый текст
d. Указывает поле ввода текста с ID = «MyInputTemp» (это понадобится для Javascript)
е. Обозначает кнопку с надписью 'Вперед!'
f. При нажатии кнопки мыши запускается функция javascript bePrepared ()
г. отображает строку в «myAnswer», созданную в программе javascript.

2. В файле Javascript есть единственная функция, которая называется bePrepared (). Он запускается при каждом нажатии кнопки GO (посмотрите на метод «onclick» для тега «input» = «Button» в HTML-файле, чтобы увидеть вызов функции.)

3. Функция bePrepared ().

а. Получает значение, введенное в теге «Input» - «Text», используя его идентификатор: «MyInputTemp».
б. Значение конвертируется в Цельсия (с одним десятичным разрядом).
c. Значение Цельсия оценивается с помощью серии операторов IF, и предлагаемая фраза действия назначается переменной: «myActionText»
d. Предложение создается путем объединения или «сцепления» некоторого статического текста вместе со значениями температуры (градусы F и градусы Цельсия) и фразой действия.
е. Новая фраза вставляется в последнюю строку HTML-страницы с использованием идентификатора тега в этой строке: «myAnswer».

ПОПРОБУЙ ЭТО

1. Измените температуру, используемую в решениях - например, измените нижнюю температуру с 60 на 30 градусов. Убедитесь, что вы поменяли его в двух местах! Сохраните файл и обновите браузер (или перезапустите веб-страницу) и введите новые числа - изменились ли ответы при новой температуре?

2. Создайте новый температурный диапазон от 30 до 60 градусов и попросите его отобразить: «Принесите шляпу и перчатки!»

3. Измените формулировку фраз.

4. Добавьте еще один ввод текста - например, спросите скорость ветра.

5. Добавьте несколько условных операторов, оценивающих коэффициент охлаждения ветром.

6. Добавьте текст, чтобы отобразить результат охлаждения ветром.

УЗНАТЬ БОЛЬШЕ

W3schools.com - Хорошо организованное руководство с множеством рабочих примеров и исходного кода

Webmonkey - Учебник по Javascript из пяти частей

РЕСУРСЫ, СОВЕТЫ, СОВЕТЫ И ПОДСКАЗКИ

1. У Google Chrome есть интересная функция.

- Установите Google Chrome, если у вас его еще нет.

- Откройте приведенный выше пример JS-HTML в Google Chrome (щелкните правой кнопкой мыши файл JS-HTML, который вы создали выше, выберите «Открыть с помощью ...» и выберите Chrome)

- Нажмите на настройки >> Инструменты >> Консоль Javascript.

Откроется окно консоли, в котором отображаются сообщения об ошибках (и множество других инструментов), которые помогут вам отладить код.

Эта консоль очень полезна при отладке ошибок javascript. В большинстве браузеров есть плагины, которые делают похожие вещи.

2. Notepad ++ - отличный бесплатный текстовый редактор, разработанный специально для программистов. Посмотрите здесь .