Урок 10 — Примеры синхронного, асинхронного кода и вывод таблицы умножения на экран

В этом уроке рассматриваются виды скриптов в JavaScript.

1 шаг

Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег <script>, то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Для примера рассмотрим случай, который предложил Алексей Андреевич.

«Необходимо спросить у пользователя сколько ему лет и вывести на экран год его рождения.»

Все коды должны размещаться на новых страницах.
Не размещайте все 3 кода на одной странице!

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <p>Узнайте свой год рождения.</p>

  <script>
    var age = prompt('Укажите ваш возраст');
	var year = 2015 - age;
	alert('Вы родились в = ' + year );
  </script>

  <p>Поздравляем! Вы узнали свой год рождения!</p>

</body>

</html>

Такое поведение называют «синхронным».

2 шаг

Теперь рассмотрим еще один случай.

«Необходимо спросить у пользователя год его рождения и вывести на экран сколько ему лет.»

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <p>Узнайте свой возраст.</p>

  <script src="1.js" async></script>
  <script src="2.js" defer></script>

  <p>Спасибо за использование нашего ресурса!</p>

</body>

</html>

В корневой папке вашего сайта необходимо создать файлы «1.js» и «2.js» со следующим содержанием.
1.js:

var year = prompt('Год рождения');
var age = 2015 - year;

2.js:

alert('Ваш возраст равен ' + age + 'лет');

Это пример «асинхронного» поведения.

Специальные атрибуты async и defer используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
Разница между async и defer: атрибут defer сохраняет относительную последовательность скриптов, а async – нет. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async – нет.

Если вы хотите более подробно разобраться в этой теме, щелкните здесь.
А если вы всерьез хотите выучить язык программирования JavaScript, то рекомендую сайт learn.javascript.ru и книги, представленные на этом сайте.

3 шаг

Теперь выведем таблицу умножения с помощью кода JavaScript:

<table>
        <script type="text/javascript">
            for (i=1; i<=10; i++)
            {
                document.write("<tr>");
                for (j=1; j<=10; j++)
                    document.write("<td>"+String(i*j)+"</td>");
                document.write("</tr>");
            }
        </script>
</table>

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