Сегодня в этой статье мы представили для вас базовое руководство по Javascript, чтобы вы могли изучить основные основы Javascript.

JavaScript — один из самых популярных языков программирования в мире.

В такой ситуации очевидно, что спрос на разработчиков Javascript очень высок, поэтому, изучив его, вы сможете сделать лучшую карьеру. Самое главное, что его очень легко освоить, если вы уделите этому уроку всего 20 минут, то вы обязательно изучите основы программирования на Javascript.

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

Обязательно проверьте мое недавнее расширение Chrome: Установить сейчас

Учебное пособие по JavaScript на хинди — основные основы

Тег HTML-скрипта

Вы можете вставить программу JavaScript в любое место в разделе заголовка или тела вашего HTML-документа, для этого вам понадобится тег ‹script›.

Пример:

<script> 
// JavaScript code 
</script>

Браузер автоматически интерпретирует код, написанный внутри тега ‹script›, как сценарий. Также есть некоторые атрибуты тега Script, которые приведены ниже, хотя в настоящее время они используются очень редко, но о них все же следует знать:

Атрибут типа:

В соответствии со старым стандартом HTML4 атрибут type был записан внутри тега script следующим образом:

<script type="text/javascript"> 
//JavaScript code 
</script>

Нет необходимости писать этот атрибут в современном HTML.

Языковой атрибут:

Из атрибута языка было сказано, какой язык мы используем. Раньше писалось примерно так:

<script language="javascript">
//JavaScript code 
</script>

Нет необходимости писать его в новой версии HTML, потому что код, написанный внутри тега ‹script›, по умолчанию считается JavaScript в соответствии с новым стандартом.

Синтаксис JavaScript

К этому моменту вы уже поняли, что код JavaScript записывается внутри тега ‹script›. Теперь попытайтесь понять, как код написан в синтаксисе JavaScript, т. е. JavaScript, с помощью примера кода, приведенного ниже.

Пример

<!DOCTYPE HTML> 
 <html> 
 <body> 
 <script> 
 alert( 'Hello, world!' );
 </script>
 </body>
 </html>

В этом коде мы написали код JavaScript в теге script внутри тела, чтобы на экране пользователя появилось всплывающее диалоговое окно, в котором Hello, world! Должно быть, написал

Здесь следует отметить, что мы поставили точку с запятой (;) после кода, но если вы пишете только один код в строке, в этом нет необходимости.

alert('Hello');
alert('World');

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

alert('Hello'); alert('World');

Внешний скрипт

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

Чтобы прикрепить файл сценария в формате HTML, местоположение этого файла необходимо указать с помощью атрибута src в теге ‹script›.

Пример:

<script src="/scriptfolder/myscript.js"></script>

Мы импортируем файл JavaScript с именем myscript.js в приведенном выше коде. В коде /scriptfoljs-/myscript.js указано расположение этого js-файла.

Если файл myscript.js находится в том же месте, что и файл HTML, мы можем написать src="myscript.js".

Одним из преимуществ использования отдельного файла является то, что после загрузки этого файла браузер сохраняет его в кеше, и всякий раз, когда страница нуждается в этом файле, вместо повторной загрузки он берется прямо из кеша. Является.

То есть этот внешний скрипт не будет скачиваться снова и снова, что увеличит скорость открытия страницы.

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

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

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

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

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

1. Однострочный комментарий:

Если вы хотите написать комментарий через строку, то вы можете просто написать комментарий перед ней, поставив два слэша //.

// This is a single line comment
alert('Hello');

2. Многострочный комментарий:

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

/* This code will not work
alert('Hello'); 
 */
alert('World');

В примере текст и код, написанные между /* и */, не будут отображаться на экране.
Если вы хотите временно отключить какой-либо код, вы можете сделать это, просто добавив к нему комментарий.

Переменные

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

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

Но чтобы создать переменную в Javascript, нет необходимости указывать тип данных переменной. Мы можем хранить любой тип данных в переменной, JavaScript автоматически понимает тип этих данных.

Как создать переменную?

Вы можете использовать ключевое слово «var» для создания переменной в Javascript, что является самым старым методом. Однако помимо «var» вы также можете использовать ключевое слово «let» или «const», о котором вы прочтете дальше.

А пока мы научимся создавать переменные, используя «var». Для этого ниже приведены некоторые примеры.

Пример:

var username;
var age;
var address;

Если хотите, вы также можете объявить несколько переменных в одной строке. Как:

var username, age, salary;

Как сохранить значение в переменной?

Теперь мы научимся инициализировать созданные выше переменные, т.е. сохранять значение. Для этого см. примеры, приведенные ниже.

Пример:

var username='Amit';
var age= 25;
var address='Raipur';

Или мы можем присвоить значение всем переменным в одной строке.

var username='Amit', age=25, address='Raipur';

Правила создания переменных:

Чтобы создать переменную в Javascript, необходимо следовать некоторым правилам, приведенным ниже.

И. Первый символ в имени переменной не должен быть цифрой или числом.

II. Имя должно содержать только буквы (от a до z или от A до Z), цифру (0–9) и символ ($ или _).

III. В JavaScript уже есть некоторые предопределенные ключевые слова (зарезервированные слова), такие как class, return, function и т. д., которые нельзя использовать в качестве имен переменных. Вы можете увидеть список зарезервированных ключевых слов здесь.

Операторы

После сохранения значений в переменных мы также можем выполнять между ними некоторые операции, такие как сложение, умножение и т. д. Для выполнения таких операций мы должны использовать некоторые символы (например, +, -, *, /, % и т. д.), которые называются операторами.

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

Операнд:
Элементы, с которыми выполняется операция, называются операндами. Например: 5 * 7, в котором мы умножаем 5 и 7, где мы будем вызывать 5 как левый операнд и 7 как правый операнд.

Унарные:
Такие операторы, которые имеют только один операнд, называются унарными операторами. Например, -5, в котором 5 является операндом, а минус (-) является унарным оператором, так как он имеет только один операнд.

Двоичный:
Такие операторы, которые требуют двух операндов для выполнения операции, называются бинарными операторами. Like + — это бинарный оператор, потому что он требует двух значений или переменных.

Типы операторов

В Javascript существует множество типов операторов, которые подробно описаны ниже.

Арифметические операторы

Арифметические операторы используются для выполнения арифметических операций между двумя переменными или значениями. О них дано ниже.

Операторы сравнения JavaScript

+ Addition 10+20=30
– Subtraction 15-10=5
* Multiplication 5*2=10
/ Division 8/2=4
% Modulus (Remainder) 5%2=1

Операторы сравнения JavaScript

Два операнда сравниваются операторами сравнения. Операторы сравнения бывают нескольких типов:

== Is equal to 20==30 = false
!= Not equal to 20!=30 = true
=== Identical (both values are equal and of same type) 5===2=false because both have same type but values are not equal
5===”5″=false because the types of both are not same. Here 5 is a digit while "5" is a character (single alphabet).
!== Not Identical 5 === 2 = true
5===”5″=true
< Less than 10<20 td=”” true=””>
> Greater than 10 > 20 = false
<= Less than equal to 10<=20=true
10>=10=true
=> Greater than equal to 10>=20=false
10>=10=true

Логический оператор

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

&& Logical AND (If the values of the expressions on both sides of the operator are true then the output will be true otherwise it will be false) (20<30 && 30>20)=true
, Logical OR (If the value of either of the two expressions is true, the output will be true and if both are false, the output will be false) (10>30 || 30<40)=true
, Logical Not (It applies to single operand and reverses the value i.e. false to true and true to false)

Операторы присваивания

Оператор присваивания (=) используется для присвоения значения переменной. Операторы присваивания, используемые в JS, приведены ниже.

= assign var a = 10;
var b = 20;
var c;
a+b=c
c = 30
+= Add and Assign - (Adds the values of both sides and stores them in the left side variable) var a=10; a+=20; a = 30
-= Subtract and Assign (subtracts the value of the right side variable from the value of the left side variable and stores it in the left side variable) var a=20; a = 5; a = 15
*= Multiply and Assign (multiplies the values of both sides and stores them in the left side variable) var a=10; a*=5; a = 50
/= Divide and Assign var a = 10; a/=5; a = 2
%= Modulus and Assign (after dividing the left value by the right value, assigns the remainder to the left variable) var a=10; a%=3; a = 1

Побитовые операторы

Побитовый оператор работает на основе бита, т.е. двоичного числа (0, 1). Он вычисляет, преобразовывая данный ввод в двоичный код, и возвращает вывод, снова преобразовывая его в десятичное число.

& Bitwise AND (If the value of both bits is 1 then the output will be 1 otherwise it will be 0)
, Bitwise OR (if either of the two bits is 1 then the output will be 1)
^ Bitwise XOR (If the value of only one of the two bits is 1 then the output will be 1)
~ Bitwise NOT (inverts each bit ie turns 0 into 1 and 1 into 0)
<< Bitwise Left Shift (all bits are shifted to the left, how much will be shifted is determined by the value of the right side)
>> Bitwise Right Shift (All bits are shifted to the right, how much will be shifted is determined by the value of the right side)

Условный (тернарный) оператор

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

Его синтаксис примерно такой:

variablename = (condition) ? value1:value2;

где мы вопросительный знак? И используйте двоеточие:. Мы помещаем условие в скобки (), когда это условие истинно, возвращается значение до двоеточия, а когда условие ложно, возвращается значение после двоеточия.

Пример

largestvalue = (20>10) ? 20:10;
alert(largestvalue);

Заявление «если-иначе»

