понедельник, 5 августа 2013 г.

Основы JavaScript

Любой HTML или XHTML - документ состоит из четырех разделов:

<!DOCTYPE>
контейнера <html>
заголовка <head>
тела документа <body>


Любой HTML-документ начинается со строки, содержащей декларацию типа документа (DTD, document type declaration).
HTML 4.0 поддерживает три типа таких деклараций:


Документ строго соответствует стандарту HTML 4.0, т. е. не содержит ни морально устаревших элементов, ни фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">


Документ является переходным к стандарту HTML 4.0, т. е. может содержать морально устаревшие элементы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">


Документ содержит фреймы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">




Любой XHTML-документ также начинается со строки, содержащей декларацию типа документа:

XHTML 1.0 Strict
Используется в том случае, если в документе идет четкое разделение оформления и содержания.
При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили:

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


XHTML 1.0 Transitional
Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере.
В этом случае допускается в коде документа использовать теги физического проектирования
и лишь частично стили.

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


XHTML 1.0 Frameset
Применяется, когда окно браузера делится на два или более фрейма:

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



Простейший HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <!-- Заголовка страницы -->
  </head> 
  <body>
   <!-- Содержимое страницы -->
  </body>
</html>


Сценарии JavaScript можно вставлять между тегами:

<head></head>

или

<body></body>

Простейший пример сценария:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title> Заголовок документа </title>
  </head> 
  <body>
    Пример сценария
    <br />
    <script type="text/javascript">
      document.write("Hello World!");
    </script>
    <br />
    Простой вывод текста
  </body>
</html>



Можно текст сценария помесить во внешний файл, например jsfile1.js
Этот файл содержит следующее:

document.write("Hello World!");

а затем  вызвать его из html - документа:

<script type="text/javascript" src="jsfile1.js">
</script>


Предыдущий пример изменится так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title> Заголовок документа </title>
  </head>
  <body>
    Пример сценария
    <br />
    <script type="text/javascript" src="jsfile1.js">
    </script>
    <br />
    Простой вывод текста
  </body>
</html>



На самом деле все сценарии лучше выносить во внешние файлы.

Например усли поместить в html - документ сценарий javascript,
который содержит символы сравнения (меньше чем)  x < y то будут проблемы
и страница не пройдет проверку т.к. символ  <  выглядит как начало нового тега.

Чтобы этого избежать нужно использовать раздел CDATA и закомментарить его:

<script type="text/javascript">

/*<![CDATA[*/

var x=5;
var y=10;
if (x < y) {
window.alert("x меньше, чем y");
}

/*]]>*/


</script>


т.е. раздел CDATA нужен, чтобы страница прошла проверку
а комментарии нужны, чтобы сценарий запускался.

Теперь наш пример будет выглядеть так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title> Заголовок документа </title>
  </head>
  <body>
    Пример сценария
    <br />
    <script type="text/javascript">
    /*<![CDATA[*/
    var x=5;
    var y=10;
    if (x < y) {
    window.alert("x меньше, чем y");
    }
    /*]]>*/
    </script>
    <br />
    Использование сценария внутри html - документа
  </body>
</html>




Для html 4.01 тип документа описывался так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">


В html 5 все намного проще:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title> Заголовок документа </title>
    <script>
    alert("Hello World!")
    </script>
  </head>
  <body>
  <!-- Содержимое страницы -->
  </body>
</html>


Пример html - документа, который содержит внешний скрипт, внутренний скрипт и таблицу стилей:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title> Заголовок документа </title>

    <link href="../_css/title.css" rel="stylesheet">

    <script src="../_js/jquery-1.6.3.min.js">
    </script>

    <script>
    $(document).ready(function() {
    $('body').hide().fadeIn(3000);
    });
    </script>

  </head>
  <body>
  <!-- Содержимое страницы -->
  </body>
</html>