-ѕоиск по дневнику

ѕоиск сообщений в —ергей_ѕрико

 -ѕодписка по e-mail

 

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 16.11.2009
«аписей: 17
 омментариев: 5
Ќаписано: 22

¬ыбрана рубрика PHP , CSS, JAVASCRIPT.


ƒругие рубрики в этом дневнике: Ќовинки кино(0), музыка(0)
 омментарии (1)

”рок 12

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 12:13 + в цитатник
height/высота и width/ширина

ƒо сих пор мы особо не заботились о размерах элементов, с которыми работали. ¬ этом уроке мы посмотрим, как легко можно определ€ть высоту и ширину элемента.
width
height
”становка ширины [width]

—войством width вы можете определ€ть ширину элемента.

¬ примере показан бокс дл€ ввода текста:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

”становка высоты [height]

ќбратите внимание, как, в предыдущем примере, высота бокса устанавливаетс€ содержимым этого бокса. ¬ысоту элемента можно определить свойством height. ¬ качестве примера попытаемс€ создать бокс высотой 500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

”рок 11

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 12:12 + в цитатник
–амки

–амки имеют многообразное применение, например, как декоративный элемент или дл€ отделени€ двух объектов. CSS предоставл€ет бесчисленное множество вариантов использовани€ рамок.
border-width
border-color
border-style
ѕримеры определени€ рамок
border
“олщина рамки [border-width]

“олщина рамки определ€етс€ свойством border-width, которое может иметь значени€ thin, medium и thick, или числовое значение в пикселах. Ќа рисунке показана эта система:


÷вет рамки [border-color]



—войство border-color определ€ет цвет рамки. «начени€ - нормальные значени€ цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .
“ипы рамок [border-style]

—уществуют различные типы рамок. Ќиже показаны восемь типов рамки и их интерпретаци€ в Internet Explorer 5.5. ¬се примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводитьс€ другим цветом и толщиной.

«начени€ none или hidden могут использоватьс€, если вы не хотите отображать рамку.


ѕримеры определени€ рамок

“ри рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. ƒл€ иллюстрации взгл€нем на документ, где определены разные рамки дл€

,

,
    и

    . –езультат, может быть, не столь впечатл€ющ, но он демонстрирует некоторые возможности:

    h1 {
    border-width: thick;
    border-style: dotted;
    border-color: gold;
    }

    h2 {
    border-width: 20px;
    border-style: outset;
    border-color: red;
    }

    p {
    border-width: 1px;
    border-style: dashed;
    border-color: blue;
    }

    ul {
    border-width: thin;
    border-style: solid;
    border-color: orange;
    }


    ћожно также установить специальные свойства дл€ верхнего, нижнего, правого и левого кра€ рамки. ¬от как это делаетс€:

    h1 {
    border-top-width: thick;
    border-top-style: solid;
    border-top-color: red;

    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: blue;

    border-right-width: thick;
    border-right-style: solid;
    border-right-color: green;

    border-left-width: thick;
    border-left-style: solid;
    border-left-color: orange;
    }

    —окращЄнна€ запись [border]

     ак и дл€ многих других свойств, вы можете объединить несколько свойств в одно, использу€ слово border. ѕример:

    p {
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    }


    можно объединить в:

    p {
    border: 1px solid blue;
    }

    –езюме

–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

Ѕез заголовка

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 12:08 + в цитатник
ѕол€ и заполнение

¬ предыдущем уроке мы рассмотрели боксовую модель. ¬ этом уроке объ€сним, как можно измен€ть представление элементов свойствами margin и padding.
”становим пол€ элемента
”становим заполнение элемента
”становим пол€ элемента

” элемента есть четыре стороны: right, left, top и bottom. ѕол€ margin это рассто€ние от каждой стороны с до соседних элементов (или краЄв документа). —м. также диаграмму в ”роке 9.

¬ качестве первого примера мы разберЄмс€, как определить пол€ самогó документа, т. е. элемента . Ќа иллюстрации показано, какие пол€ нам нужны.



CSS-код дл€ этого примера выгл€дит так:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}


»ли вы можете написать более элегантно:

body {
margin: 100px 40px 10px 70px;
}


¬ы можете установить пол€ примерно таким же образом почти дл€ любого элемента. Ќапример, мы можем определить пол€ дл€ всех параграфов

:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}


”становим заполнение элемента

«аполнение не вли€ет на рассто€ние элемента до других элементов, а лишь определ€ет внутреннее рассто€ние между рамкой и содержимым элемента.

»спользование заполнени€/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {
background: yellow;
}

h2 {
background: orange;
}



ќпредел€€ заполнение дл€ заголовков, вы устанавливаете величину пол€ вокруг текста каждого заголовка:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

”рок 9

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 12:06 + в цитатник
Ѕоксова€ модель

Ѕоксова€ модель в CSS описывает боксы, генерируемые дл€ HTML-элементов. Ѕоксова€ модель также имеет детальные опции дл€ определени€ полей, рамок, заполнени€ и содержимого каждого элемента. Ќа диаграмме далее показано, как построена боксова€ модель:
Ѕоксова€ модель в CSS




Ёта иллюстраци€ может показатьс€ слишком научной, поэтому попытаемс€ использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из ¬сеобщей ƒекларации ѕрав „еловека):

Article 1:



All human beings are born free
и equal in dignity и rights.
They are endowed with reason и conscience
и should act towards one another in a
spirit of brotherhood




ƒобавив цвет и информацию шрифта этот пример можно представить так:



¬ этом примере - два элемента :

и

. Ѕоксова€ модель этих элементов выгл€дит так:



’от€ это может показатьс€ немного сложным, тем не менее, видно, что каждый HTML-элемент окружЄн боксом. Ѕоксом, который можно настроить с помощью CSS.

–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

CSS(урок 8)

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 12:03 + в цитатник
√руппирование элементов (span и div)

Ёлементы и
используютс€ дл€ структурировани€ документа, часто совместно с атрибутами class и id.

¬ этом уроке мы подробно рассмотрим, как использовать и
, поскольку эти элементы HTML имеют важнейшее значение в CSS.
√руппирование с помощью
√руппирование с помощью

√руппирование с помощью

Ёлемент можно назвать нейтральным элементом, который ничего не добавл€ет к содержимому документа. Ќо, в сочетании с CSS, может использоватьс€ дл€ визуальных эффектов применимо к отдельным блокам текста.

ѕример - цитата из Ѕенджамина ‘ранклина:

 то рано ложитс€ и рано встаЄт,
тот будет здоровым, богатым и умным




—кажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствовани€ выделенные красным цветом. ƒл€ этого мы можем отметить эти преимущества с помощью .  аждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:

 то рано ложитс€ и рано встаЄт,
тот будет здоровым,
богатым
и умным.




¬ CSS:

span.benefit {
color:red;
}


–азумеетс€, вы можете также использовать id дл€ определени€ стил€ -элементов. Ќе забывайте только, что вы должны установить уникальный id каждому из трЄх -элементов, как мы говорили в прошлом уроке.
√руппирование с помощью


¬ то врем€ как используетс€ в элементах уровн€ блока, как в предыдущем примере,
примен€етс€ дл€ группировани€ одного или более блок-элементов.

 роме этого отличи€, группирование с помощью
работает более или менее аналогично. ѕосмотрим на пример - два списка президентов —Ўј, сгруппированных по их политической принадлежности:



  • ‘ранклин ƒ. –узвелт

  • √арри “румэн

  • ƒжон ‘.  еннеди

  • Ћиндон Ѕ. ƒжонсон

  • ƒжимми  артер

  • Ѕилл  линтон






  • ƒуайт ƒ. Ёйзенхауэр

  • –ичард Ќиксон

  • ƒжэралд ‘орд

  • –оналд –ейган

  • ƒжордж Ѕуш

  • ƒжордж ”. Ѕуш





¬ нашей таблице стилей мы можем использовать такое же группирование, как и раньше:

#democrats {
background:blue;
}

#republicans {
background:red;
}
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

CSS(урок 7)

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 11:59 + в цитатник
»дентификаци€ и группирование элементов (class и id)

»ногда вам нужно будет применить особый стиль к определЄнному элементу или конкретной группе элементов. ¬ этом уроке мы подробно разберЄм, как можно использовать class и id дл€ специфицировани€ свойств выбранных элементов.

 ак изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте?  ак группировать ссылки по категори€м и задавать дл€ каждой категории особый стиль? Ёто лишь примерные вопросы, на которые мы ответим в этом уроке.
√руппирование элементов с помощью class

ѕредположим, у нас есть два списка ссылок сортов винограда - дл€ белого и дл€ красного вина. HTML-код может быть таким:

¬иноград дл€ белого вина:




¬иноград дл€ красного вина:





ƒалее, мы хотим, чтобы ссылки на белое вино были жЄлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.

ƒл€ достижени€ этой цели мы разделим ссылки на две категории с помощью присвоени€ класса каждой ссылке атрибутом class.

ѕопробуем установить классы дл€ предыдущего примера:

¬иноград дл€ белого вина:




¬иноград дл€ красного вина:





ƒалее мы можем определить специальные свойства дл€ ссылок whitewine и redwine, соответственно.

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}



 ак показано в примере, вы можете определ€ть свойства дл€ элементов, принадлежащих к определЄнному классу, с помощью .им€_класса в таблице стилей документа.
»дентификаци€ элемента с помощью id

ѕомимо группировани€ элементов вам может понадобитьс€ идентифицировать один уникальный элемент. Ёто можно реализовать с помощью атрибута id.

ќсобенность id в том, что в документе не может быть более одного элемента с данным конкретным id.  аждый id должен быть уникальным. ¬ других случа€х используйте атрибут class. “еперь взгл€нем на пример использовани€ id:

√лава 1


...

√лава 1.1


...

√лава 1.2


...

√лава 2


...

√лава 2.1


...

√лава 2.1.2


...


Ёто могут быть заголовки документа, разделЄнного на главы или параграфы. ≈стественным будет назначить id каждой главе:

√лава 1


...

√лава 1.1


...

√лава 1.2


...

√лава 2


...

√лава 2.1


...

√лава 2.1.2


...


«аголовок, скажем, chapter 1.2, должен быть красным. Ёто делаетс€ в соответствии с CSS:

#c1-2 {
color: red;
}



 ак показано в предыдущем примере, вы можете определ€ть свойства конкретного элемента с помощью #id в таблице стилей документа.
