Skip to main content

Hello World

@serverSerrverlesskiy

JavaScript

Previously, to create a πŸ—οΈ digital startup, a team was needed from:

  • iOS developer πŸ“±,
  • Android developer πŸ“±,
  • Developer backend πŸ’»,
  • Developer for the web πŸ–₯ and
  • Teamlead πŸ§™β€β™‚οΈ who everywhere on top and in one thing perfectly - it is 5️⃣ people!

Hello World

Today, thanks to JavaScript, it is possible to replace 5️⃣ developers with one JavaScript developer using the technology stack that we teach in our school.

JavaScript is a programming language that makes it possible to implement complex behaviors on web pages and more. In JavaScript, you can write sites ℹ️, servers, mobile πŸ“± and desktop πŸ’» applications, as well as applications for augmented and virtual reality.

JavaScript is the first of the most popular programming languages ​​among European developers. This data was obtained by the authors of research from the O'Reilly company as a result of a survey of more than 1300 programmers from 27 countries.

Syntax

Hello World

JavaScript, like many other programming languagesπŸ‘…, has a strict syntaxπŸ“–. Syntax πŸ“– is a section of grammar that studies sentences and how to combine words within a sentence. Computers πŸ–₯️ are not as smart as humans πŸ‘¨: they cannot β€œjust understand” 🀷 what you mean. The machine πŸš— will be able to understand you only if you communicate πŸ’¬ with it strictly in the forms of expression that it expects from you. This expected form of expression is called the πŸ“– syntax.

Work environment

first

1️⃣ First, you need a desktop computer or laptop.

2️⃣ Secondly, the computer must have an operating system installed: Windows MacOS or Linux.

3️⃣ Thirdly, a browser must be installed on the computer, in our lessons we will use Google Chrome, but others can be used. Chrome, who is not in the know, is a browser, that is, a program for viewing web pages.

If you still do not have Google Chrome installed, you can download it here any other browser (Firefox, Safari, Edge or Internet Explorer) by simply typing πŸ”Ž "download Chrome" into the search bar and following the further instructions.

After downloading and installing Google Chrome, open it and enter πŸ§‘β€πŸ’» in the address bar:

about:blank

Press ENTER. And the browser will open a new blank page.

about blank

Browser console

Code

It's time to get acquainted with one of the main developer tools - the browser console.

Basically, our course can be taken directly on our website, but sometimes we will need to use the browser console, so we will now get to know it.

Open console

Since you are now an aspiring programmer πŸ–₯️, you can use it too! To bring up the console, simply press the πŸ”˜ CTRL, SHIFT (or COMMAND and OPTION if you have a Mac) and J keys together.

Pressing the key combination will open a new πŸ†• menu bar and you will see an angle bracket in the upper left corner of the page. By the way, if you move the cursor to the edge of the area where it turns into a double arrow, then by pressing and holding the left button, you can stretch the console window. Be sure to do this so you have more room to inject your codeπŸ“Ÿ.

console

If the combination CTRL + SHIFT + J or COMMAND + OPTION + J for some reason does not work, you can enter the console by right-clicking on an empty space on the page πŸ–±οΈ, select the Inspect (View codeπŸ“Ÿ) and then click Console on the menu bar.

Inspect

Hello world program

"Hello, world!" - A program that outputs the phrase "Hello, world!" To the screen or other device 🌎

This is usually the first example of a program in a programming textbook, and for many students, this is the first experience in learning a new languageπŸ‘….

Now that the console window is open in front of you and you have stretched it in a convenient way, click the mouse to the right of the angle bracket >.

not equal

A blinking cursorπŸ–±οΈ appears on the line, indicating that you can start typing. You will now type your first lines of codeπŸ“Ÿ. Enter the following text πŸ“œ (including quotation marks):

"Hello world!"

Hello world! Hello World

Press ENTER. The console will return your text on the next line πŸ“œ: "Hello World!". Through the browser console, we communicate directly with the JavaScript engine - this is such a program, or, in other words, an interpreter that executes code written in JavaScript.

Hello world!

Now you can be proud that you wrote and executed the first JavaScript code with your own hands!

Then press the key_ UP_ARROW ⬆️ (up arrow) and you will see your text πŸ“œ "Hello World!". Next, move the cursorπŸ–±οΈ to the beginning of the line and type the following text instead πŸ“œ:

var hello = 'Hello world!'

and press ENTER. In the console you will see the answer: undefined. Everything goes according to plan! Now type:

hello

and press ENTER. If you did everything correctly, the console will return a message in the line πŸ’¬ "Hello, World!". Here we have created a variable and assigned a value to it.

Hello world!

And, of course, this is the minimum that can be done in the browser console. Further more! Let's try addition: βž•

2 + 2
// Console response: 4

Addition and Subtraction: βž• βž–

6 + 4 - 5
// Console response: 5

Multiplication: βœ–οΈ

5 * 5
// Console response: 25

Division: βž—

25 / 5
// Console response: 5

And any other mathematical operations ...

Live editor

Live editor

The JavaScript code is executed by the JavaScript engine of the browser. Through the console, we access it directly. Further, in order not to write the entire training course in the browser and jump through windows from our site to the browser console and vice versa, we will write the code in the Live Coding mode right on our site. To do this, try to add the word Hello in the next window LIVE EDITOR. In RESULT, you should get Hello World 🌎.

Live Editor
Result
Loading...

Now try playing with math operations πŸ‘‡:

Live Editor
Result
Loading...

Problems?

Problem

Write to Discord chat.

Questions

Question

What URL (address) do I need to enter into Chrome's address bar to open a completely blank browser tab?

  1. blank
  2. about.blank
  3. about: blank

What's the keyboard shortcut to open the console in Chrome?

  1. Ctrl + Shift + P
  2. Ctrl + Shift + J
  3. Ctrl + P

What is the symbol for the addition operation?

  1. + /
  2. + \
  3. +

What is the symbol for the subtraction operation?

  1. /
  2. - \
  3. -

What is the symbol for the multiplication operation?

  1. Γ—
  2. * /
  3. *

What is the symbol for the division operation?

  1. /
  2. \
  3. %

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

Sumerian school

  1. MDN web docs
  2. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

πŸ“–

Resoner2005

πŸ› 🎨 πŸ–‹

Become a Patron!