Обобщить и систематизировать основной синтаксис JavaScript.

Автор：Eve Cole Время обновления：2022-08-08 08:55:00

Эта статья дает вам необходимые знания о JavaScript, в которых в основном рассматриваются вопросы, связанные с базовым синтаксисом. JavaScript — самый популярный язык сценариев в Интернете. Надеюсь, он будет полезен всем.

Введение

JavaScript — самый популярный язык сценариев в Интернете. Этот язык можно использовать для HTML и Интернета, а также широко использовать на серверах, ПК, ноутбуках, планшетах, смартфонах и других устройствах.

Особенности JavaScript

JavaScript — это язык сценариев.
JavaScript — легкий язык программирования.
JavaScript — это программный код, который можно вставлять в HTML-страницы.
Когда JavaScript вставлен в HTML-страницу, он может выполняться всеми современными браузерами.
JavaScript легко выучить.

JavaScript был стандартизирован как язык ECMA (Европейской ассоциацией производителей компьютеров) посредством ECMAScript.

поддержка JSON. В

Год	Название	Описание
1997	ECMAScript 1	Первая версия
1998	ECMAScript 2	Изменения версии
1999	ECMAScript 3	Добавление регулярного выражения Добавление try/catch
	ECMAScript 4	не выпущен.
В ECMAScript 5	2009 г.	добавлен «строгий режим», а в ECMAScript
2011	г.	добавлена
ECMAScript	2015	г.
добавлены	классы	и модули.
Добавьте

использование Array.prototype.includes.

Скрипты в HTML должны располагаться между тегами <script> и </script>. Скрипты можно размещать в разделах <body> и <head> HTML-страницы.

Часто нам необходимо выполнить код при возникновении события, например, когда пользователь нажимает кнопку. Если мы поместим код JavaScript в функцию, мы сможем вызвать функцию при возникновении события.

Пример 1: функция сценария в заголовке

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>скрипт в теге head</title>
    <скрипт>
        функция myFunction() {
            document.getElementById("demo").innerHTML = "Это моя функция";
        }
    </скрипт>
</голова>
<тело>
<h1>Моя функция</h1>
<p id="demo">Абзац</p>
<button type="button" onclick="myFunction()">Это функция</button>
</тело>
</html>

Пример 2: функция сценария в теле

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>скрипт в теле</title>
</голова>
<тело>
<h1>Моя функция</h1>
<p id="demo">Моя функция</p>
<button type="button" onclick="myFunction()">Нажмите</button>
<скрипт>
    функция myFunction() {
        document.getElementById("demo").innerHTML = "Это моя функция"
    }
</скрипт>
</тело>
</html>

JavaScript также можно разместить снаружи для вызова. Обратите внимание, что внешнее расширение — .js.

Пример 3: Внешний вызов JavaScriptExternal

call.js

function myFunction() {
    document.getElementById('demo').innerHTML = "Это моя функция"
}

Вызов внешнего скрипта

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Вызов внешнего скрипта</title>
</голова>
<тело>
<p id="demo">Абзац текста</p>
<button type="button" onclick="myFunction()">Попробуйте</button>
<script src="external script.js"></script>
</тело>
</html>

Вывод

данных JavaScript можно выводить разными способами:

используйте window.alert() для отображения всплывающего окна с предупреждением.
Используйте метод document.write() для записи содержимого в HTML-документ.
ИспользуйтеinnerHTML для записи в элементы HTML.
Используйте console.log() для записи в консоль браузера.

Пример 1: вывод всплывающего окна aler()

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>вывод оповещения</title>
</голова>
<тело>
<h1>вывод оповещения</h1>
<скрипт>
    окно.alert(5 + 6)
</скрипт>
</тело>
</html>

Пример 2: вывод document.write()

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>вывод document.write</title>
</голова>
<тело>
<h1>вывод document.write</h1>
<скрипт>
    document.write(Дата());
    document.write("Привет,Веб!");
</скрипт>
</тело>
</html>

Пример 3: Запись в HTML-документ

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Запись в HTML-документ</title>
</голова>
<тело>
<h1>Запись в HTML-документ</h1>
<скрипт>
    функция myFunction() {
        document.write("выход функции");
    }
</скрипт>
<button onclick="myFunction()">Нажмите здесь</button>
</тело>
</html>

Пример 4. Используйте console.log() для записи в консоль браузера

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Используйте console.log() для записи в консоль браузера</title>
</голова>
<тело>
<h1>console.log() записывает в консоль браузера</h1>
<скрипт>
    а = 5;
    б = 6;
    в = а + б;
    консоль.журнал(с)
</скрипт>
</тело>
</html>

Введение в синтаксис

. JavaScript — это язык сценариев. Это легкий, но мощный язык программирования.

Литералы

В языках программирования обычно фиксированные значения называются литералами.

Числовой литерал: это может быть целое число, десятичное число или экспоненциальное представление (e). Такие как 3,14, 5,88 и т. д.
Строковый литерал: « Вы можете использовать одинарные или двойные кавычки. Например, «Hello», «Web» и т. д.
Литерал выражения: фиксированное значение для расчета. 3 + 2,2, 3,14 * 2 и т. д.
Массив (Array): Литерал: Определить массив. Например, [1,2,3,4,5,6].
Объект: Литерал: Определите объект. Например, {firstName: «Джон», LastName: «Доу», возраст: 50, цвет глаз: «синий». "}.
Функциональный литерал: определите функцию. Например, function myFunction(a, b) { return a * b;}.

Обратите внимание, что в JavaScript оператор должен завершаться знаком ";"

Переменные

JavaScrip

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

var y = false // Логическое значение var length = 16; // Число var Points = x * 10; // Расчет числа var LastName = "Johnson" // Строка var cars = ["Saab", "Volvo", "BMW"] // Массив var person = {firstName: "John", LastName:"Doe"}; // Словарь объектов

JavaScript function

Чтобы многократно ссылаться на одну и ту же функцию и уменьшить удобство написания и обслуживания кода, в JavaScript предусмотрены функциональные функции, управляемые ключевым словом function:

function myFunc (a , б) {
    return a + b; // Возвращаем результат a+b}

Возможности JavaScript

По сравнению с другими языками, JavaScript имеет следующие особенности:

JavaScript чувствителен к регистру.
JavaScript использует набор символов Unicode.
JavaScript рекомендует использовать верблюжий регистр именования для определения переменных и избегать ключевых слов при именовании.
JavaScript — слабо типизированный язык, и переменные определяются с помощью ключевого слова var.

реализуется

ключевые
слова	JavaScript	(	в
алфавитном	порядке	)








			var
по умолчанию,	если	public	void
delete,	return	Volatible	,
do	import	short	, while
double	in	static	с

комментарием JavaScript (так же, как Java)

// Это код: комментарий из одного предложения, обычно клавиша Ctrl + L в редакторе.

/* Это код*/: Многострочные комментарии, обычно клавиши Ctrl + Shift + L в редакторе.

Операторы

Операторы JavaScript — это команды, выдаваемые браузеру и сообщающие браузеру, что делать. Следующий оператор JavaScript выводит текст «Hello World!» в элемент HTML с id="demo":

document.getElementById("demo").innerHTML = "Hello World!";

В отличие от Python, все блоки кода JavaScript находятся в In. фигурные скобки, это очень похоже на Java.

Идентификатор Java

Блок операторов Переключатель функции throw

Общий идентификатор JavaScript Оператор
Описание	Break
используется	для выхода из цикла.
catch	выполняется, когда во время выполнения блока операторов try возникает ошибка.
continue	пропускает итерацию в цикле.
do ... while	выполняет блок операторов и продолжает выполнение блока операторов, когда условный оператор истинен.
for	может выполнить блок кода указанное количество раз, если условный оператор истинен.
for ... in	используется для обхода свойств массива или объекта (цикл по свойствам массива или объекта).
function	определяет функцию
if...else	для выполнения различных действий в зависимости от разных условий.
обратного	выхода
используется	для выполнения различных действий в зависимости от различных условий.
выдает	(генерирует) ошибку.
try	реализует обработку ошибок и используется вместе с catch.
var	объявляет переменную.
while	Когда условный оператор истинен, выполнить блок операторов.

Большинство языков умеют автоматически заполнять пробелы. Мы рекомендуем добавлять пробелы с обеих сторон оператора, чтобы было понятно и красиво. Однако вам следует обратить внимание на использование пробелов в HTML и не заморачиваться. В JavaScript следующие два предложения одинаковы:

var a = 10;
var b=10;

Подобно Python, JavaScript также является языком сценариев и интерпретируется.

Определение

объекта

Объект

Все является объектом, абстрактным экземпляром характеристик среди вещей с одинаковыми характеристиками. Как Сяо Мин среди людей.

В JavaScript объект представляет собой контейнер переменных атрибутов, аналогичный словарю в Python или хэш-карте в Java, который определяет атрибуты объекта.

вар люди = {
    Имя: «Майк»,
    фамилия: «Смит»,
    возраст: «18»,
    адрес: «Пекин»,
    должность: «Студент»
};

Выше приведено определение объекта. Конечно, можно написать и в одну строку. Я делаю это ради красоты и призываю всех писать так в будущем.

Чтобы получить доступ к свойствам объекта,

мы можем сказать: «Объекты JavaScript являются контейнерами для переменных». Однако мы обычно думаем об «объектах JavaScript как о контейнерах пар ключ-значение». Пары ключ-значение обычно записываются как ключ: значение (пары ключ-значение обычно называются свойствами объекта в объектах JavaScript). Мы также получаем доступ к свойствам через универсальный "." (это используется в большинстве языков).

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Это сайт</title>
</голова>
<тело>
<h1>Доступ к атрибутам класса</h1>
<!--Следующий оператор должен идти перед скриптом-->
<p id="demo"></p>
<скрипт>
    вар люди = {
        Имя: «Майк»,
        фамилия: «Смит»,
        возраст: «18»,
        адрес: «Пекин»,
        должность: «Студент»
    };
    document.getElementById("демо").innerHTML =
        люди["имя"] + "." + люди.фамилия;
</скрипт>
</тело>
</html>

Два метода доступа: вы можете использовать имя объекта.свойство или имя объекта.["свойство"].

Функция

Функция — это управляемый событиями или многократно используемый блок кода, который выполняется при вызове. При вызове этой функции выполняется код внутри функции. Функции могут вызываться непосредственно при возникновении события (например, когда пользователь нажимает кнопку) и могут вызываться из любого места с помощью JavaScript.

Параметры и возвращаемые значения

Когда вы вызываете функцию, вы можете передавать ей значения, называемые параметрами, и количество параметров не ограничено.

функция myFunction( var1 , var2 )
{
код
}

При вызове параметров их следует передавать в строгом соответствии с их порядком, как показано ниже:

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Это веб-сайт JavaScript</title>
</голова>
<тело>
<h1>Проблема с передачей параметров функции</h1>
<p>Чтобы позвонить, нажмите кнопку ниже</p>
<button onclick="myFunc('Mike','18','Beijing')">Нажмите здесь</button>
<скрипт>
    функция myFunc(имя, возраст, адрес) {
        alert("Меня зовут " + name + ", возраст " + age + " и мой дом находится в " + адресе);
    }
</скрипт>
</тело>
</html>

Функциям JavaScript разрешено иметь возвращаемые значения, и ключевым словом return является return. Когда функция возвращает значение, функция прекращает выполнение, и инструкции, следующие за возвратом, не будут выполнены.

Пример: вычислить произведение двух чисел и вернуть результат

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Веб-сайт с JavaScript</title>
</голова>
<тело>
<h1>Вычислить значение двух чисел и вернуть результат</h1>
<p id="demo"></p>
<скрипт>
    функция myFunc(a, b) {
        вернуть а * б;
    }

    document.getElementById("demo").innerHTML = myFunc(3, 4);
</скрипт>
</тело>
</html>

Переменные Переменные

JavaScript делятся на два типа:

Глобальные переменные: переменные, объявленные вне функции, являются глобальными переменными, и все сценарии и функции на веб-странице могут получить к ним доступ.
Локальные переменные. Переменная, объявленная внутри функции JavaScript (с использованием var), является локальной переменной, поэтому доступ к ней возможен только внутри функции.

Когда мы присваиваем значение необъявленной переменной JavaScript, эта переменная автоматически будет рассматриваться как свойство окна. Например, следующий оператор:

name = "Mike"

объявит имя атрибута окна. Глобальные переменные, созданные путем присвоения значений необъявленным переменным в нестрогом режиме, являются настраиваемыми атрибутами глобального объекта и могут быть удалены. Например:

var var1 = 1; // Глобальные свойства невозможно настроить var2 = 2 // Без объявления var глобальные свойства можно настроить console.log(this.var1);
console.log(window.var1); // 1;

delete var1; // false невозможно удалить console.log(var1);

удалить вар2; 
console.log(удалить var2); // правда;
console.log(var2); // Переменная ошибки была удалена. Неопределенное

описание

события

события HTML — это события, которые происходят с элементами HTML. Когда JavaScript используется на HTML-страницах, JavaScript может инициировать эти события.

События HTML могут быть действиями браузера или действиями пользователя. Ниже приведены примеры событий HTM:

HTML-страница завершает загрузку.
Изменяется поле ввода HTML
.

Обычно при возникновении события вы можете что-то сделать. JavaScript может выполнять некоторый код при возникновении события. Атрибуты событий можно добавлять к элементам HTML, а для добавления элементов HTML можно использовать код JavaScript.

Одинарные кавычки: < some-HTML-element some-event = ' код JavaScript ' >
Двойные кавычки: < some-HTML-element some-event = " код JavaScript " >

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Событие JavaScript</title>
</голова>
<тело>
<h1>Два способа обработки событий JavaScript</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">Нажмите, чтобы просмотреть время 1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">Нажмите, чтобы просмотреть время 2</button>
</тело>
</html>

JavaScript обычно представляет собой многострочный код, а менее распространенный код вызывается через атрибуты событий.

<!DOCTYPE html>
<html lang="ru">
<голова>
    <мета-кодировка="UTF-8">
    <title>Событие JavaScript</title>
</голова>
<тело>
<h1>Вызов атрибута события JavaScript</h1>
<p>Нажмите, чтобы выполнить функцию <em>myFunc()</em></p>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        document.getElementById("one").innerHTML = Date();
    }
</скрипт>
</тело>
</html>

onclick

Общие события HTML
Описание	события
onchange	Изменение элемента HTML
Пользователь	нажимает на элемент HTML
onmouseover	Пользователь перемещает мышь на элемент HTML
onmouseout	Пользователь перемещает мышь от элемента HTML
onkeydown	Пользователь нажимает клавишу клавиатуры
при загрузке	Браузер завершил страницу. Дополнительные события будут продолжать распознаваться после загрузки

Роль события.

События можно использовать для обработки проверки формы, пользовательского ввода, поведения пользователя и действий браузера:

события запускаются при загрузке страницы,
события запускаются при закрытии страницы, когда
пользователь нажимает кнопку для выполнения действий
и для проверки.

Для

проверки легитимности содержимого, вводимого пользователем,

для выполнения кода события JavaScript можно использовать несколько методов.

Атрибут события HTML может напрямую выполнять код JavaScript.
Атрибут события HTML может вызывать функции JavaScript.
Вы можете указать собственный обработчик событий для элементов HTML.
Вы можете предотвратить возникновение событий.

Строка

: коллекция символов.

вар а = «абв»;
var b = "Hello";

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

var c = b[1]; // e

length

Это свойство позволяет вычислить длину строки.

<!DOCTYPE html>
<html>
<голова>
    <мета-кодировка="utf-8">
    <title>Длина строки</title>
</голова>
<тело>
<скрипт>
    var txtOne = «Привет, мир!»;
    document.write("<p>" + txtOne.length + "</p>");
    вар txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txtTwo.length + "</p>");