–убрики:  PHP , CSS, JAVASCRIPT

 омментарии (0)

”рок 6

ƒневник

ѕонедельник, 14 ƒекабр€ 2009 г. 11:51 + в цитатник
Ќастроение сейчас - гуууддддддддддд

”рок 6: —сылки

¬сЄ изученное в предыдущих уроках вы можете примен€ть и дл€ ссылок/links (например измен€ть шрифт, цвет, подчЄркивание и т. д). Ќовым будет то, что в CSS эти свойства можно определ€ть по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находитс€ ли указатель мыши над ссылкой. Ёто позвол€ет добавить интересные эффекты на ваш web-сайт. ƒл€ этого используютс€ так называемые псевдоклассы.
„то такое псевдокласс?

ѕсевдокласс позвол€ет учитывать различные услови€ или событи€ при определении свойств HTM-тэга.

–ассмотрим пример.  ак вы знаете, ссылки специфицируютс€ в HTML тэгом . ¬ CSS мы также можем использовать a в качестве селектора:

a {
color: blue;
}


—сылка может иметь разные состо€ни€. Ќапример, еЄ уже посетили/visited или ещЄ нет. ћожно использовать псевдоклассы дл€ установки разных стилей посещЄнных и непосещЄнных ссылок.

a:link {
color: blue;
}

a:visited {
color: red;
}


»спользуйте |a:link| и |a:visited| дл€ непосещЄнных и посещЄнных ссылок, соответственно. јктивные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.

ћы рассмотрим каждый их этих четырЄх псевдоклассов на примерах и с объ€снени€ми.
ѕсевдокласс: link

ѕсевдокласс :link используетс€ дл€ ссылок на страницы, которые пользователь ещЄ не посещал.

¬ примере кода непосещЄнные ссылки - синие.

a:link {
color: #6699CC;
}

ѕоказать пример
ѕсевдокласс: visited

ѕсевдокласс :visited используетс€ дл€ ссылок на страницы, которые пользователь посетил. ¬ примере кода посещЄнные ссылки - фиолетовые.

a:visited {
color: #660099;
}

ѕсевдокласс: active

ѕсевдокласс :active используетс€ дл€ активных ссылок.

¬ примере активные ссылки имеют жЄлтый фон.

a:active {
background-color: #FFFF00;
}

ѕсевдокласс: hover

ѕсевдокласс :hover используетс€ дл€ ссылок, над которыми находитс€ указатель мыши.

Ёто можно использовать дл€ создани€ интересных эффектов. Ќапример, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указател€ над ними, то наш CSS должен выгл€деть так:

a:hover {
color: orange;
font-style: italic;
}


ѕример 1: Ёффект при нахождении указател€ над ссылкой

Ёффекты дл€ положени€ указател€ мыши над ссылкой стали уже общим местом. ћы рассмотрим несколько дополнительных примеров дл€ псевдокласса :hover.
ѕример 1a: –ассто€ние между буквами

 ак вы помните из ”рока 5, рассто€ние между символами можно установить свойством letter-spacing. Ёто можно применить дл€ ссылки:

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

ѕоказать пример
ѕример 1b: UPPERCASE и lowercase

¬ ”роке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Ёто также можно использовать дл€ создани€ эффектов на ссылке:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}


Ёти два примера показывают почти безграничные возможности комбинировани€ различных свойств. ¬ы можете создавать свои собственные эффекты - попробуйте!
ѕример 2: ”даление подчЄркивани€ ссылок

ќбычный вопрос - как удалить подчЄркивание ссылок?

¬ы должны точно определить, нужно ли убрать подчЄркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Ћюди привыкли видеть на web-страницах синие подчЄркнутые ссылки и знают, что по ним нужно щЄлкать. ƒаже мо€ мама знает это! ≈сли вы уберЄте подчЄркивание и измените цвет ссылок, весьма веро€тно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

¬ообще-то удалить подчЄркивание ссылок очень просто.  ак вы, может быть, помните из ”рока 5, свойство text-decoration можно использовать дл€ определени€ подчЄркивани€ текста. ƒл€ удалени€ подчЄркивани€ просто установите в text-decoration значение none.

a {
text-decoration:none;
}


јльтернативно можно также установить text-decoration, нар€ду с другими свойствами, дл€ всех четырЄх псевдоклассов.

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (1)

—правочник JAVASCRIPT

ƒневник

„етверг, 19 Ќо€бр€ 2009 г. 06:14 + в цитатник
ƒанный справочник представл€ет ¬ашему вниманию наиболее полное руководство по объектам, командам и операторам €зыка JavaScript. –ассмотрены все элементы €зыка, некоторые даны с примерами употреблени€. ¬се элементы €зыка отсортированы в алфавитном пор€дке.













—правочник JS



abs (ћетод)
¬озвращает абсолютное значение своего аргумента
Math.abs(argument)
ѕрименение: —ледующие примеры возвращают соответственно 10 и 12.5
document.writeln (Math.abs (-10));
John. age. value = 12.5; document.writeln (Math. abs(John.age.value));



--------------------------------------------------------------------------------
acos (ћетод)
¬озвращает арккосинус своего аргумента (от 0 до ѕи-радиан).
Math.acos(argument)
ѕрименение: јргумент должен быть числом в диапазоне между -1 и 1. ≈сли значение выходит за пределы этого диапазона, возвращаетс€ 0.

