Задачи по JavaScript
http://belarusweb.net
Основы создания сайтов

Упражнения и задачи по JavaScript





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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи №1.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.1.3.1  

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Решение задачи 1.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.1.4.1  

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

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

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

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

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

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

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

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

1.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.1.6.3. Составьте имя переменной в 'верблюжей' и 'змеиной' нотациях, используя фразу 'show must go on'. Показать решение.

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

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

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

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

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

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

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

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

1.1.7.1. Объявите переменную fruits. Отдельной инструкцией присвойте ей значение '3 яблока'. Выведите значение переменной сообщением на экран. Показать решение.

//Объявляем переменную
var fruits;
//Инициализируем ее
fruits="5 яблок";
//Выводим сообщение
alert(fruits);

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

1.1.7.2. Объявите переменную sum. Одной инструкцией объявите две переменных a и b, присвоив им какие-нибудь числа. Присвойте переменной sum сумму переменных a и b. Выведите значение переменной sum на экран. Показать решение.

//Объявляем переменную
var sum;
//Объявляем переменные и сразу инициализируем их
var a=2,b=7;

//Присваиваем сумму
sum=a+b;
//Выводим ее на экран сообщением
alert(sum);

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

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!