</скрипт>
</тело>
</html>

В JavaScript также есть некоторые специальные символы. Например, когда мы хотим напечатать кавычки, нам нужно добавить «" для экранирования, иначе компилятор не сможет их проанализировать.

общего специального символа JavaScript
Вывод	кода
'	одинарная кавычка
"	двойная кавычка
\	обратная косая черта
nперевод	строки
rcarriage	возврат
ttab	(символ табуляции)
	bbackspace
символ

строка символов fformfeed как объект

, обычно строки JavaScript представляют собой примитивные значения и может быть создан с использованием символов: var firstName = "Mike", но мы также можем использовать ключевое слово new для определения строки как объекта: var firstName = new String("Mike"), что похоже на общие

. Конструктор свойства строки.

описания	свойства
возвращает	функцию, создающую строку.
Длина	возвращает длину
прототипа	Позволяет добавлять свойства и методы к объектной

строке. Общие методы.
Описание	метода.
charAt()	возвращает символ в указанной индексной позиции.
charCodeAt()	возвращает Specify. значение Unicode символа в индексной позиции.
concat()	объединяет две или более строк и возвращает связанную строку.
fromCharCode()	преобразует Unicode в строку.
indexOf()	возвращает позицию, в которой указанный символ появляется впервые. строка.
LastIndexOf()	возвращает позицию последнего вхождения указанного символа в строке.
localeCompare()	использует локальный специальный порядок для сравнения двух строк.
match()	находит совпадение одного или нескольких регулярных выражений
replace()	заменяет на регулярное выражение Сопоставление подстроки
search()	извлекает значение, соответствующее регулярному выражению,
срез()	извлекает фрагмент строки и возвращает извлеченную часть в новую строку.
Split()	разбивает строку на массив подстрок
substr()	Извлекает указанное количество символов в строке из
подстроки начального индексного номера ()	Извлеките символы между двумя указанными индексными номерами в строке
toLocaleLowerCase ()	Преобразуйте строку в нижний регистр в соответствии с языковым стандартом хоста, существует только несколько языков (например, турецкий) имеют локальное сопоставление регистра
toLocaleUpperCase()	для преобразования строк в верхний регистр в соответствии с языковым стандартом хоста. Лишь некоторые языки (например, турецкий) имеют локальное сопоставление регистра
toLowerCase()	для преобразования строк.

