Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<!--

-->
<html lang="ru">
    <head>
        <title>Введение в JavaScript</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <nav id="navbar">
            <header id="Doc_JS">Документация по JS</header>
            <ul>
                <li><a class="nav-link" href="#Что_такое_JavaScript">Что такое JavaScript</a></li>
                <li><a class="nav-link" href="#JavaScript_и_Java">JavaScript и Java</a></li>
                <li><a class="nav-link" href="#Первая_программа">Первая программа</a></li>
                <li><a class="nav-link" href="#Комментарии">Комментарии</a></li>
                <li><a class="nav-link" href="#Объявления">Объявления</a>
                    <ul>
                        <li><a class="nav-link" href="#Переменные">Переменные</a></li>
                        <li><a class="nav-link" href="#Объявление_переменных">Объявление переменных</a></li>
                        <li><a class="nav-link" href="#Присваивание_значений">Присваивание значений</a></li>
                        <li><a class="nav-link" href="#Область_видимости_переменных">Область видимости переменных</a></li>
                        <li><a class="nav-link" href="#Поднятие_переменных">Поднятие переменных</a></li>
                        <li><a class="nav-link" href="#Поднятие_функций">Поднятие функций</a></li>
                        <li><a class="nav-link" href="#Глобальные_переменные">Глобальные переменные</a></li>
                        <li><a class="nav-link" href="#Константы">Константы</a></li>
                    </ul>
                </li>
                <li><a class="nav-link" href="#Структуры_и_типы_данных">Структуры и типы данных</a>
                    <ul>
                        <li><a class="nav-link" href="#Типы_данных">Типы данных</a></li>
                        <li><a class="nav-link" href="#Преобразование_типов_данных">Преобразование типов данных</a></li>
                        <li><a class="nav-link" href="#Преобразование_строк_в_числа">Преобразование строк в числа</a></li>
                    </ul>
                </li>
                <li><a class="nav-link" href="#Ссылка">Ссылка</a></li>                
            </ul>
        </nav>            

        <main id="main-doc">
            <h1>Введение в JavaScript</h1>
            <section class="main-section" id="Что_такое_JavaScript">
                <header><h2>Что такое JavaScript</h2></header>
                <p>JavaScript - это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.</p>
                <p>JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:</p>
                <ul>
                    <li>JavaScript на стороне клиента расширяет ядро языка, предоставляя объекты для контроля браузера и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в форме HTML и обрабатывать пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.</li>
                    <li>JavaScript на стороне сервера расширяет ядро языка, предоставляя объекты для запуска JavaScript на сервере. Например, расширение на стороне сервера позволяет приложению соединяться с базой данных, обеспечивать непрерывность информации между вызовами приложения или выполнять манипуляции над файлами на сервере.</li>
                </ul>
            </section>

            <section class="main-section" id="JavaScript_и_Java">
                <header><h2>JavaScript и Java</h2></header>                    
                <p>JavaScript и Java похожи в одних отношениях, но фундаментально отличны в других. Javascript напоминает Java, но не имеет статической типизации и строгой проверки типов, которыми обладает Java. JavaScript следует большей части синтаксиса Java в выражениях, соглашениях об именовании и основного потока управления конструкциями, поэтому он был переименован из LiveScript в JavaScript.</p>
                <p>В отличие от системы скомпилированных классов Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом числе типов данных, представляющих числовые, логические и строковые значения. JavaScript имеет объектную модель на базе прототипов вместо более общей модели на базе классов. Модель объектов на базе прототипов предоставляет динамическое наследование, т.е. то, что наследуется, может отличаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как свободно-типизированные методы.</p>
                <p>По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p>
                <p>Java - это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.</p>
            </section>

            <section class="main-section" id="Первая_программа">
                <header><h2>Первая программа</h2></header>                    
                <p>Откройте в браузере Firefox Веб-консоль или Простой редактор JavaScript и создайте вашу первую программу на JavaScript:</p>
                <pre><code>function greetMe(yourName) { 
    alert("Привет " + yourName); 
} 

greetMe("Игорь");</code></pre>                    
            </section>

            <section class="main-section" id="Комментарии">
                <header><h2>Комментарии</h2></header>
                <p>Синтаксис комментариев является таким же, как и в C++ и во многих других языках:</p>
                <pre><code>// Комментарий, занимающий одну строку.

/* Комментарий, 
занимающий несколько строк.
*/

/* Нельзя вкладывать /* комментарий в комментарий */ SyntaxError */</code></pre>
            </section>

            <section class="main-section" id="Объявления">
                <header><h2>Объявления</h2></header>
                <p>В JavaScript существует три вида объявлений:</p>
                <dl>
                    <dt><strong>var</strong></dt>
                    <dd>Объявляет переменную, инициализация переменной значением является необязательной.</dd>
                    <dt><strong>let</strong></dt>
                    <dd>Объявляет локальную переменную в области видимости блока, инициализация переменной значением является необязательной.</dd>
                    <dt><strong>const</strong></dt>
                    <dd>Объявляет именованную константу, доступную только для чтения.</dd>
                </dl>
            </section>

            <section class="main-section" id="Переменные">
                <header><h3>Переменные</h3></header>
                <p>Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называютсяidentifiers и должны соответствовать определенным правилам.</p>
                <p>Идентификатор в JavaScript должен начинаться с буквы, нижнего подчеркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).</p>
                <p>Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать управляющие последовательности Unicode как символы в идентификаторах.</p>
                <p>Некоторые примеры корректных имен: Number_hits, temp99,  _name.</p>

            </section>
            <section class="main-section" id="Объявление_переменных">
                <header><h3>Объявление переменных</h3></header>                    
                <p>Вы можете объявить переменную тремя способами:</p>
                <p>Используя ключевое слово var. Например, var x = 42. Данный синтаксис может быть использован для объявления как локальных, так и глобальных переменных.</p>
                <p>Просто присвоить переменной значение. Например, x = 42. Переменные, объявленные данным способом, являются глобальными. Такое объявление генерирует строгое предупреждение (strict mode). Не рекомендуется использовать данный способ.</p>
                <p>Используя ключевое слово let. Например,  let y = 13. Данный синтаксис может быть использован для объявления локальной переменной в области видимости блока.</p>
            </section>                

            <section class="main-section" id="Присваивание_значений">
                <header><h3>Присваивание значений</h3></header>
                <p>Переменная, объявленная через var или let без присвоения начального значения, имеет значение undefined.</p>
                <p>При попытке доступа к необъявленной переменной или переменной до её объявления будет выброшено исключение ReferenceError:​</p>
                <pre><code>var a;
console.log("Значением переменной а является " + a); 
//Значение переменной а является undefined

console.log("Значением переменной b является " + b); 
//Uncaught ReferenceError: b не определена
var b;
// This one may puzzle you until you 
//read 'Variable hoisting' below

console.log("Значением переменной c является " + c); 
//Значение переменной c является undefined
var c;

let x;
console.log("Значением переменной x является " + x); 
//Значение переменной x является undefined

console.log("Значением переменной y является " + y); 
//Uncaught ReferenceError: y не определена
let y;</code></pre>                    
                <p>Вы можете использовать undefined, чтобы определить, имеет ли переменная значение. В следующем примере переменной input не присвоено значение, и оператор if будет вычислен как true:</p>
                <pre><code>var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}</code></pre>
                <p>Значение undefined ведет себя как false, когда используется в логическом контексте. Например, следующий код выполняет функцию myFunction, т.к. элемент myArray не определен:</p>
                <pre><code>var myArray = [];
if ( !myArray[0] ) myFunction();</code></pre>
                <p>Значение undefined конвертируется в NaN, когда используется в числовом контексте:</p>
                <pre><code>var a;
a + 2; // NaN</code></pre>
                <p>Значение null ведет себя как 0 в числовом контексте и как false в логическом контексте:</p>
                <pre><code>var n = null;
console.log(n * 32); // В консоль выведется 0</code></pre>                    
            </section>

            <section class="main-section" id="Область_видимости_переменных">
                <header><h3>Область видимости переменных</h3></header>
                <p>Когда вы объявляете переменную вне функции, то такая переменная называется глобальной переменной, т.к. доступна любому коду в текущем документе. Когда вы объявляете переменную внутри функции, то такая переменная называется локальной переменной, т.к. доступна только внутри данной функции.</p>
                <p>До ECMAScript 6 в JavaScript отсутствовала область видимости блока; переменная, объявленная внутри блока, является локальной для функции (или глобальной области видимости), внутри которой находится данный блок. Например, следующий код выведет значение 5, т.к. областью видимости переменной x является функция (или глобальный контекст), внутри которой объявлена переменная x, а не блок, которым в данном случае является оператор if:</p>
                <pre><code>if (true) {
  var x = 5;
}
console.log(x);  // 5</code></pre>

                <p>Такое поведение меняется, если используется оператор let, введенный в ECMAScript 6:</p>
                <pre><code>if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y is not defined</code></pre>                    
            </section>

            <section class="main-section" id="Поднятие_переменных">
                <header><h3>Поднятие переменных</h3></header>
                <p>Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые еще не были инициализированы, возвратят значение undefined:</p>
                <pre><code>/*
 * Example 1
*/
console.log(x === undefined); // true
var x = 3;

/*
 * Example 2
*/
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();</code></pre>
                <p>Приведенные выше примеры будут интерпретироваться так же, как:</p>
                <pre><code>/*
* Example 1
*/
var x;
console.log(x === undefined); // true
x = 3;

/*
* Example 2
*/
var myvar = "my value";

(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();</code></pre>
                <p>Из-за поднятия переменных, все операторы var в функции следует размещать настолько близко к началу функции, насколько это возможно. Следование этому правилу улучшает ясность кода.</p>
                <p>В ECMAScript 2015, let (const) не будет подниматься вверх блока. Однако, ссылки на переменную в блоке до объявления переменной вызовут  ReferenceError. Переменная во "временной мёртвой зоне" в начале блока, до объявления.</p>
                <pre><code>function do_something() { 
  console.log(foo); // ReferenceError 
  let foo = 2; 
}</code></pre>
            </section>

            <section class="main-section" id="Поднятие_функций">
                <header><h3>Поднятие функций</h3></header>
                <p>For functions, only the function declaration gets hoisted to the top and not the function expression.</p>
                <pre><code>/* Function declaration */

foo(); // "bar"

function foo() {
  console.log('bar');
}


/* Function expression */

baz(); // TypeError: baz is not a function

var baz = function() {
  console.log('bar2');
};</code></pre>
            </section>

            <section class="main-section" id="Глобальные_переменные">
                <header><h3>Глобальные переменные</h3></header>
                <p>Глобальные переменные на самом деле являются свойствами глобального объекта. На веб-страницах глобальным объектом является window, поэтому вы можете устанавливать глобальные переменные и обращаться к ним, используя синтаксис window.variable:</p>
                <pre><code>window.foo = 'bar';</code></pre>
                <p>Следовательно, вы можете обращаться к глобальным переменным, объявленным в одном объекте window или frame из другого объекта window или frame, указав имя window или frame. Например, если переменная phoneNumber объявлена в документе, то вы можете сослаться на эту переменную из iframe как parent.phoneNumber.</p>
            </section>

            <section class="main-section" id="Константы">
                <header><h3>Константы</h3></header>
                <p>Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово const. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчеркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.</p>
                <pre><code>const PI = 3.14;</code></pre>
                <p>Нельзя изменить значение константы через присваивание или повторное объявление во время выполнения скрипта. Значение должно быть указано при инициализации.</p>
                <p>Правила, касающиеся области видимости, для констант являются такими же, как и для переменных, объявленных через let. Если ключевое слово const не указано, то идентификатор будет являться переменной.</p>
                <p>Нельзя объявить константу с таким же именем, как у функции или переменной в одной области видимости. Следующие примеры выбросят исключение TypeError:</p>
                <pre><code>// Это вызовет ошибку
function f() {};
const f = 5;
// Это тоже вызовет ошибку
function f() {
  const g = 5;
  var g;
  //какие-то выражения 
}</code></pre>
                <p>Однако, атрибуты объектов не защищены, так что следующее выражение выполнится без проблем</p>
                <pre><code>const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";</code></pre>                    
            </section>

            <section class="main-section" id="Структуры_и_типы_данных">
                <header><h2>Структуры и типы данных</h2></header>            

                <section class="main-section" id="Типы_данных">
                    <header><h3>Типы данных</h3></header>

                    <p>Последний стандарт ECMAScript определяет семь типов данных:</p>
                    <ul>
                        <li>Шесть типов данных,  которые являются примитивами:
                            <ul>
                                <li>Boolean. true и false.</li>
                                <li>null. Специальное ключевое слово, обозначающее нулевое или «пустое» значение. Поскольку JavaScript чувствителен к регистру, null не то же самое, что Null, NULL или любой другой вариант.</li>
                                <li>undefined. Свойство глобального объекта; переменная, не имеющая присвоенного значения, обладает типом undefined.</li>
                                <li>Number. 42 или 3.14159.</li>
                                <li>String. "Howdy"</li>
                                <li>Symbol (ECMAScript 6). Тип данных, экземпляры которого уникальны и неизменяемы.</li>
                            </ul>                        
                        </li>
                        <li>и Object</li>
                    </ul>
                    <p>Хотя типов данных относительно немного, но они позволяют вам выполнять полезные функции в ваших приложениях. Объекты и функции являются другими фундаментальными элементами языка. Вы можете думать об объектах как об именованных контейнерах для значений и о функциях как о процедурах, которые ваше приложение может исполнять.</p>
                </section>

                <section class="main-section" id="Преобразование_типов_данных">
                    <header><h3>Преобразование типов данных</h3></header>
                    <p>JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы ее объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:</p>
                    <pre><code>var answer = 42;</code></pre>
                    <p>А позже вы можете присвоить этой переменной строковое значение, например:</p>
                    <pre><code>answer = "Thanks for all the fish...";</code></pre>
                    <p>Поскольку JavaScript является динамически типизированным, это присваивание не вызовет сообщения об ошибке.</p>
                    <p>В выражениях, включающих числовые и строковые значения с оператором +, JavaScript преобразует числовые значения в строковые. Например:</p>
                    <pre><code>x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"</code></pre>
                    <p>В выражениях с другими операторами JavaScript не преобразует числовые значения в строковые. Например:</p>
                    <pre><code>"37" - 7 // 30
"37" + 7 // "377"</code></pre>
                </section>

                <section class="main-section" id="Преобразование_строк_в_числа">
                    <header><h3>Преобразование строк в числа</h3></header>
                    <p>В том случае, если значение, представляющее число, хранится в памяти как строка, можно использовать методы для преобразования строк в числа:</p>
                    <ul>
                        <li>parseInt(numString, [radix])</li>
                        <li>parseFloat(numString)</li>
                    </ul>
                    <p>parseInt преобразует строку в целочисленное значение. Хорошей практикой является всегда указывать основание системы счисления (параметр radix).</p>
                    <p>Альтернативным способом для получения числа из строки является использование оператора "унарный плюс":</p>
                    <pre><code>"1.1" + "1.1"       // "1.11.1"
(+"1.1") + (+"1.1") // 2.2
// Обратите внимание на то, что скобки не 
//являются обязательными и используются для ясности.</code></pre>
                </section>
            </section>

            <section class="main-section" id="Ссылка">
                <header><h2>Ссылка</h2></header>
                <p>Вся документация на этой странице взята из <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide" target="_blank">MDN</a></p>
            </section>
        </main>
        <a id="button_top_menu" href="#Doc_JS">Наверх в меню</a>    
    </body>
</html>

              
            
!

CSS

              
                /* 
    Created on : 17.12.2018, 17:09:32
    Author     : Игорь
*/

* {
    margin: 0;
    padding: 0;
}

body {
    font: 1em/1.4 Helvetica, sans-serif;
    min-width: 240px;    
}

#navbar {      
    position: fixed;
    top: 0;
    margin: 0 1em;    
    border: 1px black solid;
    padding-bottom: 1em;
    height: 97%;
    overflow-y: auto;
}

#navbar header {
    font-size: 1.5em;
    padding: 0.5em 1em;
    background-color: #cccccc;
    margin-bottom: 0.5em;
    text-align: center;
}

#navbar ul {
    margin-left: 1em;
}

#navbar li {    
    list-style-type: none;
    padding-right: 1em;
    margin: 0.5em 0;
}

#navbar a {
    text-decoration: none;
}

#main-doc {    
    margin-left: 22em;
    margin-right: 1em;    
}

h1, h2, h3 {
    margin: 0.7em 0 0.2em;    
}

p {
    margin: 0.5em 0;
}

#main-doc ul {
    margin: 0.5em 1em;
}


#main-doc li {
    list-style-position: inside;
}



pre {   
    margin-left: 1em;
    padding-right: 1em;
    border-left: 0.5em #aaaaaa solid; 
    padding-left: 1em;
    padding: 1em 0 1em 1em;  
    width: 90%;    
    overflow: auto;    
}


#button_top_menu {
    visibility: hidden;
}


@media (max-width: 799px) {

    #navbar {        
        position: static; 
        height: 15em;
    }

    #main-doc {
        margin-left: 1em;
    }

    #button_top_menu {
        visibility: visible;
        position: fixed;
        bottom: 0.2em;
        right: 0.4em;    
        font-size: 1em;
        padding: 0.5em;
        border: #000000 2px solid;
        border-radius: 0.5em;
        background-color: #cccccc;
        opacity: 0.8;
    }
}

              
            
!

JS

              
                
              
            
!
999px

Console