Javascript за одно чтение!!

Эта статья включает в себя самые основные концепции JS, такие как переменные, строки, массивы, функции, циклы, объекты и так далее.

JavaScript — это объектно-ориентированный язык программирования, который также называют языком веб-скриптов, поскольку его можно использовать как на стороне клиента, так и на стороне сервера. В настоящее время это самый мощный и эффективный язык программирования в Интернете. JavaScript, будучи сильным языком, является третьей по важности необходимостью для каждого веб-разработчика, после HTML и CSS. HTML — это основной строительный блок, определяющий весь контент вашего веб-сайта. CSS предназначен для улучшения внешнего вида вашего сайта.

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

Пока мы пишем JavaScript для разработки веб-сайта, мы помещаем соответствующий код на HTML-страницу между тегами script: ‹script› ‹/script›. Кроме того, вы можете создать еще один файл js и включить имя файла в тег script, например: ‹script src="index.js"›‹/script›.

Комментарии в Javascript

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

i) Однострочные комментарии
ii) Многострочные комментарии

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

Метод отображения в JavaScript

У нас есть несколько методов отображения данных в JavaScript, таких как

console.log: отображать данные в браузере
внутренний HTML: используется для доступа к элементу HTML
document.write : отображать данные прямо на вашей странице
windows.alert: отображать данные в окне предупреждения

Console.log

Сначала я создал HTML-страницу и связал ее с JS-файлом с помощью тега script. Просто введите console.log("…"); для отображения данных с помощью функции журнала консоли. Мы можем легко отображать тексты или числа, используя этот метод.

Наш HTML-код, содержащий расположение файла JavaScript, показан ниже (index.js).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>

Теперь мы записываем код console.log в наш файл Js как:

//console log method -- this is our comment
 console.log("hey display data with console log method ");

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

внутренний.HTML

Это самый важный аспект, который следует учитывать при попытке изменить элемент HTML с помощью JavaScript. Javascript использует документ . getelementbyid или document.getelementbyclass для получения элементов HTML.

В моем HTML-файле я включил теги h1 и h2. С элементом h2 связан идентификатор, и мы будем использовать этот идентификатор для публикации информации на нашем веб-сайте.

/*inner html
document.getElementById("content").innerHTML="inner-html method ";  */

Здесь мы написали строку «метод внутреннего HTML» с документом . getelementbyid и метод внутренний текст.

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

документ. писать

Это еще один способ отображения данных в JavaScript.

/* document.write
document.write(2+98-90); */

Здесь мы использовали документ. писать(…); код, а внутри скобок добавлена арифметическая операция.

окна. предупреждение

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

Окно записи на самом деле необязательно. Данные могут отображаться, если мы также пропустим окно. Просто используйте alert("…..");

ПЕРЕМЕННЫЕ ЯВАСКРИПТА

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

Соглашения об именах переменных JavaScript :

Правило 1: Имена переменных чувствительны к регистру.

Правило 2: Имена переменных не могут начинаться с цифры, а также не должны содержать никаких символов, кроме подчеркивания.

Правило 3: Вы не можете использовать зарезервированные ключевые слова.

Способы объявления переменных JavaScript

i) используя var ii) используя let iii) используя const

Использование переменной

Var можно использовать для объявления переменных JavaScript. Вы можете увидеть код ниже:

//Javascript Varaibles
var a = 5; //variable declaration and initialization.
console.log(a*3); //This will display 15 on console.

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

Например, вы можете увидеть приведенный ниже код, он отображает 2 в консоли.

a=10;
{
var a=2; 
console.log(a); //This will display 2 in console
}
console.log(a); //this will also display 2 in console

Повторное объявление переменной с помощью var

Переобъявление переменных с помощью var можно выполнить в любом месте программы, но это также создаст некоторые проблемы.

Например :

var x = 9;
{
var x = 1; //redeclaration 
}
console.log(x); //This will display 1 in the console.

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

Использование let

Переменные, объявленные через let, имеют блочную область видимости. Переменные, объявленные в закрытых скобках, не могут быть доступны за пределами блока.

a=10;
{
let a=11;
console.log(a); //this will display 11 in console 
}
console.log(a); // this will display us 10 in console

Повторное объявление переменной с помощью let

Мы не можем повторно объявить переменную в том же блоке, что и let. Но можно использовать var. Например :

//using var
var a=2;
var a =10;
console.log(a); //this will display 10 in console 
// using let 
let a = 2;
let a = 10;
//this will create error in redeclaration since both are in same block.

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

let x =1;
{
let x=2; //block scope - the value 2 is for this block only and cannot be accessed by outer block.
}
console.log(x); //we get 1 value in console.

Использование констант

Переменные, объявленные с помощью const, нельзя переопределить или переназначить. Const в основном используется, когда вы знаете, что вам не нужно обновлять определенное значение.

const num=1;
num=num+1;
console.log(num); //this will arise you error.
// Uncaught TypeError: Assignment to constant variable.

При объявлении массива, объектов или функций мы можем использовать ключевое слово const. Мы не можем повторно объявить массивы или объекты, но мы можем изменить элементы массива и атрибуты объекта в const.

пример массива:

const array=["nikhil", "pallak", "shivam" ];
console.log(array);//this will display the above array. 
array[2]="jay";
console.log(array); //here when we check our console we get the array index 2 name to be changed by jay.
array.push("riya"); //it adds element to the last position of array
console.log(array);

Операторы в JavaScript

Операторы в JavaScript бывают двух типов.

Унарные операторы — имеющие один операнд.
Бинарные операторы — имеют два операнда.

//unary operators
let c =5;
c=-c;
console.log(c);
//binary operators
d=23*34;
console.log(d);
//more operators include arithmetic,assignment,comparison and so on.
let a = 10;
a+=2;
document.write(a);//this will display 12 to your page content.
console.log(typeof(a)); //typeof determines the datatype name.
//likewise we can use any operators

Тип данных JavaScript

JavaScript имеет в основном два типа данных, на которых следует сосредоточиться.

Примитивные типы данных: кроме объектов, он охватывает все типы. Он содержит число, логическое значение, строку, неопределенное значение, символ, нуль и bignit.
Составные типы данных: включает объекты. Объекты — это просто наборы свойств, значение которых может быть любого типа.

Мы обсудим Object позже как основную тему.

//string type -- for text
const name1="James";
const name2="Jack";
console.log(`We have ${name1} and ${name2}`); //displays We have James and Jack
//number -- integer and float numbers
const n1= 1;
console.log(n1); //display 1 in console 
//bignit -- used for large numbers and need to append n at the end
const num2=2899928829982n;
const final=num2+2n;
console.log(final); //display 2899928829984n in the console.
//undefined -- when value is not deffined
let a;
console.log(a); //undefined displays
//null -- empty value
let number=null;
console.log(number);
//symbol
let v=Symbol('hey');
console.log(v.description); //display hey
console.log(typeof (v)); //display datatype of the v ie symbol.

Строки JavaScript

Строка представляет собой последовательность символов. Давайте разберемся со строками и их операциями в JavaScript. Мы можем писать строки как в одинарных, так и в двойных кавычках.

//strings
let str="Hello Javascript !! ";
console.log(str); //display content of str in console
let len= str.length; //determines length of the string named 'str'
console.log(len); 
console.log(` length of the string is ${len}`);

Здесь, в приведенном выше коде, мы упомянули операцию «длина». Знак $(доллара) также является идентификатором JavaScript, идентифицирующим содержимое упомянутого объекта.

${len} также представляет длину строки.

Дополнительные операции со строками :

//escape chracters
let str = "please contact me for \"further\" analysis"
console.log(str);
//indexOf()- returns index of first occurance of specified text
console.log(str.indexOf("me"));
//lastIndexOf()- returns index of last occurrence of specified text
console.log(str.lastIndexOf("me"));
//search()- search the string and return the position of string
console.log(str.search("me"));
//includes()- return true only if string contains specified value
console.log(str.includes("hi"));
//startsWith()- returns true if the string starts with specified value
console.log(str.startsWith("please"));
//replace- replace the string with another one
console.log(str.replace('please', 'kindly'))
//touppercase- converts entire string to upper case
console.log(str.toUpperCase());
//trim- removes the first and last whitespaces if any
console.log(str.trim());
//concatinate- it adds two strings
const b = "Hello";
const c = "World";
let end = b.concat(" ", c);
console.log(end);
// slice- it extracts certain part of string without changing original string
let a = "hello world";
console.log(a.split());
console.log(a.slice(1,4));
console.log(a.slice(1));

Код, который мы упомянули выше, отображает приведенный ниже вывод соответственно в консоли.

Массивы JavaScript

Массив представляет собой набор данных одного типа. Элементы массива можно переназначать, изменять и удалять.

давайте создадим массив и изучим некоторые операции.

//create an array named color with three element 
const colors=["pink","red","blue"];
console.log(colors);
console.log(colors[1]); //accessing element of the array
colors[1]="white";//changing the array element
console.log(colors[1]);
console.log(colors.length);
console.log(colors[colors.length-1]);//accessing the last element 
colors.push("yellow"); //adding new element to the array
console.log(colors);//display your array