в верхний регистр Преобразовать в нижний регистр toString() Возвращает значение

строкового

объекта
toUpperCase	(
)	Преобразовать
строку	в
верхний	регистр

Разница

1. Для базовых типов, таких как строка и число, существует разница

между == и === а) Сравнение между различными типами, == сравнивает «значения после преобразования в один и тот же тип», чтобы увидеть, являются ли «значения " равны, === если тип. Если они разные, результат будет неравным.
б) Для сравнения одного и того же типа прямое сравнение "значений" приведет к одному и тому же результату.

2. Для расширенных типов, таких как Array и Object, нет разницы между == и ===

для сравнения «адреса указателя».

3. Существует разница между базовыми типами и расширенными типами.

a) Для == преобразуйте. расширенный тип с базовым типом и выполнить сравнение «значений».
b) Поскольку типы различны, результат === является ложным.

4. != — это недействие ==, !== — это недействие = ==

вар число = 1;

вар стр="1";

вар тест = 1;

test == num // true тот же тип и то же значение test === num // true тот же тип и то же значение test !== num // false тест имеет тот же тип, что и num, и его значение тоже самое. неработоспособность должна быть ложной 

num == str //true Преобразовать str в число и проверить, равно ли оно. 

num != str //false == неработоспособность num === str //false тип отличается, возвращаем false напрямую 

num !== str //true Различные типы num и str означают, что они не равны. Неоперация, естественно, является истинной.

Оператор

Общие операторы JavaScript (y=5)
Пример	описания	оператора	x Результат операции	y Результат операции
+	сложение.	x =y+2	7	5
-Вычитание	x	=y-2	3	5
*	Умножение	x=y*2	10	5
/	Деление	x=y/2	2,5	5
%	по модулю (остаток)	x=y%2	1	5
++	приращение	x =++y	6	6
++	приращение	x=y++	5	6
--decrement	=	--y	4	4
--decrement	=	x=y--	5	4

Общие операторы присваивания JavaScript (x=10, y=5)
Примеры	операторов	эквивалентны	операциям Result
=	x = у		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=xy	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x= x/y	x=2
%=	x%=y	x=x%y	x=0

