Для того чтобы начать изучение JavaScript, необходимо определиться с тем, где, собственно, нужно записывать сам скрипт, т.е. код на языке JavaScript.
Делается это предельно просто для тех, кто знаком с html - а знание этого языка разметки для использования JS (т.е. JavaScript) абсолютно необходимо, равно, как и знание CSS, т.к. JavaScript работает именно с html-кодом страницы и зачастую применяет к нему ряд правил CSS, как явно, так и с использованием классов.
Добавление скриптов на страницу
Выполняется с помощью тега <script> либо в блоке <head>, т.е. заголовочной части страницы, либо внутри тега <body>, т.е. основной части html-документа. Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First JS</title> <script> alert("Hello world!"); </script> </head> <body> <script> alert("Ура! Первый скрипт заработал!"); </script> </body> </html> |
Раньше, т.е. во времена HTML4 к тегу <script> дописывали обязательный атрибут text="javascript". Но в HTML5 он перестал быть нужным, т.к. никакими другими скриптами обычно на страницах не пользуются. Поэтому, если вы работаете в спецификации HTML5 (а она уже стала стандартом де-факто в Интернете), то смело опускайте этот атрибут.
Что касается размещения скриптов, то в заголовочной части страницы (блок <head>) обычно размещают скрипты, требующие более долгой загрузки, например, библиотеки типа jQuery или Modernizr или те, которые используются в учебных целях. Но чаще сейчас теги <script></script> размещают перед закрывающимся тегом <body>. Связано это с тем, что весь html-документ, с которым обычно работает JS, уже загрузился, и любые его элементы доступны для использования их в коде.
Чаще всего скрипты, как и css-форматирование, выносят в отдельные js-файлы, т.е. текстовые по сути файлы с расширением .js, в которых может быть записан только код на JavaScript, и ничего более. В этом случае у тега <script> появляется атрибут src, в котором записывается путь к js-файлу, аналогично тому, как в теге <link> атрибут href содержит путь к css-файлу.
Важно: в этом случае между тегами <script></script> не должно быть никакого кода!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Внешний JS</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sint!</p> <p>Maiores dolorem quis vel obcaecati nostrum assumenda accusamus, temporibus tempora.</p> <p>Velit, vel repellendus iure a! Eligendi adipisci accusantium perspiciatis obcaecati.</p> <script src="js/second.js"></script> </body> </html> |
В каждом из файлов может находится свой код, который управляет разными процессами. Чаще всего для всех js-файлов проекта, или сайта, создают папку js, из которой на разные страницы подключают разный код.
Комментарии в JavaScript
Существуют однострочные и многострочные комментарии в JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> // alert("Ура! Первый скрипт заработал!"); // однострочный комментарий /* var i=0, a=40, b=20; a+=10; b-=17; i++; alert(a+b-i); */ /* многострочный комментарий */ </script> |
Комментарии в JavaScript нужны для того, чтобы скрыть какой-либо участок кода, например, для отладки скрипта, если какой-то его участок привел к ошибке. Либо, если вы решили попробовать изменить алгоритм, но не хотите потерять текущие наработки. Кроме того, принято комментировать JavaScript-код, чтобы вернувшись к скрипту через полгода или год, понять, что и где этот скрипт делает.
Все, что помещено между комментариями, НЕ выполняется как код, т.е. пропускается интерпретатором браузера.
Диалоговое окно alert
alert() - это метод объекта window, отвечающего за все окно браузера, которое позволяет наладить простейший диалог с пользователем. В этом диалоговом окне можно вывести некое сообщение (в первом примере таким сообщением было "Hello world"), значение переменной или выражения. Например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> alert("Мне нравится JavaScript!"); var i=0, a=40, b=20; alert(b); // выведет 20 a+=10; alert(a); //выведет 50 b-=17; alert(b); // выведет 3 i++; // выведет 1 alert(i); alert(a+b-i); // выведет 52: 50+3-1; </script> |
Если нужно сформировать сложную строку из значений переменных, текста и выражения, то для "склеивания" (или по-другому, конкатенации) строки из разных элементов, нужно использовать оператор сложения, т.е. знак "+":
|
1 2 3 4 5 6 7 8 |
<script> var first = 20, second = 40; alert ("Cумма чисел " + first + "+" + second + "=" + (first+second)); alert ("Разница чисел " + first +"-" + second+"=" + (first-second)); alert ("Произведение чисел " + first + "*" + second + "=" + first*second); alert ("Частное чисел " + first + "/" + second + "=" + first/second); alert ("Остаток от деления чисел " + first + " на " + second + "=" + first%second); </script> |
Обратите внимание на то, что в первых двух строчках для вычисления суммы и разности использованы скобки. Сделано это для того, чтобы поменять последовательность выполнения операций: если бы скок не было, строки бы "склеились" и получилось вот что:
|
1 2 3 4 5 |
<script> var first = 20, second = 40; alert ("Cумма чисел " + first + "+" + second + "=" + first+second); // выведет 2040 alert ("Разница чисел " + first +"-" + second+"=" + first-second); // выведет NaN (Not a Number) </script> |
Почему получились такие значения и что такое NaN можно прочитать в статье "Переменные в JavaScript".
У меня получилось! Ура! JavaScript сдвинулся с мертвой точки.
Давайте еще что-нибудь простое, чтобы я смогла сделать!
Хорошо, но мало. Это начала JavaScript для новичков.
Хотелось бы новых статей в этой области, а то уже давно ничего не появлялось у вас по JS.
А как диалоговое окно у вас появляется при нажатии на кнопку?
Нигде ведь это не написано.
Нажатие на кнопку - это добавление обработчика события.
О видах событий можно прочитать в соответствующей статье.
А про обработку события onclick есть пояснения в статье "Обработка события onclick".
Боялся учить JavaScript.
Прочитал статью, попробовал - все получилось. Спасибо!
А разве сейчас часто применяют это окно?
Все понятно. Спасибо.