test adv
Выдается вручную за особенно понравившийся топик
1,

Изучаем Javascript. Урок первый

В статье мы рассмотрим азы работы со сценариями Javascript в среде HTML

Введение

Изучаем Javascript. Урок первый

Привет! Вы когда-нибудь задумывались о том, чтобы начать программировать? Лично я с детства мечтал научиться писать свои программы и игры. В последнее время во мне возник бурный интерес к этой деятельности и я задался для себя целью — понять и научиться работать, для начала, с таким языком программирования как JavaScript. Почему именно JavaScript?

Изучаем Javascript. Урок первый

Так как я не имею за плечами опыта работы ни с какими языками, кроме базового курса HTML и СSS, JavaScript приглянулся мне своей универсальностью, стремительным ростом и необычной историей развития, которую я обязательно расскажу в одной из следующих статей. Говоря об универсальности, на данный момент применение JavaScript-кода не ограничивается одними лишь серверами и браузерами, но также используется при разработке мобильных приложений и программ для интернет-вещей.

Изучаем Javascript. Урок первый

За четыре месяца его изучения у меня накопилось множество мыслей и знаний, о которых мне безумно хочется поделиться с вами. Так что впереди вас ждет серия статей в которых я буду объяснять работу с написанием кода на реальных примерах, которые вы можете опробовать вместе со мной, читая эти статьи. Для их написания, на первое время, не требуется наличие профильного софта, сойдет даже обычный «Блокнот», тем не менее я порекомендую несколько кроссплатформенных редакторов для работы:

1. Sublime Text 2

Изучаем Javascript. Урок первый

Лаконичный редактор кода общего назначения, способный работать со многими языками программирования. Он доступен для бесплатной загрузки под платформы Windows, Mac и Linux.

Также хочу отметить его внешний вид — он до боли простой. Отдельные детали кода подсвечены разными цветами, есть возможность настройки цвета окна программы, справа находится еще одна интересная вещь — весь проект страницы представлен в виде миниатюр, по клику на любую из которых вы можете легко переместиться в нужное место.

В целом, Sublime Text является расширенной версией стандартного текстового редактора, но с более проработанным интерфейсом и уклоном под кодинг. Так что создание HTML-страниц в нём — полностью ручное кодирование, посему я не могу порекомендовать его для профессионально работы, но для новичков, типа нас с вами, этот редактор подойдет, дабы лучше усвоить принципы работы JS, HTML и CSS.

2. Atom

Изучаем Javascript. Урок первый

Atom — максимально гибкий в настройке текстовый редактор от разработчиков GitHub. Он бесплатен как для личного, так и для коммерческого использования по лицензии MIT. Его создатели активно следят за предложениями от пользователей и стараются своевременно пополнять редактор новыми функциями.

Изучаем Javascript. Урок первый

Atom доступен для платформ Windows, Linux (Ubuntu, Fedora, Red Hat) и macOS. Также в программе имеется возможность выбора языка, на котором вы будете писать программу. Со стандартными плагинами поддерживается всего около 30 языков программирования: (C/C++, C#, Clojure, CSS, CoffeeScript, Markdown (GitHub Flavored), Go, Git, HTML, JavaScript, Java, JSON, Julia, Less, Make, Mustache, Objective-C, PHP, Perl, Property List (Apple), Python, Ruby on Rails, Ruby, Sass, Shell script, Scala, SQL, TOML, XML, YAML).

Такого скромного софтверного арсенала на первое время должно хватить всем. Лично я все листинги буду создавать в Atom. Ну что, приступим!

«Привет, мир!»

Изучаем Javascript. Урок первый

В качестве примера для первого урока, по устоявшейся традиции среди программистов, мы создадим приветственную веб-страничку и подробно рассмотрим её устройство.

Изучаем Javascript. Урок первый

Сначала немного теории. Вставка любого сценария Javascript в HTML-код производится с помощью использования тега <script> и его вариаций. Например, при помощи атрибута src вы можете разместить прямую гиперссылку на файл содержащий код алгоритма в чистом виде, в нашем примере этот способ не использовался.

Также существует рекомендация по использованию строчки <script type = “text/javascript">, в этот параметр вводится определение используемого языка сценария и его версии, именно этим вариантом я и воспользовался при написании нашего примера:

Изучаем Javascript. Урок первый

Как вы могли заметить сценарии Javascript могут располагаться в любых разных частях HTML проекта. Всего существует три вариации их размещения:

  1. Между тегами <head> </head>
  2. В основной части кода после тега <body>
  3. В обработчике событий

Обработчик событий onClick

Изучаем Javascript. Урок первый

В заголовке нашего проекта находится такой сценарий:

Изучаем Javascript. Урок первый

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

Следующим в последовательности идет код вписанный после тега <body>, имеющий всего-навсего одну строчку с командой document.write:

Изучаем Javascript. Урок первый

С помощью этой команды можно вводить новые строчки в документ. То есть сообщение с текстом «Привет, мир!» будет написано вслед за строчкой «Добро пожаловать на наш первый урок!».

Третий, и заключительный сценарий в нашем листинге находится в самом конце в обработчике событий onClick:

Изучаем Javascript. Урок первый

Данный сценарий выполняет все ту же задачу, что и первый, но только по нажатию на кнопку с надписью «Сказать привет», реализованную благодаря первой команде input type= “button” и её переменной value=”Здесь можно вводить любой текст, который будет применен исключительно к названию кнопки”.

Скрываем сценарий

Изучаем Javascript. Урок первый

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

Изучаем Javascript. Урок первый

Во избежание подобных проблем следует использовать дескрипторы <!-- и --> в начале и в конце кода, как в нашем примере.

Структура кода

Изучаем Javascript. Урок первый

В прошлой главе мы рассмотрели пример листинга и разобрали его, теперь давайте чуть подробнее поговорим о нюансах составления кода. Создаем сами либо скачиваем шаблон проекта HTML здесь: Яндекс.Диск

Изучаем Javascript. Урок первый

Как вы уже могли запомнить, команда alert выводит диалоговое окно с сообщением в браузере. Чтобы дублировать команду, можно просто добавить к ней точку с запятой и разместить вторую на строчку ниже:

Изучаем Javascript. Урок первый

Таким образом браузером будет выведено, не одно, а два сообщения с разным текстом.

Но в некоторых моментах использование точки с запятой не обязательно, так как в случае с переходом команды на новую строку Javascript интерпретирует это как разделитель и помещает «невидимую» точку с запятой между ними. Правда это не всегда работает корректно, попробуйте проверить этот код у себя:

Изучаем Javascript. Урок первый

Сначала вам будет выведено первое окно по команде alert с текстом, а дальше последует ошибка, так как перед квадратной скобкой Javascript фантомную точку с запятой ставить не умеет, хотя именно здесь она очень нужна.

Изучаем Javascript. Урок первый

Поэтому наличие точек с запятой в сценариях Javascript уже является стандартом, так как это позволяет перестраховаться от возможных ошибок в проекте.

Переменные

Изучаем Javascript. Урок первый

Приближаясь к заключению статьи, давайте рассмотрим использование переменных в коде. Сначала попробуем вывести значение нашей переменной на экран. Снова воспользуемся нашим HTML-страницы:

Изучаем Javascript. Урок первый

Для этого нам нужно воспользоваться командой var и названием, обозначающим тип нашей переменной, в нашем случае это числовая переменная, поэтому обозначаться она будет словом num. А выводить мы её будем уже не с помощью знакомой нам команды Alert, принцип работы которой мы с вами рассмотрели, а с помощью console.log, то есть значение будет показано в консоли браузера.

Попробуйте сами:

Изучаем Javascript. Урок первый

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

Также ни в коем случае наименования переменных не должны начинаться с каких либо символов по типу $%#… и чисел, все строго латинскими буквами.

Переменными могут быть не только числа, а еще строки и булевые переменные. Давайте создадим переменную с названием greeting, а её значением будет являться приветствие «Hello world!», обязательно заменим предыдущее значение в команде вывода console.log с num на greeting.

Должно получиться так:

Изучаем Javascript. Урок первый

Но выведением лишь одних заданных значений работа с переменными не ограничивается, давайте рассмотрим пример с новым, для нас, атрибутом prompt, принцип его действия в целом очень простой, он позволяет вводить пользователю информацию в поле во всплывающем окне, а далее с помощью объединения введенного значения переменной с комментарием выводить получившуюся информацию в консоль.

Давайте создадим новую переменную с названием name, и с помощью атрибута спросим, как, например, зовут зрителя странички:

Изучаем Javascript. Урок первый

Если вы все правильно сделали, то в консоли будет выведено сообщение с введенным именем, вот так:

Изучаем Javascript. Урок первый

Математические вычисления

Изучаем Javascript. Урок первый

Теперь давайте займемся математическими вычислениями, для этого создадим новые переменные firstNum, secondNum и thirdNum с разными значениями.

Изучаем Javascript. Урок первый

Выводить итог вычислений мы будем непосредственно на экран самой странички с помощью команды document.write.

Изучаем Javascript. Урок первый

Отмечу, что для подсчета при выведении информации, после вашего комментария обязательно ставить запятую, иначе, как в примере с выведением вашего имени, будет произведено объединение значений переменных, а не их вычисление.

Циклы

Изучаем Javascript. Урок первый

Теперь давайте поговорим о циклах, благодаря им мы можем выводить требуемую информацию несколько раз подряд. Для начала создадим цикл выводящий массив чисел до 100, выводить результат работы мы будем в консоль. Запишем:

Изучаем Javascript. Урок первый

Для изменения величины шага в перечислении чисел, требуется изменить значение в третьей переменной i, таким образом мы можем изменить шаг увеличения последовательности чисел от 1, до 10 и так далее.

Операторы условий

Изучаем Javascript. Урок первый

И последним пунктом, который мы рассмотрим в статье, будут операторы условий. Что это такое? Операторы условий — это алгоритмы, позволяющие выбирать действие в зависимости от ситуации, к примеру, если у нас одно число равно другому числу, то выполняется первое условие, если нет, то второе. Итак, как это записывается:

Изучаем Javascript. Урок первый

Вначале, фактически как и в циклах, мы задаем условие, в нашем случае это 1=1, и если заданное нами условие является верным, то дальше выполняется команда console.log и мы можем увидеть сообщение с текстом «Единица равна единице» в консоли браузера, если мы изменим условие на 1≠1, то сообщение выводиться не будет, так как оно не является верным.

Изучаем Javascript. Урок первый

Кроме того, мы можем прописать следующий оператор else if. Выполняться он будет в том случае, если результат работы первого алгоритма оказался неверным и сюда мы пропишем условие в котором 2 будет равно 2, в таком случае в консоль будет выведено сообщение 2 равно 2.

Изучаем Javascript. Урок первый

Также мы можем работать сразу с несколькими числами, создаем две новых переменных var num1 и var num2. Присваиваем им например значения 12 и 18:

Изучаем Javascript. Урок первый

И создаем несколько условий с операторами if, else if и else, первый будет выполняться при условии, если первое число больше второго, второй — если оба числа равны, третий — если второе число соответственно больше первого. В нашем случае в консоль должен быть выведен результат работы оператора else, так как 12<18.

Также в операторах условий существует такой оператор как switch case. Для примера создадим переменную со значением 3, и пропишем три случая его работы, делается это добавлением значения к строке case:

Изучаем Javascript. Урок первый

В случае, если введенное число удовлетворяет значению одного из случаев, будет выведено уже знакомое нам диалоговое окно с сообщение, вызываемое командой alert. Если введенное число не будет удовлетворять ни одному из условий, будет выведено сообщение от атрибута default. Вот таким образом работает switch case, попробуйте сами.

Заключение

Изучаем Javascript. Урок первый

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

Спасибо за внимание и удачного программирования! До встречи!

Последнее изменение:
 
Berasoft
Berasoft, 26 июля 2018 - 18:12   (...)
И да, автор не позорься.
Какое нахрен скрывание скрипта?
Ты когда-нибудь отключал js где-нибудь?
Просто выполняться не будет и все.
Ответить
podogreykin
podogreykin1, 26 июля 2018 - 18:25   (...)
Прошу прощения за оплошность, а вам спасибо за комментарий. Проверил, действительно все как вы говорите, но возможно подобный способ работает со старыми браузерами на старых ОС, на виртуалку накачу, проверю. :)
Ответить
Berasoft
Berasoft, 26 июля 2018 - 22:50   (...)
Отлично.
Ответить
Berasoft
Berasoft, 26 июля 2018 - 22:51   (...)
И да.
В разделе математические операции в следущем уроке обязательно
упомините объект Math и его методы.
А вы по профессии кто?
Ответить
Serchessy
Serchessy, 27 июля 2018 - 12:51   (...)
Прежде чем начать изучать эту статью, нужно знать ОП и ООП как минимум.
Ответить
Arturmomo
Arturmomo1, 28 июля 2018 - 22:44   (...)
Ага, а ещё все протоколы прикладного уровня, три высокоуровневых языка программирования, а также имена жён их авторов.
В джаваскрипте ООП в принципе не существует, зачем его знать для понимания статьи?
Ответить
Serchessy
Serchessy, 30 июля 2018 - 10:48   (...)
Когда я интересовался темой программирования, начинал я с 1-го C и C# и перед началом мне рассказали выучить ОП и ООП, а так же, для всех языков в принципе.
Ответить
flopberry
flopberry 29, 4 августа 2018 - 19:56   (...)
мне жаль что тебе пришлось учить ООП всех языков… сколько их там?
Ответить
asmodeoux
asmodeoux3, 28 июля 2018 - 12:32   (...)
Уже как-то думал писать статейки-туториалы по программированию, но думал местной аудитории не зайдёт. Спасибо, что развеял этот миф :D
Ответить
podogreykin
podogreykin1, 28 июля 2018 - 19:27   (...)
Ахах, недооцениваешь, здесь обитает огромное количество разношерстных ребят со своими талантами и интересами :)
Ответить
Arturmomo
Arturmomo1, 28 июля 2018 - 22:20   (...)
Какой-то несерьезный подход – называть кусок статьи *циклы*, писать в нем о for, не написать ни слова о while, do...while, не упомянуть forEach, упоминая его при этом в других кусках статьи
А так — молодец, продолжай в том же духе, пусть мне и кажется, что для людей, не знающих джаваскрипта статья будет тяжела для усваивания. И да, вс кода в редакторах не хватает)
Ответить
podogreykin
podogreykin1, 28 июля 2018 - 22:29   (...)
Спасибо за замечание, в следующих статьях обязательно разберу подробнее циклы и т.д. Исправлюсь :)
Ответить
Jimmy_Pop
Jimmy_Pop18, 29 июля 2018 - 01:44   (...)
Как эдакий научпоп из мира языков — бесполезное чтиво. Код картинками, лол, слишком сильные упрощения и низкая информативность. С точки зрения обучения — так же абсолютно бесполезная трата времени. Сделал бы обзор языков, сферы применения, их перспективность и сложность, показал бы наглядный пример с того же трешбокса. Да и послал бы людей на какой-нибудь код академи или код комбат. Без интерактива читать код с картинок и подписи к ним. Рили?
Ответить
Serchessy
Serchessy, 30 июля 2018 - 10:45   (...)
Какой форум, такие и статьи.
Возможно здесь дают представление, по этому и не углубленно.
А кого интересует, уже будут искать более информативно и на альтернативных источниках.
Ответить
Jimmy_Pop
Jimmy_Pop18, 30 июля 2018 - 19:19   (...)
Статья зашла не с точки зрения представления и презентации, а именно как обучающая. Тут она бесполезна в любом случае.
Ответить
IbnXatab
IbnXatab, 30 июля 2018 - 17:45   (...)
Я не профессиональный программист это у меня как хоби.
Пишу на Си мне очень нравится этот язык.там всё делается четко.
JS — посмотрел чёт не очень мне понравился язык.переменные без типа и всё такое.
Вот Си это тема.
пример:

#include

using namespace std;

typedef unsigned int u32;
typedef unsigned short u16;
typedef unsigned char u8;

void ShowBin( u32 x )
{
u32 t = 0x80000000;

for(; t; t >>= 1 )
printf("%c", ( t & x )? '1': '0');
}

void ShowBinV2( u32 x, int bit = 32 )
{
u32 t;
char buf[33], *pbuf = buf;

switch( bit )
{
case 32: t = 0x80000000; break;
case 24: t = 0x800000; break;
case 16: t = 0x8000; break;
case 8: t = 0x80; break;
default: t = 0x8000;
}

for(; t; t >>= 1 )
*pbuf++ = ( t & x )? '1': '0';
*pbuf ='\0';

printf("%u — %s\n", x, buf );

}

int main()
{
u32 a;
u16 *b = (u16 *)&a;
u8 *c = (u8 *)&a;

a = 0xFFFF;
ShowBinV2( a );

a = 0;
*( b + 1 ) = 65535;
ShowBinV2( a );

a = 0;
*( c + 3 ) = 63;
ShowBinV2( a );

a = 0xFFFFFFFF;
c = new u8;
*c = a & 15;
ShowBinV2( *c, 8 );
delete c;

return 0;
}

Сделайте лучше статью по Си и Open GL ES на андроид
Ответить
timblaer
timblaer44, 31 июля 2018 - 12:44   (...)
Интересный у вас Си с пространствами имен
Ответить
IbnXatab
IbnXatab, 3 августа 2018 - 23:02   (...)
а ещё там есть операторы new и delete.это специальная сборка си.помоему называется c++
Ответить
flopberry
flopberry 29, 4 августа 2018 - 20:11   (...)
слушай, есть еще такая интересная сборка, репак от Гвидо Ван Росум, Python называется, попробуй, чёткий билд.
Ответить
timblaer
timblaer44, 31 июля 2018 - 12:56   (...)
К сожалению, очень несерьезная статья. Рассказывать, значит, или делать это хорошо, или не делать вовсе, потому что говорить «циклы» и не говорить о других видах, как указали выше, нехорошо. Если употребляете примеры с forEach, но не говорите, что это тоже цикл — тоже нехорошо. Ничего не рассказано про типы. И, вообще говоря, нет такого оператора else if (думал, такие статьи бесполезны, потому что любой мыслящий человек должен догадаться сам, но прочтите). Кстати, почему нельзя начинать название переменной с $? Очень даже можно, разработчики jQuery делают так не первый год.

Статья отражает обещанный заголовок — от дилетанта к дилетанту, поэтому формально придраться не к чему, но лучше так не делать.
Ответить
justmax437
justmax4371, 4 августа 2018 - 21:46   (...)
Вот умеешь ты мысль выразить, Теймур
Ответить
oksimiroling
oksimiroling, 14 августа 2018 - 11:59   (...)
Очень Эта статья как наркотик
Ответить
PikaChu2021
PikaChu2021, 15 августа 2018 - 01:07   (...)
+ за статью! Но в список редакторов можно было бы включить Notepad++
Ответить

Добавить комментарий
Если нужно ответить кому-то конкретно,
лучше нажать на «Ответить» под его комментарием