Общие операторы сравнения JavaScript (x=5)
Возвращаемое значение	сравнения	описания	оператора
==	равно	x==8	false
==	равно	x==5	true
= = =	Абсолютно равно (и значение, и тип равны)	x==="5"	false
= = =	Абсолютно равно (и значение, и тип равны)	x===5	true
!=	не равно	x!=8	true
!==	Не абсолютно равно (одно из значений и типов не совпадает равны или Оба не равны)	x!=="5"	true
!==		x!==5	false
>	больше	x>8	false
<	меньше	x<8	true
>=	больше или равно	x>=8	false
<=	меньше или равно	x<= 8	true
<=	меньше или равно	x<=8	true

Общие логические операторы JavaScript (x=6, y=3)
примеры	описания	операторов
&&	и	(x < 10 && y > 1) true
\|\|	или	(x== 5 \|\| y==5) является ложным
!	не	!(x==y) является истинным.

JavaScript также содержит условные операторы, которые присваивают значения переменным на основе определенных условий. Например:

имя переменной=(условие)?значение1:значение2

Условное суждение.

В JavaScript мы можем использовать следующие условные операторы:

оператор if — только когда указанное условие истинно, используйте этот оператор для выполнения кода оператор
if...else — когда условие Выполняет код, когда истинно, и другой код, когда условие ложно.
if...else if....else. Оператор — используйте этот оператор, чтобы выбрать один из нескольких блоков кода для выполнения
оператора переключения. — Используйте этот оператор, чтобы выбрать несколько одного. блоков кода для выполнения

оператора if

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

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Веб-сайт с JavaScript</title>
</голова>
<тело>
<h1>Это оператор if</h1>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        вар х = "";
        вар время = новая дата().getHours();
        если (время < 20) {
            x = «Здравствуйте, до 20:00»;
        }
        document.getElementById("один").innerHTML = x;
    }
</скрипт>
</тело>
</html>

Оператор if...else

Используйте оператор if...else для выполнения кода, когда условие истинно, и другого кода, когда условие ложно.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Веб-сайт с JavaScript</title>
</голова>
<тело>
<h1>Это оператор if...else</h1>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        вар х = "";
        вар время = новая дата().getHours();
        если (время < 20) {
            x = «Здравствуйте, до 20:00»;
        }еще {
            x = «Здравствуйте, после 20:00»;
        }
        document.getElementById("один").innerHTML = x;
    }
</скрипт>
</тело>
</html>

Несколько операторов if..else

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Веб-сайт с JavaScript</title>
</голова>
<тело>
<h1>Несколько операторов if...else</h1>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        вар х = "";
        вар время = новая дата().getHours();
        если (время < 12) {
            х = «Доброе утро»;
        } иначе если (время < 14) {
            х = «Добрый день»;
        }
        еще {
            х = «Добрый день»;
        }
        document.getElementById("один").innerHTML = x;
    }
</скрипт>
</тело>
</html>

Инструкция переключения

Используйте инструкцию переключения, чтобы выбрать один из нескольких блоков кода для выполнения. Например:

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Веб-сайт с JavaScript</title>
</голова>
<тело>
<h1>оператор переключения</h1>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        вар х = "";
        вар время = новая дата().getMonth();
        переключатель (время) {
            случай 0:
                х = «Январь»;
                перерыв;
            случай 1:
                х = «Февраль»;
                перерыв;
            случай 2:
                х = «Март»;
                перерыв;
            случай 3:
                х = «Апрель»;
                перерыв;
            случай 4:
                х = «Май»;
                перерыв;
            случай 5:
                х = «Джейн»;
                перерыв;
            случай 6:
                х = «Июль»;
                перерыв;
            случай 7:
                х = «Август»;
                перерыв;
            случай 8:
                х = «Сентябрь»;
                перерыв;
            случай 9:
                х = «Октябрь»;
                перерыв;
            случай 10:
                х = «Ноябрь»;
                перерыв;
            случай 11:
                х = «Декабрь»;
                перерыв;
            по умолчанию:
                х = «ОШИБКА»;
        }
        document.getElementById("один").innerHTML = x;
    }
</скрипт>
</тело>
</html>

Цикл

JavaScript поддерживает различные типы циклов:

for — циклически повторяет блок кода определенное количество раз;
for/in — циклически перебирает свойства объекта
while — циклически повторяет указанный блок кода, когда указанное условие истинно.
do/ while - также, если указано. Если условие истинно, зациклить указанный блок кода

для цикла

<!DOCTYPE html>
<html>
<голова>
    <мета-кодировка="utf-8">
    <title>Цикл JavaScript</title>
</голова>
<тело>
<h1>Нажмите кнопку, чтобы повторить код 5 раз. </h1>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="demo"></p>
<скрипт>
    функция myFunc() {
        вар х = "";
        для (вар я = 0; я <5; я++) {
            x = x + «Число равно» + i + «<br>»;
        }
        document.getElementById("demo").innerHTML = x;
    }
</скрипт>
</тело>
</html>

fo /in цикл

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p>Нажмите кнопку ниже, чтобы просмотреть атрибуты личности объекта</p>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        пусть х;
        пусть текст = "";
        константный человек = {
            Имя: «Билл»,
            фамилия: «Гейтс»,
            возраст: 56
        };
        за (x лично) {
            текст = текст + " " + человек [x];
        }
        document.getElementById("один").innerHTML = текст;
    }