Вывод для соответствующего кода можно увидеть на изображении ниже.

Мы также можем создать массив в JavaScript с помощью new Array().

const data = new Array('bird','ant','fly');
console.log(data);
data.push('rodents'); //add element to last
console.log(data);
data.pop(); //delete last element
console.log(data);
data.shift(); //delete first element
console.log(data);
data.unshift('butterfly'); //add element to first
console.log(data);
data.sort(); //sort array alphabetically
console.log(data);
data.reverse(); //sort in descending
console.log(data);

Вывод для соответствующего кода можно увидеть на изображении ниже.

Условные операторы JavaScript, циклы и случаи переключения

Давайте перейдем к некоторым условным операторам, включая if, if-else и if-else if.

let age = 12;
if(age>=18)
{
console.log('Allowed to vote');
}
else
{
console.log('Not allowed ');
}
// the output will display as Not allowed according to logic we used.

Давайте посмотрим на случаи переключения:

const price = 10;
switch(price){
case 100:
console.log("Price for the ring is 100");
break;
case 120:
console.log("price for the ring is 120");
break;
case 200:
console.log("Price for the ring is 200");
break;
default:
console.log("Price for the ring is 60");
}

Итак, используя эту логику, мы установили нашу цену на уровне 10. Оператор switch теперь перебирает сценарии. Если какой-либо из случаев соответствует указанному вами значению, отображается соответствующий оператор.
Если ни один из случаев не выполняется, у нас есть оператор по умолчанию.
Мы также использовали break; в этом случае. Если он соответствует одной из ситуаций, он перестает меняться во всех них. Если мы не предусмотрим разрыв для всех обстоятельств, он покажет нам все заявления.

Перейдем к циклу :

У нас есть такие циклы, как цикл for, цикл while, цикл do..while, цикл for in и цикл for of петля.

//for loop -- loop throughout the block number of times for(i=0;i<10;i++){ str="the number are " + i +; console.log(str); } //while loop --loop throughout block of code while a specified condition is true let i=0; while(i<10) { str= "The number is " + i ; console.log(str); i++; } //do-while loop -- iterates for the number of times let i=0; do{ str= "The number is " + i ; console.log(str); i++; }while(i<10)

Эти три цикла являются основными, которые мы можем использовать в JavaScript, но они также имеют некоторые дополнительные циклы, такие как цикл (For..in) и (For..of).

For In: Цикл For In может перебирать свойства объектов.

const person = {fname:"Danny", lname:"Drill", age:20}; let text = "" for (let x in person) { text += person[x] + " "; } console.log(text);

В приведенном выше коде мы установили объект с именем person с некоторыми элементами на нем.

for in loop здесь перебирает объект и дает нам желаемый результат.

For of: цикл for of может перебирать свойства массива.

const fruits = ['apple','banana','orange'] let text ='' for(let x of fruits){ text+=x+ " "; } console.log(text);

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

Функции JavaScript

Функции — это блоки кода, которые можно вызывать из любого места программы для выполнения определенной цели. Когда функция вызывается, код, содержащийся в ней, будет выполнен.
В JavaScript мы можем легко объявить функции, используя ключевое слово «функция».
Код ниже обеспечивает очень базовое понимание функции Js.

function mydata(){ text="I am a learner"; document.write(text); } mydata();

Поскольку мы используем 'document.write', будет отображаться текст, указанный на нашем веб-сайте, и вы можете ясно увидеть, как здесь работает функция.
Мы создали функцию под названием mydata, и каждый раз, когда эта функция вызывается, код внутри нее выполняется и отображается вывод.

Объекты JavaScript

Объекты аналогичны переменной, которая может иметь несколько значений.

Объявление объектов в JavaScript

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

имя_объекта = {свойство: «значение1», свойство2: «значение2», свойство: «значение»};

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

const car = {type:"Ford", model:"500", color:"white"}; //This is our object named car which has multiple values which determine the properties of the object. // Here we have properties like type,model,color with its respective value.

путем создания экземпляра объекта: мы можем создать объект, используяключевое слово "new" со следующим синтаксисом.

var имя_объекта = новый объект();

var cars = new Object(); cars.name="Ford"; cars.model="XYZ"; cars.color="white"; console.log(cars.name + " " + cars.model + " " + cars.color);

с помощью конструктора объектов: мы можем создать функцию с аргументами и присвоить значение аргументам с помощью ключевого слова this.
function student(rollno , fname , lname){ this.rollno=rollno; this.fname=fname; this.lname=lname; } std= new student(4,"Aish","Rooki"); console.log(std.rollno + " " +std.fname + " " + std.lname);