Рубрики
Без рубрики

Начало работы с JavaScript

JS – это язык программирования на основе событий. (Приложение для выполнения – Visual Studio Code) В компьютере … Теги с JavaScript, начинающими, WebDev, Frontend.

JS – это язык программирования на основе событий. (Приложение для выполнения – Visual Studio Code)

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

Если мы используем JavaScript языка сценариев на стороне клиента, это можно сделать без консультации с сервером

Только язык понял браузером.

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

 

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


Внутренние скрипты принимают меньше времени загрузки, чем внешние сценарии.

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

const type='car';

undefined – это тип данных в JavaScript, который имеет одно значение, также называемое undefined. Любая переменная, которая не была назначена значением во время объявления, будет автоматически назначаться со значением undeded.

Ex : var custname (where value is undefined and datatype is also undefined)

Даже мы можем назначить его с undefined, как

var custname=undefined;
var item=null;

Если вам интересно, почему нам понадобится такой тип данных, ответ – это переменная JavaScript, предназначенная для назначения объекта в более поздней точке в программе может быть назначена NULL во время объявления.

===(returns true when the value and the datatype, both are equal)
!==(returns true when value or datatype are in-equal)
typeof(10>20) —-> False.
Conditional expression: (age>60) ? "senior citizen" : "normal citizen";
// single line comments,
/* double line comments */ —> 

Как использовать тег DIV в HTML-файле:

 


 

Пользовательские функции:

function function_name(parameter 1, parameter 2); { return value; }
function_name(); —> calling a function

Вложенные функции: В JavaScript это совершенно нормально, чтобы иметь функции внутри функций. Функция в другом теле функции, называется вложенной функцией.

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

