Отправляет email-рассылки с помощью сервиса Sendsay

Как сделать сайт красивым и динамичным. JavaScript от А до Я

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "БЛОГика: жизнь и заработок в Сети" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Август 2010   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Тони Монтана

Статистика

205 подписчиков
0 за неделю
←   Все выпуски   →

Переменные и функции.


Переменные. Функции. Первый скрипт

В прошлом выпуске вы узнали, как подключать JavaScript к HTML документу и немного сведений о HTML.

Так как первый выпуск был просто как вступление, то в сегодняшнем выпуске мы начнем углубляться в тему создания скриптов на JavaScript.

О чем будем говорить в этом выпуске? Я отобрал несколько необходимых моментов, с которых надо начинать изучать любой язык программирования:

  • Вы узнаете, что такое переменная в JavaScript
  • Научитесь задавать переменным значения.
  • Узнаете, что такое функции и с чем их едят.
  • Напишем первый скрипт.

 

Переменная – это ячейка памяти, в которую можно записать данные как текстовые, так и числовые.
Что бы стало яснее, наведу пример из жизни. Например, вы хотите открыть счет в банке и положить на него немного денег. Вы получаете счет, как правило, набор цифр, и заносите на него, скажем 1000$.

В JavaScript наш пример будет выглядеть так:

<script type="text/JavaScript"> // подключаем JavaScript
var id; // Объявляем переменную id. Слово var указывает компилятору, что дальше идет название переменной. Слово var обязательно нужно писать с маленькой буквы.
id = 1000; // присваиваем переменной значение 1000. Оператор «=» означает присваивание.
</script>

Функция – в языке JavaScript функция может быть как просто мини программой, либо возвращать значения, как и в других продвинутых языках программирования.
Задается функция зарезервированным словом function(параметр1, параметр2, параметрN). Когда функция будет себя вести как подпрограмма - параметры не задаются.

Ну, вот мы наконец-то подошли к написанию нашего первого скрипта.

Задание: Разработать скрипт, который будет по заданным 4-м числам подсчитывать периметр четырехугольника.

Решение:

<html> // открываем HTML документ
<head> // раздел заголовков
<title>Первый скрипт</title> // заголовок
<script type="text/JavaScript"> // подключаем JavaScript
// Дальше создаем функцию с именем perimeter() без параметров, она будет выполняться как подпрограмма.
function perimetr() {
// объявляем 5 переменных a, b, с, d, resultat
var a;
var b;
var c;
var d;
var resultat;
// дальше переменным присваиваем значения полей (value). Поля распознаются по значению id, а свойство document.getElementById("здесь пишется значение поля id") нам в этом помогает, заметьте, что писать надо 3 символа(E, B, I) с большой буквы иначе свойство не будет работать.
// Чтобы преобразовать текст в числовой формат, используем parseInt(document.getElementById("id").value), попробуйте написать просто
a= document.getElementById("stra").value и увидите в чем разница.

//заметье что parseInt символ (I) пишеться с большой буквы!!!

a=parseInt(document.getElementById("stra").value);
b=parseInt(document.getElementById("strb").value);
c=parseInt(document.getElementById("strc").value);
d=parseInt(document.getElementById("strd").value);
resultat=a+b+c+d; // суммируем все полученные значения.
alert('Периметр= '+ resultat); // и выводим на экран в виде сообщения которое задается с помощью alert('Пишем что надо вывести ');
}
</script> // закрываем скрипт
</head> // закрываем раздел заголовков.
<body> // открываем тело HTML документа.
<form> // создаем форму которая содержит 4 текстовых поля и одну кнопку.
Введите сторону a: <input type="text" name="stra" id="stra">
<br>
Введите сторону b: <input type="text" name="strb" id="strb">
<br>
Введите сторону c: <input type="text" name="strc" id="strc">
<br>
Введите сторону d: <input type="text" name="strd" id="strd">
<br>
<input type="button" name="ok" value="Посчитать периметр" onclick="perimetr()">
//onclick="perimetr()" это обработчик события. Он означает: когда пользователь нажимает на кнопку с именем ok то срабатывает обработчик который выполняет нашу функцию.
</form> // закрываем форму.
</body>// закрываем тело документа.
</html> // закрываем html документ.

Перепишите скрипт без моих комментариев в блокнот и разберитесь, после чего сохраните в формате html (было рассмотрено в прошлом выпуске).

Домашнее задание: Разработайте скрипт, который по заданой массе тела будет вычислять Силу притяжения по форуле F=m*g . Решение скрипта будет описано в следующем выпуске.
В избранное