JavaScript

Подписаться на эту рубрику по RSS

JavaScript. SWITCH

Четверг, 15 сентября 2011 г.
Рубрика: JavaScript -> Условия
Метки: | | |
Просмотров: 452
Подписаться на комментарии по RSS

Оператор switch позволяет делать определённые действия в зависимости от получаемых данных.

switch(time){
 case 1:
  действия
  break;
 case 2:
  действия
  break;
 default: действия, если нет подходящих вариантов
 }

Работает эта конструкция так:

Читать полностью »

Шкала времени

Четверг, 18 августа 2011 г.
Рубрика: Учебник CSS -> PHP программирование -> JavaScript -> Готовые решения
Метки: | | | | | | |
Просмотров: 585
Подписаться на комментарии по RSS

Давайте создадим прекрасную временную шкалу, похожую на такую же шкалу Google, которую создали к юбилею (10 лет). ( http://www.google.com/tenthbirthday/).

Временная шкала воспользуется  PHP, MySQL, CSS и jQuery,

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

Прибавка нового события, простая вставка новой строчки в таблицу для информации. 

Действие первое.  - XHTML.

Создадим структуру XHTML. (Файл demo.php)

<div id="timelineLimiter"> <!-- Скрывает выступающие div timelineScroll -->
<div id="timelineScroll"> <!-- Содержит временную шкалу и расширяет ее для заполненияы -->
<!-- PHP код, который генерирует список событий -->   
<div class="clear"></div> 
</div> 
<div id="scroll"> <!-- Год временной шкалы -->
<div id="centered"> <!-- Размер устанавливается jQuery для запооленеия всех лет -->
<div id="highlight"></div> <!-- Светлоголубая полоска позади надписей с годами -->
<?=$scrollPoints?> <!-- Данная переменная PHP сожержит года, которые имеют события -->
<div class="clear"></div> 
</div> 
</div> 
<div id="slider"> <!-- Контейнер слайдера -->
<div id="bar"> <!-- Полоска, которую можно перетаскивать мышкой -->
<div id="barLeft"></div>  <!-- Левая стрелка на полоске -->
<div id="barRight"></div>  <!-- Правая стрелка на полоске, обе стилизованы с помощью CSS -->
</div> 
</div> 
</div>

Читать полностью »

Стиль сайта в соответствии с погодой

Вторник, 16 августа 2011 г.
Рубрика: JavaScript -> Учебник CSS
Метки: | | | | | |
Просмотров: 382
Подписаться на комментарии по RSS

При помощи  Yahoo API и jQuery возможно поменять вид сайта в зависимости от того, какая температура воздуха на улице! В данном уроке вы узнаете, как это сделать.

Начните с того что создайте четыре фона для погоды (солнечная, дождливая, облачная, снежная ). Потом, при помощи скрипта jQuery  

«закинем» прогноз погоды. И в заключении, изготовим управление темой (ручное), с помощь которого пользователь сам выберет что захочет.

Создание темы.

Создадим четыре изображения в крупном масштабе. Шаблон для всех рисунков один и тот же. Но, каждый подогнанный под определённую  погоду.

Получаем сведения о погоде

$(document).ready(function() {
$.YQL = function(query,
callback) {
var encodedQuery =
encodeURIComponent(query.toLowerCase()), 
url =
'http://query.yahooapis.com/v1/public/yql?q=' + 
encodedQuery  
+
'&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss
where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w =
data.query.results.item;
var class =
w.condition.text;
var encodedclass =
class.replace(/\s+/g, '-').toLowerCase();
$('body').addClass(encodedclass);
});
});

Читать полностью »

Функции

Воскресенье, 14 августа 2011 г.
Рубрика: JavaScript -> Функции
Метки: | | |
Просмотров: 372
Подписаться на комментарии по RSS

Сегодня мы с Вами поговорим о функциях.

Функции используются почти во всех языках программирования.

Давайте попробуем понять что это такое:

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

Скажем там было написано - дойди до главной площади, поверни на лево и дойди до магазина мебели, после поверни на право, и пройди 500 метров до перекрёстка, потом поверни на лево и иди прямо, на правой стороне увидишь вход в переулок, войди в него и там с права будет стоять этот магазин.

По этой инструкции Вы дойдёте до магазина и купите запчасти.

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

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

И называется эта функция - запчасти.

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

Читать полностью »

Методы объекта window

Воскресенье, 14 августа 2011 г.
Рубрика: JavaScript -> Объект window
Метки: | | | | |
Просмотров: 473
Подписаться на комментарии по RSS

И так, мы дошли до методов объекта window.

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

Кроме самого сайта в браузере ещё много чего.

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

Например объект hostory, позволяет просмотреть историю пользователя, например - с какой страницы он пришёл.

Или объект screen - содержит информацию о экране пользователя.

Объект window является родителем всех остальных объектов.

И так рассмотрим первый метод объекта window - метод open ().

Этот метод позваляет нам открывать новое окно браузера.

Этому методу передаются три параметра - тип окна, имя окна, параметры окна ( такие как размер... ).

Мы создадим простое окно размером 500 на 500 под именем Новое JS окно.

Читать полностью »