Учебник находится в стадии разработки.
О встраивании скриптов.
Программа или скрипт на языке программирования javascript - это текстовый файл.Текстовый файл с расширением .js можно встроить в HTML-документ с помощью дескриптора <script>,в котором располагается атрибут src.
Также скрипт может быть встроен непосредственно в веб-страницу,здесь тоже используется дескриптор <script>,но уже без использования атрибута src.
Пропуск дескриптора </script> приводит к ошибке интерпретатора.Поэтому не забывайте,что нужно указывать завершающие дескрипторы.
В настоящее время в специальной литературе дескриптор также называется коротким словом тег.
Чтобы запустить программу на javascript необходимо использовать веб-браузер.
Об освоении HTML.
Веб-программирование немыслимо без изучения языка гипертекстовой разметки - HTML.Чтобы писать сложные веб-приложения его знать обязательно,в противном случае разработать что-либо продвинутое и функциональное не получится по объективным причинам.
В настоящее время во всемирной паутине используется HTML 5 и гипертекст немного отличается от того,чем он был раньше.Некоторые теги и фичи устарели и практически больше не встречаются на веб-страницах.
Немного о структуре HTML-документа.
В общем HTML-документ содержит дескрипторы и их атрибуты,некоторые атрибуты уникальны для определенного дескриптора.
Можно сказать,что это минимальная веб-страница.
<html>
<head>
<title>Первая веб-страница</title>
</head>
<body>
<p>Это параграф некоторого текста</p>
</body>
<html>
В правильно составленной веб-странице должны быть определены дескрипторы <html>,<head> и </body>.
На самом деле дескрипторы в гипертексте имеют какое-либо функциональное значение.
Переменные.
Как известно,переменная - это именованная область памяти,которая хранит какое-либо значение.Формирование имени переменной имеет простые правила:
идентификатор не должен начинаться с цифры,обычной практикой является начало идентификатора с буквы.
Также с переменными связаны области видимости.Локальная и глобальная - это основные области видимости,что наиболее часто используются при разработке программ.Локальная область говорит о том,что доступ к переменной возможен только в определенной функции.Глобальная область сигнализирует о том,что доступ к переменной возможен на любом участке программы,в том числе и в конкретных функциях.О функциях в этом учебнике вероятно еще будет рассказано подробнее.
Объявление переменной начинается с ключевого слова let.Раньше это было слово var.Оператор присваивания обозначается как во многих других языках программирования знаком равно.
Размышления о инструкциях.
Отдельная инструкция заканчивается точкой с запятой.Рекомендуется каждую отдельную инструкции каждый раз завершать точкой с запятой,так как возможны синтаксические ошибки.Это имеет отношение к программным конструкциям javascript,что вызывают неоднозначную трактовку.
После каждой буквально строки программного кода точка с запятой не ставится,так как синтаксис языков программирования этого не предполагает.Понимание синтаксиса позволяет определять и исправлять так называемые синтаксические ошибки.Кроме синтаксических ошибок существуют логические ошибки.В этом случае синтаксический разбор интерпретатора javascript не поможет и программист должен самостоятельно разбираться в том,что работает в его скрипте неправильно.
Оператор ветвления if.
Оператор ветвления if в javascript применяется для выполнения кода по условию.Условие может быть либо ложным,либо истинным.Обычно условие указывается в круглых скобках и использует операторы сравнения и логические операторы.Причем логические операторы могут опускаться тогда,когда условия не является сложно выраженным.Код,выполняемый по условию,должен располагаться в фигурных скобках.Фигурные скобки не используются тогда,когда код записывается в одну строку.
Листинге 1.
<html>
<head>
</head>
<body>
<script>
let condition = true;
if (condition == true){
alert("Условие истинно");
}
</script>
</body>
<html>
О вопросе обучения программирования.
Некоторые люди нуждаются в подробных объяснениях того,что другие люди легко понимают без особой детализации.Понятно,что хорошие объяснения никогда не помешают,а даже наоборот приветствуются.Конечно в учебной деятельности имеет значение уровень подготовки и то,что известно одному вероятно бывает неизвестно другому человеку.
На самом деле я много раз высказывал мысль,что курс по основам программирования еще не написан.И поэтому можно заключить,что это дело будущего для программной инженерии.
Серьёзное программирование связано с математикой и следовательно понимание математики необходимо для программного инженера.
Теперь после некоторого прояснения вопросов обучения перехожу к продолжению изложения материала по оператору ветвления if.
Также надо отметить,что оператор ветвления if может быть многосоставным.Синтаксическая конструкция else if позволяет сделать множественный выбор в зависимости от того,какое условие выполняется в данном фрагменте скрипта.
Минимальный код множественного выбора представлен ниже в листинге 2.
Листинге 2.
<html>
<head>
</head>
<body>
<script>
let condition = false;
if (condition == true){
alert("Условие истинно");
}
else if (condition == false){
alert("Условие ложно");
}
</script>
</body>
<html>
Иногда код выполняется в любом случае в зависимости от условия.Для этого используется синтаксическая связка if else.В ветке else не указывается условие,так устроена эта конструкция.Также надо отметить,что веткe else можно применять в множественном выборе,который был показан в листинге 2.Хотя он и не был разносторонне рассмотрен,но думаю,что некоторое представление о том,как он работает я всё-таки передал.Конечно ничего сложного в освоении множественного выбора нет.Здесь главное понять то,что это один из компонентов,без которого вообще невозможно никакое серьёзное программирование - разработка больших и сложным программ.Вторым важным компонентом являются циклические операторы.
Операторы ветвления и циклов - это основа программирования.Поэтому в каждой сложной программе без их использования не обходится ни один программный инженер.
Листинг 3.
<html>
<head>
</head>
<body>
<script>
let condition = true;
if (condition == true){
alert("Условие истинно");
}
else{
alert("Условие ложно");
}
</script>
</body>
<html>
Следующей темой для обсуждения обозначим - циклы.Они здесь будут вкратце рассмотрены,как и оператор ветвления if.
Листинг 4.
<html>
<head>
</head>
<body>
<script>
let counter;
for (counter = 0;counter< 5;counter++){
alert("Итерация цикла "+counter);
}
</script>
</body>
<html>
Листинг 4 содержит самое простое применение цикла for.Инструкция counter = 0 инициализует переменную значением 0,counter< 5 сравнивает переменную с значением 5,counter++ выполняет приращение переменной на 1.
Инструкция counter++ может быть записана как counter=counter+1.От этого данный цикл не изменит своего выполнения.Иными словами,это эквивалентные операции в языке javascript.Имеется еще один вариант counter+=1.
Развернутый вариант counter=counter+1 возможно является более понятным.Хотя сверхсложными эти инструкции приращения навряд ли можно назвать.
Кроме положительного приращения есть отрицательное приращение и оно легко задаётся и на шаг больший чем число 1.
К тому же данный учебник по javascript нельзя назвать сверхинтеллектуальным.Я пытаюсь писать так,чтобы читатель легко видел суть моего повествования.Надо также заметить,что в интернете полно учебных материалов и любой обучающийся естественно может выбирать среди огромного количества вариантов.
Цикл while выполняется только в том случае,если условное выражение истинно.Как только условное выражение становится ложным интерпретатор javascript переходит на следующую инструкцию.
Совершенно случайно узнал,что если не инициализировать переменную counter - просто объявить код цикла выполнятся не будет.
Условные выражения необходимо тщательно продумывать,чтобы в циклах не образовывалось так называемое зацикливание.В результате зацикливания программа выполняет тело цикла и не выходит из него.
Листинг 5.
<html>
<head>
</head>
<body>
<script>
let counter = 0;
while (counter < 5){
alert("Итерация цикла "+counter);
counter++;
}
</script>
</body>
<html>
Таким образом в данном учебном материале поверхностно рассмотрены компоненты основ программирования - ветвления и циклы.Я уже делал выводы о том,что сложные программы без этих программных конструкций не разработать.
О функциях.
Функции в javascript начинаются с ключевого слова function,после которого определяется имя и идут круглые скобки.Чтобы выполнить вызов кода функции нужно использовать имя функции и круглые скобки.В круглых скобках параметры не указываются тогда,когда они не нужны.Круглые скобки в прямом вызове обязательны,иначе интерпретатор не выполнит код функции,но и синтаксическую ошибку почему-то не выдаст,если круглые скобки не напечатать вообще.О том,что не выдаётся ошибка я узнал экспериментальным путём.
Синтаксическая ошибка точно появится в том случае,когда указана одна круглая скобка - alertstring(; или alertstring);.
Понимание синтаксиса необходимо для создания программ.
Сообщения об ошибках появляются в так называемой консоли браузера.В браузере Google Chrome в консоль можно зайти,если выбрать меню Дополнительные интсрументы ->Инструменты разработчика.Конечно названия меню версия от версии могут меняться.
Листинг 6.
<html>
<head>
</head>
<body>
<script>
alertstring();
function alertstring(){
alert("Запуск функции");
}
</script>
</body>
<html>
Обработчики событий.
Браузер не был бы браузером,если бы не мог отвечать на действия пользователя.Когда возникает какое-либо определенное событие браузер может выполнять конкретные инструкции.Например,щелчок левой кнопкой мыши на графическом элементе вызывает браузерное событие onclick.
На самом деле браузер поддерживает огромное количество событий,на которые можно программно реагировать.Обычно обработчик события это функция,написанная по правилам языка программирования javascript.Если разработчик забудет указать в назначенной функции круглые скобки - обработчик не будет действовать в браузере.
Назначение обработчика как onclick="clicked", хоть и не вызовет синтаксическую ошибку,но не будет работать как задумывалось.Здесь возникает вопрос:почему браузер не распознаёт синтаксическую ошибку?На него вероятно,я думаю, могут ответить лишь опытные разработчики,которые разбираются во всех технических нюансах разработки браузерных технологий.
Листинг 7.
<html>
<head>
</head>
<body>
<input type="button" value="запуск события" onclick="clicked()">
<script>
function clicked(){
alert("Произошло событие onclick!");
}
</script>
</body>
<html>
В javascript возможно запрограммировать инструкции,которые будут выполняться при истечении определенного времени.Метод setTimeout позволяет первым параметров указать имя функции,а вторым параметром - время задержки вызова кода этой функции в миллисекундах.
Конечно ничего сложного в листинге 8 нет.Но данный учебник пока и не освещает сложные темы.Кто имеет опыт программирования в javascript должен быть хорошо знаком с методом setTimeout.
На самом деле функция setTimeout это метод объекта window.
Исследуя листинг 8 можно понять,что объект window можно не указывать,но он там подразумевается браузером.
Листинг 8.
<html>
<head>
</head>
<body>
<script>
let timerId = setTimeout("tick()",1000);
function tick(){
alert("Произошло событие по таймеру!");
}
</script>
</body>
<html>
Метод getElementById объекта document позволяет получить доступ к свойствам какого-либо HTML-элемента по id.Альтернативная функция querySelector() и появилась она по мере развития языка программирования javascript.
Я проделал простой эксперимент. В листинг 9 добавил еще одну кнопку с тем же самым id.И что получилось?Оказалось,что событие onclick выполняется в обычном для браузера образом.
Листинг 9.
<html>
<head>
</head>
<body>
<input type="text" id="mytext" value="некоторый текст">
<br>
<input type="button" value="показать текст поля" id="mybutton" onclick="clicked()">
<script>
function clicked(){
let mytext = document.getElementById("mytext").value;
alert(mytext);
}
</script>
</body>
<html>
| 