Steam Community :: Guide :: Программируем на JavaScript

Store Page

Garry's Mod

All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Garry's Mod > Guides > Dr. L's Guides

Not enough ratings

Программируем на JavaScript | JavaScript для начинающих

By Dr. L

Не душное руководство по JavaScript.

Award

Created by

Dr. L
In-Game
The Forest

Category: Achievements, Characters, Classes, Co-op, Crafting, Game Modes, Gameplay Basics, Loot, Maps or Levels, Modding or Configuration, Multiplayer, Secrets, Story or Lore, Trading, Walkthroughs, Weapons, Workshop

Languages: Russian

Gamemode, Addon

Posted

Updated

1 Jan @ 11:57am

4 Jan @ 11:23am

43	Unique Visitors
5	Current Favorites

Guide Index

Overview

Введение

Введение в JavaScript

Среда выполнения

Первая программа

Основы JavaScript

Условия и циклы

Функции

Массивы и объекты

Классы и объекты

Модули

Конец

Comments

Введение

Это часть серии руководств по программированию.

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

Внимание, в этой части мы не будем пазбирать серверную часть работы JavaScript!
Мы будем изучать только базовый JavaScript, а углубление в серверную часть будет написанна позже!

Введение в JavaScript

JavaScript — это язык программирования, который используется для создания динамичных веб-страниц. Он работает в браузерах, но также может использоваться на сервере с помощью Node.js[1]. В отличие от многих других языков программирования, JavaScript является интерпретируемым языком, который не требует предварительной компиляции[2].

Основные особенности JavaScript:

Кросс-платформенность: работает в браузерах, на серверах, а также в мобильных приложениях.
Динамическая типизация: тип данных переменных определяется во время выполнения.
Объектно-ориентированный язык с поддержкой функционального стиля программирования.

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

JavaScript - это язык программирования, который используется для создания сайтов. Он работает в браузерах, но может работать и вне браузера, с помощью замечательной штуки - Node.js[1]. В отличии от многих языков программирования, JavaScript является интерпритируемым языком, тоесть он компилируется[2] во время выполнения, к примеру как Python.

Примечания:

[1] Node.js - среда выполнения кода JavaScript, которая позваляет выполнять код на JavaScript вне браузера.
[2] Компиляция - обработка кода, в ходе которой код преобразуется в машинный код, понятный процессору.

Среда выполнения

Как я уже упомянул, JavaScript - это кроссплатформенный язык программирования, то есть, он может работать на разных операционных системах, таких как Linux, Windows, MacOS, Android и тд.

Для написания кода мы будем использовать среду выполнения Node.js, это позволит нам работать вне браузера, и выполнять весь код в консоли!

Node.js также является кроссплатформенной средой выполнения, данный инструмент вы можете скачать с оффициального сайта: https://nodejs.org/en

Что насчет написания кода, можете использовать любой удобный вам текстовый редактор или специализированную IDE (среду для написания кода), но я буду использовать Visual Studio Code (и вам советую), и работать я буду из под линукса, но всё вышеперечисленное доступно и на Windows!

Также, перед началом, зайдите в свой текстовый редактор или IDE, создайте на рабочем столе папку, к примеру js_test, и создайте там файл, и назовите его к примеру test.js, главное, чтобы на конце было .js!
После создания директории (папки), и скачивания node.js, откройте терминал (консоль), и переёдите в папку с вашим .js файлом.

Первая программа

Здесь, как и в других руководствах, мы не будем сразу начинать изучать всё подряд.
Для начала напишем простую программу, которая выводит "Hello world!" в консоли.

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

В файле .js, который я просил вас создать, впишите следующий код:

console.log("Hello world!");

Сохраните файл, и перейдите в консоль, убедитесь, что вы в той же папке, что и файл с кодом.
После этого, убедитесь, что у вас установлен node.js, можете проверить это в консоли, с помощью одной из команд:

node node -v

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

node test.js

Пояснение:
test.js - это тот файл, который я попросил вас создать, если вы создали файл с другим именем, то введите вместо test.js то имя файла, которое вы дали своему файлу, и в котором находится код.

Если всё прошло хорошо, вы увидите в консоли сообщение:

Hello world!

Если вы увидели сообщение, поздравляю, вы написали свою первую программу на JavaScript!

Основы JavaScript

Переменные и типы данных

Для начала обсудим переменный и типы данных.

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

Объявление переменных:

var - устаревший способ объявления переменных.
let - позволяет изменять значение переменной.
const - для переменных, чье значение не должно изменяться (крч константы).

let name = "Tofca"; // строка const age = 22; // число let work = true; // логическое значение

JavaScript поддерживает несколько разных типов данных.
Основные типы данных:

String: строки (тексты)
Number: числа (целые и с плавающей точкой)
Boolean: логическое значение (true или false)
Object: объекты
Array: массивы
null и undefined: специальные значения

let message = "Hello, World!"; let number = 100; let isActive = true; let user = { name: "John", age: 30 }; // объект let numbers = [1, 2, 3, 4]; // массив

Операторы

Операторы в JavaScript можно разделить на несколько типов:

Арифметические операторы: +, -, *, /, %, ++, --
Сравнительные операторы: ==, ===, !=, !==, >, <, >=, <=
Логические операторы: && (и), || (или), ! (не)

Пример:

let a = 5, b = 10; console.log(a + b); // 15 console.log(a > b); // false

Условия и циклы

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

Для выполнения блоков кода в зависимости от условий используем if, else и else if.

Общий синтаксис:

