Имя: Пароль:
IT
Веб-мастеринг
Кто знает JavaScript, объясните нубу синтаксис?
, , ,
0 Брудвар
 
17.10.17
12:21
Решил выучить ЖаваСкрипт, дошел до стилей. Разбираю вот такой рабочий JavaScript пример в файле .js:

import styled from 'styled-components';

const Wrapper = styled.ul`
  position: absolute;
  width: 465px;
  margin: 0;
`;

Объясните, что это за синтаксис, когда после styled.ul стоят ковычки `` с текстом внутри. Это вызов функции? Тогда почему нет скобок: ()? Если это не функция, тогда что? Как жаваскрипт это обрабатывает?
1 kiruha
 
17.10.17
12:30
там же описан стиль просто явным образом
2 FIXXXL
 
17.10.17
12:32
(1) типа [] в 1С? :)
3 Asmody
 
17.10.17
12:49
Это называется "Tagged Template". Если кратко, то это вызов функции, а то, что в обратных кавычках, будет преобразовано в массив параметров.

Вот из доки по библиотеке https://www.styled-components.com/docs/advanced#tagged-template-literals

А вот на русском https://github.com/FrontenderMagazine/es6-in-depth-template-strings/blob/master/rus.md (вторая половина статьи)
4 Asmody
 
17.10.17
12:50
Вот еще https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/templatestrings#Тегированныешаблонные_строки
5 Зуекщмшср
 
17.10.17
12:54
Я JavaScript не знаю, но посмотрел на этот кусок, и он меня уже бесить начал. Как на нем люди пишут?
P.S. Изучай чистый Java, получишь больше удовольствия.
6 Razzle Kay
 
17.10.17
13:02
В смысле чистый джава? джаваскрипт это джава с дополнениями ? рили ?
7 Nolan
 
17.10.17
13:09
(0) по каким материалам учишь?
8 Лефмихалыч
 
17.10.17
13:16
(6) это два разных, не связанных, языка
9 Брудвар
 
17.10.17
13:40
(7) сначала почитал все что на learn.javascript.ru, потом просто разные рабочие проекты скачиваю с гитхаба и разбираюсь как работают.
10 Брудвар
 
17.10.17
13:41
(3) Спасибо, отлично помог!
11 Брудвар
 
17.10.17
13:45
(5) Абсолютно согласен. Бесит когда в нормальный язык вставляют всякий вырвиглаз синтаксис и непонятные слова типа margin: 0;, правда?

Не могли просто функцию со скобками написать, что ли.
12 Брудвар
 
17.10.17
13:46
(6) Они очень похожи, на базе одного и того же языка, просто развиваются в разных направлениях, и у каждого свои дополнения.
13 Asmody
 
17.10.17
19:17
(12) Они абсолютно не похожи. Начать, хотя бы, с того, что java –  объектно-ориентированный язык со строгой типизацией. А js - язык динамический и функциональный. ООП в нем весьма специфический.
И то, что js содержит в названии "java", скорее, историческое недоразумение.
Общего в них только "си-шный" синтаксис.
14 Брудвар
 
17.10.17
20:55
(13) Они похожи между собой гораздо больше чем каждый похож на С
То что они чем-то отличаются, это и так понятно.
15 Горностаев
 
17.10.17
21:00
(0)это стили CSS
16 Горностаев
 
17.10.17
21:01
Есть такие таблицы стилей. Для элементов html Страницы. они характеризуются свойствами такими, как цвет, размер, положение и т.п.   И вот у тебя они просто перечислены.
17 Брудвар
 
17.10.17
21:05
(15) position: absolute - это чтоли тоже стиль? Я думал ЖаваСкрипт такой специальный.
18 Горностаев
 
17.10.17
21:08
(17)ну жава скрипт же использует и html и css когда ему это нужно.

position - это такое ствойство. Оно бывает абсолютное, фиксированное, относительное.  то есть допустим есть прямоугольник. и нужно разместить в нем квадрат. то можно указать ему разные виды положений.  К примеру внутри относительно квадрата.  можно сделать чтобы он был фиксированным и не смотря на вложенность в квадрат всегда имел конкретные координаты относительно окна и т.п.

position absolut имеет координате относительно родительского элемента если у того задано свойство relative

ну там свои ньюансы.
19 Горностаев
 
17.10.17
21:11
(17)можно задавать чтобы на фигуру влияли расположения других фигур. а можно сделать чтобы не влияли. вот твой ник написан в блоке слева. под твоим ником указана дата и время. если сдвинуть твой ник, то и дата время сдвинется.

А можно сделать чтобы они не зависиле друг от друга. ну короче просто это способ расположения. И в зависимости от вида способа расположения добавляются еще другие свойства.
tob, bottom, left, rigth  margin, padding
20 Брудвар
 
17.10.17
21:14
(19) О, спасибо! Объяснил даже больше чем я планировал узнать за сегодняшний день! Сразу видно, профессионал, не то что некоторые, только нафлудили в теме.
21 Горностаев
 
17.10.17
21:15
кстати styled.ul  - ну это список.
вот там просто задали его положение и ширину.  видимо визуальная компонента какая-нибудь.
22 Горностаев
 
17.10.17
21:15
(20)незачто.
23 Брудвар
 
17.10.17
21:17
(21) Это я сам уже понял что там просто UL список в котором еще LI будут.
24 Asmody
 
17.10.17
21:25
(15) Ты не въехал. Это не просто css. Это ES6, оформленный "под css". styled.ui – это функция, которая возвращает стилизованный компонент react.
25 trdm
 
17.10.17
23:11
(3) спасибо.
26 trdm
 
17.10.17
23:14
(24) А из кода js можно узнать какой стандарт в данный момент реализован в браузере? Или надо смотреть агента?
27 Брудвар
 
18.10.17
00:36
(26) Лучше всего - проверяешь есть ли сомнительные функции, если они есть, то используешь их, если нет, то не используешь.
Агента смотреть - антипаттерн.
Какой реализован стандарт - тоже не очень хорошо проверять, т.к. он может быть реализован не полностью.
Только не знаю зачем тебе это надо. Есть же готовые библиотеки которые все делают за тебя. Ты свою хочешь написать?
28 Razzle Kay
 
18.10.17
05:59
(8) да я то знаю, просто звучало как "Не бери Оперь Астра, бери Астра GTC"
29 Брудвар
 
18.10.17
09:09
(28) Что за Астра GTC? Это не опель?