Экстракт JavaScript

Используется как встраиваемый язык для программного доступа к объектам приложений. Широко применяется в браузерах как язык сценариев на веб-страницах.

Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» является зарегистрированным товарным знаком корпорации Oracle в США.

Основы применения JS в HTML

  • допустимо размещать js-скрипты и в разделе <head>, и в разделе <body>
  • скрипт помещают в тэг <script>…</script>
  • скрипт из внешнего файла <script src=”https://myDomain/myPath/myScript.js”></script> облегчает чтение html и задействует механизм кэширования

JS-скрипт позволяет внести любые изменения в документ:

  • изменение содержания
    • изменяет текст в блоке document.getElementById(“myDiv”).innerHTML = “Hello JS!”;
    • перезагружает файл картинки document.getElementById(‘myImg’).src=’hello.gif’;
  • изменение стиля
    • изменяет размер шрифта блока document.getElementById(“myDiv”).style.fontSize = “35px”;
    • делает картинку невидимой document.getElementById(“mySVG”).style.display = “none”;
  • изменение события
    • замещение обработчика document.getElementById(“myButton”).onclick = function() { alert(‘Hello JS!’) };
    • добавление обработчика document.getElementById(“myInput”).addEventListener( “click” , () => alert(‘Hello JS!’));
      • удаление обработчика document.getElementById(“myInput”).removeEventListener( “click” , () => alert(‘Hello JS!’));

JS-скрипт позволяет осуществить html-вставку аналогично тому, как это осуществляет <?php ?> с той разницей, что вставка осуществится на стороне браузера:

Синтаксис

Комментарий

//
/*  */

Литерал /Literal

Явно заданное значение называется литерал, а

Переменная /Variable

Значение, которое может быть изменено, содержится переменной:

  • имена переменных регистрозависимые и соответствуют правилам имен, могут использовать латинские буквы, цифры и знаки _ и $
  • ключевое слово var объявляет переменную, видимую в области функции
  • ключевое слово let объявляет переменную, видимую в области блока
  • ключевое слово const объявляет переменную, видимую в области блока (как let), для немедленного присвоения значения, которое затем нельзя будет изменить
  • независимо от способа декларации, переменная видима в блоке и всех вложенных блоках, в т.ч. в блоках описанных в них функций
  • глобальная переменная декларируется вне функции
    • но по сути глобальная переменная является свойством глобального объекта window, поэтому доступна как window.variable
  • переменная до присвоения значения содержит undefined
    • выражение с переменной до ее объявления вызовет ошибку ReferenceError
  • повторная декларация переменной с тем же именем в том же блоке возможна только для var, для let и const это вызовет ошибку.

Операторы

Присвоение значения переменной выполняет знак = (assignment operator)

Типы

string number boolean array object

Оператор typeof
undefined. The type is also undefined.

x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Избегайте String, Number, and Boolean объектов. Они усложняют ваш код и замедляют скорость выполнения.

Функция

Функцией является блок кода {…}, который можно вызвать к выполнению с помощью имени функции заданным после ключевого слова function. Для выполнения внутрь функции могут передаваться аргументы, которые внутри фукнции ведут себя как локальные переменные. Выполнение функции прекращается после вычисления выражения после ключевого слова return:

Использование имени функции без () подразумевает объект функции, а не ее выполнение. Объект функции может быть “помещен” в переменную или передан другой функции в качестве параметра.

Являясь статическим объектом функция может иметь свойства, которые также являются статическими и будут сохранять значение в области видимости функции:

 

Строка

\’ ‘ Single quote
\” ” Double quote
\\ \ Backslash
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator

перенос строк допустимый не не желательный
document.getElementById(“demo”).innerHTML = “Hello \
Dolly!”;

When using the === operator, x and y are not equal:
let x = “John”;
let y = new String(“John”);

Объект

const person = {
firstName: “John”,
lastName : “Doe”,
id : 5566,
fullName : function() {
return this.firstName + ” ” + this.lastName;
}
};

objectName.propertyName or objectName[“propertyName”]

В JavaScript ключевое слово this относится к объекту.

Массив

 

  • var Declares a variable
    let Declares a block variable
    const Declares a block constant
    if Marks a block of statements to be executed on a condition
    switch Marks a block of statements to be executed in different cases
    for Marks a block of statements to be executed in a loop
    function Declares a function
    return Exits a function
    try Implements error handling to a block of statements

Событие

<script>
function demoCanvas() {
var b_canvas = document.getElementById(“demoCanvas”);
var b_context = b_canvas.getContext(“2d”);
var cIndex = 0;
var rIndex = 0;
for (rIndex = 0; rIndex < 6; rIndex++) {
for (cIndex = 0; cIndex < 30; cIndex++) {
b_context.fillStyle = “rgb(” + String(Math.floor(Math.random() * 256)) + “,” + String(Math.floor(Math.random() * 256)) + “,” + String(Math.floor(Math.random() * 256)) + “)”;
b_context.fillRect(cIndex * 25, rIndex * 25, 20, 20);
}
}
}
demoCanvas();
</script>

Класс

//

c

 

Примеры

 

Источники

Leave a Reply