Софт

программа Javascript

Рейтинг: 4.6/5.0 (407 проголосовавших)

Категория: Windows

Описание

Практические занятия по JavaScript для начинающих или JavaScript для чайников

Практические занятия по JavaScript для начинающих или JavaScript для чайников

Что такое JavaScript. JavaScript v это сравнительно новый язык для написания сценариев, разработанный компанией Netscape. При помощи языка JavaScript мы можем создавать интерактивные web-страницы наиболее удобным и эффективным способом.

Это обычный HTML-документ. Возвращаемся назад в HTML.

Если же мы не обнесем текст программы JavasScript скобками ярлыка комментария, то в окне броузера, не понимающего JavaScript, будет следующий текст:

Это обычный HTML-документ.
document.write("Это и есть JavaScript!")
Возвращаемся обратно в HTML.

Конечно, не существует способа скрыть от пользователя текст JavaScript-программы полностью раз и навсегда. Здесь мы лишь можем скрыть текст программы-скрипта от возможности его просмотра в окне старых версий броузеров в тексте основного HTML-документа. Пользователь все же имеет возможность просмотреть текст программы-скрипта, если воспользуется опцией просмотра источника HTML-документа, имеющейся в меню "вид". Не существует способа скрыть от глаз пользователя внутреннее устройство того или иного эффекта, созданного при помощи JavaScript.

События

Событие v это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется == Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит событие MouseOver. Существует несколько различных событий. Пусть мы хотим, чтобы наша JavaScript программа реагировала на несколько разных событий. Это можно сделать при помощи event-handlers. Например, можно заставить появиться новое всплывающее окно, которое появляется при нажатии кнопки. Появление нового окна будут следствием наступления события Click. Event-handler, иначе говоря, обработчик событий или средство управления событиями, который требуется для организации такого действия, называется onClick. Это средство управления событиями сообщает компьютеру, какие== действия необходимо совершить при наступлении данного события. Ниже приведена простая программа, иллюстрирующая то, как может быть использовано средство onClick.

<form>
<input type="button" value="щелкни меня" onClick="alert('Ой')">
</form>

В приведенном выше примере есть несколько новых моментов, рассмотрим все подробно, шаг за шагом. В этом примере мы описали форму или бланк, в котором имеется кнопка, это осуществляется при помощи инструкций HTML, и поэтому мы не будем на этом останавливаться. Для нас важной частью является инструкция onClick="alert('Ой-ой')", которая размещена внутри ярлыка <input>. Как уже было замечено ранее, она определяет то действие, которое будет выполнено при нажатии кнопки. Если происходит событие Click, то компьютер выполнит инструкцию alert('Ой-ой'). Эта инструкция v фрагмент JavaScript. Заметьте, что в этом случае мы не использовали ярлык <script>.

Инструкция alert() позволяет создавать всплывающие окна. В скобках следует записать строку, в нашем случае это 'Ой-ой'. Текст строки будет виден во всплывшем окне. Наш скрипт заставляет появиться на экране новое окно с текстом 'Ой-ой', когда пользователь нажимает на кнопку. Отметим маленькую деталь, которая, однако, может создать некоторые недоразумения. В команде document.write() мы писали двойные кавычки ", а в комбинации инструкций, содержащей alert(), мы используем одиночные кавычки='= v почему? Вообще говоря, можно пользоваться как теми, так и другими кавычками. В нашем последнем примере мы используем две пары кавычек и пишем onClick="alert('Ой-ой')",= но если мы напишем onClick="alert("Ой-ой")", то компьютер не поймет, какая часть относится к == onClick, а какая нет. Для того чтобы не возникали недоразумения такого рода, необходимо использовать разные типы кавычек, при этом нет никакой разницы, в каком порядке они будут применяться. Ту же формулу можно переписать в другом виде, поменяв кавычки местами.

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

Если вы используете Netscape Navigator, то во всплывающем окне будет содержаться надпись JavaScript alert, что означает предупреждение JavaScript. Смысл этой надписи v соображения безопасности. Можно создать подобное всплывающее окно с помощью метода prompt(). В окне, созданном при помощи этого метода, предусмотрена возможность осуществления ввода информации. Можно создать такой скрипт-хулиган, который будет имитировать системное сообщение, запрашивающее пароль. Вспомогательный текст во всплывающем окне сообщает, что данное окно создано вашим броузером, а не операционной системой. Эту надпись на всплывающем окне никак нельзя уничтожить.

Функции