</скрипт>
</тело>
</html>

цикл while

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p>Нажмите кнопку, и результат будет распечатан, если i меньше 5</p>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one">Показать здесь</p>
<скрипт>
    функция myFunc() {
        пусть х = "", я = 0;
        в то время как (я <5) {
            x = x + «Это число» + i + «<br>»;
            я++;
        }
        document.getElementById("один").innerHTML = x
    }
</скрипт>
</тело>
</html>

цикл do/ while

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p>Нажмите кнопку, чтобы напечатать число меньше 5</p>
<button onclick="myFunc()">Нажмите здесь</button>
<p id="one"></p>
<скрипт>
    функция myFunc() {
        пусть х = "";
        пусть я = 0;
        делать {
            x = x + «Число равно» + i + «<br>»;
            я++;
        }
        в то время как (я <5);
        document.getElementById("один").innerHTML=x;
    }
</скрипт>
</тело>
</html>

Сравнение циклов for и while

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>

<p>Это funcOne</p>
<button onclick="funcOne()">Нажмите funcOne</button>
<p id="one">funcOne здесь</p>

<p>Это funcTwo</p>
<button onclick="funcTwo()">Нажмите funcTwo</button>
<p id="two">funcTwo здесь</p>

<скрипт>
    функция funcOne() {
        числа = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        пусть я = 0;
        пусть addRes = 0;
        в то время как (числа[i]) {
            addRes += числа [я];
            я++;
        }
        document.getElementById("one").innerHTML = addRes + "<br>";

    }

    функция funcTwo() {
        числа = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        пусть я = 0;
        пусть mulRes = 1;
        для (; чисел[i];) {
            mulRes *= числа[i];
            я++;
        }
        document.getElementById("two").innerHTML = mulRes + "<br>";
    }
</скрипт>

</тело>
</html>

Операторы

Break и Continue

используются для выхода из циклов. continue используется для пропуска итерации в цикле.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p>Это операторы продолжения и прерывания</p>
<button onclick="funcOne()">Нажмите funcOne</button>
<p id="one">Это funcOne</p>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="funcTwo()">Нажмите funcTwo</button>
<p id="two">Это funcTwo</p>
<скрипт>
    функция funcOne() {
        пусть х = "";
        пусть я = 0;
        для (я = 0; я <10; я++) {
            если (я < 5) {
                перерыв;
            }
            x = x + «Число равно» + i + «<br>»;
        }
        document.getElementById("один").innerHTML = x;
    }

    функция funcTwo() {
        пусть х = "";
        пусть я = 0;
        для (я = 0; я <10; я++) {
            если (я === 8) {
                продолжать;
            }
            x = x + «Число равно» + i + «<br>»;
        }
        document.getElementById("два").innerHTML = x;
    }
</скрипт>

</тело>
</html>

typeof, null и undef

используют оператор typeof для определения типа данных переменной.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p id="one"></p>
<скрипт>
    document.getElementById("один").innerHTML =
        тип "Джон" + "<br>" +
        тип 3.14 + "<br>" +
        typeof false + "<br>" +
        typeof [1, 2, 3, 4] + "<br>" +
        typeof {имя: 'Джон', возраст: 34};

</скрипт>

</тело>
</html>

В JavaScript массив представляет собой особый тип объекта. Поэтому typeof [1,2,3,4] возвращает объект.

null означает пусто, то есть «ничего». При использовании обнаружения typeof возвращается объект. Объекты можно очистить с помощью undefined.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>
<p>один:</p>
<p id="one"></p>
<p>два:</p>
<p id="two"></p>

<скрипт>
    var person = {firstName: «Билл», LastName: «Гейтс», возраст: 50};
    вар человек = ноль;
    document.getElementById("one").innerHTML = тип человека;
    человек = не определено
    document.getElementById("два").innerHTML = тип человека;
</скрипт>

</тело>
</html>

Свойство конструктора

Свойство конструктора возвращает конструктор всех переменных JavaScript. Вы можете использовать свойство конструктора, чтобы проверить, является ли объект массивом или датой (содержащей строку «Дата») и т. д.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>

<p>Атрибут конструктор возвращает переменную или конструктор</p>
<p id="one">HRER</p>
<скрипт>
    document.getElementById("один").innerHTML =
        "Привет".конструктор + "<br>" +
        3.14.конструктор + "<br>" +
        false.constructor + "<br>" +
        [1, 2, 3].конструктор + "<br>" +
        {name: "Hello", возраст: 18}.constructor + "<br>" +
        новый конструктор Date(). + "<br>" +
        функция () {
        }.конструктор;
</скрипт>

</тело>
</html>

Преобразование типов

Переменные JavaScript можно преобразовать в новые переменные или другие типы данных:

автоматически преобразуются самим JavaScript
с помощью функций JavaScript

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>