document.write("

"); —> this will provide you gap between the statements.

Встроенные функции: (мало:)

тревога(); Isnan (); -> Это проверки, если это число или нет

подтверждать(); PARSEINT (), PARSEFLOAT () -> Это разобрает строку и Reruns Integer и номер поплавка.

быстрый(); Isnan (не число).

Примеры для вышеуказанных функций:

 

Settimeout (FUNCTION_NAME, «Время в milli_Sec»); Метод вызывает функцию или оценивает выражение после указанного количества миллисекунд.

Единственное отличие в том, что STALTIMEOUST () вызывает выражение только один раз, когда setinterval () регулярно продолжает выражение выражения после данного интервала времени.

Символ:

Местные, глобальные и вложенные вложения -> наличии.

Как наблюдается, без использования ключевого слова «var», локальные возможности изменений в глобальной области. Если какая-либо переменная объявляется внутри функции без использования VAR, то доступна также доступна снаружи функции.

Вложенный объем:

//variable declaration global

function f1( );
{
     Global variables are accessible and local variables;

     function f2( );
       {
              Global variables, local variables and nested variables are accessible;
        }
}

Символ – поднятие:

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



o/p: first name   undefined.

Но переводчик говорит, что переменная не определена. Это связано с тем, что подъемник поднял только переменную декларацию сверху и не инициализации.



  O/P :  car  but bus won't be printed because while accessing i It fails and bus won't be printed. If we comment the second then it prints  car and bus.

События и обработка событий:

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

Ex : 

welcome

. Where

is a html tag and execute_me( ) is a javascript tag. used to refer external javascript file. Apply href is useful to get a line under Apply. The above function code is:: function calculateDiscount(event) { event.preventDefault(); var discount = 10; const percent = 100; for (index = 1; index <= seats; index++) { discountedCost = costPerTicket - (discount / percent) * costPerTicket; cost = cost + discountedCost; discount = discount + 10; } alert( "Amount payable after discount is: Rs." + cost )

Пример:

Выполните следующий код с помощью рассчитанного (события) и с помощью рассчитанного () для просмотра изменений.




    



    

Booking Summary

Объекты в JavaScript:

Объект состоит из государства и поведения. Состояние объекта представляет свойства, которые могут быть смоделированы как пары ключей. Поведение объекта представляет собой наблюдаемый эффект работы, выполняемой на нем, и смоделирован с использованием функций. Пример: автомобиль – это объект.

Состояние автомобильного объекта: Текущий текущий KM/HR Количество мест

Поведение объекта автомобиля: ускорение изменений зубчатого тормоза

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

Мы можем использовать точку или оператора для доступа к значению. Подобны Obj.key (или) OBJ [ключ].

Пример для тега стиля:


Пример для создания объекта автомобиля с помощью объекта Literation:

Создайте объект автомобиля с использованием буквального обозначения со следующими свойствами: Имя, модель, цвет, Numberofgears, CurrentGear, CurrentSpeed и следующие методы: «Ускорение», которые примут аргумент «SpeedCounter» и вернуть текущую скорость после добавления скорости SpeedCounter. «Тормоз»: который будет принять аргумент «SpeedCounter» и возврат текущей скорости, уменьшенного SpeedCounter.


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

myCar["accelerate"](20);
                document.write(
                    "
Current speed after accelerating: " + myCar["currentSpeed"] );

Для вызова методов мы можем использовать либо точку, либо [] операторы.

Пример для создания кнопки:




    Literal Notation for Object Creation
    



    

Dating App

"btn btn-success" and "btn btn-primary" belongs to bootstrap buttons.

Еще один способ создать кнопку:


                




Событие Onkeyup происходит, когда пользователь выпускает ключ (на клавиатуре).

Массивы:

Массив в JavaScript - это объект, который позволяет хранить несколько значений в одной переменной.

var obj1=new Array(1,2,3);
       or              
var sample=[1,2,3];

Массивы JavaScript могут содержать элементы разных типов. Такой массив называется плотным массивом, и есть различные встроенные функции, такие как:

obj1.push(2);
obj1.pop( );
obj1.splice(x,y,z); where x is the index of new item, y is the 
         Number of items to be removed starting from the index
         Next to the new item index number(x) and z is the new 
         Item.
obj1.concat(obj2);
forEach:
var myArray = ["Android", "iOS", "Windows"];
myArray.forEach( function( currentItem, index){
console.log("myArray has" + currentItem +"at index" + index);
})

Следующий объект по категории глобальных объектов в JavaScript - математика. Это объект JavaScript, который используется для создания математических расчетов в Интернете. Мы можем вызвать свойства и методы этого объекта без осознания этого объекта, потому что математический объект не может быть создан.

Math.PI;
Math.sqrt(5);, Math.random( ); etc there are various inbuilt methods.

Разница между кодом JSON и JavaScript:

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

Преобразование кода JavaScript на JSON:

var txt = {
        "name": "John",
        "age": 30,
        "city": "New York"
    };
    document.write(JSON.stringify(txt));

From json to javascript we have to use JSON.parse();
var user = JSON.parse(
        '{"name":"Mary","email":"mary123@gmail.com","mobile":1234567890,"password":"mary@123"}'
    );

BOM (Модель объекта браузера):

Динамическое манипулирование HTML-страницы на самой стороне клиента достигается с помощью встроенных объектов браузера. Они позволяют JavaScript код программно контролировать браузер и коллективно известен как объектная модель браузера (BOM).

' Окно «Объект root - это корневой объект и состоит из других объектов в иерархии, а именно к объекту« истории », объекта« Navigator », объект« Местоположение »и объектом« Документа ».

Веб-страница HTML, которая загружается на браузер, представлена с использованием объекта «документа» модели BOM. Этот объект рассматривает веб-страницу как дерево, которое называется моделью объекта документа (DOM).

Чтобы получить доступ к элементу на странице HTML, мы можем использовать следующие методы на объекте «Документ» из DOM API:

getElementById(' ');
document.getElementsByTagName('p');
getElementsByClassName(x);

Для манипулирования содержанием страницы HTML мы можем использовать следующие свойства объекта «Element»:

Пример:

welcome to JS

welcome to para

Атрибуты в доме:

Прежде чем знать, что см. Следующий HTML-код: используя класс Атрибут










  

London

  

London is the capital of England.

  

Paris

  

Paris is the capital of France.

  

Tokyo

  

Tokyo is the capital of Japan.

Теперь пример для установленного атрибута с использованием кода JavaScript::









Hello World

Hello world 2

hello world 3

Click the button to add a class attribute with the value of "democlass" to the h1 element.

Чтобы манипулировать стилем HTML-элемента, мы можем использовать следующее свойство объекта «Element», заданный DOM API: Пример:



    

    

HEADING

Enter

Пример, который включает в себя все API DOM:




    



    

DOM API

This para has attribute id and will help us with selection

This para does not have an attribute id

This para has attribute id and will help us with selection

This para has attribute class and will help us with selection

Welcome to JavaScript ILP tutorial

Let us learn DOM API


Использование метка SPAN в HTML:

My mother has blue eyes.

It is used to style a part of a text.

BOM – Окно объекта:

Если мы хотим перейти к другому URL и принесите новую веб-страницу, или вы хотите закрыть веб-страницу или вы хотите сохранить некоторые данные, связанные с веб-страницей. Ну, чтобы реализовать это, нам понадобится объект, который представляет все окно браузера и позволяет доступом к доступу и манипулировать свойствами окна. Модель BOM предоставляет нам объект «окна».


Свойства LocalStorage и SessionStorage позволяют сохранять пары ключа/значения в веб-браузере. Объект LocalStorage хранит данные без срока годности. Данные не будут удалены, когда браузер закрыт, и будет доступен на следующий день, неделя или год. Свойство LocalStorage является только для чтения. Объект SessionStorage хранит данные только для одного сеанса (данные удаляются, когда вкладка браузера закрыта).




Additionally: window.open("http://www.fb.com");
              window.close();//closes current
                               window.

BOM – История Объект:

Он предоставляет программную навигацию к одному из URL-адресов, ранее посещенных пользователем. Ниже приведены свойства или методы, которые помогают нам сделать это. History.length будет дает количество элементов в списке истории. история. (); , история. Боевые (); history.go (); -> Загружает предыдущий URL, присутствующий в данном номере из списка истории. Ex: window.history.go (-2)//Пройдите две страницы назад, загружают определенный URL из списка истории.

BOM – Объект навигатора:

Он содержит информацию о клиенте, то есть браузер, на котором отображается веб-страница.

navigator.useragent ();

//Используется для возврата значения заголовка пользователя, отправленного на сервер браузером. Он возвращает строку, представляющую значения, такие как имя, версия и платформа браузера.


BOM – объект местоположения:

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

href содержит весь URL как строка -> location.href; location.reload (); -> Перезагрузить текущий HTML-документ. location.assign (); -> Загружает новый документ HTML.



    
    



local.hostname;, location.port;, location.pathname; 

Дом:






    

Example::

Другие концепции:

В отличие от переменных, заявленных с VAR, функционируют Переменные, объявленные с помощью пусть и const, являются разблокированными.

function text() {
        if (10 == 10) {
            let flag = "true";
        }
        document.write(flag);
    }
    text();
                            //This throws an error

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

Ключевое слово Const также можно использовать для массивов и других объектов.

Example: 
const my_array=[1,2,3];
               my_array=[8,9,10]         // throws an error
             my_array.push(4)            //this does not throws any error.

КОНЕЦ… Если вы хотите, чтобы приведенные выше материалы как документ PDF, не стесняйтесь сообщить мне.

Оригинал: “https://dev.to/ruthvikraja_mv/getting-started-with-javascript-1cdm”