В большинстве программ на JavaScript мы будем пользоваться функциями. Рассмотрим пример и напишем скрипт, который будет выводить текст, причем один и тот же текст будет выводиться три раза. Вот возможный вариант программы:


<html>
<script language="JavaScript">
<!-- hide
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
// -->
</script>
</html>

Этот скрипт выведет такой текст:

Добро пожаловать!
Это JavaScript!

Этот текст будет выведен три раза. Насколько эффективен такой способ? Можно решить эту задачу более удобным способом. Ниже приводится другой вариант решения задачи.

Глава 1. Первые шаги

В настоящем практическом пособии приведены примеры, которые, по мнению автора, являются наиболее важными, они смогут продемонстрировать возможности JavaSript и принципы организации языка. В этом пособии приводятся примеры того, что можно сделать, используя JavaScript, а также, что не менее важно, рассказывается, как это сделать. =

JavaScript v это не то же самое, что Java!

Многие люди считают что язык JavaScript= v это то же самое что язык= Java, недаром они носят одинаковые имена. Однако это неверно. Не будем разбираться в существующих различиях, важно лишь помнить, что JavaScript и= Java v это разные языки, хотя, конечно, в них имеется много общего.

Как запустить скрипт, написанный на JavaScript?

Что требуется для того, чтобы запустить программу-скрипт, написанную на= JavaScript? Все, что для этого требуется, v это обычный интернет-броузер, с активированной способностью распознавать JavaScript. Таким броузером, например, может быть Netscape Navigator версии 2.0 и выше, или Microsoft Internet Explorer версии 3.0 и выше. Поскольку большинство пользователей сети Интернет используют именно эти два броузера, то становится понятным, почему именно язык JavaScript является наиболее предпочтительным языком при решении задач улучшения качества web-страниц. Заметим также, что для понимания= изложенного здесь материала требуется знание основ HTML v языка разметки, при помощи которого создаются web-страницы.

Включение скриптов JavaScript в HTML-страницу

Текст программы на языке JavaScript вставляется непосредственно в файл HTML-страницы. Чтобы посмотреть, как это выглядит, приведем пример простейшей HTML-страницы.


<html>
<body>
<br>
Это обычный HTML-документ
<br>
<script language="JavaScript">
document.write("Это и есть JavaScript!")
</script>
<br>
Выходим обратно в HTML.
</body>
</html>

На первый взгляд все выглядит, как обычный HTML-файл. Единственным отличием является то, что в нем содержится следующий фрагмент:


<script language="JavaScript">
document.write("Это и есть JavaScript!")
</script>

Этот фрагмент представляет собой скрипт, написанный на языке JavaScript. Чтобы посмотреть, как такой скрипт будет работать, наберите текст HTML-страницы, приведенный выше, сохраните его, как обычную HTML-страницу и загрузите в броузер с активированным JavaScript. На экране своего монитора в окне броузера вы увидите три строчки, которые будут выглядеть примерно так:

Это обычный HTML-документ.
Выходим обратно в HTML.

Конечно, этот скрипт вряд ли может оказаться сколько-нибудь полезным, ведь подобную информацию можно записать при помощи обычного HTML гораздо более простым способом. Целью этого примера было показать, как вставляется JavaScript в файл HTML-документа и продемонстрировать назначение новых ярлыков <script> и </script>. Вся информация, которая располагается между этими ярлыками, воспринимается как программа на языке JavaScript.= В тексте программы встречается строчка document.write() v одна из наиболее важных команд в программировании на JavaScript. document.write(), используется тогда, когда нужно записать что-либо в документ, в данном случае в HTML-документ. Так, наша маленькая программа на JavaScript записывает текст. Это и есть "JavaScript!" в наш HTML-документ.

Броузеры, не поддерживающие JavaScript

Как будет выглядеть наша страничка, если просматривающий ее броузер не поддерживает JavaScript? Броузер, который не понимает JavaScript, также не поймет и ярлык <script>. Такой броузер проигнорирует этот ярлык и воспримет все, что за ним следует как обычный текст. А это значит, что пользователь увидит на своем экране весть текст программы на JavaScript, вставленный в HTML-страничку. Конечно, нам бы этого не хотелось. Существует возможность скрыть текст JavasScript от пользователя, который просматривает страничку= с помощью старых версий броузера. Для этого используется ярлык комментария <!-- -->. С использованием обозначения комментария наша страничка примет такой вид:


<html>
<body>
<br>
Это обычный HTML-документ.
<br>
<script language="JavaScript">
<!-- спрячемся от старых версий броузеров
document.write("Это и есть JavaScript")
// -->
</script>
<br>
Возвращаемся назад в HTML.
</body>
</html>

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

<html>
<script language="JavaScript">
<!-- hide
function myFunction() <
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
>
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>

В программе это скрипта мы использовали функцию. Для определения функции на понадобилось три строчки:

function myFunction() <
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
>

Команды, помещенные между скобок <>, составляют команды, образующие функцию myFunction(). Это значит, что две используемые нами функции document.write() объединяются в одно целое, и они могут быть выполнены совместно при помощи обращения к функции. В нашей программе мы обращаемся к функции три раза, мы три раза написали myFunction() после того, как определили эту функцию. Мы три раза вызвали функцию, т.е. содержание функции будет исполнено три раза.

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

Функции также можно использовать в сочентании со средствами управления событиями. Рассмотрим пример:


<html>
<head>
<script language="JavaScript">
<!-- hide
function calculation() <
var x= 12;
var y= 5;
var result= x + y;
alert(result);
>
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Будем считать" onClick="calculation()">
</form>
</body>
</html>

=Нажатая кнопка заставляет компьютер выполнить функцию calculation(), эта функция производит определенные вычисления с переменными x, y= и result. Мы можем определить переменные с помощью специального слова var. Переменные могут использоваться для хранения различных величин, например для хранения чисел, текстовых строк и т.д.== Строка программы var result= x + y; сообщает броузеру, что необходимо создать переменную result и в этой переменной сохранять значение, равное сумме значений переменных x + y (т.е. 5 + 12). После выполнения этой функции переменная result будет содержать число 17. Команда alert(result)в этом случае эквивалентна команде alert(17). Мы видим всплывающее окно, в котором записано число 17.

Глава 2.= HTML документы. Иерархии JavaScript

Все элементы, составляющие web-страницу, рассматриваются в JavaScript как элементы, иерархически организованные. Каждый элемент страницы представляет собой объект. Каждый объект обладает определенными свойствами и располагает своими методами. Для понимания того, как устроен объект, важно понимать утройство иерархии HTML объектов. Для того чтобы было легче понять, о чем идеть речь, приведем пример. Вот простая HTML-страница:

oollyym mpp">Моя страничка</a>
</center>
</body>
</html>

Эта страница на экране выглядит следующим образом:

Здесь мы имеем две картинки, одну ссылку и одну форму, содержащую два поля для ввода текстовой информации. С точки зрения языка JavaScript окно броузера представляет собой объект, называемый window. Этот объект содержит в себе несколько элементов, например панель состояния. В объект-окно window может быть загружен HTML-документ (или файл другого типа, здесь же мы ограничимся HTML-документами).HTML-страница представляет собой новый объект v document. Объект document представляет собой HTML-документ, который загружен в броузер в данное время. Этот объект v это очень важный в языке JavaScript объект, мы будем пользоваться им очень часто. Этот объект имеет свои свойства, например одним из свойств объекта document является цвет фона документа. Существенным моментом является тот факт, что все объекты, описанные в HTML, являются свойстивами объекта= document. Например, HTML-объект, представляющий собой ссылку, содержащуюся в документе, или объект, который представляет собой форму, v все это свойства объекта document. Следующий рисунок иллюстрирует структуру иерархии, образующейся в нашей HTML-странице (см. рис. 4).

Мы хотим научиться получать информацию о разных объектах и управлять объектами. Для этого мы должны знать, как можно управлять объектами. Каждый объект в иерархии имеет свое имя в виде своебразного адреса. Чтобы назвать, например, первую картинку на HTML-странице, нужно посмотреть, где в иерархии находится эта страница. Начинать нужно с самого начала, с основания. Первый и основной здесь объект v это документ, его имя document. Первая картинка на странице имеет имя images[0]. Все это значит то, что мы можем обратиться к этой картинке посредством языка JaveScript, назвав ее document.images[0]. Если же, например, у нас появится необходимость посмотреть, какую информацию пользоватеть ввел в элемент первой формы, то вначале нам необходимо позаботиться о том, как мы сможем обратиться к самому объекту, представленному данной формой. И опять начинаем с самого основания иерархии, с его главного объекта. Далее обращаемся к формам и затем переходим к элементам форм, таким образом, первый элемент нашей формы будет иметь имя document.forms[0] .element[0]. И все же как мы сможем узнать, какой в этом элементе введен текст? Для того чтобы узнать, какими свойствами и методами может обладать тот или иной объект, удобнее всего обратиться к справочному пособию по JavaScript. Из справочника легко можно узнать, что текстовый элемент имеет свойство, носящее имя value, т.е. значение. То, чему равняется value, и представляет собой текст, введенный пользователем. Вот как мы можем прочитать то, что ввел пользователь:

Текстовая строка, введенная пользователем, сейчас сохранена в переменной name. Далее мы можем пользоваться этой переменой. Например, мы можем создать всплывающее окно, используя эту переменную: alert("Привет, " + name). Если в данный элемент формы введена строка 'Яков', то в открывшемся окне будет написано 'Привет, Яков'. Но если наша страничка велика и в ней много различных объектов, то может оказаться затруднительным указывать имена объектов при помощи чисел, при этом могут появляться довольно громоздкие конструкции, например такие, как= document.forms [3].elements[17] и document.forms[2]. elements[18]. Эту трудность можно обойти, если присвоить объектам уникальные, неповторяющиеся имена. Два разных объекта не могут иметь одинаковые имена. Посмотрим, как может выглядеть программа на JavaScript, в которой используются такие имена:


<form name="myForm">
Name:
<input type="text" name="name"
value=""><br>
.

В этом примере первая форма forms[0] имеет собственное уникальное имя= myForm. Вместо elements[0] мы можем использовать you имя, которое задано этому элементу при помощи свойства имени name, которое может быть указано для задания собственного уникального имени в ярлыке <input>, при помощи которого описывается данный элемент. Тогда вместо строчки

name= document.forms[0].elements[0].value;
мы можем написать
name= document.myForm.name.value;

Используя такие имена, мы облегчаем себе процесс написания программы, особенно в том случае, если создаваемая страница довольно велика.Здесь немаловажно помнить, что имена чувствительны к регистру и имя myForm v это вовсе не то же самое, что myform. Свойства объектов JavaScript не ограничиваются операциями прочтения значений полей, заполненных информацией, которая вводится пользователем. Свойствам объектов можно задать и иные значения. Например, можно организовать ввод строки текста в текстовый элемент формы. Посмотрите, как это делает скрипт в следующем примере:

Интересующая нас часть находится справа от onClick во втором ярлыке <input>.


<form name="myForm">
<input type=|text| name=|input| value=|** ** **|>
<input type=|button| value=|Write|
onClick=|document.myForm.input.value= # Ой#; ?>

Объект местоположения = location-object

Помимо объектов-документов, в JavaScript существуют объекты-окна. Используя эти объекты, можно, например, создавать новые всплывающие окна. Пример такой программы приведен на рисунке. Введите ее и сохраните в виде HTML-файла, а затем загрузите в броузер и поэкспериментируйте. Существует также объект местоположения. Этот объект представляет собой адрес загруженного HTML-документа. Например, если вы загрузите страницу http://www.somehost.ru/page.html, то location.href будет иметь значение, равное именно указанной строчке адреса страницы. Интересно то, что мы можем присвоить location.href новые значения, например, нажимая кнопку, описанную в следующем примере, мы загружаем новую страницу в существующее окно броузера.

программа javascript:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Скачать JavaScript

    Скачать JavaScript

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

    JavaScript также находит применение в качестве скриптового языка доступа к объектам приложений. Например Java, начиная с версии 6, содержит встроенный интерпретатор JavaScript на базе Rhino. Сценарии JavaScript поддерживаются в таких приложениях, как Photoshop, Adobe Dreamweaver или Adobe Illustrator.

    Название «JavaScript» является зарегистрированной торговой маркой компании Sun Microsystems, Inc.

    На этой странице Вы можете выбрать и скачать JavaScript на популярные темы.

    Азбука Морзе: Азбука Морзе от BestFREE.ru

    JavaScript. 20 кб

    Скрипт содержит таблицу кодов Азбуки Морзе и умеет переводить русский и латинский текст в этот код и обратно (с некоторыми допущениями).

    Добавить в избранное: Добавить в избранное от easyphp.ru

    JavaScript. 10 кб

    Скрипт-ссылка для добавления текущей открытой страницы в каталог избранных ссылок Вашего веб-браузера.

    Проверка орфографии: Orphus

    JavaScript. 10 кб

    Работа скрипта основана на реакции пользователя на найденную ошибку. Пользователь найдя ошибку выделяет её, нажимает Ctrl-Enter, и скрипт отправляет сообщение администратору.

    Сделать стартовой: Сделать стартовой от easyphp.ru

    JavaScript. 10 кб

    Простенький скрипт в одну строчку — при нажатии на ссылку предлагает сделать стартовой текущую открытую страницу.

    Где скачать программу JavaScript

    где скачать программу JavaScript.

    Evgeny M. Высший разум (576183) 6 лет назад

    Функция исполнения скриптов, написанных на языке JavaScripy включается в настройках Вашего браузера.
    Вот как это делается для самых популярных браузеров.
    В InternetExplorer, например, "Сервис" --> "Свойства Обозревателя" --> "Безопасность". Выберите там режим по умолчанию или, если разбираетесь, то жмите кнопку "Другой" и настраивайте всё сами (Там в "Активные Сценарии" надо их разрешить, могут быть разные рарианты в зависимости от версии браузера).
    В Mozilla FireFox, например, "Инструменты" --> "Настройки" --> "Содержимое". Ставьте галочку "Использовать JavaScript".
    В Opera, например, "Инструменты" --> "Настройки" --> "Дополнительно" --> "Содержимое". Ставьте галочку "Использовать JavaScript".
    В Safari, например, "Правка" -->"Настройки" --> "Безопасность". Ставьте галочку "Подключить JavaScript". Далее, надо перезагрузить браузер, то есть закрыть его и скова запустить.
    В Google Chrome режим JavaScript всегда включен, если Вы его нормально запускаете из Windows. Если же этот браузер запустить из коммандной строки с параметром --disable-java, то этот режим будет отключен. Тогда просто перезапустите этот браузер по нормальному.
    Если у Вас в браузере включена поддержка JavaScript, но тем не менее сайт выдает сообщение, что надо включить поддержку JavaScript, то это значит, что поддержку JavaScript блокирует или антивирус или файервол. Вам надо проверить настройки этих программ и отключить там блокировку JavaScript.
    Если это всё не помогает, то тогда отсутствие поддержки JavaScript означает, что Вы соединены с интернетом не напрямую, а через прокси-сервер, в настройках которого стоит блокировка JavaScript. Часто это бывает, если выходите в интернет на работе или в ВУЗе, через корпоративную локальную сеть. Но в принципе может быть и в подключении интернета в квартиру, хотя очень редко, как экзотика.
    Если такая ситуация на работе, то попробуйте договориться с сисадмином, если он Ваш хороший знакомый. Если такая ситуация с интернетом в квартире, и провайдер подтверждает, что идет соединение через прокси-сервер зарубающий JavaScript, то просите провайдера включить Вам поддержку JavaScript или меняйте провайдера.

    P.S. Просьба не путать между собой языки Java и JavaScript. Это разные вещи.

    JavaScript — объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript[

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

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

    На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке [

    Жорик Клёвыйпарень Мастер (2272) 6 лет назад

    Милая это не программа а язык программирования. Можно скачать учебник с описанием эффектов и возможностью копирования на том же портале azenkur точка ру

    ­BreaD Оракул (91104) 6 лет назад

    Включить надо в инструментах, если опера.

    sdasdasdad Мастер (1987) 6 лет назад

    зачем тебе эта "программа" это язык программирования обычно встраивается во все Интернет браузеры

    Марина Чернышёва Знаток (284) 3 месяца назад

    Урок 1

    Начинающему WEB-дизайнеру.
    Уроки JavaScript.
    Коллекция примеров JavaScript.

    Данное руководство представляет собой введение в JavaScript и некоторые примеры.
    (По книге Стефана Коха "JavaScript - Einfuehrung, Programmierung und Referenz")

    Часть 1. Первые шаги

    Что такое JavaScript
    JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном руководстве Вы увидите, что можно сделать с помощью JavaScript, и даже более того - увидите, как это сделано.
    JavaScript - это не Java!
    Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет излишне показывать Вам все различия между этими языками - так что запомните лишь то, что JavaScript - это не Java.

    Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.
    Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка - HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову 'html' на поисковом сервере Yahoo.

    Размещение JavaScript на HTML-странице

    Код скрипта JavaScript размещается непосредственно на HTML-странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример:

    <html>
    <body>
    <br>
    Это обычный HTML документ.
    <br>
    <script language="JavaScript">
    document.write("А это JavaScript!")
    </script>
    <br>
    Вновь документ HTML.
    </body>
    </html>

    С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция:

    <script language="JavaScript">
    document.write("А это JavaScript!")
    </script>

    Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддерку языка JavaScript. В результате Вы получите 3 строки текста:

    Это обычный HTML документ.
    А это JavaScript!
    Вновь документ HTML.

    Я должен признать, что данный скрипт не столь полезен - то же самое и более просто можно было бы написать на "чистом" языке HTML. Я всего лишь хотел продемонстрировать Вам тэг признака <script>. Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".

    Браузеры без поддержки JavaScript

    А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа. Разумеется, это не входило в наши намерения. На этот случай имеется специальный способ скрыть исходный код скрипта от старых версий браузеров - мы будем использовать для этого тэг комментария из HTML - <! - - >. В результате новый вариант нашего исходного кода будет выглядеть как:

    <html>
    <body>
    <br>
    Это обычный HTML документ.
    <br>
    <script language="JavaScript">
    <!-- скрывает код от старых браузеров

    document.write("А это JavaScript!")

    // -->
    </script>
    <br>
    Вновь документ HTML.
    </body>
    </html>

    В этом случае браузер без поддержки JavaScript будет печатать:

    Это обычный HTML документ.
    Вновь документ HTML.

    А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:

    Это обычный HTML документ.
    document.write("А это JavaScript!")
    Вновь документ HTML.

    Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако тем не менее читатель сможет увидеть этом код посредством пункта меню 'View document source'. Не существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк).

    События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

    <form>
    <input type="button" value="Click me" onClick="alert('Yo')">
    </form>

    Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.

    Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write () мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и.

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

    Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был передан функции JavaScript alert. Такое ограничение накладывается по соображениям безопасности. Такое же выпадающее окно Вы можете создать и с помощью метода prompt(). Однако в этом случае окно будет воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может принять вид системного сообщения и попросить читателя ввести некий пароль. А если текст помещается в выпадающее окно, то тем самым читателю дается понять, что данное окно было создано web-браузером, а не вашей операционной системой. И поскольку данное ограничение наложено по соображениям безопасности, Вы не можете взять и просто так удалить появившееся сообщение.

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

    <html>
    <script language="JavaScript">
    <!-- hide
    document.write("Добро пожаловать на мою страницу!<br>");
    document.write("Это JavaScript!<br>");
    document.write("Добро пожаловать на мою страницу!<br>");
    document.write(Это JavaScript!<br>");
    document.write("Добро пожаловать на мою страницу!<br>");
    document.write("Это JavaScript!<br>");
    // -->
    </script>
    </html>

    И такой скрипт напишет следующий текст

    Добро пожаловать на мою страницу!
    Это JavaScript!
    три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи.

    <html>
    <script language="JavaScript">
    <!-- hide
    function myFunction() <
    document.write("Добро пожаловать на мою страницу!<br>");
    document.write("Это JavaScript!<br>");
    >
    myFunction();
    myFunction();
    myFunction();
    // -->
    </script>
    </html>

    В этом скрипте мы определили некую функцию, состоящую из следующих строк:

    function myFunction() <
    document.write("Добро пожаловать на мою страницу!<br>");
    document.write("Это JavaScript!<br>");
    >

    Все команды скрипта, что находятся внутри фигурных скобок - <> - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции - Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То есть как раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды. Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость - что это такое, мы увидим позже.

    Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

    <html>
    <head>
    <script language="JavaScript">
    <!-- hide
    function calculation() <
    var x= 12;
    var y= 5;
    var result= x + y;
    alert(result);
    >
    // -->
    </script>
    </head>
    <body>
    <form>
    <input type="button" value="Calculate" onClick="calculation()">
    </form>
    </body>
    </html>

    Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

    JavaScript для начинающих – Простые примеры

    JavaScript для начинающих – Простые примеры

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

    Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимаю общие принципы программирования, а также знают основы HTML. Если вы не знаете что такое тег ol и li то вам лучше познакомиться сначала с основами HTML. Также если вы не знаете что это за конструкция if…then…else (это общий вид) то тоже рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для вас максимально полезен.

    И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого, выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.

    А зачем вы спросите организовывать динамические страницы?

    Во-первых. это красиво, удобно и современно.

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

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

    Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например от языка PHP. В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML другими словами тегов, или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.

    Корневой Узел – html

    Дочерний Узел узла HTML - body

    Дочерний Узел узла body – p

    Дочерний Узел узла p - сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).

    Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.

    По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript это один язык программирования, а Java это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время когда разрабатывали JavaScript был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Так как JavaScript и JAVA это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.

    Ну, хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать "Добавить в список" и у вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.

    1. Первоя строка
    2. Вторая строка
    3. Третья строка

    Добавить в список