Hello, World! — Основы JavaScript
По традиции начнем с написания программы «Hello, World!». Эта программа будет выводить на экран текст. Чтобы вывести что-то на экран, нужно дать компьютеру специальную команду. В языке JavaScript такая команда — console.log() :
console.log('Hello, World!'); // => Hello, World!
Иногда для удобства мы будем показывать в комментариях результат запуска строчек кода, вот так: => РЕЗУЛЬТАТ . Например, // => 4 .
Комментарии
Кроме собственного кода в файлах с исходным кодом могут находиться комментарии. Это текст, который не является частью программы и нужен программистам для пометок. С их помощью добавляют пояснения, как работает код, какие здесь ошибки нужно поправить или не забыть что-то добавить позже.
// Удалить строку ниже после реализации задачи по регистрации console.log(10);
Комментарии в JavaScript бывают двух видов.
Однострочные комментарии начинаются с // . После этих двух символов может следовать любой текст, вся строка не будет анализироваться и исполняться. Комментарий может занимать всю строку. Если одной строки мало, то создаются несколько комментариев:
// For Winterfell! // For Lanisters!
Комментарий может находиться на строке после какого-нибудь кода:
console.log('I am the King'); // For Lannisters!
Многострочные комментарии начинаются с /* и заканчиваются */ .
/* The night is dark and full of terrors. */ console.log('I am the King');
Такие комментарии обычно используют для документирования кода, например, функций.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Как вывести hello world на javascript
Все всех курсах принято начинать знакомство с языком с написания простейшей программы «hello world!», которая позволяет вывести на странице текст «hello_world!». Ну что ж, сделаем это!
JavaScript — это такой же файлик, как .html или .css, только код пишется другой.
Для того, чтобы js заработал, необходимо:
- Создать файл с расширением .js
- Подключить файл к проекту
- Написать свой код и посмотреть как он работает
Первым пунктом создаем файл script.js, но для начала создадим в нашем проекте папку js, в которую и положим наш script.js
То есть структура получается следующая:
Далее нам нужно подключить этот скрипт к проекту. Скрипты подключаются так же, как и css, только тег другой.
Этот тег пишем либо в теге head, либо в самом конце странице перед закрывающим тегом
В итоге, ваш index.html должен выглядеть так:
Теперь, напишите в файле script.js вот такой простой код:
alert('Hello World!');
Не забывайте сохранить файл и можете сразу открыть ваш index.html любым браузером и если вы увидите следующее:
, то можете нажать «ОК» и порадоваться, что написали первый скрипт на JavaScript!
ПОЗДРАВЛЯЮ!
Но это не единственный способ, которым мы можем вывести в текст «Hello World!».
Мы можем вывести текст через консоль. В панели разработчика, с которой, я думаю, вы уже знакомы, есть раздел консоль:
Эта штука нужна для того, чтобы сюда выводить какую-то информацию. Ошибки, справки, уведомления, переменные, короче все, что угодно. И сейчас мы выведем сюда наш текст.
Для этого, напишите следующий код:
console.log('Hello World!');
При этом, alert() можно удалить.
Если вы все сделали правильно, то после обновления страницы, текст, который вы напишите в скобочках, вы увидите в консоли:
И если у вас получилось, то второе поздравления от меня за сегодня!
И на последок, выведем текст прямо на страницу.
Попробуйте написать следующий код:
document.write('Hello World!');
И вот что мы увидим:
Только что, мы обратились в нашему документу и написали в нем «Hello World!». Очень просто.
Получается, что сейчас мы воздействовали на нашу страницу и изменили ее структуру с помощью js. Как-то так)
В этом уроке мы немного поигрались с js, теперь давайте изучать основы программирования и начнем мы с переменных.
Hello World
Раньше для создания digital стартапа была нужна команда из:
- iOS разработчика ,
- Android разработчика ,
- Backend разработчика ,
- Разработчика для web’a
и - Teamlead’а , который везде по-верхам и в чем-то одном на отлично — это человек!!
Сегодня благодаря JavaScript, можно заменить разработчиков одним JavaScript разработчиком используя стек технологий который мы преподаем в нашей школе.
JavaScript — это язык программирования, который даёт возможность реализовывать сложное поведение на веб-страницах и не только. На JavaScript можно писать сайты , сервера, мобильные и десктоп приложения, а также приложения для дополненной и виртуальной реальности.
JavaScript — первый из самых популярных языков программирования среди европейских разработчиков. Такие данные получили авторы исследования из компании O’Reilly в результате опроса свыше 1300 программистов из 27 стран.
Видео
Синтаксис
JavaScript, подобно множеству прочих языков программирования, обладает строгим синтаксисом . Синтаксис — это раздел грамматики, изучающий предложения и способы сочетания слов внутри предложения. Компьютеры ️ не столь сообразительны, как люди : они не в состоянии «просто понять» , что вы имели в виду. Машина сможет понять вас только в том случае, если вы будете общаться с ней строго в тех формах выражения, которые она от вас ожидает. Эта ожидаемая форма выражения и называется синтаксисом .
Рабочее окружение
1️⃣ Во-первых, вам понадобится стационарный компьютер ️ или ноутбук.
2️⃣ Во-вторых, на компьютере ️ должна быть установлена операционная система: Windows MacOS или Linux.
3️⃣ В-третьих, на компьютере ️ должен быть установлен браузер, в наших уроках мы будем использовать Google Chrome, но можно использовать и другие. Chrome, кто не в курсе это браузер, то есть программа для просмотра веб-страниц.
Если у вас всё же не установлен Google Chrome, то можете скачать его здесь или при помощи любого другого браузера (Firefox, Safari, Edge или Internet Explorer), просто вбив в поисковой строке «скачать Chrome» и следуя дальнейшим инструкциям.
После скачивания и установки Google Chrome откройте его и в адресной строке введите :
about:blank
Нажмите ENTER. И браузер откроет новую пустую страницу.
Консоль браузера
Пришло время познакомиться с одним из основных инструментов разработчика — это консоль браузера.
В основном наш курс можно пройти прямо на нашем сайте, но иногда нам нужно будет использовать консоль браузера, поэтому мы сейчас с ней и познакомимся.
Открыть консоль
Раз вы теперь начинающий программист‐разработчик ️ , ею можете пользоваться и вы! Чтобы вызвать консоль, просто нажмите вместе клавиши CTRL, SHIFT (или же COMMAND и OPTION, если у вас Mac) и J .
После нажатия комбинации клавиш откроется новая строка меню, а в левом верхнем углу страницы вы увидите угловую скобку. Кстати, если переместить курсор к краю области, где он превратится в двойную стрелку, то, нажав и удерживая левую кнопку, можно растянуть ↔️ окно консоли. Обязательно сделайте это, чтобы у вас было больше места для введения кода.
Если же комбинация CTRL+SHIFT+J (или COMMAND+OPTION+J) по каким-то причинам не работает, вы можете войти в консоль, нажав на пустое место на странице правой кнопкой мыши , выбрать в контекстном меню пункт Inspect(Просмотреть код) и затем нажать Console в строке меню.
Первая программа Hello world
«Hello, world!» — (Привет мир!) программа, результатом работы которой является вывод на экран или иное устройство фразы «Hello, world!»
Обычно это первый пример программы в учебниках по программированию, и для многих студентов такая программа является первым опытом при изучении нового языка .
Теперь, когда перед вами открыто окно консоли и вы растянули его удобным образом, кликните мышкой справа от угловой скобки > .
В строке появится мигающий курсор, означающий, что можно начинать вводить текст . Сейчас вы наберёте свои первые строчки кода. Введите следующий текст (вместе с кавычками):
"Hello world!"
Нажмите ENTER. Консоль вернёт вам в следующей строке ваш текст : «Привет, Мир!» или «Hello world!» на английском. Через консоль браузера мы напрямую общаемся c JavaScript-движоком — это такая программа, или, другими словами, интерпретатор, выполняющий код, написанный на JavaScript.
Теперь вы можете гордиться тем, что собственноручно написали и выполнили первый код на языке JavaScript!
Далее нажмите клавишу UP_ARROW ⬆️ (стрелка вверх) и вы увидите свой текст «Привет, Мир!» или «Hello world!» на английском. Далее переместите курсор в начало строки и наберите вместо этого текста следующий:
var hello = 'Hello world!'
и нажмите ENTER. В консоли вы увидите ответ: undefined . Всё идёт по плану! Теперь наберите:
hello
и нажмите ENTER. Если вы всё сделали верно, то консоль вернёт в строке сообщение «Привет, Мир!». Здесь мы создали переменую и присвоили ей значение.
И конечно же это минимум того, что можно делать в консоле браузера. Дальше больше! Попробуем сложение: ➕
2 + 2 //Ответ консоли: 4
Сложение и вычитание: ➕ ➖
JavaScript Program To Print Hello World
A «Hello, World!» is a simple program that prints Hello, World! on the screen. Since it’s a very simple program, this program is often used to introduce a new programming language to beginners.
We will use these three ways to print ‘Hello, World!’ .
- console.log()
- alert()
- document.write()
1. Using console.log()
console.log() is used in debugging the code.
Source Code
// the hello world program console.log('Hello World');
Output
Here, the first line is a comment.
// the hello world program
The second line
console.log('Hello, World!');
prints the ‘Hello, World!’ string to the console.
2. Using alert()
The alert() method displays an alert box over the current window with the specified message.
Source Code
// the hello world program alert("Hello, World!");
3. Using document.write()
document.write() is used when you want to print the content to the HTML document.
Source Code
// the hello world program document.write('Hello, World!');