Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 17. Сценарии в HTML, метод document.write(), функция prompt(), операции сравнения, правило лжи в JavaScript.

Содержание курса

Сценарии в HTML

В современном интернете страницы стремятся делать максимально интерактивными, т.е. позволять пользователю взаимодействовать со страницей, а значит и с сервером. Возможности HTML в этом плане сильно ограничены. И вот здесь приходит на помощь JavaScript.

В этом и последующих уроках мы сделаем акцент на применении JavaScript к HTML страницам.

Напомню, что внедрение сценариев в HTML документ может осуществляться при помощи тегов <script></script>. Простой пример внедрения сценария в HTML страницу:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Внедрение JavaScript в HTML</title>
		</head>
		<body>
			<script>
				/* Опишем функцию возведения числа во 2-ю степень */
				function square(i){
					return i * i;
				}
				
				/* Передадим функции число 5 и выведем результат
				на страницу HTML */
				document.write(square(5));
			</script>
		</body>
	</html>

Кроме этого JavaScript может быть подключён к HTML странице как внешний файл с расширением .js:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Подключение JS к HTML</title>
			<script type="text/javascript" src="/scripts/my_script.js" media="all">
			</script>
		</head>
		<body>
		</body>
	</html>

В src указываем путь к файлу js от корневой папки сервера (/), type можно опустить, но лучше оставить для старых браузеров, media - для каких типов медианосителей подключать этот js файл (в данном случае "all" - для всех типов).

Метод document.write()

Метод document.write(str) выводит переданное ему строковое значение (str) на страницу HTML сразу после закрывающего тега </script>. Это довольно устаревший метод, однако он хорошо помогает проверять работоспособность написанного кода.

Вспомним также и о том, что в JavaScript существует 7 типов данных:

1) Undefined Type - неопределённый тип данных, состоящий из одного единственного значения undefined
2) Null Type - пустое значение, ничего
3) Boolean Type - логическое значение истина/ложь, или, как ещё его называют, булевый тип данных
4) String Type - строковое значение
5) Number Type - числовое значение
6) Object Type - объектный тип данных
7) RegExp - регулярные выражения

Вывод в документ HTML: обрамление тегами

Команда document.write() может выводить в документ не только голые данные, но и интерпретируемые теги. Рассмотрим следующий пример:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>document.write(): обрамление тегами</title>
		</head>
		<body>
		
			<script>
				var str1 = "Приветствие";
				var str2 = "Здорово, Василий!";
				
				document.write("<h1>" + str1 + "</h1>" + "<p>" + str2 + "</p>");
			</script>
		
		</body>
	</html>

В этом примере мы не просто вывели строки в документ, а обрамили их тегами заголовка h1 и абзаца

Функция prompt

Функция prompt(title, default) принимает два аргумента, выводит модальное окно с текстом title и полем ввода, которое заполнено по умолчанию строкой default. prompt ждёт пока пользователь нажмёт кнопку "ok" или "cancel" (нажатие Esc будет равносильно "cancel"). По завершении своей работы, prompt возвращает то, что ввёл пользователь, либо значение null в случае, если ввод отменён.

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Функция prompt</title>
		</head>
		<body>
		
			<script>
				var result = prompt("Сколько вам лет?", "32");
				document.write("<h1>Ваш ответ: " + result + "</h1>");
			</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Следует учитывать, что prompt() возвращает строковое значение, даже если это число, поэтому при выполнении каких-то арифметических действий потребуется использовать функцию parseInt(), преобразующую строку в число:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Функции prompt и parseInt</title>
		</head>
		<body>
		
			<script>
				var result1 = prompt("Введите первое число", "0");
				var result2 = prompt("Введите второе число", "0");
				var result = parseInt(result1) + parseInt(result2);
				document.write("<h1>Результат сложения: " + result + "</h1>");
			</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

В случае, если пользователь ввёл не число или нажал отмену, то будет получено NaN.

Операции сравнения

Значение Описание
== Равно (не путать с оператором присваивания =)
=== Равно с учётом типа (в этом случае число 1 будет не равно строке "1")
!= Не равно
> Больше
< Меньше
>= Больше или равно
<= Меньше или равно

При сравнении строк на равенство следует учитывать, что две строки считаются равными, если все символы в них одинаковы. При сравнении строк на больше/меньше строки сравниваются по каждому символу, при этом берётся код символа и большим считается тот символ, чей код больше.

Правило лжи в JavaScript

Правило лжи применяется при приведении различных значений к булеву типу. Ложью будет считаться:

1. булевый false (false)
2. пустая строка ("")
3. число ноль (0)
4. отсутствие значения (null)
5. неопределённое значение (undefined)
6. значение NaN (NaN)

К примеру, для того, чтобы проверить, что строка не пуста, достаточно в условии написать выражение:

var x = "";

if(x){
 document.write(x)
}else{alert('Пустая строка!')};

При этом x будет приведён к булеву значению false, если в нём не содержится никаких символов (в том числе пробелов) и сработает условие else, в противном случае сработает условие if и в документ будет выведено содержание строки x.

Это правило можно применить для проверки заполнения полей ввода:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			<input type="text" id="a" />
			<input type="button" id="b" value="Проверить"  />
			
			<p id="c"></p>
			
			<script>
				document.querySelector('#b').addEventListener("click", func)
			
				function func(){
				var x = document.querySelector('#a').value;
				
				if(x){
				 document.querySelector('#c').textContent = x
				}else{alert('Пустая строка!')};
				
				};
				
			</script>
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Следует учитывать, что строка var x = document.querySelector('#a').value; возвращает именно строку, поэтому блок else с alert('Пустая строка!') сработает только в случае пустой строки, но не сработает, если ввести 0, null, false, NaN, undefined, т.к. это будут строки "0", "null" и т.д.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля