Информационый портал Windows 7

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

  • главная
  • контакты
  • карта сайта
 
Веб-дизайн » Уроки по веб-дизайну »

Знакомство с Javascript, HTML, CSS, PHP, Ajax

 
Знакомство с Javascript, HTML, CSS, PHP, Ajax



Привет всем =) Хотите научится работать с javascript, HTML, CSS, PHP, Ajax и понять принцип работы данных языков программирования? Тогда этот урок для Вас. Кстати во многих уже готовых скриптах полсе каждого действия идет // (два слеша) и обьяснение. Это обьяснение для Вас, и оно не читается веб браузером. Поетому удалять его не имеет смысла.

Как выглядит javascript


<script type="text/javascript">

var str = "Простой текст"; <span class="comment">//Создаём переменную str, которой придаём значение Простой текст</span>

var func = function (text){return text.toUpperCase()} <span class="comment">//Создаём переменную func, которая становится функцией с одним параметром text, значение text возвращается так, что все буквы становятся заглавными</span>

alert (str + func("...и ещё")); <span class="comment">//с помощью диалогового окна мы показываем результат смешания(сложения) значений переменных</span>

</script>


Как вы заметели, то ничего сложного в этом нет. Переменные создаются с помощью ключевого слова var(сокращение от variable — переменная).

Как выглядит HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p> </head> <body></p>
<p>Параграф</p>
<p>
<img src="путь к картинке" />

</body>

</html>


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

Как выглядит CSS


</p>
<style type="text/css">
body

{

font-weight:bold; <span class="comment">//Жирный текст</span>

font-size:20px; <span class="comment">//Размер текста 20 пикселей</span>

color:red <span class="comment">//color:#cc0000 цвет текста, можно написать название, а можно в шестнадцатиричном формате код цвета</span>

background-color:blue <span class="comment">//цвет фона</span>

}

</style>
<p>


КаВы видите, то с CSS немного сложнее чем с HTML, но тоже ничего особенного нет. В этом правиле на языке CSS я придал некоторые стили к телу документа.

Как выглядит PHP


<?

$str = "Простой текст"; <span class="comment">//Создаём переменную $str, которой придаём значение Простой текст</span>

function func($text){echo $text;}; <span class="comment">//Создаём функцию func с одним параметром $text, значение $text печатается в браузер</span>

echo $str." Добавим текста"; <span class="comment">//Соединяем значение переменной и строку обычного текста</span>

func("...и ещё")); <span class="comment">//Запускаем функцию</span>
?>


PHP не слишком сложный язык, главное вникнуть в суть работы с ним. (О PHP будет следующая статья). Переменные пишутся со знаком $

Как выглядит Ajax


var xmlHttp;

var Ajax= <span class="comment">//создаём класс Ajax</span>

{

getPage:function (element,method,page,send)

{

if (window.XMLHttpRequest)

{

xmlHttp = new XMLHttpRequest(); <span class="comment">// создаём объект XMLHttpRequest во всех браузерах, кроме IE</span>

}

else if (window.ActiveXObject)

{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); <span class="comment">// создаём объект XMLHttpRequest в IE</span>

}

else {

alert ("Ошибка создания объекта XMLHttpRequest"); <span class="comment">//если произошла ошибка выводим текст в диалоговом окне</span>

return;

}


</p>
<p><br class="spacer_" /></p>
<p>



xmlHttp.open(method, page, true); <span class="comment">//открываем соединение</span>

xmlHttp.onreadystatechange = function() <span class="comment">//Получаем ответ сервера</span>

{

if (xmlHttp.readyState == 4) <span class="comment">//если операция закончена</span>

{

if (xmlHttp.status == 200) <span class="comment">//если данные получены</span>

{

var myDiv = element;

myDiv.innerHTML=xmlHttp.responseText; <span class="comment">//выводим ответ сервера</span>

}

else

{

myDiv.innerHTML='Загрузка не удалась!'; <span class="comment">//если ошибка</span>

}

}

};

xmlHttp.send(send);}} <span class="comment">//отправляем дополнительные переменные если надо</span>


С Ajax работать сложнее, но в итоге получается очень привликательно.

P.S Если Вас заинтерисовали данные языки программирования, то в ближайшее время я напишу для Вас подробные обзоры каждого из языков и мы вместе попробуем создать наш простенький сайт.

Спасибо за внимание =)
С Вами был perec
Урок создан специально для сайта OS-7.ru



Автор: perec. Дата: 2-11-2010, 16:35

Просмотров: 3799

В избранное:

Уважаемый посетитель, для доступа к ресурсам сайта OS-7.RU, а также для скачивания материалов - Вам необходимо зарегистрироваться либо войти под своим именем.







 (голосов: 0)
Комментарии (1) Распечатать