Уроки JavaScript для начинающих / #3 - Вывод информации. Работа с консолью

Вывод информации - важная часть в любом языке программирования. Мы научимся выводить информацию в консоль, а также прямиком на страницу веб сайта. Дополнительно за урок мы познакомимся с консолью разработчика.
✅ Полезные ссылки:
Урок на сайте itProger: itproger.com/course/javascript/3
⏰ Тайм коды:
00:00 - Начало
00:18 - Где писать код?
01:45 - Вывод информации через «document.write»
06:08 - Вывод в консоль через «console.log»
09:30 - Дополнительные методы вывода
12:28 - Создание ДжаваСкрипт файла
14:57 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@kimmallu9895]

Спасибо тебе большое :P

[@dum-dum54]

p{ fontsize:100px; fontweight: bold; }

[@gylnyrtologonova6813]

😂

[@hack-club6514]

p { color:white; background:red; height:100px; weight:120px; border:2px solid black; border radius:0 20px; text-align:center; padding-top:8px; font-weight:bold; } (Должна получится табличка в стиле спасибо тебе большое)

[@aslanchik7306]

p:hover} background-color: green; }

[@yaroslavgo2980]

p{ color:blue; text-shadow:1px 1px lightblue; border: 2px solid green; } p:hover{ color:green; border-color: blue; font-weight: 700; }

[@dmitry_beresten]

Щиро дякую за цікавий урок! Вивчаю веб-розробку.

[@ReZoX_]

Большое спасибо за ваши уроки! Вы объясняете очень хорошо и понятно

[@textpistels]

Спасибо большое! Очень интересно слушать

[@Natalia-2707]

Какое чудо, что я Вас нашла!!!! Уроки раскрывают все мои вопросы, с которыми я тыркалась и искала , все подробно, прямо для чайников 😁. Спасибо огромное за Ваш труд. Супер👍

[@kok4529]

привет, есть какие продвижения в web спустя год?

[@danilbadretdinov2787]

Спасибо за твой труд!

[@aisultanaidynbai7944]

Привет! Смотрю все сборники (для веб) очень круто делаете.

[@dowletdurdymyradow4374]

Просто спасибо.

[@olehpastovenskyi6441]

Спасибо, дружище!

[@alexbelltop]

Ты крут! Лайк!

[@poly_golf]

Огромное спасибо.

[@darksnaper]

Никогда не думал, что ты так хорошо будешь объяснять

[@Fjgfuhc]

Блин, чувак спасибо тебе огромное, обожаю тебя❤

[@user-jk2jv8hn4i]

Пасиба, ты единственный кто сказал зачем нужна консоль

[@Kristina-zn3co]

Спасибо. Лайк👍

[@user-bp3mr5ox3w]

Спасибо!

[@user-mv4xj3je3r]

Благодарю!🎀

[@user-zi7gw8sx8d]

Хорошо рассказываешь.

[@Burovasofia]

спасибо за урок

[@user-zq7vl9tu4h]

Супер очень благодарен

[@user-xw8qg3iy5h]

Спасибо огромное за ваши уроки!! Так круто, что все очень подробно объясняете. Рада, что нашла вас😊 уже прошла курс по html и css ✌️

[@akigazzz]

привет есть ли какие-то успехи год спустя?

[@voicegraffiti4849]

Ставлю лукас!

[@Daniel-bm5jw]

Спасибо

[@bohdanhorbyk5106]

Красавчик, спасибо тебе за знания. Подача топчик.

[@MrLastTouch]

Очень крутые уроки, начинал смотреть еще с HTML и очень сильно продвинулся благодаря урокам. Хотелось бы еще увидеть новые уроки по VueJS, React & Angular. Благодарю

[@itproger]

Спасибо, приятно слышать :)

[@spongebob1369]

@@itproger здравствуйте, очень хороший курс но у меня есть пара вопросов. Что эти команды head, body и тд означают?

[@spongebob1369]

@@itproger и ещё : зачем нужно закоментировать определённую строчку как вы например сделали это с document write. Для чего это нужно и что это вообще делает?

[@sleepingowl3772]

@@spongebob1369 Привет, смотри, что бы понять что делают эти теги, тебе надо посмотреть курс по html тогда станет понятнее

[@sleepingowl3772]

@@spongebob1369 если ты что-то закоментировал, это означает что эта строчка кода не будет читаться браузером, обычно так делают что бы оставлять пометки для себя, или для людей которые будут читать твой код.

[@Z1k014]

Круто

[@user-my5bl2uk2w]

Большое спасибо за ваши уроки! Вы объясняете очень хорошо и понятно !!!!

[@itschool290]

зачем блогиатить

[@dmitriystr]

Спасибо за новое видео , жду урок как с помощью js на сайте отображать видео лежащее в папке в сайте!😀

[@itproger]

Здесь JS не нужен, ведь за это отвечает обычный тег video :)

[@dmitriystr]

@@itproger а тогда как разные виды плеера делать ? ( ͡° ͜ʖ ͡°) ¯\_(ツ)_/¯

[@ersultanpolyxman]

Топ контент

[@Virusnik]

Твой комментарий первый

[@FedorDmitriew]

Спс

[@Dmitry09948]

Здравствуйте, пишет что не разрешено загружать локальный ресурс.Подскажите пожалуйста как можно это исправить?

[@user-kx4ho1bu5l]

Списибо большое😊

[@Matteo_Zaya]

Окей

[@serzzres]

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

[@m1akarov442]

интересно

[@user-cl2yn2qx4g]

Подскажите .В редакторе VCcode набрал задачу с выводом в консоль.В Хроме задача видна а в консоле нет .В чем проблема?

[@armenmarkaryan3180]

Привет, я новичок в этой сфере, только учусь этому всему, хочу стать тестировщиком, и нашёл твои полезные видео) спасибо тебе большое за столь познавательные видео, скинь пожалуйста ссылку на программу( Атом) я искал его мне не выдаёт. Буду очень признателен тебе)))

[@sliksvaiper5700]

Какую лучше использовать программу для программирования ?

[@tixonochek]

3 Урок и мы не начали изучать переменные? Не обычный курс, но крутой!

[@itproger]

Спешить не стоит, в следующем уроке они уже будут)

[@tixonochek]

​@@itproger Никогда не видел чтобы какой то ютубер мне так быстро отвечал.. И да, я уже дошел до 10 части, понял уже. Правда я тут кое что не пойму, может быть подскажете? 1 Вопрос: Я перечитал инфу на миллионе сайтов, но нигде так и не сказали как мне в функции обьявить глобальную переменную. Везде говорят разное, и оно всегда не работает. Мне нужно чтобы была функция которая создает переменную, глобальную, чтобы другая функция могла взаимодействовать с этой "чужой" переменной из другой функции. Поможете? 2 Вопрос: Как мне сделать счетчик "переменной" на сайте? Читал про всякие innerHtml но ничего не понял. а document.write постоянно создает новый текст, а мне изменять старый надо. IDLE-Текстовую игру то хочется

[@quadroninja2708]

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

[@user-ms8wz6bc5e]

Atom начал подтормаживать при написании внутри scrypt. Это нормально?

[@user-ej7oo5xd3p]

👍

[@uniRed6]

Page layout may be unexpected due to Quirks Mode Такая проблема в коде страницы Пишет ещё, что этот файл не HTML

[@user-wl9fm9br7s]

а можно ли подключать файл JS через ?

[@kirillplay__4112]

Да, подключается точно так же, как и css-файлы

[@user-xb7uo2xk4n]

Нужен хелп, я использую Visual Studio Code и там когда я пишу код, то страница не обновляется, приходится полностью заново открывать код или же "start debugging" с проги. Помогите, в чем проблема?

[@den4ik-1995]

Like! 31.08.22

[@uniRed6]

Я включила JS в Хроме, но на станицу "index.html" ничего не выводится

[@epic9333]

у меня тоже самое

[@sellr23]

как ты изменил вид консоли в браузере?

[@akigazzz]

люди расскажите у кого какие успехи в сфере веб кодирования, я сейчас отучил html & css и начинаю учить js, мне интересно у кого как все шло или идет, достиг ли кто-то к чему-то и у кого что идет не так

[@user-qf8gp1qq2i]

Я пока только начал,у меня всё получаеться и постепенно набирается опыт

[@sophiemilash1968]

Какие темы в Atom Вы используете? Просто настолько приятные цветовые сочетания.

[@BohdanUA]

У меня такой же атом, стандартная тема

[@BastetRa]

а у меня почему то выдаёт net::ERR_FILE_NOT_FOUND. что делать?

[@user-ls7dp6qg6h]

Лучший

[@user-jh7xp9xy8m]

как также настроить консоль в хроме просто удобнее работать в такой как у вас

[@snappi3158]

Почему когда прописываю после строчки // console.info("..."); console.log() "log" становится синим, а "console", красным, а не оранжевым, что делать

[@itproger]

