Useful blog: javascript

Показаны сообщения с ярлыком javascript. Показать все сообщения

суббота, 28 мая 2011 г.

Javascript - расшифровка htmlEntities

function decodeHtml(decoded){
var ta = document.createElement("textarea");
ta.innerHTML = decoded;
return ta.value;
}

четверг, 18 февраля 2010 г.

JQuery - изучение. Часть 2. Пробы.

Продолжение этой статьи.
Еще один пример - отмена действий по умолчанию.
Теперь мы укажем в head вместо файла jquery.js, лежащего у нас на компьютере, файлик, лежащий на сайте jquery на Гугловском CDN. Таким образом, мы сможем понизить нагрузку на наш сервер, засчет того, что библиотека jquery будет запрашиваться не с нашего сервера, а с серверов гугла:)
Приведем страницу к следующему виду:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(document).ready(function(){
   $("a").click(function(event){
   alert("As you can see, the link no longer took you to jquery.com");
   event.preventDefault();
   });
   });

   </script>
</head>
<body>
   <a href="http://jquery.com/">jQuery</a>
</body>
</html>

Строчка "event.preventDefault();" означает предотвращение дефолтного действия по событию. В данном случае это значит, что при клике по ссылке не будет осуществлен переход по ней, который является действием по умолчанию для события "клик по ссылке".
Пример - добавление и забирание CSS-класса.
На всякий случай, тем, кто не знает, что такое CSS - предлагаю ознакомиться с этой статьей в Википедии.
Добавим в head нашей страницы следующие строки:

<style type="text/css">
a.test { font-weight: bold; }
</style>

Они описывают класс ссылок test. Ссылки, принадлежащие этому классу, будут написаны жирным шрифтом.
Далее, в нашу функцию, вызываемую при нажатии на ссылку, добавляем следующую строчку:

$("a").addClass("test");

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

$(this).hide("slow");

И все, мы видим, как ссылка постепенно исчезает после клика.
На этом на сегодня всё, продолжим разбираться с JQuery в следующих статьях:)

среда, 17 февраля 2010 г.

JQuery - изучение. Часть 1. Что это за зверь?

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

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

То есть, говоря простыми словами, JQuery это библиотека на языке JavaScript, которая упрощает разработку веб-страничек (в том числе обработку событий, добавление анимации и AJAX-взаимодействий для ускорения web-разработки). Как говорят разработчики, JQuery должна полностью изменить способ, которым мы пишем JavaScript-код.
С чего же начать изучение этого чуда? Я решил, что лучше всего для этого подходит документация и примеры с официального сайта.

Скачиваем JQuery
С начала, разумеется, надо скачать JQuery-библиотеку. В разделе "Скачиваем JQuery" приведены ссылки на различные релизы. Лучше всего, конечно, скачать самый последний - JQuery 1.4.1. Скачиваем его и кладем в нужную папочку, у меня это "scripts":

wget http://code.jquery.com/jquery-1.4.js

Отлично, теперь библиотека JQuery установлена на вашем компьютере. Остается только использовать. Для этого хорошо бы понять, как она работает. На сайте JQuery этому посвящена отдельная страница.
Итак, попробуем следовать в точности их рекомендациям.
Создаем страничку со следующим кодом:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>

<script type="text/javascript">

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

В строке <script type="text/javascript" src="jqery-1.4.js"></script>" "jquery-1.4.js" необходимо заменить на путь к скачанному файлику jquery-1.4.js, в моем случае - это "script/jquery.js". Если у вас этот файлик лежит в той же директории, что и файл странички, который мы только что создали, то ничего менять не надо:)
Запуск функций при загрузке документа:
Нам предлагают рассмотреть самый первый пример JQuery:
Когда JavaScript программисты хотят, чтоб какое-либо событие выполнилось после того, как страница загрузится, они обычно пользуются следующим способом:
window.onload=function(){alert('welcome!');}
Внутри фигурных скобок тот код, который исполнится при срабатывании события onload объекта window. Он начинает выполняться уже тогда, когда еще не загрузились все картинки. В JQuery есть такое понятие, как "событие готовность", которое выполняется, когда документ полностью готов к манипулированию им.
Добавим обработчик к событию нажатия на ссылку, ведущую на сайт JQuery:
для этого нам надо в элемент между тегами <script type="text/javascript"> и </script> вписать следующее:

   $(document).ready(function(){
   $("a").click(function(event){
   alert("Спасибо за визит!");
   });
   });

Открываем страницу, кликаем по ссылке и видим, что перед переходом на другой сайт выдает сообщение "Спасибо за визит!".
Словами это можно описать так:

Когда документ полностью загрузился
при нажатии на a
выдать сообщение

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

четверг, 28 января 2010 г.

Они, любимые, или изменение шрифта с помощью javascript

Решил сделать для себя успокаивательную страничку. Чтобы в любое время тяжелого рабочего дня можно было бы чуть чуть отдохнуть душой:)
В результате получилось следующее:

(.) (.)

Чтобы увидеть, как это реализовано, вы можете посмотреть исходный код этой страницы:) Здесь же я вкратце опишу принцип. Во-первых, задаем 2 функции javascript, increaseFontSize() и decreaseFontSize(), для увеличения и уменьшения размера шрифта. Они действуют так:

var p = document.getElementsByTagName('shticka');

После этого в p у нас получается массив всех тегов типа "shticka". Конечно, вы можете получать список тегов по классу, или отдельно каждый тег по его id. Во-вторых, для каждого элемента из p находим размер шрифта и помещаем его в переменную s:

var s = parseInt(p[i].style.fontSize.replace("px",""));

После чего мы увеличиваем ее, например, на 4:

s+=4;

В-третьих, заменяем размер шрифта на увеличенное s:

p[i].style.fontSize = s+"px";

Вот и все готово:) Можно наслаждаться))

четверг, 21 января 2010 г.

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

Представим, что вы хотите давать пользователям ссылку на скачивание файла с вашего сайта с какой-то задержкой, например, 30 секунд. Для этого нам понадобится написать всего одну строку на javascript и несколько на html:)

Итак, во-первых, выделим область на своем сайте, где будет выдаваться ссылка. Сделаем это с помощью HTML-тега 'div':

<div id='link'></div>

где link - это уникальный идентификатор этого тега, по которому будем обращаться к нему с помощью javascript. Далее мы пишем сам код javascript, заключая его в HTML тег 'script' :

<script>
setTimeout("document.getElementById('link').innerHTML='<a href='bla-bla.txt'>Ссылка</a>';",30000);
</script>

Что это означает - setTimout - это javascript-функция, выполняющая команды, переданные ей в первом аргументе по истечении времени, заданного во втором аргументе (в миллисекундах). document.getElementById('link') - обращаемся к элементу документа с идентификатором, равным 'link'. Подробнее про использование getElementById вы можете почитать здесь и тут. innerHTML - переменная элемента, отвечающая за все то, что находится внутри тега. То есть в итоге, после выполнения скрипта, наш тег будет выглядеть так:

<div id='link'><a href='bla-bla.txt'>Ссылка</a></div>

Вот и всё:)

четверг, 12 ноября 2009 г.

JavaScript - GetElementById - что это такое, и как это кушать?

GetElementById - это метод объекта document в языке JavaScript. Он предназначен для того, чтобы возвращать ссылку на какой-то элемент (element) страницы по его id.

Например, мы хотим, чтобы пользователю в определенном месте страницы выводилось время его захода на нее. Будем выводить это время в определенном теге <div> с id 'now_time':

<div id='now_time'></div>

Теперь, чтобы обратиться к этому элементу, мы должны использовать метод GetElementById вот так:

<script type="text/javascript">

//Присваиваем переменной time_element ссылку на наш div:

var time_element = document.getElementById('now_time')

//Получаем в переменную time Значение времени

var time = new Date()

var hours = time.getHours()

var minutes = time.getMinutes()

var seconds = time.getSeconds()

if (seconds < 10) seconds = "0" + seconds

if (minutes < 10) minutes = "0" + minutes

var time = hours + ":" + minutes + ":" + second

//Выводим нашу переменную в содержимом нашего тега div,

//используя метод InnerHTML

time_element.innerHTML = time

</script>

Вот и все, ничего сложного:)
Разумеется, метод innerHTML я привел только для примера. Вообще говоря, с этим элементом теперь можно проделывать все, что угодно. Подробнее о элементах, их свойствах и методах можно почитать вот здесь.

понедельник, 9 ноября 2009 г.

Как создавать и использовать функции (function) в Javascript

Приведу пример создания Javascript функции, которая по щелчку на определенной области будет изменять эту самую область.
Итак, выглядит все это дело следующим образом:
1) Реализация функции

<script type="text/javascript">

function my_function(){

var elementik=document.getElementById('output')

elementik.innerHTML='aaaa';

};

</script>

2) Кусок кода HTML, тот самый элемент, который у нас будет изменяться:

<div id="output" onclick="my_function()">

Here we will see answer..

</div>

Собственно, это все.

Теперь разберем по порядку.

