Краткие основы JavaScript

19.06.2010. JavaScript

0

Что такое?

JavaScript - объектно-ориентированый скриптовой язык программирования, в первую очередь предназначенный для создание интерактивный (т.е. изменяющихся без перезагруки) web-страниц

Типы данных и переменные

Основные типы данных в javascript:

JavaScript - язык со свободными типами данных, т.е. можно проводить операции с различными типами данных (складывать число и строку и т.д.)

Переменные.

Переменная в javascript начинается с буквы, знака доллара или подчеркивания и может содержать только буквы, знак доллара, подчеркивание и цифры. Регистр, в котором написана переменная важен (a и A - разные переменные)
Создаются переменые очень просто:

Приведение типов

Для проведения некоторых операция требуется преобразование одного типа данных в другой. Для этого существуют специальные функции:

Примечание: запись func(a1[,a2[,a3..]]) означает, что в [ ] находятся необязательные параметры, которые можно опустить. Т.е. если написано s(a[,b]), то можно писать и s(a) и s(a,b)

Арифметические операторы

Математика

Функции

Math.функция

Константы

Math.константа

Логические операторы и операторы сравнения

Условные операторы

if  (условие) {code{ - если условие истино, то выполняется код в { }

if (условие)

{ code }

else

{code 2}

Если усовие истино, то выполняется code, иначе code 2

switch (выражение)

{

case value1:

код;

break;

case value2:

код2;

break;

default:

код

}

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

условие ? код 1 : код 2 - если условие истино, выполняется код 1, иначе код 2

Операторы цикла

for (инициализация, условие, изменение) {code} - цикл выполняется до тех пор, пока условие истино. Например for (i=0;i<13;i++) {a+=a}

while (условие) {код} - пока условие истино выполняем код

do { код } while (условие) - аналогично предыдущему, только сначала выполнится код, а потом проверится условие

Функции

Cоздание фукнции в Java Script:

function name(parametr1[,parametr2...)
{

code

}

Вызов

name(параметры);

Строки

Специальные функции для работы со строками:

escape(string) - возвращает escape-последовательность стоки

unescape(string) - обратная операция

eval - вычисляет значение выражения, записанного в строку. Например, eval("2+5") вернет 7

Свойства и методы объекта String:

Записывается так: имя перемнной.свойство (метод)

Массивы

Массивы - множество переменных, объединеных общим именем.

Создание массива - name = new Array ([длинна])

Пример:

a=new Array;

a[0]=0;

a[1]="one";

a[2]=true;

И т.д.

Свойства и методы массивов в JavaScript:

CSS: Меры измерения: px, em, pt, %,cm,mm

2.04.2010. Новости

0

В CCS существует множество различных способов измерять отступы, размеры шрифтов, элементов и т.д. Во всем этом легко запутаться, если не знать, что и как. Поэтому и появилась эта заметка;)

  1. px - задания размеров с помощью пикселей. Полезен тем, что можно с высокой точностью задавать размеры объектов. 1 пиксель - 1 точка экрана. Используются чаще всего для позиционирования элементов документа.
  2. em - относительные единицы, 1 em равен значению font-size
  3. pt - пункты, используются в типографии и часто для задания шрифтов
  4. % - всем известные проценты, на самом деле это аналог em, тоже рассчитывается от текущего значения font-size
  5. cm - тут все просто, обычные сантиметры
  6. mm - ну а это миллиметры
  7. in - дюймы

Если font-size у на равняется 12pt, то:

1em=100%=12pt

1 pt=1/72 in и является константой.

Обычно 12pt=16p

Прижимаем footer (подвал/футер) к низу экрана

2.03.2010. CSS, HTML, Дизайн

4

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

Вот наш HTML-файл. Футер в нем должен быть выненес за пределы основного содержимого.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="content">
Контент
</div>
<div id="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</body>
</html>

Нам нужно загнать подвал вниз экрана. Напишем CSS для этой страницы:

html,body
{
margin:0;
padding:0;
color:#000;
background:#fff;
height:100%;
}
 
#content
{
position:relative;
margin:0 auto;
width:980px;
min-height: 100%;
height: auto !important; 
height: 100%;
background:#999;
margin-bottom:-50px;
}
 
 
.clear
{
clear:both;
}
 
#footer
{
background:red;
width:980px;
position:relative;
margin:0 auto;
height:50px;
}

Что мы здесь сделали?
Все очень просто. Мы задали высоту страницы без подвала равной 100% (это все, что находится в блоке с id=content). Затем мы сдвинули весь блок на 50px вверх, чтобы освободить место под подвал. После этого мы установили высоту подвала равной 50px. Теперь подвал будет прижат к нижнему краю, а до него будет растягиваться блок с контентом, в том числе и фон.
Вот и все. Подвал прижат к футеру. Как-нибудь потом напишу еще пару вариантов прижатия футера к подвалу.

Рамки с круглыми краями и прозрачность в CSS.

22.02.2010. CSS, Дизайн

2

Круглые края с помощью CSS

Существует множество способов создания рамок с круглыми краями. И в CCS3 наконец-то включили такую возможность. Разумеется, всеми любимый MS Internet Explorer об этом до сих пор не знает, ну и пошел лесом, все равное его у меня нет;)
Создание рамок в CSS3 очень просто. Правда пока приходится писать 3 варианта кода, ну это не страшно.

Вот CSS свойства для создания закругленных рамок:

CSS Gecko (Mozilla...) WebKit (Safari, Konqueror, Arora, Google Chrome и т.д.)
border-radius -moz-border-radius -webkit-border-radius
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius

Если у вас нормальный браузер, то таблица выше должна быть в рамке с закругленными углами. Я думаю, объяснять значения свойств не надо, в них и так все написано. Радиус рамки можно задавать в px, em, pt и т.д.

Вот например текст в рамке с радиусом, равным 1em.

Прозрачность с помощью CSS

Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.

Задается свойство очень просто:

opacity: значение от 0 до 1;

1 - полная непрозрачность, 0 - полная прозрачность

Текст с прозрачностью 0.5

А ниже полностью прозрачный текст:

Полностью прозрачный текст

Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)
P.S.
Хотите сделать сайт, а хостинг еще не выбрали. Этот хостинг для сайтов специально для вас.
P.P.S.
Вот здесь вы сможете узнать все про социальные сети России

Еще немного CSS. Поля и отступы.

12.02.2010. CSS, Дизайн

0

С помощью CSS можно задавать поля и отступы в документе.

Отступы:

Отступы необходимы для того, чтобы  сообщить, насколько необходимо сдвинуть данный блок относительно родительского элемента (если таковой отсутствует, то относительно края окна).

Способы задания отступа:

Можно задать отступ от каждой стороны по отдельности:

margin-top: n px; - отступ сверху на n пикселей (кроме пикселей можно задавать проценты, пункты и т.д.)

margin-bottom: n px; - аналогично, снизу

margin-right: n px; - отступ справа

margin-left: n px; - отступ слева.

Кроме того, можно задавать просто с помощью свойства margin:

margin: n px; - отступы со всех четырех сторон

margin: y px x px; - отступ снизу и сверху на y px, отступ справа и слева на x px

margin: a b c d; - установка отступа от верха, затем права, затем низа, затем лева

Поля

Поля задают внутренние отступы в элементе. Такие поля аналогичны полям в книге или тетрадке.

Задание полей ничем не отличается от задание отступов, за исключением замены слова margin на слово padding

Примеры задания отступов и полей:

.text

{

margin: 10px; //отступы в 10px

padding: 5px; // поля 5 пикслей

}

p

{

margin-left:5px;

margin-top:1px;

padding: 5px 15px;

}

Продолжение про CSS следует

P.S. Нашел сайт, откуда скоро можно будет скачать фильм “Алиса в стране чудес”

UPD.

Продолжение

Основные свойства CSS.

10.02.2010. CSS, Дизайн

0

Фон

Границы (Край)

Задание границы в css состоит из нескольких частей. Во-первых, граница может быть правой (right), левой (left), верхней (top) и нижней (bottom). Также любая граница имеет несколько свойств: цвет (color), стиль границы (style), толщина границы (width).

Имя свойства строится из всего вышеперечисленного:

border-положение-свойство:

Если пропустить положение, то свойство будет применяться ко всем границам. Кроме этого, можно как в фоне задавать сразу несколько свойств. Тогда значения свойств перечисляются через пробел:

border-top:1px solid black; - верхняя граница имеет толщину в один пиксель, она черного цвета и непрерывная

Возможные значения свойств:

color - как всегда, цвет в RGB формате или в виде имени цвета.

color:red; color:#FED; color:#13F29E; - три варианта задания цвета.

width - тоже не особо интересный параметр. Определяет ширину границы. Задается в пикселях.

style- самый интересный параметр, определяет вид границы

Примеры:

border:2px solid green; - задает зеленую границу в 2 пикселя

border-left-style: dotted; - делает левую границу пунктирной

border-right: double 10px #666; устанавливает ширину правой границы в 10px, стиль - двойная линия и цвет #666 (если не ошибаюсь, то серый)

Продолжение следует!!!

UPD:

Продолжение: отступы и поля

Что такое CSS?

8.02.2010. CSS, Дизайн

0

Что такое CSS?

CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.

Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.

Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:

селектор селектор2 селектор3

{

//стиль

}

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

В стеле описываются свойства и их значения. Синтаксис выглядит так:

свойство: значение;

Например, запись color:red задает свойству "цвет текста" значение красный.

Еще немного про селекторы:

Селектор, означающий имя тега пишется также, как и имя тега:

Например, селектор тега <a> пишется a:

a

{

color:green;

}

Здесь, для текста внутри тега <a> устанавливается зеленый цвет.

Селектор-класс должен начинаться с точки:

.myclass

{

font-size:14pt;

color:#FFF;

}

В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.

Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":

<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>

Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:

#myid

{

background:grey; //установка фона в серый цвет.

}

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

<div id="myid">

Текст с примененным стилем myid. Этот текст будет на сером фоне

</div>e

Способы подключения CSS к HTML:

Подключить CSS к HTML-файлу можно несколькими способами:

  1. Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
  2. Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:

    <link rel="stylesheet" type="text/css" href="style.css" />

  3. Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:

    <span style="color:green background: black">зеленый текст на черном фоне</span>

Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз

P.S. Нужен реферат? Вот вам рефераты на заказ.

Основные html теги

6.02.2010. HTML, Дизайн

0

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

Почти все теги  состоят из двух частей:

Между открывающим и закрывающим тегом находится само содержимое тега.  Также после имени тега (в открывающем теге) могут следовать атрибуты тега: выравнивание, задание толщины границ, цвета текста и т.д.

Главные теги

Большинство из этих тегов должны быть в любом документе.

Информация о странице

Теги, сообщающие название страницы и ее описание:

Работа с текстом

Заголовки

Служат для выделения заголовков в тексте. Например, названия главы книги, название статьи и т.д.

Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.

Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах

Внешний вид текста (курсив, жирные, подчеркнутый)

Форматирование текста

В html для форматирование текста используется несколько тегов:

Ссылки и изображения

Создание ссылки:

<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки

Вставка изображения:

<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text

Создание таблицы:

Некоторые специальные символы:

Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:

Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:

<p align="center"> текст выравнен по центру </p>

Еще пара полезных атрибутов:

style="css" - позволяет вам прописать css для этого экземпляра тега

id="id" - ид стиля в css таблице (уникальный для страницы)

class="class" - класс css для использования с этим тегом

Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.

Вот и все на сегодня!

P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.

"description" content="?">
Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги