Jump to content
Baku365.com

Web разработка


Rust programming language

Recommended Posts

Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    // ==
    
    console.log( 'aaa' == 1,  "'aaa' == 1 сравнение строки и числа" ); // приводит к числу
    console.log( '1' == 1,  "'1' == 1 сравнение строки и числа" ); // приводит к числу

    console.log( 1 == 1,  "1 == 1  сравнение числа и числа" ); 

    console.log( 1 == true,  "1 == true сравнение числа и логического значения" );  // true при приведении к числу даёт 1, false при приведении к числу даёт 0.
    
    // ===
    console.log(1 === 1, "1===1"); // сравнение чисел
    console.log(1 === true, "1===1"); // разные типы

    console.log(null == undefined, "null == undefined"); // true null и undefined равны друг другу
    console.log(null === undefined, "null === undefined"); // разные типы
    console.log(null == 0, "null == 0"); // null НЕ равен числу 0

    
    // >, <, <=, >=
    console.log(1 >= 1, "1 >= 1"); // сравнение чисел
    console.log(1 >= 2, "1 >= 2"); // сравнение чисел

    //if else

    var a = 5;

    var b = 6;
    if(a < b){
        console.log("inside IF");
    }else{
        console.log("inside ELSE");
    }
    
    if(a > b){
        console.log("inside IF");
    }else{
        console.log("inside ELSE");
    }

    </script>
</head>
<body>
    
</body>
</html>

Продолжаем говорить о логических операторах и операторах сравнения.

Для начала давайте избавимся от надоедливого alert. Те кто под windows  нажмите сочетание клавиш ctrl shift i    в браузере Google Chrome .

И вы увидите инструменты разработчика. Там много всего. Обязательно покопайтесь и изучите, там и весь ваш HTML код отображается и стили действующие на конкретный тег.

Нам нужна вкладка Console

dUKUfZBvTz_1OdFw17BO3Q.png
PRNTSCR.COM

Captured with Lightshot

Вот все значения из моего примера будут выводится сюда через console.log

Перечислю операторы сравнения

==      проверяет два операнда на равенство. В случае если операнды разных типов - пытается привести их к числовому типу. 

!=  противоположный оператор. то есть проверяет на неравенство

=== проверяет на строгое равенство (в том числе проверяет и типы данных), если типы не совпадают то равенство не проходит

!== противоположный оператор (строго проверяет неравенство с учетом типов)

>  - знак больше

< - знак меньше

>=  - больше или равно

<=    - меньше или равно

 

Условные конструкции, 

Конструкция if, else.

Конструкция if else строится следующим образом, 

if( логическое выражение ) {

 блок который выполняется если логическое выражение в скобках вернуло истину

}else{

блок выполняется если логическое выражение в скобках вернуло ложь

}

В случае если внутри круглых скобках при if - значения другого типа, JS автоматически приводит их к логическому значению. По правилу:

пустая строка, 0, null, undefined - интерпретируются как false внутри круглых скобок при if

есть ещё такое значение - NaN, оно появляется когда математическое выражение не может вернуть число (например операция 0 делить на 0). Так вот оно тоже при попытке приведения к логическому значению интерпретируется как false.

Объяснение примеров я дал в комментариях к коду.

Как видите программа с помощью этих конструкций может решать по какому сценарию ей двигаться в зависимости от значений.

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

 

Edited by Rust programming language
  • Like 1
Link to comment
Share on other sites

Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // ПРимер 1
        var a = 5;
        var b = 10;
        if(a > 3 && a < b){
            console.log("сложные логические выражения");
        }
        

        //Пример 2 
        var c = 4;
        var d = 6;
        if(a > 3 && (a < b && c < d) ){
            console.log("сложные логические выражения2");
        }

        //Пример 3
        console.log( 5 > 4 ? "больше" : "меньше");

        //Пример 4
        var str = "Google";
        if(str == "Microsoft"){
            console.log("Let's learn C#");
        }
        else if(str == "Google"){
            console.log("Let's learn Golang");
        }
        else{
            console.log("Let's learn Rust");
        }

    </script>
</head>
<body>
    
</body>
</html>

Условные конструкции (продолжение)

Логических выражений в круглых скобках IF, могут быть несколько. Поведение программы в этом случае определяется конечным результатом вычисления логического выражения.

Например Примере 1 и Примере 2 вы можете видеть такие ситуации. Круглые скобки - так же повышают приоритет операции как и в математике - (2+2)*2 .

Как видите может быть один блок IF (без ELSE). В этом случае - если в IF случился false - программа попросту игнорирует его.

Тернарный оператор

Ещё один вид условной конструкции в JS. Посмотрите на пример 3. Сначала идёт логическое выражение. Если оно true - выполняется блок после вопросительного блока, если false, то блок после двоеточия. 

Условная конструкция if , else if ...

Проверка нескольких условий

Рассмотрим на примере -  если переменная равна Microsoft- выводим сообщение Let's learn C#

если же (else if) - переменная равна Google - выводим Let's learn Golang

В случае когда переменная не попадает ни в одно условие  - выполняется уже блок в else (если он есть). Попробуйте сами поменять значение переменной str - и сразу всё понятно будет.

 

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

  • Like 1
Link to comment
Share on other sites

Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //switch
        var str = 'hello';

        switch (str) {
            case "bye":
                console.log("str is 'bye'");
                break;
            case "hello":
                console.log("str is 'hello'");
                break;
               
            case "hi":
                console.log("str is 'hi'");
                break;
            default:
                console.log("str is 'default'");
                break;
        }

        //increment
        var a = 1;
        console.log(a++, "a"); //присваевается после 
        console.log(a, "a");
        
        var b = 1;
        console.log(++b, "b");

        // цикл for
        for(var i = 0; i < 10; i++){
                console.log(i, "i");
        }

        // continue, break

        for(var i = 0; i <=20; i++){
            if( i % 2 == 1) continue;  // если одна строчка в блоке if - фигурные скобки ставить не обязательно

            if(i == 18) {
                break;
            }
            console.log(i, "четные i");
            
        }
    </script>
</head>
<body>
    
</body>
</html>

Конструкция switch по сути - альтернатива конструкции if else if ....

В switch в круглых скобках указываем выражение, условие которого будем проверять. В case - указываем возможное значение этого выражения. При совпадении этого значения - выполняется блок case. Оператор break в данном случае нужен, чтобы после выхода из блока case (в который мы попали), не выполнился следующий. По умолчанию мы как бы проваливаемся в следующий case, если бы не было break. Лучше всего разберём на примере:

Итак, в моем примере - мы попадаем в блок case которого имеет значение hello, уберите break; после console.log("a is 'hello'"); и мы попадем в case ниже, и так далее пока не встретим break. Тем самым break просто прерывает это "проваливание".

Если переменная не попадает ни под один case, то мы попадаем в блок default (если он есть) 

инкремент/декремент

++  увеличивает значение на единицу (инкремент),

-- уменьшает значение на единицу - декремент.

Обратите внимание на зависимость поведения от положения этого оператора. 

Если ++ / -- стоит после операнда, то возвращается сначала текущее значение, а потом уже увеличение / уменьшение на единицу.

Если же перед, то сначала происходит увеличение/уменьшение на 1, а потом возврат значения.  Запустите мой пример и обратите внимание на поведение переменных a и b в консоли. Сразу всё станет понятно.

 

Циклы. 

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

В JS существует несколько видов циклов. Для начала рассмотрим цикл for

В первом примере - мы выводим числа от нуля до девяти.. Обратите внимание на запись в круглых скобках у ключевого слова for.

Тут инициализируется (объявляется) переменная "i"  присваивается начальное значение - 0. 

Затем само условие (до каких пор продолжается цикл). В данном случае зацикливание идёт, до тех пор, пока переменная i меньше 10. После условия, идёт выражение, изменяющее переменную i. В нашем случае с каждым витком цикла, переменная i увеличивается на единицу. Последнее выводимое значение у нас будет девятка, потому что в условии у нас - меньше 10, а не меньше или равно 10.

Можно менять i прибавляя не единицу, а например двойку выражением i = i + 2 ( у этого выражения есть сокращенный вариант i += 2, также можно сократить умножение, деление, вычитание подставив вместо "+" соответствующий оператор).

То есть менять переменную управляющую циклом можно как угодно. Главное чтобы условие останавливающее цикл  - когда-нибудь выполнилось.

Рассмотрим ключевые слова break и continue. continue, просто прерывает текущий виток цикла и переходит к следующему ( витку). break - прибивает полностью текущий цикл (по умолчанию).

Рассмотрим на примере.. 

Итак цикл for здесь выводит цифры от нуля до 20 включительно..

Что же такое 

if( i % 2 == 1) continue;

Это означает, если остаток от деления на 2 - равен единице, иными словами, если число нечетное - то прерываем текущий виток и переходим к следующему(витку). 

 

 

if(i == 18) {
break;
}

 

Тут же мы просто прибиваем цикл полностью, когда i становится равным 18. Таким образом до 20-ти мы так и не доходим.

Подробнее о циклах поговорим в следующей статье.

  • Like 1
Link to comment
Share on other sites

Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //Метки
         external: for(var i = 0; i < 10; i++){
            for(var j = 0; j < 10; j++){
                console.log(j, "j");
                console.log(i, "i");
                if(i == 5){
                    console.log("QUIT");
                    
                    break external;
                }
            }
        } 

        //while

        var flag = 5;
        while(flag > 0){
            flag--;
            console.log(flag, "flag");
            
        }

        //do while
        var x = 8;
        var check = true;
        do{
            x--;
            console.log(x, "x");
            
            if(x == 2){
                check = false;
            }
        } while(check);

        //Строки

        var str = "hello\nworld"; //спецсимволы
        console.log(str, "STR");

        var str2 = "hello\tworld"; // cпецсимволы
        console.log(str2, "STR2");
        
        var str3 = 'hello\\tworld'; //экранирование
        console.log(str3, "STR3");

        var str4 = 'hello \'w\'orld'; //экранирование
        console.log(str4, "STR4");

      	var z = "John"; //шаблоны
        var template = `hello ${z}`;
        console.log(template); 
        //функции
        
        function myFunc(){
            console.log("function code in myFunc");
        }

        function myFunction(a, b){
            var c = a + b;
            console.log(c, "function code in myFunction. 'C' value");
        } 
        myFunc();
        myFunction(5, 6);
        myFunction(7, 8);
    </script>
</body>
</html>

Продолжаем говорить о циклах.

continue и break относятся по умолчанию к текущему циклу. Если мы хотим применить их,например, ко внешнему циклу (находясь при этом во внутреннем), то можно использовать метку. Применение метки вы видите в моем примере.

Цикл while

Цикл, который будет выполнятся до тех пор, пока его выражение в круглых скобках - true

Цикл do while

Тоже самое что и while за исключением того, что в нём сначала выполняется блок в цикле, а затем проверяется само условие.

Есть ещё конструкции для циклов  -  for...in и for...of, но их мы рассмотрим позже, так как для этого надо пройти ещё несколько тем.

Строки

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

Строки в JS могут быть в одинарных или двойных кавычках. В строках могут использоваться спецсимволы, например \n - перенос строки, \t - табуляция. Если строке в двойных кавычках требуется использовать двойные кавычки, то применяется символ экранирования \. С помощью экранирования мы сообщаем движку, что символ идущий после служит не закрыванием открывающей кавычки, а обычной кавычкой в строке. Запустив пример вы всё поймёте. Для одинарных кавычек это правило тоже действует.

В новом стандарте JS появились шаблонные строки. Они формируются с помощью обратных кавычек ``. Это по сути удобный способ вывода значений переменных в строке. 

${переменная или выражение}  

В коде что я прикрепил есть этот пример.

Будьте осторожны с использованием шаблонных строк, так как старые браузеры этот функционал не поддерживают. 

Функции

Начинаем новую и сложную тему - функции. Выражаясь простым языком, функция - это часть программы, которую можно вызывать несколько раз (чтобы не писать одно и тоже).

Есть несколько способов объявлений функций, в этой статье мы рассмотрим один из них.

ключевое слово function имя функции ( параметры функции если есть ) {

 исполняемый блок  (его называют телом функции)

}

Вызывается функция следующим образом   -   имя функции(параметры функции если есть)

Параметры функции - данные которые подставляются в исполняемый блок.

Если параметров несколько - они выводятся через запятую ( как в примере)

Например у меня в примере в myFunction я передаю числа 5 и 6 - тело функции выполняется с этими значениями (лежащими в a и  b)

 ниже я передаю 7 и 8 и тело функции выполняется уже с 7 и 8.

Для большей наглядности, можно вывести в консоль значения a и b.

 

В следующей статье мы подробно будем разбирать функции.

Edited by Rust programming language
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        myFunc();
        function myFunc(){
            console.log("this is myFunc");
        }

        var myFunc2 = function(str){
            console.log("this is "+ str);
        }
        myFunc2("myFunc2");

        //стрелочные функции
        var arrowFunction = (a, b) => {
            console.log(a + b);
        }
        arrowFunction(5, 6);

        //return 

        function multiply(a, b){
            return a * b;
        }
        var value = multiply(2, 5);
        console.log(value, "value");

		//самовызывающиеся
        (function () {
            console.log("i am called");
        })();
    </script>
</head>
<body>
    
</body>
</html>

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

Есть также возможность объявить функцию, как это сделано в примере с переменной myFunc2. Разница тут будет только в том, что в этом случае вызвать функцию до объявления - не получится. Почему это так - будет понятно когда мы рассмотрим процесс разбора кода интерпретатором и области видимости переменных (в следующей статье).

Во всем остальном этот вид объявления идентичен - myFunc.

В новом стандарте JS появились стрелочные функции. Синтаксис их  вы можете также увидеть в моем примере. В круглых скобках - параметры, в фигурных - тело функции. У этого способа объявления есть ряд особенностей. Мы их рассмотрим когда будем проходить Объектно-ориентированное программирование (дальше аббревиатура - ООП). 

 

 

Самовызывающиеся функции, пример объявления - в примере. Особенность - вызываются сами и сразу же)).

Есть еще один способ создания функции, но и его к сожалению можно будет рассмотреть, только после ознакомления с ООП.

Функции могут также возвращать значения. Для этого имеется оператор return. У меня в примере результат умножения двух переменных присваивается в переменную value. Это возможно потому, что функция return возвращает "наружу" значение (результат).

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

 

 

Link to comment
Share on other sites

  • 3 months later...
Rust programming language
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /* создание локальной области видимости */

        var a = "city"
        function test () {
            var a = "country";
            console.log(a, "IN FUNCTION");
            
        }
        console.log(a);
        test()
        console.log(a);

        /* переопределение глобальной переменной */
        var b = "water"
        function test2 () {
            b = "fire";
            console.log(b, "IN FUNCTION");
            
        }
        console.log(b);
        test2()
        console.log(b);

        /* ES6 стандарт let и const  */
        if(true){
            let c = "c test"
            var d = "d test"
        }
        //console.log(c); //выдаст ошибку
        console.log(d);
        
        /* Замыкания */
        function wrapper(){
            var someVar = "some"
            return function inner(){
                console.log(someVar);
                
            }
        }
        var temp = wrapper();
        temp();

        function wrapper2(){
            var intgr = 5;
            return function inner(){
                intgr++;
                console.log(intgr);
                
            }
        }
        var temp2 = wrapper2();
        temp2();
        temp2();
        temp2();


    </script>
</head>
<body>
    
</body>
</html>

Области видимости

Постараюсь дать максимально простое объяснение сему понятию

Область видимости переменной - область выполнения программы в которой существует переменная.

Переменные могут находиться в локальной или глобальной области видимости

Переменная находится в глобальной области видимости - если она инициализирована вне функции либо внутри функции, но без ключевого слова var

На примерах должно быть более понятней.

Рассмотрим первый пример:

var a = "city"
function test () {
var a = "country";
console.log(a, "IN FUNCTION");
 
}
console.log(a);
test()
console.log(a);

Здесь a со значением city - находится в глобальной области видимости. Внутри функции test мы объявляем еще одну переменную a - но она уже находится в локальной области видимости (то есть доступна только внутри функции test). Поэтому в последнем console.log(a) - выводится city

Рассматриваем второй пример:

var b = "water"
function test2 () {
b = "fire";
console.log(b, "IN FUNCTION");
 
}
console.log(b);
test2()
console.log(b);

Здесь переменная b со значением water находится в глобальной области видимости, внутри функции test2 мы обращаемся к этой же глобальной переменной и меняем её значение на  fire.

Для переменных объявленных с помощью let или const блоки создают области видимости, например:

if(true){
let c = "c test"
var d = "d test"
}
//console.log(c); //выдаст ошибку
console.log(d);

Если раскомментировать console.log(c), то получаем ошибку, так как if, for, while - и т.д. являются создают область видимости для переменных объявленных через let и const.

Замыкания

Замыкание - это функция которая имеет доступ к области видимости внешней функции, даже после того как внешняя функция выполнилась.

На примере должно быть понятнее:

function wrapper(){
var someVar = "some"
return function inner(){
console.log(someVar);
 
}
}
var temp = wrapper();
temp();

Здесь wrapper выполнился присвоив результат выполнения переменной temp, теперь в переменной temp находится функция. Вызываем её temp(), и выводится переменная someVar в консоль. Как видите функция inner до сих пор имеет доступ к переменной someVar ( как и ко всей области видимости wrapper) не смотря на то что wrapper уже отработал.

Ещё пример:

function wrapper2(){
var intgr = 5;
return function inner(){
intgr++;
console.log(intgr);
 
}
}
var temp2 = wrapper2();
temp2();
temp2();
temp2();

Тут по сути мы имеем счётчик 😉.

Почему так получилось? 

Потому что опять таки переменная intgr находится в области видимости функции wrapper2, и каждый вызов функции temp2 - ищет переменную сначала в своей области видимости - не находит, ищет во внешней области видимости - увеличивает на 1.

Замыкания - одна их самых "труднопонимаемых" тем в JS, к ней мы ещё вернёмся.

Link to comment
Share on other sites

  • 3 weeks later...
Rust programming language

Объектно-ориентирование программирование.

(Далее ООП).

Попробую своими словами объяснить, что это такое, на примере.

Это вид структурирования данных при котором, данные упорядочиваются  в общих (собирательных) понятиях.

Приведу сначала популярный пример для объяснения ООП.

Например, мы имеем общее понятие Animal (животное). В ООП такое общее понятие называется - класс (class)

Далее описываем наш класс:

Животное может иметь характеристики - рост, вес, цвет.  В ООП - это называется свойства (property)

Животное также может совершать действия: бегать, прыгать, есть, спать. В ООП - это называется - методы(methods).

Итак, что мы имеем:

класс Животное

свойства этого класса:

    рост

    вес 

    цвет

   методы этого класса:

   бегать

   прыгать

   кушать

Теперь мы можем создавать экземпляры этого класса. То есть создавать новых животных - лев, кошка, собака и т.д. и заполнять  / манипулировать данными.

 

--------------------

Теперь попробую объяснить на реальном примере работу ООП.

Попробуем представить какие классы могут быть у веб форума:

Это конечно же

класс Пользователь

свойства класса Пользователь: имя, email, возраст, пол, пароль статус (забанен или нет) 😉

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

класс Сообщение

свойства класса Сообщение: длина, статус (отмодерировано или нет), дата создания, пользователь (которому принадлежит это сообщение)

методы класса Сообщение: Отправить, Отредактировать, Удалить и т.д.

 

 

Классы могут наследоваться:

Например мы создали класс Животное.

Метод "охотиться" - может быть только у хищников поэтому добавлять его классу Животное - не надо (так как животное может быть и травоядным). Поэтому от класса Животное - мы можем создать дочерний класс Хищное животное - и добавить ему метод "охотиться". Так же от класса Животное мы можем унаследовать класс Травоядное животное и добавить ему свойство "количество потребляемой растительной пищи"..

При наследовании классов, дочерний класс содержит в себе методы и свойства наследуемого (родительского) класса, плюс какие-то свои.

 

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

В следующей статье расскажу об ООП в языке JS

 

 

 

Edited by Rust programming language
Link to comment
Share on other sites

  • 5 months later...
marinka

поддержим! конечно классно! 

Link to comment
Share on other sites

  • 1 year later...
Медвежонок-Л

Тема хорошая.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Who Viewed the Topic

    54 members have viewed this topic:
    Revolver Ocelot  drago76  Hells Kitchen  Bahtiyar  Shoxrux  Undina  SaxarYa  sam  user-code  АЛЬТЕРНАТИВА  Acket  J-NAG  Team Player  XorAndOr  Boob  Spirt  Marijuan  m.orkhan  logino  Wefz  Fiero  Saxar5  trr  RAINMAN  Медвежонок-Л  Kartofsatan  Акиф Киши  Savio  Тундра  marinka  Sasha  Arximed  Rust programming language  Murad Ali  Дюймовочка  Сева ИМ  Glock  Terrakota  durotan  Carcosa  Ra Sha  E_not11  JaFlour  Черная Мамба  Меч во тьме  nineliya  Bodriy  Mamba21  Lahn-dill  Rauℓ  Carpe Diem  fransuz  Neon  Liliana-Kim 
  • Who's Online   13 Members, 8 Anonymous, 29 Guests (See full list)

    • +Manneken Pis
    • +Вредный Крыс
    • +invariant
    • +lex-mix
    • +Orion 68
    • +satira
    • +-=laziale=-
    • +mamsy
    • +Agakerim
    • +Leysan
    • +dama8080
    • China
    • +Anar Musayev
×
×
  • Create New...

Important Information

Terms and Conditions