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
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Now try playing with math operations ๐Ÿ‘‡:

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Links#

  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!