Немного основных понятий JavaScript.. Тех, кто чувствует себя в яваскриптах как рыба в воде, просьба не опускать этот небольшой сбор основ яваскриптов. Я понимаю, что много людей на форуме это всё знают, но ведь есть и те, кто хочет что то почерпнуть новое. Вот этот сбор для них. В общем по стандартному шаблону "для новичков". Во первых, не нужно путать JavaScript и Java — это две большие разницы! Java-это мощный платформо-независимый язык программирования высокого уровня, который имеет широкие возможности для использования в Интернете из-за своей функциональности, простоты и безопасности. Но он используется в виде откомпилированных приложений-апплетов либо Java веб-служб, в отличии от JavaScript. JavaScript-это скриптовый язык, то есть язык программирования, в котором нет системных функций, органиченный доступ к файловой системе (в целях безопасности), и который не компилируется, а обрабатывается специальным интерпретатором, встроенным в каждый совремменный броузер (правда, реализация его не везде одинакова, что приводит к большой головной боли веб-мастеров, но об этом позже)). Этот язык был разработан фирмой Netscape, следовательно, первым JavaScript стал поддерживать именно ихний Navigator. Потом к нему присоединился также и микрософтовский "осёл", в реализацию объектной модели которого его создатели, конечно же, добавили несколько своих собственных фич. JavaScript является очень удобным средством для реализации функциональных и удобных веб-страниц с обратной связью, реагирующих на действия юзверя. Можно создавать симпатичные менюшки с "переворачивающимися" пунктами-картинками (вы наверняка видели такие на каком-нибуть сайте), вставлять на страницу такие полезные елементы, как часы, календарь, даже калькулятор (пригодится на каком-нибуть финансовом сайте, или инет-магазине). В основе функциональности JavaScript лежит так называемая DOM (от Document Object Model, объектная модель документа). Эта модель в объектном виде хранит целую кучу свойств веб-страницы и окна броузера. Это, например, такие свойства, как цвет фона страницы, адрес документа, в отдельных коллекциях (массивах) хранятся все рисунки (images) и якоря-ссылки(anchors) страницы. Изменить либо ещё как-то повлиять на эти свойства можно с помощью методов (или функций) — например: Code: document.write("Hello? World!!!"); Здесь использована функция-метод write объекта document для вывода сообщения на страницу. Это только простейший пример использования методов. Метод — это член какого-либо объекта, который выполняет какие либо действия с объектом, подобно функциям. Особое отношение в JavaScript к переменным — в этом языке нет строгого контроля типов. При объявлении переменной выполняющая среда автоматически определяет её тип по инициализирующему значению. То есть, если переменной присваивается численное значение, то тип переменной определяется, как int (целочисленное значение) либо float (дробное с плавающей запятой). Следовательно... В JavaScript нет строгой типизации переменных. Несмотря на эти упрощения, на JavaScript можно писать довольно функциональные программы, которые могут упростить посетителям работу с вашим сайтом. Теперь несколько учебных примеров. Обработка событий В языке JavaScript есть такой способ написания программ, как обработка событий, то есть выполнение каких-либо функций в ответ на событие. Событие (event) — генерируется в ответ на некоторые действия пользователя либо среды выполнения (окна броузера, состояния документа) Используя этот прием, можно, например, выделять активные элементы на странице при помощи изменения цвета элемента: Code: function change_color(element, color) { // вызывается в ответ на наведение курсора мыши: // <div onmouseover="change_color(this, 'red');" // onmouseout="change_color(this, 'black');"> // ........ // </div> element.style.color = color; } Но не обязательно менять именно цвет. JavaScript позволяет делать ещё очень многое с элементами документа. И ещё на пример: Code: <span style="width: 200px; border: 1px solid black; text-align: right" onmouseover="this.innerText='ЛОЛ';" onmouseout="this.innerText='А ТЕПЕРЬ ЕЩЁ РАЗ!';"> НАВЕДИ СЮДА! </span> Сделать скрин небыло возможности, так что просто попробуйте вставить этот код в тело страницы. И делается это всё с помощью свойства innerText, которое содержит текст из элемента. Вот с помощью таких простых средств и реализуются те многочисленные супер- (или не очень) эффекты, которые вы ежедневно можете созерцать на сотнях и тысячах сайтов. Вот и всё, конечно таких вот "сборов сведений" в сети пруд пруди, но если кто то узнал что то новое, то это значит что я не зря это всё писал
Выше сказанное может только подтолкнуть к углубленному изучению, уж если писать, то целый учебник. Молодец. Держи знаменитый "+"
Продолжение Сейчас я вас ознакомлю с использованием методов confirm() & prompt().. Метод confirm в JavaScript Команда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку "Отмена" в диалоговое окно. И то, и другое - методы. Одна команда сама по себе многого не дает. Нет никакой разницы, что вы выбираете - "ОК" или "ОТМЕНА". Но стоит добавить функции IF (если) и ELSE (иначе), и готовы отличные эффекты. Code: <SCRIPT LANGUAGE="javascript"> confirm("Уверены, что хотите войти?") </SCRIPT> Знакомо? Пора бы уже. То же самое, что и alert, кроме слова confirm. Вот основной пример того, что делает скрипт. Как видите, немного. Но вот вам та же команда с некоторыми добавлениями: Code: <SCRIPT LANGUAGE="javascript"> if (confirm("Вам туда надо?")) { parent.location='отправляете юзверя на какой либо URL'; alert("Ну тогда идите"); } else { alert("Сиди тогда тут"); } </SCRIPT> У вас есть выбор Во-первых, скрипт говорит: if (confirm("Вам туда надо?") ); Это значит Если (Здесь ваш шанс сделать выбор) В нашем случае сonfirm предлагает альтернативу: <OK> и <Отмена>. Можно сказать, Да и Нет. Обратите внимание на скобки. После команды IF всегда идут скобки, но, как известно, команды сonfirm тоже требует скобок. Следовательно, берем две пары скобок, одна внутри другой. Сразу же после этого идут команды, выполняемые при каждом варианте ответа. Обратите внимание на фигурные скобки{}. Ведь в действительности это функции. Первая из них показывает, что должно произойти, если пользователь выберет ОК (или Да). {parent.location='опять же посылаете куда либо юзверя'; alert("Ну тогда идите");} parent.location означает обычную ссылку. Дальше идет обыкновенная команда alert. PS. после каждой команды в хтмл документе, не забывайте ставить ; А что если я выберу отмену? Мы уже знаем, что если выбрать ОК, запускается функция IF (если). Отмена - другой выбор. Видите, сразу после фигурной скобки идет команда ELSE (иначе), как бы <если нет>. И тогда следующий текст... else { alert("Cиди тогда тут"); } ...означает: если нет, тогда вызвать окно и не менять страницу. Все это вместе и дает пользователю возможность выбора: входить или не входить. Вот и всё что представляет собой простой метод confirm... Про alert писать не буду, потому что не представляю, что там может быть непонятного) ===================== Использование метода prompt() Метод prompt() несколько отличается от методов alert() и confirm().. Он дает возможность пользователю вписать собственный ответ на вопрос, вместо того чтобы просто выводить на экран информацию (как в методе alert()) или делать выбор между кнопками OK и Cancel (как в методе confirm()). Пример. Метод prompt() вводят в сценарий так же, как и методы "алерт" и "конфирм". Сначала добавьте prompt() в блок SCRIPT: Code: <script language="JavaScript">prompt()</script> С этого момента ввод метода prompt()начинает отличаться от ввода методов "алерт" и "конфирм" (в лом регистр переключать+)), поскольку в круглые скобки требуется добавить две фразы. Первая из них - сообщение, которое должно быть выведено на экран Делается это так же, как и в методах "алерт" и "конфирм". Текст в кавычках помещается внутри круглых скобок: Code: <script language="JavaScript"> prompt("Как вас зовут?") </script> Сохраните вашу страницу и просмотрите ее в браузере. Обратите внимание на появившийся запрос об имени пользователя. Вы можете ввести имя и щелкнуть по одной из кнопок выбора ОК или CANCEL. Обратите внимание, появится слово undefined (не определено) в поле ввода. Это особенность "осла". В браузере Netscape поле ввода остается пустым В настоящий момент еще ничего происходит, что бы вы ни делали, но к концу этого обзора вы сумеете заставить программу работать. Следующая единица ввода - это текст по умолчанию, который должен появиться в соответствующем поле. Добавить его очень просто, а заодно это позволит избавиться от появления undefined в "ослике". После первой фразы в круглых скобках поставьте запятую за пределами кавычек, а после нее впишите вторую фразу (тоже в кавычках). Пишем "Введите здесь ваше имя" Это делается таким образом: Code: <script language="JavaScript"> prompt("Как вас зовут?", "Введите здесь ваше имя") </script> Сохраните вашу страницу и еще раз обновите вид в браузере. Заметьте, что поле ввода больше не является пустым (Netscape), а содержит текст, указанный во второй паре кавычек И в "осле" теперь на месте ввода пишет: "Введите ваше имя" И при вводе какого либо имени (не обязательно имени+)) в окне браузера оно успешно отобразится) Теперь вы уже знаете 2 немаловажных метода в JavaScript: confirm() & prompt().. Пишу я понемногу, т.к. тем кто только начал изучать JavaScript, будет легче всё это переварить) В следующий раз, я выложу основу синтаксиса JavaScript.. Ждите
Вот самые простые часики... На их написание ушли 1-2 минуты =) Code: <script> function myTime(){ x = new Date() // создаем обьект даты Hours = x.getHours() // Метод getHours() Minutes = x.getMinutes() // Метод getMinutes() Seconds = x.getSeconds() // Метод getSeconds() if (Minutes < 10) Minutes = "0"+Minutes // делаем красивее Минуты if (Seconds < 10) Seconds = "0"+Seconds // делаем красивее секунды document.Form_Name.text.value = Hours+":"+Minutes+":"+Seconds; // выводи результат } setInterval("myTime()", 1000) // вызываем функцию myTime() каждую секунду </script> <form name="Form_Name"> <input type=text name="text"> </form>
Продолжение 2 Итак, как обещал выкладываю основу синтаксиса языка JavaScript... Написал в этот раз я немного) Начали: Синтаксис JavaScript и Java сделан по образцу C и C++. Отметим основные правила: Чувствительность к регистру Все ключевые слова пишутся в нижнем регистре. Все переменные и названия функций пишутся точно так же, как и были определены (например, переменные Str и str являются разными переменными)) Пробелы, табуляция и перевод строки Эти символы игнорируются в JavaScript, так что можно использовать их для форматирования кода с тем, чтобы его было удобно читать. Символ точка с запятой (. Все операторы должны быть разделены этим символом. Если оператор завершается переводом строки, то точку с запятой можно опустить. При этом нужно следить за тем, чтобы при разрыве строки одного оператора, новая строка не начиналась бы с самостоятельного оператора. Комментарии. JavaScript игнорирует любой текст расположенный между символами /* и */. Также игнорируется текст начинающийся символами // и заканчивающийся концом строки. Индентификаторы. Индентификаторами являются имена переменных, функций, а также меток. Индентификаторы образуются из любого количества букв ASCII, подчеркивания (_) и символа доллара ($). Первым символом не может быть цифра, а в версии JavaScript 1.0 не допускается использования и символа $. Ключевые слова. Ключевые слова не могут использоваться в качестве индетификаторов. Ключевыми словами являются: break, case, continue, default, delete, do, else, export, false, for, function, if, import, in, new, null, return, switch, this, true, typeof, with. Вот и всё) Скоро добавлю ещё что нибудь важное.. Нет) Я учить что то делать не буду) Делать вы будите сами, если захотите.. Я только могу выложить основы, а дальше все смогут пойти сами) Зайди на вувеб, там этих часов горами..)
раскладку а вообще данная инфа есть в более удобоваримом виде на первых страницах любого учебника по яваскрипт за 25р. вторая часть не понравилась. слишком мало инфы и слишком муторно изложено. воды много. у меня вопрос - я как то пытался изучить яваскрипт, синтаксис там в принципе понятный, но я так и не научился на нём кодить потому что в двух купленных книжках не было простого перечисления всех объектов, их свойств и методов. так и приходится обо всём узнавать по крупицам из подобных статей в инете. из первой статьи sL(IP)--!(P.i.N.) например узнал про innerText дайте плз ссылку на список всех объектов, свойств и методов яваскрипта.
Лоханулся я тут немного) Не каждый себе будет покупать книгу, и не каждому это охото.. А тут всё выкладываю по чуть чуть.. Легче будет переваривать
Продолжение 3 Всем привет) Сегодня я вам расскажу ещё о некоторых методах в яваскриптах.. Но т.к. в ява скриптах их море, я уделю снимание самым основным которые могут пригодится вам.. Итак, начали пробежку) PS Пробежка, т.к. пишу я кратко о кажом методе. Метод big Вывод строки крупным шрифтом как в теге <BIG>. Вызывается через: Code: stringName.big(); Пример использования: Code: str = "Это крупный текст"; document.writeln(str.big() + "... а это мелкий"); В результате получим: Это крупный текст...а это мелкий Mетод back Результат аналогичен кнопке Back браузера. Вызывается через history.back(); (аналогично использованию метода history.go(-1). Пример: history.back(); history.go(-1); При *history.go(-X);* X=произвольное значение в минусе.. Метод clear Очищает окно браузера. Вызывается через Code: document.clear(); Метод close Закрытие текущего потока данных или закрытие окна браузера. Вызывается через Code: document.close(); window.close(); [windowName.]close(); Тут уже на ваш выбор, как прописать) Вы наверно заметили, что язык ява скриптов очень гибок, и очень придерживается одного варианта выполнения скрипта.. Дальше.. Метод anchor Выводит строку на экран и делает ее якорем. textString.anchor(anchorName); Будучи примененным вместе с методами write или writeln, метод anchor создает в текущем документе якорь, где textString - это строка, которую пользователь видит на экране, a anchorName имеет значение атрибута NAME тега HTML <ANCHOR>. Пример изпользования: Code: anchorStr = "Web"; document.writeln(anchorStr.anchor("Web")); В результате получим: Web Для того, чтобы перейти на созданный скриптом якорь, создаем ссылку <a href="#web">Перейти</a> PS Метод редко изпользуемый на практике Метод bold Вывод строки жирным шрифтом как в теге <bold> Вызывается через: stringName.bold(); Пример использования: Code: var str = "Это жирный текст"; document.writeln(str.bold() + "... а это нормальный"); В результате получим:[/B] Это жирный текст ...а это нормальный ============== Вот вам на "закуску" написал скриптик, который меняет в статусбаре (Statusbar) текст с описаний действий браузера на ваш (любой) текст.. Вот он: Code: <script language="JavaScript"> <!-- setInterval("x()",5); function x(){window.status="Ваш текст:) "} function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_jumpMenuGo(selName,targ,restore){ //v3.0 var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore); } //--> </script> Если скрипт не работает, просьба отписаться) Ну на сегодня всё, через пару дней будет ещё что нибудь свеженькое)
Помоемому скрипт не по теме... Да еще и сложный очень! Т.к. операторы присвоения и обьекты Object() мы еще не проходили, да и обьект String() для форматирования текста тоже... =)
Может и не по теме.. Я просто его выложил, может кому нибудь пригодится) Понравилась мне эта фраза=)))) Прям школа/инст=))
Продолжение 4 Сегодня я вам расскажу опять о нескольких объектах в JS.. Но на этот раз описанные мною объекты будут сложнее по своему написанию и по составу) (код).. Начнём.. Объект button Кнопка - это область окна, которая реагирует на щелчки мыши и может активизировать оператор или функцию языка JavaScript при помощи атрибута события onClick. Кнопки являются свойствами объекта form и должны быть заключены в теги <form> . . . </form> языка HTML. Синтаксис: <input type="button" name="buttonName" value="buttonText" [onClick="handlerText"]> Атрибут name задает имя кнопки и в языке JS ему соответствует свойство name нового объекта buttun. Атрибут value определяет надпись на кнопке, котороой соответствует свойство value. К свойствам и методам объекта button можно обратиться одним из способов: -- buttonName.propertyName -- buttonName.methodName (parameters) -- formName.elements.propertyName -- formName.elements.methodName (parameters) Здесь buttonName - значение атрибута name, а formName - либо значение атрибута name объекта form, либо элемент массива forms. Переменная i является индексом, используемым для обращения к отдельному элементу массива, в данном случае к элементу button. [size=+1]Свойства [/size] Свойства name и value объекта button соответствует атрибутам name и value HTML-тега <input>. Обратившись к значениям этих свойств, можно вывести полный список кнопок, имеющихся в текущем документе. Свойство type объекта button всегда имеет значение "button". [size=+1]Методы и обработчики событий [/size] Объект button имеет метод click(). Обработчик событий onClick позволяет выполнить оператор или вызвать функцию языка JavaScript при щелчке мыши на кнопке, которой соответствует в программе определенный объект button. [size=+1]Пример[/size] Приведем простой пример, например, выведем текущую дату и время посредством нажатия кнопки. Будем использовать событие onClick для вызова метода alert() и конструктора Date() Пример схематичный, объект должен быть определен Code: <form> <input type="button" value="Date and Time" onClick='alert(Date())'> </form> Объект checkbox Контрольный переключатель - это кнопка(флажок), которую можно установить в одно из двух состояний: включено или выключено. Объекты checkbox являются свойствами объекта form и должны быть помещены в теги <form> . . . </form>. Простой контрольный переключатель: Синтаксис: <input name="checkboxName" type="checkbox" value="checkboxValue" [checked] [onClick="handlerText"]>textToDisplay где атрибут name является именем объекта checkbox. Ему соответствует свойство name объекта языка JavaScript. Атрибут value определяет значение, которое передается серверу при пересылки значений элементов формы, если контрольный переключатель включен. Необязательный атрибут checked указывает, что контрольный переключатель должен быть включен по умолчанию. Если этот атрибут задан, свойство defaultChecked имеет значение true. При помощи свойства checked можно определить, включен ли контрольный переключатель. Текст, отображаемый рядом с контрольным переключателем, задается строкой textToDisplay. К объекту checkbox можно обращаться одним из способов: checkboxName.propertyName checkboxName.methodName (parameters) formName.elements.propertyName formName.elements.methodName (parameters) где checkboxName - значение атрибута name объекта checkbox, а formName - имя объекта form или формы, которой принадлежит данный контрольный переключатель. Другими словами, к форме можно обращаться как к элементу массива forms, например forms[0] - для обращения к первой форме документа, либо по имени объекта form, если оно определено в атрибуте name HTML-тега <form>. К любому элементу формы можно обратиться так же, как к элементу массива elements, который является свойством объекта form. В этом случае для обращения к определенному контрольному переключателю следует использовать его порядковый номер (i) в массиве всех элементов формы. [size=+1]Свойства [/size] Если контрольный переключатель включен, свойство checked имеет значение true. Когда в теге <input> используется атрибут checked, например <input checked type=checkbox>, свойсту defaultChecked также присваивается значение true. Свойство name соответствует атрибуту name тега <input name= . . . type=checkbox>, а свойство value - атрибуту value тега <input>. (оно и правильно: ключевые слова и должны соответствовать чтобы путаницы небыло). Свойство type объекта checkbox всегда содержит значение "checkbox". [size=+1]Методы и обработчики событий[/size] Метод Click() может использоваться с объектом checkbox, мне не приходилось его использовать, но есть много замечаний в адрес этого метода, - в некоторых браузерах он должным образом не работает. Но тем не менее он имеется. Для объекта checkbox предусмотрен только один обработчик - onClick(). Всё, на сегодня закончим.. На полное описание этих двух объектов потратил кучу времени, так что следующие описания добавлю дня через 3-4..
Читал, читал, не понял в чём фишка. Зачем тут учебник по яваскрипт публиковать? Его же так неудобно воспринимать вперемешку с какими-то обсуждениями. Кто тут яваскрипт изучать будет? Ты уверен, что не с этого учебника скопировал? : http://www.chamber.md/E-bisiness/fpwebteh/jsbig/tm041.htm Кстати, ты автора учебника не назвал. Или ты - автор? А первый пост темы скопипастен отсюда: http://mysitez.km.ua/Programming/?javabasic.art/print 2002 год. Почему нет ссылки на автора? А если и тут автор ты, то почему говоришь, что это сейчас писал?
Полностью согласен. Ожидал от этой статьи совсем иного направления, учитывая твой "пиар" и колличество плюсов которое ты за нее получил. Думаю многие кто "оценил" ее просто не прочитали, а как направление "Основы JavaScript" очень даже похвально. Зачем на форуме по сетевой безопасности примеры простейшей верстки сайтов? Тематика разная ... Но это мелочи, читая статью, думал что это влюбом случае +, старается, пишет ... но увидя пост syntacsis'a, хочется услышать твои объяснения по поводу автора данной статьи (тем более ты несомненно выставил её как собственный труд и даже обучение) ... ____ Дабы не флудить, отредактирую свой предыдущий пост. Думаю все-таки ты не только первый и последний пост скопипастил. Из принципа решил проверить и на обум в гугле поискал "твой скрипт", который ты на "закуску" написал, вуоля http://exclusiv.ucoz.ru/index/0-4 Не хорошо ... А пиар ...(ты видимо не знаешь что означает это слово) я имел ввиду рекламу (твою) этой статьи (например в подписи)
Да, скажу без всяких отмаз, это баян) (1-ый и последний посты)...)) Я ужастный копипастер..) 2Мисс Марпл, ладно, спалил ты меня, хы 5 баллов тебе) Но ответь мне. Зачем было поднимать тему 3-х месячной давности? Ладно эта тема свежая) Или ты надеялся, что после раскрытия этого ужастного преступения тебе дадут особый статус? Например грин или супермодер?) Хех) Нет, у меня был другой источник) Да, уверен, не с этого) Я не автор, я жуткий копипастер.. 2AciD_FreaK, "пиар" тут не всё, только 1-ый и последний посты.. Здесь есть мой труд, но как все уже заметили не всё.. ================ Теперь ко всем: Я буду продолжать писать JS, копипастить уже не буду т.к. тут Мисс Марпл обитает) Причины моего копипаста? Опять отвечу честно, 1-ый пост копипастнул для того что бы тему заемтили.. А последний из за того что не знал про что написать.. Хотя я уже придумал о чём напишу в следующий раз.. Если кто то ещё читать будет)) Ну вроде всё, если есть претензии лично ко мне, прошу в ПМ.. Тут флудить не надо)
Это очень просто. Я не заметил даты той темы. Ты ее скопипастил у хорошего автора. Если надумаешь писать статьи по php, тоже обязательно обрати внимание на работы Котерова. ))) А насчёт статуса… Не знаю, поверишь или нет, но меня меньше всего в этой жизни интересует статус ника syntacsis на форуме. Я на своих то форумах постю от обычного юзера. И тебе советую не заморачиваться с виртуальными статусами. "Грины" хороши те, которые в кошельке хрустят, а "супермодером" надо в отношениях с девками быть. ))) Читай Котерова и Античат для себя, а не для раздувания статуса. Это просто дружеский совет, так только выиграешь и многому научишься. Ничего личного, просьба без обид. Мисс Марпл даже прикольно, прикольней чем syntacsis, так что респект. Забей и не парься. И не копипасть! )))
