Как JavaScript сочетается с другими веб-технологиями
- HTML предназначен для содержания
- CSS для презентации
- JavaScript предназначен для интерактивности
- проверять ввод данных пользователем в форме HTML перед отправкой данных на сервер;
- создавать формы, которые реагируют на ввод данных пользователем без доступа к серверу;
- изменять внешний вид HTML-документов и записывать данные в браузер Windows;
- открывать и закрывать новые окна или фреймы браузера;
- создавать небольшие, но полные клиентские программы.
Что можно делать с помощью JavaScript - несколько примеров:
- Подтвердить ввод пользователя
- Проверка значений в полях ввода
- Проверка пароля
- Проверка числовых значений
2. Формы, которые реагируют на ввод данных пользователем без доступа к серверу.
- Формы, загружающие URL
- Формы, которые вычисляют
3. Записывайте информацию в HTML-документы с помощью операторов Javascript.
- Программный вывод через document.write ();
- Отрегулируйте цвета документа
- Изменить / перезаписать изображения в документе
4. Открывайте и закрывайте окна и фреймы браузера.
- Создавайте новые окна браузера с документами или запрограммированным выводом
5. Создавайте небольшие, но полные клиентские программы.
- Калькуляторы
- Игры
6. Управляйте роботами
7. Управление дронами (IOT)
Тег <script> </script>
<html>
<head>
<title>The Script Tag 1</title>
<script>
document.write("<p>Script tags can be placed in the head of an HTML document.</p>");
</script>
</head>
<body>
<h1>The Script Tag: Example 1</h1>
<p>
Script tags can also be placed in the body of an HTML document.
</p>
<script>
document.write("<p>Script tags will be ignored by other browsers that do not understand them.</p>");
</script>
</body>
</html>
Основы синтаксиса JavaScript
Комментарии
Javascript поддерживает однострочные и многострочные комментарии:
// Single and multi line comments.
// this is an example of a single line comment.
/*
* this is an example
* of a
* multi line
* comment.
*/
Пробел
Пробелы также игнорируются в JavaScript.
var hello = "Hello";
var world = "World!";
Вот пример с добавлением пробелов для удобства чтения:
var foo = function() { for ( var i = 0; i < 10; i++ ) { alert( i ); } };
foo();
И тот же код без пробелов. Читать намного сложнее!
var foo=function() {for(var i=0;i<10;i++){alert(i);}};foo();
Зарезервированные слова
Есть несколько зарезервированных слов, которые нельзя использовать при объявлении пользовательских переменных и функций. Некоторые из этих зарезервированных слов в настоящее время реализованы, некоторые сохранены для использования в будущем, а другие зарезервированы по историческим причинам.
Список слов и подробные объяснения для каждого можно найти на сайте Mozilla Developer Network JavaScript Reference.
Идентификаторы
Идентификаторы используются для присвоения переменным и функциям уникального имени, чтобы впоследствии на них можно было ссылаться по этому имени. Имя идентификатора должно соответствовать нескольким правилам:
- Не может быть зарезервированным словом.
- Может состоять только из букв, цифр, знаков доллара и подчеркивания.
- Первый символ не может быть числом.
Лучше всего называть идентификаторы так, чтобы они были понятны вам и другим разработчикам позже.
// Valid identifier names.
var myAwesomeVariable = "a";
var myAwesomeVariable2 = "b";
var my_awesome_variable = "c";
var $my_AwesomeVariable = "d";
var _my_awesome_variable_$ = "e";
Типы
Типы в JavaScript делятся на две категории: примитивы и объекты. К примитивным типам относятся:
- Нить
- Число
- Логический
- Нулевой
- Неопределенный
Нить
Строки - это текст, заключенный в одинарные или двойные кавычки. Лучше всего постоянно использовать одно или другое. Могут быть случаи, когда строка содержит кавычки, которые противоречат тем, которые использовались для создания строки. В этом случае либо экранируйте символы, используя обратную косую черту, либо используйте разные кавычки вокруг строки.
Строки могут быть заключены в двойные или одинарные кавычки.
var a = "I am a string";
var b = 'So am I!';
alert( a );
alert( b );
Иногда строка может содержать кавычки.
var statement1 = 'He said "JavaScript is awesome!"'; var statement2 = "He said \"JavaScript is awesome!\"";
var welcome = "Hello World";
После присвоения буквальной строки Hello World приветствием является строковый объект.
result = welcome.length; //result is the number 11
result = welcome.toUpperCase(); //result is HELLO WORLD
result = welcome.toLowerCase(); //result is hello world
result = welcome.charAt( 0 ); //result is the character H
result = welcome.substring( 0, 5 ); //result is the string Hello
result = welcome.indexOf( "World", 0 ); //return is the number 6.
//If the string is not found indexOf returns -1
Число
Типы чисел - любое положительное или отрицательное числовое значение. Нет различия между целочисленными значениями и значениями с плавающей запятой.
var num1 = 100;
var num2 = 100.10;
var num3 = 0.10;
JavaScript - это язык со слабой типизацией. Программистам, привыкшим к строго типизированным языкам, таким как C ++ или Java, трудно к этому привыкнуть. Например, в C / C ++ / Java следующие операторы, включая целочисленное деление,
int result;
result = 5/10;
результат будет равен 0. В JavaScipt нет явных целых чисел или чисел с плавающей запятой. «Неофициально» вы получите то или иное обратно.
result = 5/10;
результату будет присвоено 0,5
Точность JavaScript
Целые числа считаются точными до 15 цифр.
Максимальное количество десятичных знаков - 17, но арифметика с плавающей запятой не всегда точна на 100%:
var result;
result = 0.2 + 0.1; // result will be 0.30000000000000004
Решение этой проблемы зависит от типа проблемы, с которой вы имеете дело. Вы можете округлить результат, обрезать его или работать с меньшим размером.
Числа в JavaScript - это «значения IEEE 754 в 64-битном формате двойной точности».
0.1 + 0.2 == 0.3; //false
Вы можете использовать parseInt для преобразования строк в «целые числа».
parseInt("20", 10); //20
Специальное значение NaN («Не число») возвращается, если строка не является числовой.
parseInt("ABC", 10) //NaN
Тип Принуждение
JavaScript использует приведение типов всякий раз, когда ему нужно выполнить операцию с двумя операндами, которые должны быть одного и того же типа, но не являются.
8 == "8" // true
Полагаться на приведение типов - не лучшая идея.
null == udefined // true false == undefined // false false == "false" // false
'' == '0' // false 0 == '' // true 0 == '0' // true
Чтобы избежать приведения типов, используйте операторы === и! ==.
8 === "8" // false
null === udefined // false false === undefined // false false === "false" // false
'' === '0' // false 0 === '' // false 0 === '0' // false
Логический
Логические типы могут быть истинными или ложными.
var okay = true;
var fail = false;
Нулевые и Неопределенные
Null и undefined - особые типы в JavaScript. Нулевые типы - это значения, которые представляют отсутствие значения, как и во многих других языках программирования. Неопределенные типы представляют состояние, в котором вообще не было присвоено никакого значения. Этот тип создается двумя способами: с использованием ключевого слова undefined или без определения значения вообще.
// Achieve a null value var foo = null;
// Two ways to achieve an undefined value. var bar1 = undefined; var bar2;
Объекты
Все остальное в JavaScript считается объектом. Хотя существует множество встроенных объектов, здесь мы рассмотрим:
- Объект
- Множество
- Функция
Условные утверждения
В JavaScript у нас есть следующие условные операторы:
- оператор if - используйте этот оператор для выполнения некоторого кода, только если указанное условие истинно.
- оператор if… else - используйте этот оператор для выполнения одного кода, если условие истинно, и другого кода, если условие ложно.
- if… else if… .else оператор - используйте этот оператор, чтобы выбрать один из множества блоков кода для выполнения.
- Оператор переключения - используйте этот оператор, чтобы выбрать один из множества блоков кода для выполнения.
Если заявление
Используйте оператор if для выполнения некоторого кода, только если заданное условие истинно.
Синтаксис
if (condition) {
// code to be executed if condition is true
}
Пример
if ( age < 16 ) {
entry = "free";
}
Если… else Заявление
Используйте оператор if… .else для выполнения некоторого кода, если условие истинно, и другого кода, если условие не истинно.
Синтаксис
if ( condition ) {
// code to be executed if condition is true
} else {
// code to be executed if condition is not true
}
Пример
if ( age < 16 ) {
entry = "free";
} else {
entry = "£10";
}
If… else if… .else Заявление
Используйте оператор if… .else if… else, чтобы выбрать один из нескольких блоков кода для выполнения.
Синтаксис
if ( condition1 ) {
// code to be executed if condition1 is true
} else if ( condition2 ) {
// code to be executed if condition2 is true
} else {
// code to be executed if neither condition1 nor condition2 is true
}
Пример
if ( age < 12 ) {
entry = "free";
} else if ( age < 18 ) {
entry = "£10";
} else {
entry = "£20";
}
Вопрос
Они эквивалентны и почему?
if ( age < 12 ) { entry = "free"; } else if ( age < 18 ) { entry = "£10"; } else { entry = "£20"; }
if ( age < 18 ) { entry = "£10" ; } else if ( age < 12 ) { entry = "free"; } else { entry = "£20"; }
Заявление о переключении JavaScript
Синтаксис
switch( n ) {
case 1:
// execute code block 1
break;
case 2:
// execute code block 2
break;
default:
// code to be executed if n is different from case 1 and 2
}
Пример
var day = new Date().getDay(); switch ( day ) { case 0: message = "Today is Sunday"; break; case 1: message = "Today is Monday"; break; case 2: message = "Today is Tuesday"; break; case 3: message = "Today is Wednesday"; break; case 4: message = "Today is Thursday"; break; case 5: message = "Today is Friday"; break; case 6: message = "Today is Saturday"; break; }
document.write( message );
Пример со значением по умолчанию
var day = new Date().getDay(); switch ( day ) { case 0: message = "Today is Sunday"; break; case 6: message = "Today is Saturday"; break; default: message = "Looking forward to the weekend"; }
document.write( message );
Операторы сравнения
Операторы сравнения используются в логических операторах для определения равенства или различия между переменными или значениями.
Логические операторы
Логические операторы используются для определения логики между переменными или значениями.
Циклы JavaScript
В JavaScript у нас есть следующие циклы:
- for - повторяет блок кода несколько раз.
- for / in - перебирает свойства объекта.
- while - перебирает блок кода, пока выполняется указанное условие.
- do / while - также перебирает блок кода, пока выполняется указанное условие.
Цикл For
Цикл for часто бывает тем инструментом, который вы используете, когда хотите создать цикл.
Синтаксис
for (initial statement; boolean expression; statement) {
// the code block to be executed
}
- начальная инструкция. Эта инструкция выполняется до начала цикла.
- логическое выражение. Это выражение принимает значение "истина" или "ложь". Если истина, цикл входит.
- Оператор. Этот оператор выполняется в конце каждого цикла.
Пример
for ( counter=0; counter < 10; counter++ ) {
document.write( "<p>" );
document.write( "Counter is: " + counter );
document.write( "<p>" );
}
Цикл "Пока"
Цикл for часто бывает тем инструментом, который вы используете, когда хотите создать цикл.
Синтаксис
while ( boolean expression ) {
// the code block to be executed
}
- логическое выражение. Это выражение принимает значение "истина" или "ложь". Если истина, цикл введен.
- Оператор (ы) Блок кода, который должен быть выполнен
Пример
counter = 0;
while( counter < 10 ) {
document.write( "<p>" );
document.write( "Counter is: " + counter );
document.write( "</p>" );
counter++;
}
Заявление о перерыве
Оператор break прерывает цикл и продолжает выполнение кода после цикла (если есть):
Пример
counter = 0;
while ( true ) { //potentially infinite loop
if ( counter > 5 ) break;
counter++;
}
Заявление "Продолжить"
Оператор continue прерывает одну итерацию (в цикле), если возникает указанное условие, и продолжает следующую итерацию в цикле.
Пример
counter = 0;
while ( counter < 6 ) {
counter++;
if ( counter % 2 == 0 ) continue;
document.write( "Counter is now: " + counter );
}
Диалоговые окна JavaScript
тревога();
Показать диалоговое окно с сообщением
Пример
alert( "Your Message Goes Here!" );
подтверждать();
Показать диалоговое окно и вернуть логическое значение
Пример
var answer = confirm( "Are you sure you want to close...." );
if ( answer == true ) {
alert( "You said OK!" );
} else {
alert( "You said Cancel!" );
}
незамедлительный();
Показать диалоговое окно и вернуть строку
Пример
var answer = prompt( "Enter something here:", "anything will do" );
alert( "You said " + answer );
Разрывы строк в диалоговых окнах
Чтобы отобразить разрывы строк внутри всплывающего окна, используйте обратную косую черту, за которой следует символ n.
Пример
alert( "Hello,\nHow are you?" );
Да пребудет с вами Сила, все ботаники!