1) Тегом <script></script> мы объявляем область, в которой содержится код javascript. function my_function(){} - Этим мы говорим о том, что объявляем функцию с именем my_function, запускающуюся без параметров (об этом свидетельствуют пустые круглые скобки. В фигурных же скобках заключены операторы функции. Первой строчкой мы получаем элемент с id = 'output', второй - заменяем содержимое этого элемента на 'aaaa'.

2) Мы описываем блок с id='output' и говорим, что при клике мышкой по нему должна выполняться функция my_function.

Подробнее все возможности функций javascript, DOMdocument и HTML постараюсь описать в следующих постах.

воскресенье, 18 октября 2009 г.

Описание всего, что можно делать с помощью XMLHTTPRequest

XMLHTTPRequest.ru

Все методы, использование, создание запросов и т.п.
Все излагается простым и понятным языком, очень понравился сайт.

суббота, 17 октября 2009 г.

Использование setInterval и JavaScript

setInterval - это такая прикольная фишка, в яваскрипте являющая собой аналог крона:)
Лично для меня она важна тем, что позволяет обновлять страничку саму по себе через определенное время.
То есть, например, есть у нас функция jfl() (сокращение от just 4 lulz:)), и эта функция, допустим, берет данные из базы через xmlhttprequest и выводит их в какой-нибудь <div>.
Так вот, пишем следующее:

setInterval(jfl,1000)

и получаем обновление наших данных раз в секунду. Очень удобно и симпатично:)

О том, как нажатием клавиш переходить на сайт и выполнять другие действия

1) С помощью следующей конструкции осуществляется переход на ya.ru при нажатии клавиши s:

onkeypress="if (String.fromCharCode(event.keyCode)=='s') window.location.href='http://ya.ru'"

2) А вот этой конструкцией можно узнать код нажатой клавиши:

onkeydown="alert(event.keyCode)"

Очевидно, что этим способом на клавишу можно навесить совершенно любую команду и функцию javascript, что доставляет:)

Стандарт DOM2-HTML

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

Просто пример использования javascript

Просто калькуляторчик:)

Example:

  <head>
    <script type="text/javascript">
     function compute(f) {
        if (confirm("Are you sure?"))
          f.result.value = eval(f.expr.value)
        else
          alert("Please come back again.")
      }
     </script>
  </head>
  <body>
    <strong>Example:</strong>
    <form>
      Enter an expression:
      <input type="text" name="expr" size="10" value="2+2" /><br/>
      <input type="button" value="Calculate" onClick="compute(this.form)" /><br/>
      Result:
      <input type="text" name="result" size="10" /><br/>
    </form>
  </body>
</html>

Как сделать javascript-alert

<form> <input onclick="alert('Are you sure you want to give us the deed to your house?')" type="button" value="Confirmation Alert" /> </form>

Результат будет выглядеть вот так:

Useful blog

суббота, 28 мая 2011 г.

Javascript - расшифровка htmlEntities

четверг, 18 февраля 2010 г.

JQuery - изучение. Часть 2. Пробы.

среда, 17 февраля 2010 г.

JQuery - изучение. Часть 1. Что это за зверь?

четверг, 28 января 2010 г.

Они, любимые, или изменение шрифта с помощью javascript

четверг, 21 января 2010 г.

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

четверг, 12 ноября 2009 г.

JavaScript - GetElementById - что это такое, и как это кушать?

понедельник, 9 ноября 2009 г.

Как создавать и использовать функции (function) в Javascript

воскресенье, 18 октября 2009 г.

Описание всего, что можно делать с помощью XMLHTTPRequest

суббота, 17 октября 2009 г.

Использование setInterval и JavaScript

О том, как нажатием клавиш переходить на сайт и выполнять другие действия

Стандарт DOM2-HTML

Просто пример использования javascript

Как сделать javascript-alert

Теги

Архив блога

суббота, 28 мая 2011 г.

четверг, 18 февраля 2010 г.

среда, 17 февраля 2010 г.

четверг, 28 января 2010 г.

четверг, 21 января 2010 г.

четверг, 12 ноября 2009 г.

понедельник, 9 ноября 2009 г.

воскресенье, 18 октября 2009 г.

суббота, 17 октября 2009 г.

Теги

Архив блога

суббота, 28 мая 2011 г.

четверг, 18 февраля 2010 г.

среда, 17 февраля 2010 г.

четверг, 28 января 2010 г.

четверг, 21 января 2010 г.

четверг, 12 ноября 2009 г.

понедельник, 9 ноября 2009 г.

воскресенье, 18 октября 2009 г.

суббота, 17 октября 2009 г.