belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

JavaScript >>>

                                            Учебник Задачник

§1. Введение в JavaScript

1.3.1. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. При помощи внешнего скрипта в заголовке документа выведите сообщение 'Всем привет от JavaScript!'. Далее в теле документа перед абзацем используйте встроенный сценарий и выведите сообщение 'Я - встроенный сценарий JavaScript!'. Затем после абзаца при помощи второго внешнего скрипта выведите сообщение 'Я - второй внешний сценарий JavaScript!'. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи №1.3.1.</title>
	
	<!-- Подключаем 1-й внешний файл со скриптами -->
	<script src="file_1.js"></script>
</head>
<body>
	<!-- Вставляем встроенный сценарий JavaScript -->
	<script>
		alert("Я - встроенный сценарий JavaScript!");
	</script>
	
	<p>
		Я - содержимое абзаца в теле документа.
	</p>
		
	<!-- Подключать внешние файлы со скриптами можно -->
	<!-- в любом месте страницы по мере необходимости -->
	<script src="file_2.js"></script>
</body>
</html>

Решение задачи №1.3.1  

1.4.1. Посмотрите на код ниже и скажите, какой из скриптов запустится первым. Здесь известно, что первый скрипт из-за большего размера загружается дольше второго скрипта (я для веса добавил в первый скрипт комментарии). Измените код примера так, чтобы порядок скриптов в коде остался прежним, но первый скрипт стал выполняться вторым. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Задача 1.4.1.</title>
		
</head>
<body>
	<!-- Подключаем 1-й большой по размеру внешний сценарий -->
	<script src="file_1.js"></script>
	
	<!-- Подключаем 2-й малый по размеру внешний сценарий -->
	<script src="file_2.js"></script>
</body>
</html>

Условие задачи №1.4.1

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи 1.4.1.</title>
		
</head>
<body>
	<!-- Подключаем 1-й большой по размеру внешний сценарий -->
	<script src="file_1.js" async></script>
	
	<!-- Подключаем 2-й малый по размеру внешний сценарий -->
	<script src="file_2.js" async></script>
</body>
</html>

Решение задачи №1.4.1  

1.5.1. Создайте простейшую веб-страницу, в теле документа которой будет присутствовать только один абзац с произвольным текстом. В заголовке документа подключите к страничке внешний скрипт, который будет выводить модальное окно с вопросом "Установить синий цвет шрифта?". При нажатии на кнопку 'ОК' должно выводиться сообщение 'Извините, краски закончились!', а при нажатии на кнопку 'Cancel' - 'Ну, и ладненько!'. Если не сможете составить логическое условие, посмотрите пример 1.5.2 учебника.
Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи 1.5.1.</title>
		
	<!-- Подключаем внешний сценарий -->
	<script src="file_1.js"></script>
</head>
<body>
	 <p>
        Не забывайте, что JavaScript был создан для ведения веб-разработок!<br>
		Так что хотя бы бегло изучите HTML и CSS!!! Времени потратите <br>
		немного, а вот пользы будет два вагона!
    </p>
</body>
</html>

Решение задачи №1.5.1  

1.5.2. Создайте простейшую пустую веб-страницу. В теле документа подключите к страничке внешний скрипт, который будет выводить при помощи метода prompt() модальное окно с заголовком "Введите ваш возраст". По умолчанию в поле ввода должно присутствовать значение по умолчанию '25'. При нажатии на кнопку 'ОК' должно выводиться сообщение 'Спасибо, ваш возраст учтен!', а при нажатии на кнопку 'Cancel' - 'Ну, и зря!'. Если не сможете составить логическое условие, посмотрите пример 1.5.3 учебника.
Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи 1.5.2.</title>
		
	<!-- Подключаем внешний сценарий -->
	<script src="file_1.js"></script>
</head>
<body>
	
</body>
</html>

Решение задачи №1.5.2  

 

     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх