Перейти к содержимому

Как начать работать в javascript

  • автор:

Руководство для начинающих по Node.js и NPM

Как начать работу с Node.js и диспетчером пакетов Node

Your browser does not support the audio element.

Сегодня я познакомлю вас с самыми основами Node.js и NPM, включая объяснения того, как разрабатывать для Интернета в целом. Сразу предупреждаю: если вы знакомы с основами веб-разработки и NPM, вы можете пропустить эту статью и узнать больше об очень полезном NPX здесь.

Ок, отлично! Давайте начнем!

Node.js

Если вы читаете это, вы, вероятно, уже загрузили Node.js + NPM и начали с того, что окунулись в воды Javascript. Но первые шаги уже могут показаться пугающими: «Я просто хочу написать небольшую программу на Javascript, зачем мне все остальное?». Это понятно, но на самом деле ничего страшного.

Давайте начнем с самого начала: вы можете просто создать файл Javascript на любом месте вашего компьютера, обозначенный суффиксом «.js». Этот файл может быть заполнен кодом любым удобным для вас способом, но при этом не хватает одной вещи: как вы на самом деле запускаете свою программу? Вот где Node.js вступает в игру.

Node.js — это среда выполнения, специально предназначенная для Javascript. Как следует из описания, Node может запускать ваш код Javascript в определенной среде, которую сам Node предоставляет. Процесс всегда один и тот же: сначала вы запускаете Node.js, а когда Node запускается (что означает, что он закончил запуск), вы можете предоставить ему свой код Javascript.

Есть два способа передать ваш Javascript в Node в качестве входных данных:

  1. Напрямую к запущенному Node-процессу, построчно, без файлов
  2. Сообщая Node, какой файл Javascript загружать, без какого-либо построчного ввода
node 

Построчно

После того, как вы успешно установили Node.js (это просто загрузка + запуск установщика, описания есть на веб-сайте Node), вы можете запустить Node.js из любого места либо в своем терминале (macOS/Linux), либо в PowerShell (Windows) . Команда выглядит так.

Да, это все! Вы только что успешно запустили Node! Вы заметили, как быстро это произошло? Одна из причин популярности Node.js заключается именно в его невероятно быстрой загрузке (среди прочего).

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

(Hit enter after every line end) const greet = (name) => console.log("Hello, " + name); greet("Tom"); let x = 10; x = x + 5; (enter the following line to terminate node) .exit 

Теперь это все хорошо и модно, но написание больших приложений требует, чтобы мы сначала набросали их в файлах, прежде чем отправлять в Node. Следующую главу, пожалуйста!

Ввод через файлы

Для этого примера вам понадобится текстовый редактор. По сути, вы можете использовать любую программу, которая может работать с текстом (например, TextEdit в macOS или Editor в Windows). Я рекомендую VS Code с открытым исходным кодом от Microsoft, но вы можете выбрать то, что лучше всего подходит для вашей эргономики.

Чтобы предоставить файл в качестве входных данных, нам просто нужно его создать. Просто создайте обычный текстовый файл с суффиксом «js» в его имени. Мы назовем наш файл app.js. Теперь откройте выбранную вами командную строку (та, которая использовалась в нашем первом примере). Убедитесь, что вы открываете его из каталога, в котором сохранен файл, это важно.

Если вы используете VS Code, вы можете использовать его встроенную командную строку, просто щелкнув правой кнопкой мыши в представлении проводника и вызвав «Открыть в коде» (в Windows) или перетащив каталог, содержащий файл, на значок кода VS в доке (macOS). Затем вы можете открыть его терминал, как описано здесь.

Когда терминал будет готов, просто введите следующую команду.

node app.js 

Как видите, произошло несколько вещей:

  1. Узел запущен напрямую, без пользовательского ввода
  2. Node прогнал весь ваш файл сверху вниз, пока не достиг его конца
  3. Сам узел завершился, так как конец файла также означал конец его процесса.

И для базового ознакомления с Node.js самое то! После того, как вы загрузили Node и впервые испытали использование командной строки для запуска собственного приложения Javascript, построчно или из файла, вы официально стали разработчиком Javascript! Добро пожаловать в клуб!

Теперь я познакомлю вас с основной концепцией NPM. После следующей главы мы быстро рассмотрим связь между Node.js, NPM и веб-разработкой. Если вы хотите узнать больше о Node.js, вы можете ознакомиться с нашими историями о Javascript, цепочках инструментов и обо всем, что связано с кодированием, здесь. Я также связал некоторые полезные ресурсы в конце этой статьи, чтобы узнать еще больше.

Хорошо, давайте переместим один!

NPM, менеджер пакетов узлов

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

Наивным подходом было бы просто загрузить внешний код непосредственно из источника, например. Github и скопируйте библиотеку файл за файлом в свой собственный проект. Но это приводит к нескольким проблемам:

  • Как лучше всего обновить этот внешний код? Копирование вручную — не лучшее решение.
  • Как вы отслеживаете весь внешний код?
  • Что, если сам этот внешний код опирается на библиотеки, которые не установлены в вашем проекте?

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

npm install serve-static npm remove serve-static 

Естественно, этому менеджеру нужно несколько специальных файлов, чтобы отслеживать все зависимости в вашем проекте. Вот почему приложения, использующие NPM, имеют как минимум два файла: package.json и package-lock.json. Вы можете вызвать следующую команду, чтобы быстро создать новый пакет NPM.

npm init -y 

Примечание: как мы видели в первой части этой статьи, NPM не нужен для использования Node.js или Javascript. Его основное внимание уделяется управлению вашими зависимостями — ни больше, ни меньше. Через NPM вы можете загрузить код, опубликованный на npmjs.com. Все эти внешние модули хранятся в вашем проекте в специальной директории с именем node_modules. Вам практически никогда не придется изменять этот каталог, так как он полностью управляется NPM.

Package.json дает вам представление о ваших текущих зависимостях в проекте. package-lock.json — это специальный файл, в котором хранятся некоторые метаданные об изменениях, касающихся вашего package.json-файла или каталога node_modules, и его можно пока игнорировать.

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

Arc для веб-разработки

Отлично, теперь вы знаете основы Node.js и NPM. Но с какой стати все это вообще необходимо изучать, если вы просто хотите начать создавать свой собственный современный веб-сайт?

Как мы только что видели, NPM позволяет нам загружать код из обширной коллекции библиотек (точнее, самой большой из существующих). Для веб-разработки вам понадобится сервер, который может разместить (то есть предоставить) ваше веб-приложение. Существует множество доступных сервисов, где вы можете загрузить свой веб-сайт-проект и использовать существующую инфраструктуру, включая серверы, чтобы сделать веб-сайт доступным в Интернете.

А для локальной разработки также требуется сервер, чтобы загружать ваши локальные файлы и делать их доступными только вам на вашем устройстве во время разработки. Благодаря Node.js вы можете просто сделать это: сделать свой сайт доступным локально через так называемый локальный хост. Node.js имеет встроенные инструменты, необходимые для запуска локального сервера, но с помощью NPM ваше приложение может быть обогащено проверенными в боевых условиях компонентами, которые помогут вам создавать очень большие сервисы за короткий промежуток времени.

Конечно, это только начало: NPM содержит так много кода для создания современных веб-приложений (известных как PWA, «прогрессивное веб-приложение»), а также сложных серверов. Но для первого знакомства, я думаю, это объяснение должно подойти.

Я надеюсь, что смог помочь вам разобраться с Node.js и NPM. Первые шаги всегда самые трудные, но первые дни разработки и (много) обучения будут вознаграждены вашими навыками, расширяющимися до разработки современных веб-приложений, что позволит вам создавать все, что вы хотите.

Обучение кодированию в Visual Studio

снимок экрана из видео

Чтобы разработать приложение любого типа или изучить язык, вы будете работать в интегрированной среде разработки Visual Studio (IDE). Помимо редактирования кода, Visual Studio IDE объединяет графических дизайнеров, компиляторы, инструменты завершения кода, систему контроля версий, расширения и многие другие функции в одном месте.

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

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

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

Как работают побитовые операции в JavaScript

Чтобы понять, как работают побитовые операции в JS, тебе нужны 2 вещи:

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

Ответы на эти вопросы и введение ты можешь найти тут.

Обзор всех побитовых операций в JavaScript

Оператор Название Описание
& И Если оба бита равны 1 — результат 1. Если хотя бы один из них 0, то и результат 0.
` ` ИЛИ
^ Исключающее ИЛИ (XOR) Если оба бита одинаковые — результат 0. Если биты разные, то результат — 1.
~ НЕ Инвертирует все биты в числе. Нули становятся единицами, а единицы — нулями.
Сдвиг влево Сдвигает все биты влево, заполняет пустые слоты нулями.
>> Знаковый сдвиг вправо Сдвигает все биты вправо, заполняет пусты слоты значением самого левого бита числа. Таким образом знак числа не меняется.
>>> Беззнаковый сдвиг вправо Сдвигает все биты вправо, заполняет пустые слоты нулями.

Примеры и использование

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

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

Операторы И, ИЛИ, XOR

Операторам & , | и ^ требуется 2 числа, чтобы правильно работать. Они сравнивают биты в числах по одному используя правила из таблицы выше.