Ахах, вот это проблема) поменяй цветовую тему в редакторе

[@dmitriyn164]

как называется расширение что бы в браузере сразу видеть результат изменений в коде?

[@FLASH.]

live server )

[@theforestel7720]

console.log("Я говорю тебе привет"); я пишу в скрипте и не пропадает текст а на видео пропадает

[@darksnaper]

Перед текстом поставь //

[@d4n1sff21]

не задумывайтесь мы вам всё обьясним не волнуйся обьясним на след уроке дааа

[@user-jc7qx4hr9y]

я через visual studio как мне скопировать ссылку на мой сайт

[@watchtvshow2552]

Блин в пайчарм работаю, сделал все как на видео в браузере открываю консоль он мне пишет что не удалось загрузить файл,

[@user-vu7cv4rj2j]

Для тех у кого в браузере не выводит файл main.js и показывает пустую строку в console. Посмотрите внимательно, у вас точно в main.js прописаны команды консоли?. Т.е. в index вы даёте ссылку на файл main, а в нём должны быть команды, только тогда браузер их увидит в console. Если файл main пустой, то и console чистая, пустая.

[@clacon1]

у меня в main.js все прописано но у меня там вылезает ошибка и console пустая

[@user-eu9tk9ku7e]

Page layot may be nexpected due to Quirks Mode. Файл не HTML. Что ето и как исправить?

[@tixonochek]

Почему то на этом моменте (document.write) у меня не работает. Я не говорю про то что оно не подсвечивается, на это пофиг, но и на странице ничего нету. Можете как то помочь? В том же атоме пишу. p.s. - Проблему понял - атом не сохраняет файл :((( Но не решил!

[@Usueuoeoqo]

Я тоже не втыкал почему, теперь просто после каждой строчки прожимаю Ctrl+S, перезагружаю "сайт" и все работает

[@romankozlov7322]

Скачай пак autosave и установи

[@user-hy1rn5ur2e]

@@Usueuoeoqo Спасибо

[@Butthurt71]

@@Usueuoeoqo друг, спасибо тебе большое😘

[@HA_CTPIME]

Спасибо за труд. Очень много лишнего текста, очень.

[@mewtwo8878]

что-то жесткая перезагрузка при зажатии клавиши мыши не выскакивает. браузер гугл хром

[@LimitlessLine]

Она работает только при нажатии кнопки "Просмотреть код".

[@warhouse634]

прикол в том, что нужно обязательно открыть окно разработчика F12.

[@user-zf8xr5do5m]

Как сделать чтбі на одном экране одновременно и был открыт файл html и окно браузера?

[@xeither289]

☦❤🙏❤🙏☦

[@get_better_today]

спасибо за ролик, а почему мы печатаем в scripts, а не в body? итак, итак информация выводится на страницу

[@soccer_great3012]

в боди не возможно писать JS только html

[@mariianeupokoeva]

Почему нельзя выводить консоль при помощи клавиши F12?

[@user-ey5wk4um6o]

почему ты написал documet можно же внутри боди напиать тоже самое

[@hyperion4366]

Такая проблема: document.write("Вывод информации"); ,у меня вместо "Вывод информации" отображается весь код

[@Framee110]

Думаю уже научился, но все же . информация

[@jahongirboboyev5482]

Привет у меня document.write остается белым что можно сделать? делал все так как написано

[@user-gl9it6vg4r]

сохрани файл в атоме(нажми на крестик у вкладки на верху и сохрани его) и перезапусти страницу, с таким же столкнулся.

[@urrchach]

​@@user-gl9it6vg4rа если не в атоме работаешь?

[@amorty7037]

А что если у меня попросту не открывает сайт? Мне нужно порт открывать?

[@xeither289]

☦❤☦🙏❤

[@dabik-io1dw]

что делать текст не выводится? сделал document.write вроде правильно скрипты поставил, а текста нет, что не так?

[@user-qf8gp1qq2i]

Тебе надо зайти на file потом находи auto save и выведиться

[@user-jc7qx4hr9y]

у меня проблема я сижу через visual studio и я делаю в точь в точь как ты,но проблема на сайте у меня ничего не отображается и не пишется даже при просмотре кода помогите плз

[@user-mir615]

такая же ситуация

[@trainPTT]

Может у вас блокировка CORS?

[@saiatokka7810]

у меня выводится ошибка и в коде страницы пишут, что такой функции как документ.write не существует;)

[@Vlad-sw4zd]

13:35 только это не полный путь,а относительный

[@Vasya_Grim4ik]

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

[@benzema2678]

Такая проблема: не читает внешний скрипт. Что делать??? Все перепробовал

[@itproger]

возможно ссылка битая на внешний источник

[@MsElmariaci]

Народ, Atom не работает. Я делал в VS там есть проблема с кириллицей. Бился долго, в итоге нужно сделать следующее. Зайти в меню "Файл" "Сохранить (название нашего файла) как..." и нажать не на саму кнопку "Сохранить" а на стрелочку справа от неё. Нужно выбрать "Кириллица (Windows) - кодовая страница 1251"

[@user-gl9it6vg4r]

сохрани файл в атоме(нажми на крестик у вкладки на верху и сохрани его) и перезапусти страницу, с таким же столкнулся.

[@MsElmariaci]

@@user-gl9it6vg4r атом закрыли, его уже по официальной ссылке не скачаешь. Я это имел ввиду под нее работает.

[@royal_aver4403]

В консоль ничего не выводится, в чем может быть проблема, может какую-то настройку нужно включить?

[@itproger]

Стоит проверить код и включен ли JS в браузере

[@royal_aver4403]

@@itproger Спасибо за ответ! Проблема была не очевидная, а именно в инспекторе есть Filter и там у меня было введено какое-то слово (оно наверно по умолчанию там стояло, кажется это было слово Frame), вот оно и не позволяло выводить информацию на экран :)

[@quadro_balashov]

У меня почему то не работает делаю так же

[@user-gc9ly7ms5b]

как связать атом и браузер чтобы все в нем отображалось?

[@dpmusic0]

Хороший вопрос нашол ответ

[@dimkaProklytie]

Почему когда я вставляю тег script он у меня не работает, не подсвечивается красным, все остальные работают

[@user-pj4fb9zd9v]

Куда вставляешь вопрос нормально задай?обычно в конце скрипты делают ,сделаешь вначале может не прочитать

[@user-pj4fb9zd9v]

В конце тега боди

[@TheTrans773]

Есть раздница для программи в Document и document, у меня с большой буквьі тоже не работало изменил на маленькую и все заработало

[@user-pj4fb9zd9v]

@hmslf у тебя сам Ява скрипт в той же папке что и хтмл ?занеси в одну папку ,и пропиши все заработает

[@user-pj4fb9zd9v]

@hmslf ты явно ошибку где то делаешь я посмотрю как я прописал

[@sf_player]

Что делать, если ничего не отображается после ввода document.write?

[@LevsyYt-consols_inks]

Скорее всего document.write больше не работает,попробуй поискать алтернативы,чел такая же проблема (

[@thedarknessmaks3365]

А тем кому лень нажимать на мышку чтобы посмотреть консоль могут просто нажать f12

[@xeither289]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ

[@TecMD]

нету

[@Aaaa-jn4bm]

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

[@itproger]

не зря эту функцию изобрели

[@brp2430]

А вы почистили свой "Cache"?

[@VictorLite]

Я десятый

[@alexeyyunker879]

Document Не выводит в консоль,даже после чистки кэша(

[@noromkrtchyan6852]

Думай scr

[@user-ql2is7qu3p]

То странное чувство когда купил курс на скилбоксе ничего не понял и смотрю в ютубе более качественные видео ....

[@nazar-tv-real-life-hacker-file]

У меня не работает javascript

[@hollyleaf_21mkm]

А как мы можем "планировать" ошибку? Пока что этот момент не совсем понятен.

[@xeither289]

ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС

[@vagabunt9060]

много воды

[@meguri1591]

А кокой смысл в консоли? Типо оно выводит ошибки, А зачем так много к ниму внимания?

[@itproger]

Он выводит все сообщения и ошибки. Без этого вы в будущем не сможете разбираться в чем и где у вас ошибка

[@Denis_SLDE]

у меня ничего не получается из того что вы делаете.... и снова программирование До свидание....

[@dimaandreev8925]

Плохо, всё сделал правильно. JavaScript работает везде. Не выводит

[@user-pj5eb2fe5k]

спасибо что ничего не обьясняеш и е разборчиво говориш

[@jake7388]

у Гоши Дударя лучше!

[@itproger]

И вот не знаю - сказать спасибо или же нет 😂 Просто автор этого урока это и есть Гоша Дударь 😅

[@marchenkosergey78]

Вместо уроков какая - то херня на сайте

[@SP_StudioGAMES]

если хочешь чтобы на 1 уроке росказывали уже как делать красивые и функциональные сайты то тогда не иди в АЙТИ ведь за 17 минут ничему особо не научишся