Как JavaScript сочетается с другими веб-технологиями

  1. HTML предназначен для содержания
  2. CSS для презентации
  3. JavaScript предназначен для интерактивности
  • проверять ввод данных пользователем в форме HTML перед отправкой данных на сервер;
  • создавать формы, которые реагируют на ввод данных пользователем без доступа к серверу;
  • изменять внешний вид HTML-документов и записывать данные в браузер Windows;
  • открывать и закрывать новые окна или фреймы браузера;
  • создавать небольшие, но полные клиентские программы.

Что можно делать с помощью JavaScript - несколько примеров:

  1. Подтвердить ввод пользователя
  • Проверка значений в полях ввода
  • Проверка пароля
  • Проверка числовых значений

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?" );

Да пребудет с вами Сила, все ботаники!