Давай попробуем их применить. Двоичное представление чисел записано справа в комментариях:

const x = 5; // 0101 const y = 6; // 0110 

Будет проще считать, если ты запишешь двоичные числа в столбик. Вот так:

И 0101 ИЛИ 0101 XOR 0101 0110 0110 0110 ---- ---- ---- 0100 0111 0011 

Сейчас, мы добавим console.log и проверим, правильно ли мы посчитали:

console.log(x & y); // 4 console.log(x || y); // 7 console.log(x ^ y); // 3 

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

console.log(x ^ x); // 0 console.log(y ^ y); // 0 

С другой стороны, если заменишь ^ на & или | , то число не изменится

Оператор НЕ

Оператор ~ работает иначе. Он называется унарным оператором и применяется к одному числу.

НЕ 0101 => 1010 НЕ 0110 => 1001 
console.log(~x); // -6 console.log(~y); // -7 

Знаковый бит тоже меняется, так как он определяется самым левым битом в JavaScript числах. Если он равен 0 , то число положительное, 1 — отрицательное.

Если ты применишь оператор ~ дважды к одному и тому же числу, то ты вернешься туда, откуда начал:

console.log(~~x); // 5 

Операторы побитового сдвига

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

Сдвиг влево

Сдвинуть двоичное число на 1 разряд влево — это то же самое, что умножить его на два. Исключение — большие числа, которые после умножения не поместятся в памяти.

console.log(x  1); // 10 console.log(y  2); // 24 
Сдвиг вправо

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

console.log(x >> 1); // 2 console.log(y >> 2); // 1 

Не ленись, бери карандаш и проверь расчеты самостоятельно!

Беззнаковый сдвиг вправо

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

const n = 100; const m = -100; console.log(n >>> 2); // 25 console.log(m >>> 2); // 1073741799 

Не удивительно, что мы сдвинули 100 на 2 бита вправо и получили число в 4 раза меньше.

Но ты понимаешь почему -100 превратилось в 1073741799 ?

Выводы

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

С другой стороны, если ты ищешь работу и ходишь по собеседованиям, то это одна из любимых тем “на засыпку”. Многие задачи решаются очень красиво с помощью побитовых операций. Например, определить является ли число четным.

Если ты готовишься к собеседованиям, попробуй мобильное приложение Coderslang. В нем более 1500 вопросов по JavaScript, HTML/CSS, Java, C#, Node.js, React.js, React Native, и QA. Скачать можно на iOS и Android.

Как начать работать с графикой в Microsoft C#

Запустите Microsoft Visual Studio. Данный урок построен на базе версии 2012 года. Алгоритм работы с графикой аналогичен и для других версий.

Чтобы создать новый проект зайдите в меню «ФАЙЛ» в левом верхнем углу и выберите «Создать» -> «Проект» (или комбинацией клавиш Ctrl + Shift + N)как показано на рисунке.

В появившемся окне выберите из предложенных создаваемых объектов — Приложение Windows Forms для Visual C#.

После создания проекта у вас на экране появится Форма (Form1) и Панель Элементов. Выберите их этой панели объекты:

  • Button — кнопка,
  • PictureBox — поле для рисования,

и расположите эти объекты на созданной ранее форме.

Выбрав на форме объект PictureBox, на панели «Свойства» вы можете настроить его характеристики. Например: Во вкладке «Макет» -> «Size» вы можете указать точный размер объекта в пикселях.

  • Width — ширина по X ;
  • Height — высота по Y ;

Выберите на своей форме объект Button1. В окне «Свойства» найдите кнопку «События» , во вкладке «Действие» напротив «Click» выберите название метода, отвечающего за событие при нажатии на кнопку.

В файле Form1.cs будет создан метод, и будет представлять из себя:

private void button1_Click(object sender, EventArgs e) { } 

Между фигурными скобками «< >» необходимо написать код, который будет выполняться на событие клика по кнопке.

В языке C# существует целая библиотека для создания графики «System.Drawing». Она автоматически подключается при создании проекта.

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

private void button1_Click(object sender, EventArgs e) { //Выбираем перо "myPen" черного цвета Black //толщиной в 1 пиксель: Pen myPen = new Pen(Color.Black, 1); //Объявляем объект "g" класса Graphics и предоставляем //ему возможность рисования на pictureBox1: Graphics g = Graphics.FromHwnd(pictureBox1.Handle); //Рисуем прямоугольник: g.DrawRectangle(myPen, 10,10,50,50); }

и файл Form1.cs будет иметь вид:

Чтобы запустить Проект нужно нажать на кнопку «Запуск» в виде зеленого треугольника на панели действий, или использовать «горячую клавишу» F5.

В конечном итоге у нас получится:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *