Yvision.kz
kk
Разное
Разное
399 773 постов41 подписчиков
Всяко-разно
0
11:26, 28 января 2011

Основы работы с javascript'ом и библиотекой Jquery

Hello малейкум! в статейке предлагаю рассмотреть основные приему работы с javascript. Какие еще необходимы знания для работы с яваскриптом? Естественно это html, также хорошо бы знать php(в большинстве случаев без знания php яваскрипт просто бесполезен), ну и css тоже не помешает. Для чего я буду использовать яваскрипт?

  • Во - первых для динамической обработки различной информации, отправленной пользователем на сервер. К примеру: это формы регистрации, формы добавления комментариев, также можно сделать обмен сообщениями для пользователей или чат(как на киви, к примеру).
  • Во - вторых для создания удобного интерфейса. Это постраничные навигации, фотогалереи, выпадающие списки меню и т.д.

Есть еще варианты применения яваскрипта, но нам пока хватит...

И так, к делу...

Для написания скрипта в веб документе будь то html или php нужно воспользоваться такими тегами:

  1. если вы будете писать яваскрипт в этом же документе:
    1. <script type="text/javascript">
    2. //здесь яваскрипт
    3. </script>
    лучше всего писать яваскрипт до закрытия тега </head>
  2. если вы будет подклучать яваскрипт из другого файла(это наиболее практичный метод использования яваскрипта!):
    1. <script type="text/javascript" src="здесь путь к файлу.js"></script>
    мой совет: используйте второй вариант, пишите яваскрипты в дургих файлах это очень сильно облегчает работу...

И так, допостим файл мы содали, поключили, но что же в нем писать? В яваскрипте, как и в любом языке программирования(ну я имею ввиду наиболее распространенные языки), существует два варианта программирования:

  1. Можно писать линейные алгоритмы, которые выполнятся как только будет открыт документ в браузере и для повторного их выполнения нужно будет перезагрузить страницу...Вот пример(можете создать html файл и проверить):
    1. <script type="text/javascript">
    2. alert("Hello your vision!");
    3. </script>
  2. Так же существует так называемый(!мной) "событийный" метод программирования, здесь скрипты выполняются только после наступления какого то события(к примеру: полная загрузка страницы, щелчок по кнопке, наведение кнопки мыши). Для данного случая тяжело быстро написать хороший пример, поэтому покажу простой:
    1. <script type="text/javascript">
    2. $(document).ready(function(){
    3. alert("привет!");
    4. }
    5. </script>
    немного поясню, для проверки этого примера необходима яваскрипт библиотека jquery( скачать можно здесь), в этом примеренадпись привет появится ТОЛЬКо после загрузки страницы(readly - это событие, которое происходит когда полностью загржен документ).

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

Теперь немного теории по jqeury. Как вообще работает эта библиотека? Функции данной библиотеки служат для выбора элементов страницы( селекторов ) и описания функций которые будут происхотить если наступит определенное(!нами) событие....ух! как сказал, аж самому страшно стало....Приведу пример:В начале документа подключаем библиотеку jqeury, а потом пишем:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('a').click(function(){
  4. alert("привет!");}
  5. );
  6.  
  7. }
  8. </script>

а после тега body вставим ссылочку:<a href='javascript'>показать окошко</a>....вот такой простой пример, но по такому принципу работает множество интересных прибамбасов на сайта( взять тот же киви с его постраничной навигацией, щелкаешь по ссылки - появляется следующая страница и т.д.)

В общем виде выборка элементов и описание их действий записывется так:

$('<элемент который нужно выбрать>').<событие Х, которое должно произойти что бы выполнились действия ХХ>(function(){<дейтсвия ХХ, которые произойдут если произойдет событие Х>});, в принципе, все просто, но очень важно следить за скобками. Если где открыл, а закрыть забыл то скрипт не будет работать!!!

Не знаю стоит ли, но все же выложу...

Ссылка на файл с описанием использования всяких вариантов выборки элементов страницы, также показаны некоторые методы работы с ними - вот файл (script.js)

Ну на этом пока хватит, разберайтесь, комментируйте, спрашивайте....Удачи!

Программист самоучка

0
533
2