Что можно сделать на одностраничниках с помощью JavaScript?

Question

[Eli_sh]

Только изучаю веб-разработку. Могу смело сверстать адаптивный одностраничник. Но что дела с JS , он везде требуется, но я никак не могу понять в каких местах его нужно применять. Карусель можно сделать и на CSS. Неужели только для всплывающих окон?

Что нужно и можно сделать в LP с помощью JavaScript?

Answer 1

[Dark Hole]

Реально глупый вопрос.
Для взаимодействия с пользователем, сервером и DOM.
Например, средствами CSS и HTML никак не отреагируешь на нажатие на кнопку, не отправишь запрос на сервер и не добавишь после загрузки страницы новые стили.
Короче, что для чего нужно:
HTML - для основы.
CSS - для стилизации.
JS - для всего остального

Comments

[Zektor Vektor]

"не отправишь запрос на сервер", ну это технологии Ajax + PHP.

[Varb]

Zektor Vektor: а как ты задействуешь xhr (ajax) без js?

[Dark Hole]

Zektor Vektor: ну технология то использует JS для отправки ;)

[dimitrion]

Запрос на сервер можно отправить на чистом html

[Павел Малышев]

dimitrion: Да, но только синхронный запрос с перезагрузкой страницы. Зачем вам это в 21 веке? К тому же для односираничного сайта.

[Павел Новиков]

dimitrion: а зачем?

[dimitrion]

PaulMaly: Павел Новиков: понятия не имею, зачем. Я отвечал на реплику мистера Dark Hole: "Например, средствами CSS и HTML никак не отреагируешь на нажатие на кнопку, не отправишь запрос на сервер"

[Dark Hole]

dimitrion: это будет ЗАПРОС СТРАНИЦЫ. И на кнопку, скажем, попапом, не ответишь.

[dimitrion]

Dark Hole: какой ещё страницы? html-форма отправляет данные на файл-обработчик/ресурс, расположенный на сервере, обычно методом POST. Прежде чем обвинять кого-то в глупости, неплохо бы самому для начала перестать их говорить

[Dark Hole]

dimitrion: в глупости я никого не обвинял. Это раз. Во-вторых, вы сами ооочень ошибетесь - по умолчанию get. А запрос страницы... не смешите. Вы хоть работали с формами? Браузер запрашивает страницу из параметра action передавая попутно данные.

[dimitrion]

Dark Hole:
>в глупости я никого не обвинял
Прочтите ваше первое сообщение, адресованное топикстартеру
>вы сами ооочень ошибетесь - по умолчанию get
Я ни слова не говорил про умолчания
Ваш тезис был: "средствами CSS и HTML ... не отправишь запрос на сервер "
Параметр action определяет файл-обработчик или ресурс-обработчик, располагающийся на сервере, куда передаются данные из формы. Потом он, например, может сохранить их в базу данных. Это, само собой, происходит на сервере.
Может, вы наконец признаете, что запрос на сервер можно отправить средствами html и перестанете натягивать сову на глобус?

[Dark Hole]

dimitrion:
>Прочтите ваше первое сообщение, адресованное топикстартеру
"Ну реально глупый ВОПРОС" - да, я обвинял вопрос в глупости. Не хватайтесь за первый попавшийся аргумент.
>Может, вы наконец признаете, что запрос на сервер можно отправить средствами html и перестанете натягивать сову на глобус?
А мне нужно признать, что переход по гиперссылке - запрос средствами HTML?

[dimitrion]

Dark Hole:
>да, я обвинял вопрос в глупости. Не хватайтесь за первый попавшийся аргумент
Это не аргумент, это указание на некорректность вашего поведения. К дискуссии о передаче информации на сервер средствами html он не имеет отношения
>А мне нужно признать, что переход по гиперссылке - запрос средствами HTML?
Нет, вам нужно признать, что информацию на сервер можно передать средствами html.
Но можете и не признавать, если это каким-либо образом задевает ваше ЧСВ. Лишь бы вы сами это понимали

[Dark Hole]

dimitrion:
>передать средствами HTML
Что вы подразумеваете под передачей? Я - полностью контролируемый запрос с заранее неизвестными параметрами. В HTML этого нет. HTML, образно говоря, говорит браузеру, что делать и как визуализировать главный контент. JS же работает через браузер. HTML не может отменить действие. Почему? Потому, что запрос делает браузер. JS может отменить действие. Почему? Он, через API браузера, делает запрос.
Коротко - HTML не делает запрос, ИМХО. Запрос делает браузер, руководствуя HTML.

[dimitrion]

Dark Hole:
>Коротко - HTML не делает запрос, ИМХО. Запрос делает браузер, руководствуя HTML
Коротко - JS не делает запрос. Запрос делает браузер, руководствуясь JS
Если чуть подлиннее, то HTTP-запрос инициируется клиентом, в данном случае браузером. Что инициирует запрос (html или js) браузеру без разницы.
Вы все-таки пытаетесь натянуть сову на глобус вместо того, чтобы научиться чему-то новому. Это печально.

[dimitrion]

Dark Hole:
>Что вы подразумеваете под передачей? Я - полностью контролируемый запрос с заранее неизвестными параметрами. В HTML этого нет

Это называется HTTP-запросами, погуглите. Html-форма их умеет выполнять

[Dark Hole]

dimitrion: HTML не инициирует запрос. Инициирует DOM-событие, которое по сути обрабатывается браузером.
Меня огорчает, что вы придираетесь к миллиметрам, которые я понимаю, а меня понимать не хотите. Может перенесем этот холивар в ВК?

[dimitrion]

Dark Hole:
>Меня огорчает, что вы придираетесь к миллиметрам
Я пытаюсь(пока безрезультатно) объяснить тот факт, что с помощью html можно отправить запрос на сервер. Уже было упомянуто, что конечной точкой отправки http-запроса является браузер (это в контексте нашего разговора, так-то можно и telnet'ом, и curl'ом отправить), так что, чем бы вы ни пользовались, отправлять запрос будет все равно браузер. А вот, что будет начальной точкой - тут возможны варианты. Если вы говорите о DOM-событиях - хорошо. JS также обрабатывает DOM-события, а потом "дает команду браузеру" отправить запрос на сервер. Но вместо JS может быть и html. На самом деле, конечно, вы это прекрасно понимаете, но разводите холивар ради холивара, понимая, что в своем первом посте сделали некорректное высказывание.
>Может перенесем этот холивар в ВК?
Вам не терпится наконец-то уже перейти на личности?

[Dark Hole]

dimitrion: ну JS как бы компилируется в машинный код. А HTML - нет. Но... спор не об этом. Поэтому объясню - я не считаю корневой запрос(с которого начинается загрузка странницы) достоянием HTML. А так же не считаю прочие теги HTML истинными HTTP запросами. Иначе получается довольно комично - script, link, img, a и прочея, прочея, прочея создают HTTP запросы посредством HTML. (Первое, кстати, используется для JSONP так, что вы не столь уж неправы).
Понятно?

[dimitrion]

Dark Hole:
>я не считаю корневой запрос(с которого начинается загрузка странницы) достоянием >HTML. А так же не считаю прочие теги HTML истинными HTTP запросами
Помилуй Б-г, как могут теги(код JS) быть http-запросами? Http-запрос - это сообщение, посылаемое клиентом (браузером в нашем случае) серверу. Вы в своем первоначальном сообщении утверждали, что это невозможно сделать без JS. Я вам показал обратное: простейшая html-форма делает это абсолютно без участия JS.

[Dark Hole]

dimitrion: опять придираетесь. Ну, я неправильно написал. Но понятно, о чем я.
Я еще раз поясню: даже простая гиперссылка или ссылка на внешний скрипт/стиль создает HTTP запрос "средствами HTML". Т.е. я вас прекрасно понимаю. Но вы никак не можете понять, что я такие запросы не считаю в данной ситуации. А вы продолжаете твердить: HTML может отправлять запросы, HTML может отправлять запросы, HTML может отправлять запросы.

[dimitrion]

Dark Hole:
>Но вы никак не можете понять, что я такие запросы не считаю
Какая разница, что вы считаете, а что нет? Это не имеет никакого отношения к объективной реальности.
>даже простая гиперссылка или ссылка на внешний скрипт/стиль создает HTTP запрос >"средствами HTML"
Абсолютно верно. И JS здесь также ни при чем. Если вам угодно, то можете считать, что запрос создается "средствами браузера". Но JS тут все равно ни при чем.

[Dark Hole]

dimitrion: вот вы пришли к логическому согласию и, наконец то, поняли меня.

[dimitrion]

Dark Hole: я понял, что вы лажанулись, но никак не хотите это признать. В принципе, это не имеет значения. Html-форма как отправляла http-запросы, так и будет отправлять. С вашим признанием или без оного.

[Dark Hole]

dimitrion: форма не будет отправлять запросы - с чего бы ей? Тут просто для нее реализована логика на уровне браузера и все

[dimitrion]

Dark Hole:
>форма не будет отправлять запросы - с чего бы ей? Тут просто для нее реализована логика на уровне браузера и все
Javascript не отправляет запросы - с чего бы ему? Просто для него реализована логика на уровне браузера и все.
Говорить, что форма не отправляет запросы, но говорить, что это делает javascript -- либо весьма смутно понимать, о чем идет речь в разговоре, либо банальное нежелание признавать себя неправым.

[Dark Hole]

dimitrion:
>либо весьма смутно понимать, о чем идет речь в разговоре, либо банальное нежелание признавать себя неправым.
Похоже, вы себя описываете. Если вы не знаете, чем API отличается от HTML'шной логики - то о чем спор то? Это все равно, что считать вызов функции тем же HTML.
У меня есть и другой агргумент: JS - это Тьюринг-полный язык, а HTML, несмотря на его расшифровку, это формат данных. Т.е. логику отправки формы можно на JS с API браузера. А на HTML - нет.

[dimitrion]

Dark Hole:
>то о чем спор то?
Примерно об этом:
>Например, средствами CSS и HTML никак не отреагируешь на нажатие на кнопку, не отправишь запрос на сервер
Ещё раз: средствами html можно и отреагировать на нажатие на кнопку, и отправить запрос на сервер. Без JS.
>Т.е. логику отправки формы можно на JS с API браузера. А на HTML - нет.
На html -- нет. На html + API браузера -- да.
Ещё раз: JS не отправляет http-запросы.

[Dark Hole]

dimitrion:
>На html -- нет. На html + API браузера -- да.
Можно мне еще C# на JSON с API?
>средствами html можно и отреагировать на нажатие на кнопку, и отправить запрос на сервер.
Отнюдь. В ограниченом количестве и разница огромная. Как вы выражаетесь, еще раз: HTML лишь указывает правила. JS - компилиться в исполняемый код, неотличимы от кода браузера.

[kn1ght_t]

Dark Hole: прекратите, пожалуйста =)

[Dark Hole]

kn1ght_t:

написано 04 окт. 2016

[kn1ght_t]

I was drunk :)

Answer 2

[Сергей Протько]

Попробуйте реализовать тостер без бэкэнда (например на firebase) как одностроничное приложение. Или любое другое web-приложение. И прикинте что там будет на JS (по сути все).

Comments

[dhat]

А что для Firebase не нужен бэкэнд? Это как?

[Anton Filippov]

dhat: Firebase как бы _имитирует_ бэкенд

[Сергей Протько]

dhat: firebase это и есть готовый бэкэнд. Для простеньких приложенек более чем норм. Для чего-то посложнее (или того что фаербэйз не умеет) возможно придется прикручивать свой бэкэнд на ноде (банально удобненько).

[dhat]

Сергей Протько: он годится только для приложений? Если интересуют сайты с контентом, статьями, то стоит ли обратить внимание?

[dhat]

Я просто думал Firebase это что-то типо облачного MongoDB.

[Сергей Протько]

dhat: ну оно похоже на mongodb но очень много специфичных вещей которые заставляют чуть по другому моделировать данные. Да и чуть больше возможностей вроде регистрация через соц сети из коробки. На этом собственно строится распределение прав на доступ к записям.

Для сайтов... с firebase могут быть сложности в плане поиска, но если вы поиск имплементите не через свою базу данных а так же через сторонние сервисы - то как бы ок.

[Сергей Протько]

dhat: в целом сложные выборки из firebase это не очень просто, и тут надо хорошо продумывать как строятся агрегации.

[dhat]

Сергей Протько: спасибо, надо будет посмотреть что это такое.

Answer 3

[sim3x]

Таблица со значениями: сортировка по полям, реакция на клик по позиции с выводом доп информации

По таблице построить график

По клику сменить на график другого вида

Answer 4

[hoarywolf]

Во первых одностраничники это далеко не всегда LP.
Это может быть полноценный сайт, с прайсами, описаниями товаров и тд, где все грузиться будет ajax-ом.

Ну и попробуйте без JS сверстать LP типа такого gardenestudio.com.br/index.php

Comments

[Super Star]

Зачем такой геморрой?

Answer 5

[utyfua]

Везде интерактивность сайта приветствуется но желательно делать возможность работы и без js вовсе.
Реальный пример: есть сайт, больше 50% с телефонов(ну как минимум 25% вообще с кнопочных) и потерять их ради сугубой интерактивности - глупо
Факты(гугл аналитикс):

Comments

[Anton Filippov]

с чего вы взяли что js не работает на мобильных устройствах?

[utyfua]

Anton Filippov: купи сименс и попробуй хотя бы в интернет зайти.. Да, есть такая интересная картина. Ну да, я загнул но в основном все с оперы мини сидят а там про js вообще нужно забыть..

[utyfua]

Anton Filippov: по крайней мере это реальный проект, нацеленный на мобильную аудиторию.

[trushka]

utyfua, опера-мини прекрасно с js работает, только у себя на сервере.

[utyfua]

trushka: да да.. но как костыльно.. Я видел это...
Я не готов их потерять из-за того что опера выдает ошибку разбора если что-то пошло не так..
Это уже не говоря про белочку(UC Browser)...

[Dark Hole]

utyfua: ну вроде главу "Обработка ошибок" вы пропустили. А еще есть такая крутая штука, под названием "onerror". Да и вообще, часто для многих сайтов есть 2 версии - мобилька и десктопка.
Так, что ваши аргументы неактуальны.

[utyfua]

Dark Hole: если бы... Решать только тому кому это действительно нужно но лучше отлавливать оперу по условию if(window.opera) и никаких доп великов не строить..

[Кот Учёный]

Актуально не для всех сайтов. Например, если у Вас какой-нибудь гео-информационный сервис, то такая категория устройств просто не подходит для работы с ним.

[utyfua]

Кот Учёный: тут +/- ну а вдруг человек вообще без работы js зашел? панароя и тд(тор браузер для примера панарои, и старый ie как казнь js) то их тоже можно потерять... И еще есть слабые пк где каждый килобайт критичен.. Из личного опыта.. Вот такая у меня веселая аудитория но она существует...

[Dark Hole]

utyfua: "анализ браузеров - это плохо"

[utyfua]

Dark Hole: что за анализ?

[Dark Hole]

utyfua: ну если он зашел без JS - nonscript, как говориться, в помощь. Вообще, я не вижу собирать такую аудиторию - если нужные сайты просто перестанут работать, они откажутся от несовременных решений

[utyfua]

Dark Hole: вот как раз и существуют проекты которые всю вот эту аудиторию собирают..

[Dark Hole]

utyfua: но... зачем интересно? Что б потом пришли вам и сказали "Почему у вас нет мигающих блоков и выезжающих предложений?". И я посмотрю, как вы им объясните, что их браузер этого не поддерживает.

[Dark Hole]

utyfua: вот ваш код - это и есть пример такого анализа.

[utyfua]

Dark Hole: посетителям вообще подобное вообще не нужно.. факт в том что для пк и телефонов одноколоночная версия без всяких плюшек и ничего страшного..
Нынче эффектами не удивить..

[utyfua]

Dark Hole: анализ это от гугла моего проекта.. то есть это третее лицо которому бред несту неуместно..

[Dark Hole]

utyfua: я про window.opera

[Dark Hole]

utyfua: это сейчас не нужно. Это раз.
Во-вторых вы замедляете своим проектом отказ от старых браузеров. Ну и что? А вот что. Вы создаете проблему для тех, кто их не поддерживает и создаете(точнее оставляете) уязвимую прослойку в виде дырявых браузеров и неграмотных в вэбе людей.

[utyfua]

Dark Hole: кто писал что "сидите только со старых браузеров"? скажите что я еще замедляю из-за этого отказ от старых браузеров.. Вот нужно же было додуматься.. У меня интерактивность есть но в меру возможностей бразера - може значит вот так еще сделай а иначе просто отобрази без всякого.. Но не вариант заставлять их из-за отключенного js переходить куда-то в другой браузер..(ах да, я их заставить тоже не могу - куда они стандартный браузер засунут?)
Бред просто..
Пользователь сам выбирает с чего удобно ему лазить по сайту. Вот я так от вк даже отказывался и седел с оперы 11 но я не желал меняться. Но когда пришлось действительно перейти - когда я не мог зайти в ел кошельки.. это единственная причина че у меня сейчас опера на хромиуме..

[Кот Учёный]

utyfua: я ещё раз повторяю: есть приложения, которые невозможно реализовать на устаревшем или столь ограниченном стеке технологий. Есть устройства и браузеры, которые технически несовместимы с приложением. Я не зря привёл в пример гео-информационный сервис, т.к. такое приложение нуждается в мощном картографическом API для фронтенда. Чем я могу помочь человеку с отключенным JS? Рендерить всё на сервере, Но это слишком дорого, как в плане нагрузки, таки в плане трудозатрат. Пользователь, зашедший на сайт с кнопочной мобилы, не окупит эти затраты. Это оверхэд и вредно для развития web в целом. Вы мыслите так, как было принято думать в эпоху IE6. Может быть, она закончилась не так уж и давно... Но она закончилась.

[Anton Filippov]

не хочу вступать в срач, но utyfua похоже застрял в году так 2004-ом

[Dark Hole]

utyfua:
>скажите что я еще замедляю из-за этого отказ от старых браузеров
Да, именно это я и говорю.
>Но не вариант заставлять их из-за отключенного js переходить куда-то в другой браузер..(ах да, я их заставить тоже не могу - куда они стандартный браузер засунут?)
Ниже цитирую как вас заставили сайты перейти на новый браузер
> Вот я так от вк даже отказывался и седел с оперы 11 но я не желал меняться. Но когда пришлось действительно перейти - когда я не мог зайти в ел кошельки
>Бред просто

[Dark Hole]

Кот Учёный: да и как вы будете рендерить WebGL на сервере?)

[utyfua]

Anton Filippov: да да... но просто аудитория такова что у части невозможно его тупо сменить(даже физически)

[utyfua]

Dark Hole: все это зависит от аудитории и направленностей проекта.. у меня мобильные устройства(про андроид молчу). и хотите сказать что я должен заставить их сменить телефон из-за какого-то сайта?

[Dark Hole]

utyfua: смотря какие мобильники. Обычные - зачем?! На айфон-адрюши есть другие браузеры.

[utyfua]

Dark Hole: вот такая веселая аудитория..

[Dark Hole]

utyfua: и зачем вы ее поддерживаете?

[utyfua]

Dark Hole: факт в том что прибыльный...
Хоть иногда мороки выше крыш.

[Dark Hole]

utyfua: прибыльный? Не смешите! Если вы бы откинули эти 2% интернета, то вам бы прибыли не стало намного меньше

[utyfua]

Dark Hole: 2% но 25% посетителей.. Логика есть..

[Dark Hole]

utyfua: 25% - факт, взятый из головы

[utyfua]

Dark Hole: смешно.. Если бы видели что эти 25% не видят background то наверное я придумал.. Ведь опера мини это просто малыш...

[Кот Учёный]

Dark Hole: никак. Если Вы знаете, что это такое, Вам должно быть понятно, что есть вещи, не реализуемые на старых браузерах, и есть класс приложений, которые не подходят для выполнения на устаревших браузерах и устройствах.

[Кот Учёный]

utyfua: из-за какого-то сайта менять телефон действительно не стоит. Но иное веб-приложение может и вообще по смыслу не умещаться в концепцию "сайт".

[Кот Учёный]

utyfua: Это я к тому, что в таких случаях включенный JS и современный браузер — это уже технические требования. Согласитесь, выпускать в настоящее время игру для ПК с поддержкой Windows XP — это не совсем адекватное решение? Точно так же и с веб-апп. А сайту для поклонников старых кнопочных телефонов уж точно показан серверный рендеринг и реализация всей бизнес-логики на бэкенде.

Answer 6

[Павел Новиков]

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

Answer 7

[Cube]

Все что угодно, в прямом смысле. Если вы хотите что то сделать, но упираетесь в ограничения html5/css3, то это можно сделать с помощью js. Я так понимаю у вас стоит вопрос "что бы его сделать", а не "как это сделать".

Answer 8

[Артем]

Не знаю, как у вас, но когда у меня пришла пора использовать js, я как-то сразу это понял. Если вы можете обойтись без js, то замечательно. а js ради js, такое себе решение.

Comments

[dhat]

Да но ведь есть вещи которые лучше делать в JS, чем в CSS

[Артем]

Ну, я тот еще верстальщик, поэтому спорить не буду. Я просто изложил свое мнение.