В Javascript условие оценивается с помощью оператора If-else, и решается, какой код будет выполнен, если условие истинно или ложно. Ниже приведены три различных типа операторов If-else, которые мы можем использовать в нашей программе в соответствии с требованиями.

  • Если заявление
  • Если еще заявление
  • Если еще если заявление

Если заявление

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

Синтаксис:

if (condition){
// code to be executed 
}

Пример:

if(a>b){
alert("a is greater than b!");
}

Если еще заявление

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

Синтаксис:

if (condition){
// code to be executed 
}

Пример:

if(a>b){
alert("a is greater than b!");
}
else{
alert("a is less than b!");
}

Если еще если заявление

Если мы хотим проверить более одного условия, мы можем использовать оператор if else if.

Синтаксис:

if (condition){
// code to be executed 
}
else if (condition){
// code to be executed 
}
else if (condition){
// code to be executed 
}
else{
// code to be executed 
}

Пример:

if(marks>89){
alert("Great");
}
else if(marks>80){
alert("Uff You are average");
}
else{
alert("You failed Unh!!");
}

Заявление о переключении

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

Если совпадения регистра нет, то в такой ситуации выполняется код с регистром по умолчанию.

Вы можете лучше понять это в приведенном ниже примере.

Синтаксис:

switch(expression){
case value1:
// code to be executed
break;
case value2:
// code to be executed
break;
default:
// code to be executed
}

Пример:

var grade='B';
switch(grade){
case 'A':
alert("Good Job");
break;
case 'B':
alert("Pretty Good");
break;
case 'C':
alert("Passed");
break;
case 'F':
alert("Failed");
break;
default:
alert("No Grade");
}

Давайте теперь разберем этот пример:

  • Прежде всего, мы создали переменную с именемgrade, значение которой мы сохранили B.
  • Теперь сравним его с разными случаями.
  • В первом случае проверяется, является ли значение оценки «А» или нет… условие ложно, потому что значение оценки равно «В».
  • Во втором случае мы проверили значение «B»… условие верно… код после двоеточия будет выполнен, и «Pretty Good» будет напечатано во всплывающем окне через функцию оповещения.
  • После этого будет выполнен оператор break, а остальные случаи оператора switch будут пропущены.

Группировка дела

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

var value=5;
switch(value){
case 1: 
case 2: 
alert("The number is less than 3");
break;
case 3: 
case 4: 
alert("The number is less than 5");
break; 
default: 
alert("Error!!");
}

Циклы Javascript

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

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

Например, если мы хотим напечатать все четные числа от 1 до 100 одно за другим, то эту работу можно очень легко выполнить с помощью нескольких строк кода через цикл.

Javascript в основном состоит из подростковых типов циклов:

  1. пока цикл
  2. сделать… в то время как цикл
  3. для петли

пока цикл:

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

Синтаксис:

while(condition){
//code
}

Пример:

var i = 0;
while (i < 10){
alert(i);
i++;
}

В этом примере мы взяли переменную i, которая была инициализирована до 0, теперь ввели условие while i‹10, то есть этот цикл будет выполняться до тех пор, пока значение i не станет меньше 10.

Мы продолжаем увеличивать значение через i++ и печатаем значение от 0 до 9 через alert.

сделать… в то время как цикл:

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

Синтаксис:

do{
//code
}while(condition);

Пример:

var i = 0;
do{
alert(i);
i++;
}while (i < 10);

для цикла:

Цикл for является наиболее часто используемым циклом. Он состоит из трех важных частей:

  • Инициализация: предоставление начального значения переменной.
  • Условие: определение условия цикла.
  • Итерация: чтобы увеличить или уменьшить значение переменной.

Синтаксис:

for (initialization; condition; increment/decrement){
//code
}

Пример:

for(var i=0; i<10; i++){
alert(i);
}

Функция

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

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

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

Ранее мы использовали функцию alert(), которая является встроенной функцией, но здесь мы научимся создавать функцию самостоятельно.

Определение функции:

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

Синтаксис:

function functionname(){
//code to be executed
}

Пример:

function msg(){ 
alert("hello everyone!");  
}

Вызов функции:

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

Для вызова функции просто пишется ее имя. Вы можете увидеть пример этого ниже.

Пример:

<script>
//function definition 
function msg(){
alert("hello everyone!");
}
//function call
msg();
</script>

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

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

Вы можете увидеть пример этого ниже.

<script>
function msg(){ 
alert("hello everyone!");  
}
</script>
<input type="button" onclick="msg()" value="click here!">

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

Функция с параметрами:

Мы также можем передать некоторые данные в функцию через параметр (также называемый аргументом функции), с которым она может выполнить некоторую операцию и дать нам результат.

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

<script>
function msg(from, text){
alert( from + ':' + text);
}
msg("Vivek","Hello everyone!"); 
</script>

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