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



belarusweb.net

Основы создания сайтов...
JavaScript >>>
                                            Учебник Задачник

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

Напоминаю, на локальном сервере у вас должна быть создана папка 'test', в которой и должны располагаться наши тестируемые файлы: html-страницы, css-таблицы, js-файлы, php-файлы, различные служебные файлы и т.д. Как установить локальный сервер Xampp и создать такую папку, вы можете посмотреть в видеоуроках 'Установка локального сервера Xampp' и 'Подготовка рабочего места' на нашем канале YouTube.

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  

1.6.1. Среди представленных записей укажите литералы: "53", 53, 'Адын кофе', a==5, "a==5", b.
Показать решение.

Поскольку литералы представляют собой обычные значения непосредственно в коде программы, то среди указанного списка литералами являются: строки "53", 'Адын кофе' и "a==5", а также число 53.

1.6.2. Перечислите правильно составленные идентификаторы, сопровождая свой выбор пояснениями: f, f2, d5, 3d, abc, ABC, $h, h$2, _h_2, h_2_, _$h, 2_h, ruEn, d3.f3, d3_f3, d3 f3, эй_Hey, свободный_дом2, ухТы!!!, 3дом_слева, F15, gggggggggg, d'25', s_8. Показать решение.

Следует помнить, что в JavaScript идентификаторы могут состоять из букв, цифр, знака подчеркивания '_' или знака доллара '$'. Но при этом начинаться с цифры они не должны, иначе интерпретатор не сможет отличить их от чисел. Все другие символы недопустимы. Поэтому из списка правильно составленными являются идентификаторы: f, f2, d5, abc, ABC, $h, h$2, _h_2, h_2_, _$h, ruEn, d3_f3, эй_Hey, свободный_дом2, F15, gggggggggg, s_8.

1.6.3. Составьте имя переменной в 'верблюжей' и 'змеиной' нотациях, используя фразу 'show must go on'. Показать решение.

Имя переменной в 'верблюжей' нотации будет иметь вид 'showMustGoOn', а при использовании 'змеиной' нотации - 'show_must_go_on'.

1.6.4. Очень внимательно изучите код, представленный ниже. Код не рабочий, т.к. в нем присутствует пара мелких ошибок. Исправьте их, закомментировав часть кода при помощи однострочных или многострочных комментариев (удалять код запрещается!!!). Показать решение.

alert('Закомментируйте так, чтобы сообщение вывелось на экран!');/это 1-е сообщение

alert(''Закомментируйте так, чтобы я тоже вывелось на экран!'');//это 2-е сообщение

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

//Здесь добавим второй слеш, чтобы получился однострочный комментарий
alert('Закомментируйте так, чтобы сообщение вывелось на экран!');//это 1-е сообщение

//А здесь используем многострочные комментарии, т.к. они не идут до конца строки
//Запустите решение при помощи значка планеты, затем скачайте код и посмотрите его
alert(/* ' */'Закомментируйте так, чтобы я тоже вывелось на экран!'/* ' */;//это 2-е сообщение

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

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