Язык JavaScript-поведение web-страниц. Html примеры javascript

Как вставить JavaScript в HTML страницу.

JavaScript - это язык сценариев, который работает работает только в браузере пользователя, то есть на стороне клиента. Для вызова этого языка в HTML-код пишут теги <script> и </script>.

Вот пример простой программки, выводящей в окно браузера фразу "Привет, Мир!":

<html> <head> <title>Пример JavaScript</title> </head> <body> <script> document.write("Привет, Мир!") </script> </body> </html>

В этом скрипте команда document.write("Привет, Мир!") вывела на экран фразу "Привет, Мир!". В команде document.write("") внутри кавычек можно писать любой текст и теги. Теги будут интерпретироваться браузером.

Подробнее про эту команду мы поговорим позже, а сейчас вернёмся к теме этой статьи - вставка сценария JavaScript в код HTML.

На самом деле расширеная и более точная запись тега <script> выглядит так: <script type="text/javascript">. В атрибуте type мы указывает тип языка, на котором написан скрипт. В нашем случае это JavaScript. В реальности у JavaScript сейчас нет заметных конкурентов, поэтому во всех современных браузерах по умолчанию будет использоваться JavaScript.

Но для достоверности давайте приведём пример расширенного использования тега:

<html> <head> <title>Пример JavaScript</title> </head> <body> <script type="text/javascript"> document.write("Привет, Мир!<br><br>Я рад тебя видеть!") </script> <noscript> Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках. </noscript> </body> </html>

В этом примере также обратите внимание на пару тегов <noscript> и </noscript>. Этот тег будет выводить текст на экран только в том случае, если в браузере пользователя отключён JavaScript или он не поддерживается.

Сценарий можно вставлять не только в раздел <boby>, но и в раздел <head>.

<html> <head> <title>Пример JavaScript</title> <script type="text/javascript"> var i = "Привет, Мир!" </script> </head> <body> <script type="text/javascript"> document.write(i) </script> <noscript> Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках. </noscript> </body> </html>

К этому примеру требуется некоторое пояснение. В разделе <head> мы командой var мы создали переменную i и присвоили ей текстовое значение Привет, Мир!. Потом, в разделе <body> мы командой document.write(i) вывели значение этой переменной на экран. Подробнее про переменные написано в статье переменные JavaScript, тут же вы узнали что код JavaScript можно вставить в оба раздела HTML-документа: <head> и <boby>.

Второй способ - включение файла

В статье что такое CSS был описан способ присоединения файла с кодом стилей CSS в документ, называемый связывание. Также можно связывать документ с файлом, в котором записан код JavaScript. Для этого в раздел <head> вставляем тег, как в примере:

<html> <head> <title>Пример JavaScript</title> <script src="/my/script.js"></script> <script src="/my/script_2.js" type="text/javascript"></script> <script src="http://ivan-monetkin.info/javascript/script.js"></script> </head> <body> </body> </html>

Как видете, к документу можно прикрепить два и более файлов с JavaScript сценариями. Можно использовать файлы сценариев, расположенные на стороннем домене, для этого в атрибуте src тега <script> нужно указать URL файла со скриптом. Также можно игнорировать атрибут type, если есть желание.

Файлы с кодом JavaScript должны иметь расширение .js.

В самом файле.js с кодом JavaScript теги <script> использовать не нужно. Это приведёт к ошибке.

Устаревшие и нестандартные браузеры

Чтобы поддерживать весьма устаревшие браузеры, которые не понимают код JavaScript, его нужно взять в комментарии используя теги комментариев HTML . Если не сделать этого, то браузер не понимающий JavaScript-код выведет его на экран как обычный текст. Но таких браузеров уже не осталось. Хотя такой код вы можете встретить, и, чтобы понимать его, - давайте разберёмся в этом.

<html> <head> <title>Пример JavaScript</title> </head> <body> <script type="text/javascript">  </script> </body> </html>

В данном примере открывающий HTML тег комментария , непосредственно перед тегом </script> завершающим код нашего сценария.

Двойной прямой слэш // - это уже комментарий JavaScript, он показывает что вся строка, идущая после него - это комментарий с точки зрения JavaScript. Подробнее про комментарии JavaScript читайте тут: комментарии в JavaScript. Этот JavaScript-комментарий вставлен для браузеров с поддержкой JavaScript, чтобы они проигнорировали символы -->, не восприняли их как часть кода сценария.

Такое решение имеет не самый красивый вид, практической пользы от него мало и она уменьшается с каждым годом, но его ещё можно встретить в некоторых местах. Например счётчики посещаемости сайтов от liveinternet.ru имеют такой код.

komotoz.ru

Примеры JavaScript скриптов - Учитель программирования.ру

Пример 4. Плавающая ссылка

Плавающие ссылки<!– .line { color: #333333; font-weight: bold} –> // ATTENTION: Too many images will slow down the floating effect. var message=new Array() message[0]=”http://scriptic.ru” message[1]=”Lidia” message[2]=”http://studia.scriptic.ru”

// You may add a link for each message.// In case you do not want to link a message just add a ‘#’ instead of an URLvar message_link=new Array()message_link[0]=”http://scriptic.ru”message_link[1]=”mailto:[email protected]”message_link[2]=”http://studia.scriptic.ru”

// font-family for each messagevar message_font=new Array()message_font[0]=”Times New Roman, Times, serif”message_font[1]=”Impact, Arial, sans-serif”message_font[2]=”Comic Sans MS, Arial, sans-serif”

// font-size for each messagevar message_fontsize=new Array()message_fontsize[0]=28message_fontsize[1]=25message_fontsize[2]=30

// font-color for each messagevar message_fontcolor=new Array()message_fontcolor[0]=”red”message_fontcolor[1]=”olive”message_fontcolor[2]=”blue”

// font-weight for each message. Choose a value between 1 and 9var message_fontweight=new Array()message_fontweight[0]=7message_fontweight[1]=9message_fontweight[2]=7

// width for each message (pixels)var message_width=new Array()message_width[0]=300message_width[1]=200message_width[2]=300

// average speed of the floating images. Higher means fastervar floatingspeed=3

// do not edit the variables belowvar tempo=30var numberofmessages=message.length-1var stepx=new Array()var stepy=new Array()for (i=0;i<=numberofmessages;i++) {stepx[i]=randommaker(floatingspeed)stepy[i]=randommaker(floatingspeed)}var imgwidth=new Array()var imgheight=new Array()for (i=0;i<=numberofmessages;i++) {imgwidth[i]=10imgheight[i]=10}var i_fadestrength=new Array()var i_fadestep=new Array()var i_fadenow=new Array()var i_fadenowmax=new Array()for (i=0;i<=numberofmessages;i++) {i_fadenowmax[i]=randommaker(10)+2i_fadestrength[i]=randommaker(90)i_fadestep[i]=1i_fadenow[i]=0}var x,yvar marginbottomvar marginleft=0var margintop=0var marginrightvar timerfor (i=0;i<=numberofmessages;i++) {message_fontweight[i]=100*message_fontweight[i] }

var spancontent=new Array()for (i=0;i<=numberofmessages;i++) {spancontent[i]=”<table width=”+message_width[i]+” cellspacing=0><tr><td valign=top>”spancontent[i]+=”<span style=’position: relative; font-family: “+message_font[i]+”; font-size: “+message_fontsize[i]+”pt; font-weight: “+message_fontweight[i]+”‘>”spancontent[i]+=”<a href='”+message_link[i]+”‘>”spancontent[i]+=”<font color=”+message_fontcolor[i]+”>”spancontent[i]+=message[i] spancontent[i]+=”</a>”spancontent[i]+=”</span>”spancontent[i]+=”</td></tr></table>”}

function setValues() {if (document.all) {marginbottom=document.body.clientHeight-5marginright=document.body.clientWidth-5for (i=0;i<=numberofmessages;i++) {var thisspan = eval(“document.all.span”+i)thisspan.innerHTML=spancontent[i] var thisspan = eval(“document.all.span”+(i)+”.style”)thisspan.posLeft=randommaker(marginright)thisspan.posTop=randommaker(marginbottom)}for (i=0;i<=numberofmessages;i++) {var thisspan = eval(“document.all.span”+i)imgwidth[i]=thisspan.offsetWidthimgheight[i]=thisspan.offsetHeight

}checkmovement()}}

function randommaker(range) {rand=Math.floor(range*Math.random())if (rand==0) {rand=Math.ceil(range/2)}return rand}

function checkmovement() {if (document.all) {for (i=0;i<=numberofmessages;i++) {var thisfilter=eval(“span”+i)i_fadenow[i]++if (i_fadenow[i]>=i_fadenowmax[i]) {i_fadenow[i]=0if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}}i_fadestrength[i]+=i_fadestep[i] thisfilter.filters.alpha.opacity=Math.floor(i_fadestrength[i])

}checkposition()movepictures()timer=setTimeout(“checkmovement()”,tempo)}}

function movepictures() {if (document.all) {for (i=0;i<=numberofmessages;i++) {var thisspan=eval(“document.all.span”+(i)+”.style”)thisspan.posLeft+=stepx[i] thisspan.posTop+=stepy[i] }}}

function checkposition() {if (document.all) {for (i=0;i<=numberofmessages;i++) {var thisspan=eval(“document.all.span”+i+”.style”)if (thisspan.posLeft>marginright-imgwidth[i]) {thisspan.posLeft-=Math.abs(stepx[i]+1)stepx[i]=randommaker(floatingspeed)*-1}if (thisspan.posLeft<marginleft) {thisspan.posLeft+=Math.abs(stepx[i])stepx[i]=randommaker(floatingspeed)}if (thisspan.posTop>marginbottom-imgheight[i]) {thisspan.posTop-=Math.abs(stepy[i])stepy[i]=randommaker(floatingspeed)*-1

}if (thisspan.posTop<margintop) {thisspan.posTop+=Math.abs(stepy[i])stepy[i]=randommaker(floatingspeed)}}}}// – End of JavaScript – –></SCRIPT></head><BODY style=”width:100%;overflow-x:hidden;overflow-y:hidden”><SCRIPT><!– Beginning of JavaScript –if (document.all) {for (i=0;i<=numberofmessages;i++) {document.write(“<span id=’span”+i+”‘ style=’position: absolute; z-index: 100; filter: alpha(opacity=50)’></span>”)document.close()}window.onload=setValues}// – End of JavaScript – –></SCRIPT></body></html>

uchitel-program.ru

Примеры JavaScript // Вебшкола

Простейшие примеры JavaScript

Написание текста с помощью JavaScriptНаписание тегов HTML с помощью JavaScriptJavaScript в разделе body документаJavaScript в разделе head документаВнешние файлы JavaScript

Объяснение примеров

Команды и комментарии JavaScript

Команды JavaScriptБлоки JavaScriptОднострочный комментарийМногострочный комментарийДействие комментария на выполнение командДействие многострочного комментария на выполнение команд

Объяснение примеров

Переменные в JavaScript

Объявление переменной, присвоение значения и отображение значения переменной

Объяснение примеров

Команда JavaScript If ... Else

Команда IfКоманда If...elseСлучайная ссылкаКоманда множественного выбора (Switch)

Объяснение примеров

Всплывающие окна JavaScript

Вплывающее окноМногострочное всплывающее окноОкно с подтверждениемОкно с полем ввода текста

Объяснение примеров

Функции JavaScript

Вызов функцииФункция с параметромФункция с параметром 2Функция, возвращающая значениеФункция с параметром, возвращающая значение

Объяснение примеров

Циклы в JavaScript

Цикл ForЦикл с заголовками HTMLЦикл WhileЦикл Do WhileПрерывание циклаПрерывание и продолжение выполнения циклаИспользование команды for...in для просмотра элементов массива

Объяснение примеров

Отлов ошибок в JavaScript

Команда try...catchКоманда try...catch с окном подтвержденияСообщение onerror

Объяснение примеров

Продвинутые примеры JavaScript

Создание приветствияАнимация кнопкиКарта-изображение с JavaScriptПростой таймерЕще один таймерБесконечный таймерБесконечный таймер с кнопкой "Стоп"Часы на JavaScriptСоздание объекта с прямым доступом к свойствамСоздание шаблона для объекта

weblabla.ru

Примеры html dom // Вебшкола

Примеры использования JavaScript для управления объектами HTML DOM.

Объект Document

Вывод текста на монитор командой document.write()Вывод отформатированного текста с помощью document.write()Подсчет количества якорей на страницеВозврат текстового содержимого первого якоря страницыПодсчет количества форм на страницеВозврат названия первой формы страницыВозврат количества изображений на страницеВозврат id первого изображения страницыВозврат количества ссылок на страницеВозврат id первой ссылки страницыВозврат пар название/значение из кукиВозврат доменного имени сервера, с которого загружен сайтВозврат даты и времени последнего изменения страницыВозврат полного адреса текущей страницыВозврат заголовка документаВозврат полного адреса документаДобавление текста на страницу с помощью функцииДобавление текста на страницу в новом окнеРазница между функциями write() и writeln()Вывод текстового содержимого элемента с указанным IDВывод количества элементов с определенным значением nameПодсчет количества тегов

Больше примеров использования объекта Document вы найдете в справочнике JavaScript.

Объект Anchor

Определение и изменение кодировки ссылкиВозврат значения атрибута href ссылкиОпределение и установка значения атрибута hreflang ссылкиВозврат атрибута name якоряВозврат значения атрибута rel текущего документаИзменение атрибута target ссылкиВозврат значения атрибута type ссылки

Больше примеров использования объекта Anchor вы найдете в справочнике JavaScript.

Объект Area

Возврат значения атрибута alt области в карте-изображенииВозврат координат области карты-изображенияВозврат значения якоря (закладки) в атрибуте href области в карте-изображенииВозврат пары значений hostname:port (название хоста:порт) для области в карте-изображенииВозврат названия хоста области в карте-изображенииВозврат порта области в карте-изображенииВозврат атрибута href области в карте-изображенииВозврат пути до файла области в карте-изображенииВозврат протокола связи области в карте-изображенииВозврат строки запроса атрибута href области в карте-изображенииВозврат атрибута shape области карты-изображенияВозврат значения атрибута target области карты-изображения

Еще примеры использования объекта Area вы найдете в справочнике JavaScript.

Объект Base

Возврат базового URL для всех ссылок на страницеВозврат значения атрибута target для всех ссылок на странице

Еще примеры использования объекта Base вы найдете в справочнике JavaScript.

Объект Button

Деактивация кнопки по щелчку мышьюВозврат значения атрибута name кнопкиВозврат атрибута type кнопкиВозврат текста, отображаемого на кпопкеВозврат атрибута id формы, в которую входит кнопка

Еще примеры использования объекта Button вы найдете в справочнике JavaScript.

Объект Form

Возврат значения атрибута value всех элементов, входящих в формуВозврат значения атрибута accept-charset формыВозврат значения атрибута action формыВозврат значения атрибута enctype формыВозврат количества элементов, входящих в формуВозврат значения атрибута method формыВозврат атрибута name формыВозврат значения атрибута target формыОчистка (сброс) формыПодтверждение формы

Еще примеры использования объекта Form вы найдете в справочнике JavaScript.

Объекты Frame/IFrame

Выравнивание iframeИзменение фонового цвета iframeВозврат значения атрибута frameborderУдаление рамки вокруг iframeИзменение высоты и ширины iframeВозврат значения атрибута longdesc Возврат значения атрибута marginheightВозврат значения атрибута marginwidthВозврат значения атрибута nameВозврат и установка значения атрибута scrollingИзменение атрибута src

Еще примеры использования объектов Frame/IFrame вы найдете в справочнике JavaScript.

Объект Image

Выравнивание изображенияВозврат значения атрибута alt изображенияДобавление рамки вокруг изображенияИзменение ширины и высоты изображенияИзменение свойств hspace и vspace изображенияВозврат значения атрибута longdesc изображенияСоздание ссылки на изображение с низким разрешениемВозврат значения атрибута name изображенияИзменение атрибута src изображенияВозврат значения атрибута usemap карты-изображения

Еще примеры использования объекта Image вы найдете в справочнике JavaScript.

Объект Event

Определение кнопки мыши, которая была нажатаОпределение кода нажатой клавишиКоординаты курсораКоординаты курсора относительно монитораОпределение нажатия клавиши shiftОпределение элемента, по которому был сделан щелчокОпределения типа события

Объекты Option и Select

Деактивация и активация выпадающего списка выбораПолучение атрибута id формы, содержащей выпадающий список Определение количества позиций в выпадающем спискеПреобразование выпадающего списка в обычный многострочный списокВыбор нескольких значений в выпадающем спискеВывод на монитор всех позиций в выпадающем спискеВывод на монитор порядкового номера выбранной позицииИзменение текста выбранной позицииУдаление выбранной позиции из выпадающего списка

Объекты Table, TableHeader, TableRow, TableData

Изменение ширины границы таблицыИзменение атрибутов cellPadding и cellSpacingИзменение атрибута frameИзменение атрибута rulesОтображение текста строки таблицыОтображение текста ячейки таблицыСоздание заголовка таблицыУдаление строк таблицыДобавление строк таблицыДобавление ячеек таблицыВыравнивание содержимого ячеек в строкеВыравнивание содержимого ячеек в строке по вертикалиВыравнивание содержимого в единственной ячейкеВыравнивание содержимого единственной ячейки по вертикалиИзменение содержимого ячейкиИзменение атрибута colspan

weblabla.ru

Язык JavaScript | Примеры Web-сценариев

Язык Javascript - язык web-программирования, необходимый для создания поведения web-страниц.

Поведение — правила, определяющие, реагирование web-страниц на работу пользователя. Его можна создать при помощи web-сценария - программы, записанной непосредственно в html-код страниц или, что еще лучше, в выделенный файл. Вот как раз эти программы и пишутся на языке JavaScript. Web-браузер, соответственно, выполняет прописанные в Script-коде выражения, проделывая действия над web-страницей.

Примеры Web-сценариев

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

Пропишем в нашем html-коде, внутри тега <BODY>, такой скрипт (это и есть web-сценарий):

Проверим результат нашей работы в браузере. На странице увидим абзац, с датой, написанной в "международном" формате.

Немного подправим наш script-код, для вывода даты в привычном нам формате <число>. <месяц>.<год>. Скрипт примет такой вид:

Теперь мы видим дату в понятном нам формате.

Более сложный Web-сценарий

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

Вначале внесем исправления в нашей таблице стилей как показано ниже:

— Для пунктов полосы навигации мы прописали изменение курсора, при наведении, на вид "указательного пальца", что подсказывает о реакции элемента на клик.

— Сделали для пунктов вложенного списка сплошную рамку цвета фона страницы (невидимая для пользователя).

Впишем в таблицу стилей такой стиль:

.hovered { border-color: #3B4043 !important }

При добавлении стилевого класса, задающего цвет рамки, сделаем атрибут стиля, задающий цвет рамки, важным. ( Важные атрибуты - глава 7.)

При привязывании этого стиля к пунктам любых списков, формирующих полосы навигации, он указывает новый цвет рамки. Рамка пункта "внешнего" списка становится темнее, а рамка пункта списка вложенного, которая была невидима, становится видимой.

Далее по этому адресу http://www.extjs.com/products/ core/download.php?dl=extcore31 скачаем библиотеку Ext Core, облегчающую работу со сложными сценариями. Из распакованного архива в корневую папку нашего сайта скинем файл ext-core.js. Там же должны находиться файлы index.htm и main.css. Библиотека готова к применению.

Откроем наш файл index.htm и впишем в тег <head> следующий тег:

А перед закрывающим тегом </BODY> пропишем этот тег:

В завершение в корневой папке создадим файл main.js и пропишем в нем следующее:

Это наш новый web-сценарий, но размещенный в отдельном файле main.js. Осталось протестировать результат нашей работы в браузере.

Как Web-сценарии помещаются в Web-страницу

Как мы только что убедились, Web-сценарии, формирующие поведение Web-страницы, можно поместить как в саму Web-страницу, так и в отдельный файл. Рассмотрим подробнее, как это делается.

Для вставки Web-сценария в HTML-код в любом случае применяется парный тег <SCRIPT>. Встретив его, Web-обозреватель поймет, что здесь присутствует Web-сценарий, который следует выполнить, а не выводить на экран.

Мы можем поместить код Web-сценария прямо в тег <SCRIPT>, создав внутренний Web-сценарий (листинг 14.5). Собственно, мы уже сделали это, когда создавали наш первый Web-сценарий.

Внутренние Web-сценарии имеют одно неоспоримое преимущество. Поскольку они записаны прямо в коде Web-страницы, то являются ее неотъемлемой частью, и их невозможно "потерять". Однако внутренние Web-сценарии не соответствуют концепции Web 2.0, требующей, чтобы содержимое, представление и поведение Web-страницы были разделены. Поэтому сейчас их применяют довольно редко, практически только при экспериментах (как и внутренние таблицы стилей; подробнее — в главе 7).

Мы можем поместить Web-сценарий и в отдельный файл — файл Web-сценария, — создав внешний Web-сценарий. (Наш второй Web-сценарий именно таков.) Файлы Web-сценария представляют собой обычные текстовые файлы, содержат только код Web-сценария без всяких тегов HTML и имеют расширение js.

Для вставки в Web-страницу Web-сценария, хранящегося в отдельном файле, применяется тег <SCRIPT> такого вида:

Тег <SCRIPT> оставляют пустым, и в него помещают обязательный в данном случае атрибут SRC, в качестве значения которого указывают интернет-адрес нужного файла Web-сценария:

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

В нашем втором Web-сценарии мы использовали библиотеку Ext Core, значительно облегчающую труд Web-программиста. Во всех языках программирования библиотекой называется набор готовых языковых конструкций (функций и объектов, о которых речь пойдет потом), написанных сторонними программистами, чтобы облегчить труд их коллег. Так вот, все библиотеки для языка JavaScript, в том числе и Ext Core, реализованы в виде внешних Web-сценариев.

И еще. Web-сценарий всегда выполняется в том месте HTML-кода Web-страницы, где присутствует. При этом не имеет значения, помещен он прямо в HTML-код или находится в отдельном файле.

Из этого следует очень важный вывод. Если Web-сценарий выполняет какие-либо манипуляции над элементами Web-страницы, его нужно поместить после HTML-кода, формирующего эти элементы. Ведь перед тем, как манипулировать этими элементами, Web-обозреватель должен их создать. Что, впрочем, логично.

Язык программирования JavaScript

Давайте рассмотрим пример еще одного Web-сценария, совсем небольшого:

x = 4;y = 5;z = x * y;

Больше похоже на набор каких-то формул. Но это не формулы, а выражения языка JavaScript; каждое выражение представляет собой описание одного законченного действия, выполняемого Web-сценарием.

Разберем приведенный Web-сценарий по выражениям. Вот первое из них:

x = 4;

Здесь мы видим число 4. В языке JavaScript такие числа, а также строки и прочие величины, значения которых никогда не изменяются, называются константами. В самом деле, значение числа 4 всегда равно четырем!

Еще мы видим здесь латинскую букву x. А она что означает?

О, это весьма примечательная вещь! Это переменная, которую можно описать как участок памяти компьютера, имеющий уникальное имя и предназначенный для хранения какой-либо величины — константы или результата вычисления. Наша переменная имеет имя x.

Осталось выяснить, что делает символ равенства (=), поставленный между переменной и константой. А он здесь стоит не просто так! (Вообще, в коде любой программы, в том числе и Web-сценария, каждый символ что-то да значит.) Это оператор — команда, выполняющая определенные действия над данными Web-сценария. А если точнее, то символом = обозначается оператор присваивания. Он помещает значение, расположенное справа (операнд), в переменную, расположенную слева, в нашем случае — значение 4 в переменную x. Если же такой переменной еще нет, она будет создана.

Каждое выражение языка JavaScript должно оканчиваться символом точки с запятой (;), обозначающим конец выражения; его отсутствие вызывает ошибку обработки Web-сценария.

Рассмотрим следующее выражение:

y = 5;

Оно аналогично первому и присваивает переменной y константу 5. Подобные выражения часто называют математическими.

Третье выражение стоит несколько особняком:

z = x * y;

Здесь мы видим все тот же оператор присваивания, присваивающий что-то переменной z. Но что? Результат вычисления произведения значений, хранящихся в переменных x и y. Вычисление произведения выполняет оператор умножения, который в языке JavaScript (и во многих других языках программирования) обозначается символом звездочки (*). Это арифметический оператор.

В результате выполнения приведенного ранее Web-сценария в переменной z окажется произведение значений 4 и 5 — 20.

Вот еще один пример математического выражения, на этот раз более сложного:

y = y1 * y2 + x1 * x2;

Оно вычисляется в следующем порядке:

1. Значение переменной y1 умножается на значение переменной y2.

2. Перемножаются значения переменных x1 и x2.

3. Полученные на шагах 1 и 2 произведения складываются (оператор сложения обозначается привычным нам знаком +).

4. Полученная сумма присваивается переменной y.

Но почему на шаге 2 выполняется умножение x1 на x2, а не сложение произведения y1 и y2 с x1. Дело в том, что каждый оператор имеет приоритет — своего рода номер в очереди их выполнения. Так вот, оператор умножения имеет более высокий приоритет, чем оператор сложения, поэтому умножение всегда выполняется перед сложением.

А вот еще одно выражение:

x = x + 3;

Оно абсолютно правильно с точки зрения языка JavaScript, хоть и выглядит нелепым. В нем сначала выполняется сложение значения переменной x и числа 3, после чего результат сложения снова присваивается переменной x. Такие выражения встречаются в Web-сценариях довольно часто.

bookhtml.ru

Подключение и выполнение javascript

В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.

Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

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

<html> <body> <h2>Считаем кроликов</h2> *!* <script type="text/javascript"> for(var i=1; i<=3; i++) { alert("Из шляпы достали "+i+" кролика!") } </script> */!* <h2>...Посчитали</h2> </body> </html>

В этом примере использовались следующие элементы.

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html> <head> *!* <script type="text/javascript"> function count_rabbits() { for(var i=1; i<=3; i++) { // оператор + соединяет строки alert("Из шляпы достали "+i+" кролика!") } } </script> */!* </head> <body> *!*<input type="button" value="Считать кролей!"/>*/!* </body> </html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

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

Чтобы подключить несколько скриптов - используйте несколько таких тегов:

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.

Современное оформление тэга <script>.

На плохое оформление сейчас ругается только валидатор. Поэтому эту заметку можно не читать.

Однако, знать это полезно хотя бы для того, чтобы сразу отличать современный и профессиональный скрипт от написанного эдак лет 5-6 назад.

Атрибут <script type=...> По стандарту этот атрибут нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому даже атрибута type нет - все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут.

Иногда используют <script type="text/html"> как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает <script> с неизвестным типом. В этом плане он ничем не отличается от обычного <div> с вечным.

Атрибут <script language=...> В старых скриптах нередко можно увидеть атрибут language. Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript. Комментарии до и после скрипта В старых руководствах по javascript встречается указание "прятать" javascript-код от старых браузеров, заключая его в HTML-комментарии .

Браузер, от которого прятали код (старый Netscape), давно умер. Современные браузеры комментарии просто игнорируют. Не ставьте их.

javascript.ru