<p>Метод String() может преобразовывать числа в строки</p>
<p id="one">ЗДЕСЬ</p>
<p>Метод toString() может преобразовывать числа в строки</p>
<p id="two">ЗДЕСЬ</p>
<скрипт>
    пусть х = 123;
    document.getElementById("один").innerHTML =
        Строка(x) + "<br>" +
        Строка(123) + "<br>" +
        Строка(100 + 23);
    document.getElementById("два").innerHTML =
        x.toString() + "<br>" +
        (123).toString() + "<br>" +
        (100 + 123.2).toString();
</скрипт>

</тело>
</html>

Унарный оператор+

Оператор+ можно использовать для преобразования переменных в числа:

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>

<P>Оператор typeof возвращает тип переменной или выражения</P>
<button onclick="myFuncOne()">НАЖМИТЕ ЗДЕСЬ</button>
<p id="one">ЗДЕСЬ</p>
<button onclick="myFuncTwo()">НАЖМИТЕ ЗДЕСЬ ДВА</button>
<p id="two">ЗДЕСЬ</p>
<скрипт>
    функция myFuncOne() {
        пусть у = «5»;
        пусть х = +y;
        document.getElementById("один").innerHTML =
            тип y + "<br>" + x + "<br>" + тип x;
    }

    функция myFuncTwo() {
        пусть а = "Привет";
        пусть б = +а;
        document.getElementById("два").innerHTML =
            тип a + "<br>" + b + "<br>" + тип b;
    }

</скрипт>
</тело>
</html>

в числовое

Преобразование типа JavaScript
преобразование	примитивного значения	преобразование в строковое	преобразование в логическое значение
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0 "	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity Infinity	"	Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	" 20 "	true
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob" ,"Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

регулярное выражение

Регулярное выражение (англ. Regular Expression, часто сокращенно называемое в коде регулярным выражением, регулярным выражением или RE) использует одну строку для описания и сопоставления серии шаблонов поиска строк, которые соответствуют определенному синтаксическому правилу.

search()

используется для получения указанной подстроки в строке или получения подстроки, соответствующей регулярному выражению, и возвращает начальную позицию подстроки.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-совместимый" content="IE=edge">
    <title>Название</title>
</голова>
<тело>

<p>Получить строку, соответствующую позицию</p>

<button onclick="myFuncOne()">НАЖМИТЕ ЗДЕСЬ</button>
<p id="one">ЗДЕСЬ</p>

<button onclick="myFuncTwo()">НАЖМИТЕ ЗДЕСЬ ДВА</button>
<p id="two">ЗДЕСЬ</p>

<скрипт>
    функция myFuncOne() {
        let str = "Привет, мир!";
        document.getElementById("one").innerHTML = str.search(/World/i);
    }

    функция myFuncTwo() {
        let str = "Добро пожаловать в Китай!";
        document.getElementById("два").innerHTML = str.search("Китай");
    }
</скрипт>

</тело>
</html>

replace()

используется для замены некоторых символов другими символами в строке или замены подстроки, соответствующей регулярному выражению.

<!DOCTYPE html>
<html lang="zh-CN">
<голова>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> Регулярное выражение замены () замена </p>

<Button OnClick = "myFuncone ()"> нажмите один </button>
<p id = "one"> Привет, java </p>

<Button OnClick = "myFunctwo ()"> Нажмите два </button>
<p id = "два"> Привет, java </p>

<скрипт>
    Функция myfuncone () {
        let str = document.getElementById ("One"). InnerHtml;
        document.getElementbyId ("One"). innerHtml = str.Replace (/java/i, "python");
    }

    Функция myfunctwo () {
        let str = document.getElementbyId ("два"). innerHtml;
        document.getElementById («два»). innerHtml = str.replace ("java", "javascipt");
    }
</скрипт>

</тело>
</html>

Регулярная модификатор

модификатора регулярного выражения
Описание	Описание
I	выполняет нечувствительное соответствие.
G	выполняет глобальный матч (находит все совпадения вместо того, чтобы останавливаться после того, как найден первый матч).
M	выполняет многостроение.

характера

Регулярное выражение Специальное
выражение	Описание
[ABC]	находит любой символ между квадратными скобками.
[0-9]	находит любое число от 0 до 9.
(x \| y)	находит любые параметры, разделенные \|.

регулярного выражения
Описание	квантификатора
n+	соответствует любой строке, содержащей хотя бы одну n .
n*	соответствует любой строке, содержащей ноль или более N '.
n	?

test ()

используется для определения того, соответствует ли строка определенную шаблон.

<!DOCTYPE html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<скрипт>
    let obj = new Regexp ("e");
    let boolone = obj.test («Привет, это JavaScript»);
    Пусть booltwo = obj.test («Это javascript»);
    document.write (boolone + "<br>" + booltwo);
</скрипт>

</тело>
</html>

exec ()

используется для получения совпадений регулярных выражений в строке. Если совпадение не найдено, возвратное значение равна нулю.

<!DOCTYPE html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<скрипт>
    Пусть obj = new Regexp (/e/);
    resone = obj.exec ("Привет, это JavaScript");
    restwo = obj.exec («Это javaScript»);
    /*Нет означает null*/
    document.write (resone + "<br>" + restwo);
</скрипт>

</тело>
</html>

Тип

ошибки ошибки

. Когда двигатель JavaScript выполняет код JavaScript, возникнут различные ошибки.
Это может быть синтаксическая ошибка, обычно ошибка кодирования или опечатка, изготовленная программистом.
Может быть орфографическая ошибка или отсутствующая особенность на языке (возможно, из -за различий в браузерах).
Ошибка может быть вызвана неправильным выводом с сервера или пользователя.
Конечно, это также может быть связано со многими другими непредсказуемыми факторами.

Попробуйте ... Установить

оператор TRY позволяет нам определить кодовый блок, который тестируется на ошибки во время выполнения, и оператор CATCH позволяет нам определить кодовый блок, который выполняется, когда возникает ошибка в блоке кода TRY.

<!DOCTYPE html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<input type = "button" value = "view message" onclick = "myfunc ()">
<скрипт>
    Пусть txt = "";

    Функция myfunc () {
        пытаться {
            Alert111 («Привет, мир!»)
        }
        поймать (err) {
            txt = "Здесь есть ошибка  n  n";
            txt + = "Описание ошибки:" + err.message + " n  n";
            txt += "Нажмите OK, чтобы продолжить  n  n";
            предупреждение (TXT)
        }
    }
</скрипт>

</тело>
</html>

Throw

the Throw Throw позволяет нам создавать пользовательские ошибки. Правильный технический термин: создание или брось исключение. Если вы используете Throw с Try and Catch, вы можете управлять потоком программ и генерировать пользовательские сообщения об ошибках.

<!DOCTYPE html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> Введите число между 5-10 </p>
<метка для = "one"> </label> <input id = "one" type = "text">
<button type = "button" onclick = "myfunc ()"> нажмите </button>
<p id = "Сообщение"> здесь </p>

<скрипт>
    Функция myfunc () {
        Пусть сообщение;
        Пусть x;
        message = document.getElementById ("Сообщение");
        message.innerhtml = "";
        x = document.getElementById ("One"). Value;
        пытаться {
            if (x === "")
                бросить "значение пусто";
            if (isnan (x))
                бросить "не число";
            x = число (x);
            if (x <5)
                бросить "слишком маленький";
            if (x> 10)
                бросить "слишком большой";
        } поймать (ошибка) {
            message.innerhtml = "ошибка" + ошибка;
        }
    }
</скрипт>

</тело>
</html>

Function Call

Существует четыре способа вызовой функций JavaScript. Вообще говоря, в JavaScript это указывает на текущий объект, когда функция выполняется.

Вызов 1: Вызов в качестве функции

одна

функция myfunc (a, b) {
    вернуть a * b;
}

myfunc

2);

    вернуть a * b;
}

Window.myfunc (1, 2

;

<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> Функции, называемые методами </p>
<p id = "One"> здесь </p>

<скрипт>
    пусть myobject = {
        FirstName: «Билл»,
        Lastname: «Гейтс»,
        FullName: function () {
            вернуть this.firstname + "" + this.lastname;
        }
    };
    document.getElementbyId ("One"). innerHtml = myObject.fullName ();
</скрипт>

</тело>
</html>

вызов 3: Используйте конструктор, чтобы вызвать функцию

<! Doctype html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> В этом примере myfunc () является конструктором функции </p>
<p id = "One"> </p>
<скрипт>
    Функция myfunc (argone, argtwo) {
        this.name = argone;
        this.number = argtwo;
    }

    Пусть x = новый myfunc ("Привет", 123);
    document.getElementbyId ("One"). innerHtml = x.name;
</скрипт>

</тело>
</html>

Вызов 4: Вызовите функцию как метод функции

<! Doctype html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> Вызовы функции как методы функции </p>
<p id = "One"> здесь </p>

<скрипт>
    Пусть obj, массив;

    Функция myfunc (a, b) {
        вернуть a * b;
    }

    массив = [5, 6];
    obj = myfunc.apply (obj, массив);
    document.getElementbyId ("One"). innerHtml = obj;
</скрипт>

</тело>
</html>

Закрытие

встроенных функций

Фактически, в JavaScript все функции могут получить доступ к объему их верхнего уровня. JavaScript поддерживает вложенные функции, а вложенные функции могут получить доступ к переменным функции верхнего уровня. Встроенная функция plus () может получить доступ к переменной счетчике родительской функции:

<! Doctype html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> Встроенные функции </p>
<p id = "One"> здесь </p>

<скрипт>
    document.getElementById ("One"). innerHtml = add ();

    функция добавить() {
        Пусть счетчик = 0;

        function plus () {
            счетчик += 1;
        }

        plus ();
        возвратный счетчик;
    }
</скрипт>

</тело>
</html>

самостоятельное внедрение функции

закрытия

называется Bibao

<! Doctype html>
<html lang = "zh-cn">
<голова>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua-совместимый" content = "ie = edge">
    <title>Название</title>
</голова>
<тело>

<p> локальный счетчик </p>
<button type = "button" onclick = "myfunc ()"> счетчик </button>
<p id = "One"> здесь </p>

<скрипт>
    Пусть добавить = (function () {
        Пусть счетчик = 0;
        return function () {
            вернуть счетчик += 1;
        }
    })();

    Функция myfunc () {
        document.getElementById ("One"). innerHtml = add ();
    }
</скрипт>
</тело>
</html>