if(условие) { // блок кода }

let age = 18; if (age >= 18) { console.log("Вы совершеннолетний"); } else { console.log("Вы несовершеннолетний"); }

Давайте разберём этот код:
let age = 18; - создаем переменную age типа int (число), и присваиваем её значение 18.

if (age >= 18) - здесь есть условный оператор if, с помощью него мы проверяем переменную age с помощью оператора сравнения, если переменная age больше или равна 18, оператор возвращает true, в любом другом случае возвращает false;
console.log("Вы совершеннолетний"); - выводит в консоль сообщение "Вы совершеннолетний", если условный оператор if вернул значение true.
else - необязательный элемент, но если он есть, он всегда идёт после оператора if, и срабатывает только в том случае, если оператор if, после которого он идёт, вернул false.

Есть ещё тернарный оператор, выглядит страшно, я сам испугался, когда первый раз увидел его.

Общий синтаксис:

условие ? если условие вернуло true : если вернуло false;

let age = 18; let message = (age >= 18) ? "Совершеннолетний" : "Несовершеннолетний"; console.log(message);

Вывод:

Совершеннолетний

Давайте разберём этот код:

let age = 18; - создали переменную age и присвоили значение 18.
let message = (age >= 18) ? "Совершеннолетний" : "Несовершеннолетний"; - это разобъем на части и разберём по отдельности:
- let message - создали переменную типа string (строка).
- (age >= 18) - здесь происходит сравнение переменной age и числом 18, данное сравнение вернёт true, если age больше или равно 18, и false в любом другом случае (если age меньше 18).
- "Совершеннолетний" : "Несовершеннолетний" - это значение примет переменная message, "Совершеннолетний" если условие вернуло true, и "Несовершеннолетний" если false.
console.log(message); - вывели в консоль содержимое переменной message.

Циклы

Циклы используются для повторения операций несколько раз.
В JavaScript есть несколько видов циклов:

for: для повторений с заранее известным количеством.
while: для повторений, пока условие истинно.
do...while: выполняет блок кода хотя бы один раз.

Пример:

for (let i = 0; i < 5; i++) { console.log(i); // Выведет 0, 1, 2, 3, 4 } let j = 0; while (j < 5) { console.log(j); // Выведет 0, 1, 2, 3, 4 j++; }

И помните, в программировании, в частности в циклах и в индексах массивов, счет начинается с нуля!

Функции

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

Общий синтаксис:

function название фукции(аргументы) { // тело функции }

Вот функция которая выводит в консоль приветствие:

function greet(name) { console.log("Hello, " + name); } greet("Dr. L"); // Hello, Dr. L

В JavaScript можно сделать функцию, которая возвращает значения:

function add(a, b) { return a + b; } let result = add(5, 10); // 15

Стрелочная функция.
Да... JavaScript не перестовал меня удивлять. Если вы уже знаете какие-то языки программирования, по типу С++, для вас, как и для меня, это, возможно, покажется странными и непонятными.

Выглядят они следующим образом:

const greet = (name) => console.log("Hello, " + name); greet("Dr. L");

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

Это - та же функция:

const greet - её название.
= (name) - аргументы (параметры), котоаря она принимает.
=> console.log("Hello, " + name); - это уже как бы "тело функции". Но есть момент, если вы хотите вернуть какое то значение, не надо использовать слово return, просто после стрелочки введите имя переменной, которую надо вернуть.

Пример стрелочной функции, которая возвращает значение:

const add = (a, b) => a + b; console.log(add(10, 5)); // 15

Массивы и объекты

Массивы

Массивы в JavaScript используются для хранения нескольких элементов.
Пример:

let fruits = ["apple", "banana", "cherry"]; console.log(fruits[0]); // apple fruits.push("orange"); // добавление элемента в конец

Популярные методы для работы с массивами:

push() — добавляет элемент в конец массива.
pop() — удаляет последний элемент.
shift() — удаляет первый элемент.
unshift() — добавляет элемент в начало.
map(), filter(), reduce() — для работы с массивами функционально.

Примечания:

Элементы массива нумеруются, начиная с нуля.
Мы можем получить элемент, указав его номер индекса в квадратных скобках.
В массиве могут храниться элементы любого типа:
// разные типы значений let arr = [ 'Яблоко', { name: 'Von' }, true]; alert( arr[1].name ); // Von arr[2](); // true

Объекты

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

Пример:

let person = { name: "John", age: 30, greet: function() { console.log("Hello, " + this.name); } }; person.greet(); // Hello, John

Здесь мы создали объект Person, у него есть такие поля как:

name - имя
age - возраст

Так же, у этого объекта есть свой метод (функция), это greet.

Классы и объекты

С появлением ES6 в JavaScript были добавлены классы, что позволило использовать объектно-ориентированное программирование.

Пример:

class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log("Hello, " + this.name); } } let person = new Person("John", 30); person.greet(); // Hello, John

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

Модули

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

Экспортирование из модуля:

// файл utils.js export function add(a, b) { return a + b; }

Импортирование модуля:

// файл main.js import { add } from './utils.js'; console.log(add(2, 3)); // 5

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

Конец

Вот и подошло к концу наше изучение JavaScript.
Надеюсь вам понравилось руководство, и вы узнали что то новое.
Можете поставить хорошую оценку моему руководству, и наградить его :3

Всем удачи в программировании!

Другие руководства:
https://steamoss.com/sharedfiles/filedetails/?id=3400164684
https://steamoss.com/sharedfiles/filedetails/?id=3395692013
https://steamoss.com/sharedfiles/filedetails/?id=3390154519
https://steamoss.com/sharedfiles/filedetails/?id=3389441554

1 Comments

< >

.funky1337 3 Jan @ 4:52am

норм тип строчит сразу на 6+ языках

< >