--------------------------------------------------------------------------------
action (—войство)
ќтображение атрибута ACTION тега HTML
.
document.formName.action;
document.forms[index].action
ѕрименение: —войство action возвращает строку, состо€щую из URL назначени€ дл€ данных, введенных в форму. Ёто значение может быть установлено или изменено как до, так и после загрузки и форматировани€ документа. ¬ следующем примере свойство action дл€ формы, названной outlineForm, устанавливает значение URL равным значению переменной outlineURL.
outlineURL = "http://www.somewhere.com/cgi-bin/outline .cgi";
outlineForm.action=outlineURL;

--------------------------------------------------------------------------------
alert (ћетод)
¬ыводит на экран диалоговое окно JavaScript Alert с кнопкой ќ  и определенным программистом сообщением.
[window].alert(AlertMessage)
ѕрименение:ѕрежде чем пользователь сможет продолжить работу со страницей, он должен нажать кнопку ќ  диалогового окна JavaScript Alert.

--------------------------------------------------------------------------------
alinkColor (—войство)
÷вет гиперссылки после нажати€ на ней левой кнопкой мыши, но до отпускани€ кнопки. document.alinkColor
ѕрименение: ѕодобно остальным цветам в JavaScript, свойство alinkColor записываетс€ как шестнадцатеричный триплет RGB или строковый литерал. Ёто свойство не может быть изменено после загрузки документа HTML. ќба следующих примера устанавливают цвет в бледно-голубой.
document.alinkColor""aliceblue";
document.alinkColor"="FOF8FF"

--------------------------------------------------------------------------------
anchors array (ќбъект)
ћассив с информацией о €кор€х в документе.
[windowMame].document.anchors(index)
ѕрименение: ќбъект anchors array (только дл€ чтени€) устанавливаетс€ в тегах HTML <ј NAME>.
текст €кор€
¬ключение в тег значени€ дл€ атрибута HREF делает €корь также и гиперссылкой и добавл€ет ее к массиву links. Ќовые €кор€ можно определить в JavaScript с помощью метода anchor. ƒл€ определени€ количества элементов массива anchors в документе используйте свойство length.
document.anchors.length
¬ыражение document.anchor[index] возвращает null. Ќапример, document.anchor[0] возвращает null, несмотр€ на то, что существует €корь, созданный с помощью тега <ј Nјћ≈="Elef">¬се о слонах.

--------------------------------------------------------------------------------
anchor (ћетод)
¬ыводит строку на экран и делает ее €корем.
textString.anchor(anchorName);
ѕрименение: Ѕудучи примененным вместе с методами write или writeln, метод anchor создает в текущем документе €корь, где textString - это строка, которую пользователь видит на экране, a anchorName имеет значение атрибута NAME тега HTML .
anchorString = "Louie's Place";
document.writeln (anchorString.anchor ("louies_place"));

--------------------------------------------------------------------------------
anchors (—войство)
ћассив всех €корей в текущем документе. ѕодробнее в описании объекта anchor.
document.anchors[index]
ѕрименение: ≈сли массив anchor в документе содержит 5 элементов, то он начинаетс€ с document.anchors[0] и заканчиваетс€ document.anchors[4].

--------------------------------------------------------------------------------
appCodeName (—войство)
¬озвращает строку (только дл€ чтени€) с кодовым именем броузера.
navigator.appCodeName
ѕрименение: ƒл€ вывода на экран кодового имени текущего броузера служит следующа€ строка:
document.write (" одовое название вашего броузера: " + navigator. appCodeName + ".");
ƒл€ Netscape Navigator 2.0 это выражение вернет:  одовое название вашего броузера: Mozilla.

--------------------------------------------------------------------------------
appName (—войство)
¬озвращает строку (только дл€ чтени€) с именем броузера.
navigator.appName
ѕрименение: ƒл€ вывода на экран имени приложени€ текущего броузера служит следующа€ строка: document.write("Ќазвание вашего броузера: " + navigator. appName + "."); ƒл€ Netscape Navigator 2.0 это выражение вернет: Ќазвание вашего броузера: Netscape.

--------------------------------------------------------------------------------
appVersion (—войство)
¬озвращает строку с информацией о версии броузера.
navigator.appVersion
ѕрименение: —войство appVersion используетс€ дл€ проверки версии используемого на клиентском компьютере броузера. ќно возвращает значение в формате: номер_версии (платформа; страна ). ƒл€ версии Netscape 2.0 под Windows 95:
document.write ("¬ерси€ вашего Ѕроузера: " + navigator. appVersion + "."); возвращает: ¬ерси€ вашего броузера: 2.0 (Win95; 1).
¬озвращенное значение говорит о том, что используетс€ международна€ верси€ Navigator 2.0, работающа€ под Windows 95.  од страны U указывает версию дл€ —Ўј, в то врем€ как код 1 возвращаетс€ международной версией.

--------------------------------------------------------------------------------
asin (ћетод)
¬озвращает арксинус своего аргумента.
Math.asin(argument)
ѕрименение: ѕри передаче методу asin числа в диапазоне от -1 до 1 он возвращает арксинус аргумента (от -ѕи/2 до ѕи/2 радиан). ≈сли передаваемый аргумент выходит за пределы указанного диапазона, возвращаетс€ 0.

--------------------------------------------------------------------------------
atan (ћетод)
¬озвращает арктангенс своего аргумента.
Math.atan(argument)
ѕрименение:
ћетод atan возвращает число между -ѕи/2 и ѕи/2 радиан. јргументом €вл€етс€ число в диапазоне от -1 до 1, равное тангенсу возвращаемого значени€.




--------------------------------------------------------------------------------
back (ћетод)
¬ызывает переход к предыдущему URL из списка просмотренных в текущей сессии работы с броузером документов.
history.back();
ѕрименение: »спользование метода идентично применению выражени€ history.gо(-1).
bgColor (—войство)
‘оновый цвет документа. document.bgColor
ѕрименение: »спользование свойства bgColor имеет приоритет над соответствующей настройкой броузера. ≈го значение записываетс€ как шестнадцатеричный триплет RGB или строковый литерал. «начение свойства может быть изменено в любой момент. —ледующий пример позвол€ет пользовател€м устанавливать свой собственный цвет фона с помощью переключателей.
function newColor(colorString)
{
document.bgColor = colorString;
}


Alice Blue
Ochre
Papaya Whip


big (ћетод)
‘орматирует строковый объект более крупным шрифтом.
stringName.big();
ѕрименение: ѕо своей функциональности использование метода идентично изменению шрифта выводимого текста с помощью тега HTML . ќба следующих примера привод€т к одному и тому же результату: выводу сообщени€ "ƒобро пожаловать на мою домашнюю страницу" крупным шрифтом:
var welcomeMessage = "ƒобро пожаловать на мою домашнюю страницу";
document.write (welcomeMessage.big());
ƒо6ро пожаловать на мою домашнюю страницу

--------------------------------------------------------------------------------
blink (ћетод)
форматирует строковый объект в виде мигающей строки.
stringname.blink();
ѕрименение: »спользование метода идентично изменению вида выводимого текста с помощью тега HTML . ќба следующих примера привод€т к одному и тому же результату: выводу мигающей строки "ќбратите внимание":
var attentionMessage=" ќбратите внимание ";
document.write (attentionMessage.blink());
<¬LIN >ќбратите внимание

--------------------------------------------------------------------------------
blur (ћетод)
”дал€ет фокус из указанного элемента формы.
document.formName.elementName.blur();
document.forms[index].elements[index].blur();
ѕрименение: Ќапример, следующа€ строка удал€ет фокус из элемента feedback:
feedback.blur();
в предположении, что элемент feedback определен так:


--------------------------------------------------------------------------------
bold (ћетод)
‘орматирует строковый объект жирным шрифтом.
stringName.bold();
ѕрименение: »спользование метода идентично изменению стил€ шрифта с помощью тега HTML <¬>.

--------------------------------------------------------------------------------
button (ќбъект)
 нопка в форме.
formName.buttonName;
forms(index].elements[index];
ѕрименение:  нопки должны быть определены внутри тега
и могут быть использованы дл€ выполнени€ каких-либо действий.

ƒл€ лучшей читаемости кода программы и во избежание неоднозначности при обращении к элементу формы рекомендуетс€ использовать им€ элемента вместе с именем формы. ѕри назначении кнопке обработчика событи€ onClick эта кнопка становитс€ дополнительным средством дл€ инициализации событий, отличных от submit и reset. ўелчок на следующей кнопке вызывает функцию validateForm.


--------------------------------------------------------------------------------

ceil (ћетод)
¬озвращает ближайшее целое число, большее или равное аргументу.
Math.ceil(argument);
ѕрименение: ћетод возвращает наименьшее целое число, большее или равное целому или дробному аргументу. Ќапример:
Math.ceil(1.01) возвращает 2.



--------------------------------------------------------------------------------
charAt (ћетод)
¬озвращает символ из строки.
stringName.charAt(index);
ѕрименение: Ётот метод принимает целое число в качестве аргумента и возвращает символ, наход€щийс€ на этой позиции в строке. ѕозици€ первого символа равна 0, а последнего - длине строки минус 1.
var userName ="Bobba Louie";
document.write(userName.charAt(4));
возвращает "a".

--------------------------------------------------------------------------------
checkbox (ќбъект)
Ёлемент формы, который пользователь устанавливает в состо€ние on или посредством щелчка левой кнопкой мыши.
formName.checkboxName;
forms[index].elements[index]
ѕрименение: ќбъект checkbox определ€етс€ в теге .
textToDisplay
—войства и методы флажков имеют множество применений. »спользуйте свойство checked объекта checkbox дл€ проверки текущего состо€ни€ флажка: установлен (true) или нет (false). ≈сли атрибут CHECKED был использован в определении флажка, свойство defaultChecked также возвращает true.

--------------------------------------------------------------------------------
checked (—войство)
¬озвращает логическое значение, представл€ющее текущее состо€ние отдельного флажка или переключател€.
formName.checkboxName.checked
formName.radioButtonName[index].checked
forms[index].elements[index].checked
ѕрименение: —войство checked возвращает логическое значение (true или false), показыва€, установлен ли флажок или переключатель. «начение свойства измен€етс€ немедленно после изменени€ пользователем состо€ни€ элемента. Ѕудучи использовано в цикле for...in, свойство может помочь определить состо€ние кнопок:
function whichOneChecked()
{
var checkedValue = "";
for (var i in document.formName.radioName)
{
if (document.formName.radioName[i].checked==true)
checkedValue=document.formName.radioName[i].value;
}

--------------------------------------------------------------------------------
clear (ћетод)
ќчищает окно броузера.
document.clear();
ѕрименение: ћетод clear уничтожает содержимое окна, вне зависимости от того, как оно было заполнено.

--------------------------------------------------------------------------------
clearTimeout (ћетод)
—брасывает таймер.
[windowName.]clearTimeout(argument);
parent.[frameName.]clearTimeout(argument);
ѕрименение: ћетод clearTimeout отключает задержку таймера, установленную до этого с помощью метода setTimeout. ”никальный идентификатор таймера, полученный при его установке, должен быть указан дл€ сброса задержки:
clearTimeout(waitTime);

--------------------------------------------------------------------------------
click (ћетод)
Ёмулирует щелчок на объекте левой кнопкой мыши.
formName.elementName.click();
forms[index].elements[index].click();

--------------------------------------------------------------------------------
close (ћетод)
ƒл€ объекта document закрывает текущий поток вывода и показывает содержимое документа на экране. ƒл€ объекта window закрывает текущее окно.
document.close();
window.close();
[windowName.]close();
ѕрименение: ƒл€ документов метод close прекращает динамическое формирование документа, выводит содержимое документа на экран и сообщение "Document: Done" в строке состо€ни€. ƒл€ объектов window подразумеваетс€ текущее окно window. Ќапример, кажда€ из строк:
window.close();
close();
self.close();
закрывает текущее окно.

--------------------------------------------------------------------------------
confirm (ћетод)
¬ыводит диалоговое окно JavaScript Confirm .
window.confirm();
[windowMame.]confirm();
ѕрименение: —ходное с диалоговым окном JavaScript Alert, но дополненное кнопкой Cancel, диалоговое окно JavaScript Confirm выводит сообщение и две кнопки выбора. ћетод confirm возвращает true, если пользователь нажимает кнопку ќ , и false при нажатии кнопки Cancel. —ледующий пример загружает документ в новое окно, если пользователь выбирает ќ :
if (confirm('Are you sure you want to enter'))
{ tourWindow = window.open ("http://www.haunted.com", "hauntedhouse") }

--------------------------------------------------------------------------------
cookie (—войство)
—трока с небольшим количеством информации, сохран€ема€ броузером в файле cookies.txt на клиентском компьютере.
document.cookie
ѕрименение: «начение, хранимое в свойстве cookie, может быть извлечено с помощью методов charAt, IndexOf и lastIndexOf. —пециальное свойство cookie сохран€ет информацию о состо€нии клиентского компьютера. Ёта информаци€ может быть затребована сервером. ¬ свойство cookie включен диапазон URL, к которым эта информаци€ относитс€. Ѕудущие запросы HTTP со стороны клиента, попадающие в указанный диапазон URL, будут включать в себ€ допустимую дл€ этого диапазона информацию о клиенте и передаватьс€ серверу. Ётот простой способ хранени€ данных позвол€ет серверу возвращать ответы клиентскому компьютеру с учетом информации о клиенте. ѕримерами такого использовани€ свойства cookie €вл€ютс€ посылка регистрационной информации и автоматизаци€ ввода идентификатора пользовател€. ѕользовательские настройки могут быть сохранены на клиентском компьютере и затребованы сервером во врем€ соединени€. ћожно ограничить врем€ существовани€ свойства cookie. ƒл€ отправки и просмотра установок cookie в HTML-сценарии свойству следует присвоить значение:
document.cookie = "string";

cos (ћетод)
¬озвращает косинус своего аргумента.
Math.cos(argument);
ѕрименение: ¬еличина угла должна быть указана в радианах, возвращаемый результат будет находитьс€ в диапазоне от -1 до 1.

--------------------------------------------------------------------------------

Date (ќбъект)
ѕредоставл€ет набор методов дл€ работы с датами и временем.
Date.method(parameters)
ѕрименение: ¬строенный объект Date замен€ет в €зыке JavaScript обычные типы данных дл€ дат. Ќесмотр€ на отсутствие каких-либо свойств, объект Date имеет несколько методов дл€ установки и изменени€ своего значени€. ’от€ значени€ даты возвращаютс€ в стандартной форме, фактическое значение хранитс€ как количество миллисекунд, прошедших после полуночи 1 €нвар€ 1970 года. ѕрименение этого соглашени€ запрещает использование дат до 1970 года. ƒл€ создани€ нового объекта Date можно использовать несколько вариантов синтаксиса:
objectName = new Date()
objectName = new Date("month day, year" [hours:minutes:seconds]")
objectName = new Date(year, month, day [, hours, "" minutes, seconds])
≈сли при создании объекта Date опустить компонент, указывающий врем€, оно по умолчанию будет установлено в 00:00:00. «а исключением номера дн€ в мес€це, все числовые предста-лени€ даты нумеруютс€ с нул€. Ёто не должно представл€ть проблемы, если не считать мес€цев. ќни представл€ютс€ числами от 0 (€нварь)до 11(декабрь).



--------------------------------------------------------------------------------
defaultChecked (—войство)
Ћогическое значение (true или false), указывающее состо€ние флажка или переключател€ по умолчанию.
formName.elementName.defaultChecked
forms[index].elements[index].defaultChecked
ѕрименение: ”становка значени€ свойства defaultChecked может перекрывать атрибут CHECKED тега, создавшего элемент формы. —ледующий фрагмент программы возвращает группу переключателей к их исходному состо€нию путем поиска и установки переключател€ в положение по умолчанию:
for (var i in menuForm.choices) {
if (menuForm.choices[i].defaultChecked) {
menuForm.choices[i].defaultChecked = true }
}
»зменение свойства defaultChecked не вли€ет на вывод на экран переключател€, даже если затронуто состо€ние других переключателей.

--------------------------------------------------------------------------------
defaultSelected (—войство)
—осто€ние элемента формы select по умолчанию.
formName.elementName.defaultSelected
forms[index].elements[index].defaultSelected
ѕрименение: —войство defaultSelected возвращает true или false, в зависимости от того, был ли при создании элемента формы использован в теге атрибут SELECTED. ѕрограммна€ установка значени€ этого свойства перекрывает наличие или отсутствие атрибута SELECTED тега


--------------------------------------------------------------------------------
onSelect (ќбработчик событи€)
ќбработчик событи€ onSelect вызываетс€ в тот момент, когда выделен текст внутри элемента формы.

ѕрименение: —обытие select вызываетс€ выбором части или всего текста в объектах text или textarea.

--------------------------------------------------------------------------------
onSubmit (ќбработчик событи€)
—обытие происходит в момент щелчка мышью на кнопке Submit дл€ посылки данных формы на сервер.

ѕрименение: ќбработчик событи€ onSubmit запускаетс€ в момент от правки пользователем данных формы на сервер. Ћюбое отличное от false возвращаемое значение, в том числе пропуск оператора return, приводит к отправке данных на сервер. ƒл€ получени€ более €сного кода рекомендуетс€ вставл€в оператор return в обоих случа€х.

..-элементы формы...

function feedbackSubmit () {
...строки кода...
if (!validData) { return true; }
else { return false; }
}

--------------------------------------------------------------------------------
onUnload (ќбработчик событи€)
¬ызываетс€, когда пользователь выходит из документа.


ѕрименение:  огда несколько событий unload включено в иерархию кадров, пор€док операций - от дочернего к родительскому. Ќапример, событие unload включено в два документа и родительский тег , который загрузил их.  огда дочерний документ измен€етс€, его событие unload обрабатываетс€, но событие unload тега не происходит.  огда пользователь выбирает опцию, замен€ющую родительский документ на новый источник, событие unload самого верхнего уровн€ будет обработано.

--------------------------------------------------------------------------------
open (ћетод)
—оздает новый документ или экземпл€р окна.
document.open([MIMEtype])
window.open("URL", "windowName" [,"windowFeatures"]);
ѕрименение: ƒл€ документа метод open открывает поток вывода дл€ методов write или writeln. ≈сли тип MIME €вл€етс€ версией text или image (например, text/html или image/gif), документ будет открыт дл€ показа. »наче поток будет направлен в plug-in. ≈сли документ уже существует в целевом окне, метод open очищает это окно. ѕоток закрываетс€ с помощью метода document.close(). ƒл€ окна метод open открывает новое окно броузера, подобно выбору пункта меню File->New Web Browser броузера. ѕри использовании аргумента URL метод загружает в новое окно документ; в противном случае новое окно остаетс€ пустым. ѕри использовании метода в программе обработки событи€ форма должна включать объект window; в противном случае подразумеваетс€ объект document. ѕараметр windowFeatures описываетс€ в виде разделенного зап€тыми списка параметров, где =1 или =yes - включено и =0 или =no - отключено. windowFeatures включают управление выводом инструментальной панели, окна URL, кнопок каталогов, строки состо€ни€, строки меню, полос прокрутки, возможностью изменени€ размеров, сохранением истории навигации, шириной и высотой.

--------------------------------------------------------------------------------
options (—войство)
Ётот массив параметров €вл€етс€ свойством элемента формы select. ћассив создаетс€ с помощью тегов
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

CSS(урок 3)

ƒневник

„етверг, 19 Ќо€бр€ 2009 г. 06:02 + в цитатник
¬ы создадите свою первую таблицу стилей/style sheet. ¬ы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать дл€ CSS в HTML-документе.

ћногие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. “аким образом, если вы используете HTML дл€ дизайна страниц, вы, наверн€ка узнáете многие коды. ѕосмотрим на конкретном примере.
Ѕазовый синтаксис CSS

—кажем, нам нужен красный цвет фона web-страницы:

¬ HTML это можно сделать так:




— помощью CSS того же самого результата можно добитьс€ так:


body {background-color: #FF0000;}

 ак видите, эти коды более или менее идентичны в HTML и CSS. Ётот пример также демонстрирует фундаментальную модель CSS:

модель CSS

Ќо где размещать CSS-код? »менно мы и займЄмс€ пр€мо сейчас.
ѕрименение CSS к HTML-документу

≈сть три способа применить правила CSS к HTML-документу.ћы рассмотри эти три метода.–екомендую сосредоточитьс€ на третьем - то есть внешней/external таблице стилей.
ћетод 1: »нлайн/In-line (атрибут style)

ћожно примен€ть CSS к HTML с помощью HTML-атрибута style.  расный цвет фона можно установить так:






This is a red page





ћетод 2: ¬нутренний (тэг style)

¬торой способ вставки CSS-кодов - HTML-тэг
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  
 омментарии (0)

CSS(урок 2)

ƒневник

„етверг, 19 Ќо€бр€ 2009 г. 05:57 + в цитатник
¬озможно, вы уже слышали о CSS, но не знаете, что это такое? ¬ы узнаете, что такое CSS и что он может сделать дл€ вас.

CSS это акроним дл€ Cascading Style Sheets/ аскадных таблиц стилей.
„то можно делать с помощью CSS?

CSS это €зык стилей, определ€ющий отображение HTML-документов. Ќапример, CSS работает с шрифтами, цветом, пол€ми, строками, высотой, шириной, фоновыми изображени€ми, позиционированием элементов и многими другими вещами. ѕотерпите, и увидите!

HTML может (неправильно) использоватьс€ дл€ оформлени€ web-сайтов. Ќо CSS предоставл€ет бóльшие возможности и более точен и проработан. CSS, на сегодн€шний день, поддерживаетс€ всеми браузерами (программами просмотра).

¬ы сможете создавать собственные таблицы стилей и использовать CSS дл€ придани€ вашему web-сайту великолепного вида.
¬ чЄм разница между CSS и HTML?

HTML используетс€ дл€ структурировани€ содержимого страницы. CSS используетс€ дл€ форматировани€ этого структурированного содержимого.

—огласен, это звучит как-то заумно. Ќо, пожалуйста, читайте дальше. ¬скоре всЄ начнЄт про€сн€тьс€.

ƒавным-давно, когда ћадонна была девой, а парень по имени Tim Berners Lee изобрЄл World Wide Web, €зык HTML использовалс€ только дл€ вывода структурированного текста. јвтор мог только размечать текст: "это - заголовок" или "это - параграф", использу€ HTML-тэги, такие как

и

.

ѕо мере развити€ Web дизайнеры начали искать возможности форматировани€ онлайновых документов. „тобы удовлетворить возросшим требовани€м потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как , которые отличались от оригинальных HTML-тэгов тем, что они определ€ли внешний вид, а не структуру.

Ёто также привело к тому, что оригинальные тэги структурировани€, такие как

, стали всЄ больше примен€тьс€ дл€ дизайна страниц вместо структурировани€ текста. ћногие новые тэги дизайна, такие как , поддерживались только одним браузером. "¬ам необходим браузер X дл€ просмотра этой страницы" - такой отказ стал обычным €влением на web-сайтах.

CSS был создан дл€ исправлени€ этой ситуации путЄм предоставлени€ web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. ќдновременно произошло разделение представлени€ и содержимого документа, что значительно упростило работу.
 акие преимущества даст мне CSS?

ѕо€вление CSS стало революцией в мире web-дизайна.  онкретные преимущества CSS:

* управление отображением множества документов с помощью одной таблицы стилей;
* более точный контроль над внешним видом страниц;
* различные представлени€ дл€ разных носителей информации (экран, печать, и т. д.);
* сложна€ и проработанна€ техника дизайна.

–убрики:  PHP , CSS, JAVASCRIPT

 омментарии (0)

CSS(урок 1)

ƒневник

„етверг, 19 Ќо€бр€ 2009 г. 05:54 + в цитатник
 аскадные таблицы стилей/CSS это €зык стилей, определ€ющий отображение HTML-документов Cascading Style Sheets (CSS) это поразительное изобретение дл€ улучшени€ вида ваших web-сайтов. ќно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.


»зучение CSS увлекает. ¬ыдел€йте достаточное количество времени дл€ экспериментов

»спользование CSS требует знани€ основ HTML. ≈сли вы не знаете HTML, то начните с ”чебника HTML, прежде чем перейти к CSS.
 акое программное обеспечение необходимо иметь?

Ќе используйте при работе такие программы, как FrontPage, DreamWeaver или Word. Ёти продвинутые программы не помогут вам в изучении CSS. Ќаоборот, они сильно ограничат ваше продвижение в этом направлении.

¬ам понадобитс€ бесплатный и простой текстовый редактор.

Ќапример, Microsoft Windows поставл€етс€ с программой Notepad. ќна обычно находитс€ в Accessories меню ѕуск, в Programs. ¬ы можете также использовать простой текстовый редактор, например Pico дл€ Linux или Simple Text дл€ Macintosh.

ѕростой текстовый редактор идеально подходит дл€ изучени€ HTML и CSS, поскольку он не измен€ет вводимый вами код. “ак вы быстро продвинетесь, а ошибки будут только вашими, а не программными.


Ѕраузер и простой текстовый редактор - вот всЄ, что вам необходимо.

ƒавайте начнЄм!
–убрики:  PHP , CSS, JAVASCRIPT

 омментарии (0)

CSS(каскада€ таблица стилей)

ƒневник

„етверг, 19 Ќо€бр€ 2009 г. 05:42 + в цитатник
¬сем привет тут будут уроки дл€ новичков все что св€зано с сайта строение все тонкости этого не легкого дела )
Ќачнем мы с простого это CSS (каскадна€ таблица стилей)!
–убрики:  PHP , CSS, JAVASCRIPT

ћетки:  

 —траницы: [1]