split hello-world into 2 chapters
This commit is contained in:
Ilya Kantor
parent
99240a757a
commit
97daf5f54a
117 changed files with 177 additions and 177 deletions
13
1-js/2-first-steps/5-variables/1-hello-variables/solution.md
Normal file
13
1-js/2-first-steps/5-variables/1-hello-variables/solution.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
Каждая строчка решения соответствует одному шагу задачи:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var admin, name; // две переменных через запятую
|
||||
|
||||
name = "Василий";
|
||||
|
||||
admin = name;
|
||||
|
||||
alert(admin); // "Василий"
|
||||
```
|
||||
|
||||
10
1-js/2-first-steps/5-variables/1-hello-variables/task.md
Normal file
10
1-js/2-first-steps/5-variables/1-hello-variables/task.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# Работа с переменными
|
||||
|
||||
[importance 2]
|
||||
|
||||
<ol>
|
||||
<li>Объявите две переменные: `admin` и `name`. </li>
|
||||
<li>Запишите в `name` строку `"Василий"`. </li>
|
||||
<li>Скопируйте значение из `name` в `admin`.</li>
|
||||
<li>Выведите `admin` (должно вывести "Василий").</li>
|
||||
</ol>
|
||||
258
1-js/2-first-steps/5-variables/article.md
Normal file
258
1-js/2-first-steps/5-variables/article.md
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
# Переменные
|
||||
|
||||
В зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.
|
||||
|
||||
Если это электронный магазин -- то это товары, корзина. Если чат -- посетители, сообщения и так далее.
|
||||
|
||||
Чтобы хранить информацию, используются *переменные*.
|
||||
[cut]
|
||||
## Переменная
|
||||
|
||||
*Переменная* состоит из имени и выделенной области памяти, которая ему соответствует.
|
||||
|
||||
Для *объявления* или, другими словами, *создания переменной* используется ключевое слово `var`:
|
||||
|
||||
```js
|
||||
var message;
|
||||
```
|
||||
|
||||
После объявления, можно записать в переменную данные:
|
||||
|
||||
```js
|
||||
var message;
|
||||
message = 'Hello'; // сохраним в переменной строку
|
||||
```
|
||||
|
||||
Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var message;
|
||||
message = 'Hello!';
|
||||
|
||||
alert(message); // выведет содержимое переменной
|
||||
```
|
||||
|
||||
Для краткости можно совместить объявление переменной и запись данных:
|
||||
|
||||
```js
|
||||
var message = 'Hello!';
|
||||
```
|
||||
|
||||
Можно даже объявить несколько переменных сразу:
|
||||
|
||||
```js
|
||||
var user = 'John', age = 25, message = 'Hello';
|
||||
```
|
||||
|
||||
### Аналогия из жизни
|
||||
|
||||
Проще всего понять переменную, если представить ее как "коробку" для данных, с уникальным именем.
|
||||
|
||||
Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`:
|
||||
|
||||
<img src="variable.svg">
|
||||
|
||||
|
||||
В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var message;
|
||||
|
||||
message = 'Hello!';
|
||||
|
||||
message = 'World!'; // заменили значение
|
||||
|
||||
alert(message);
|
||||
```
|
||||
|
||||
При изменении значения старое содержимое переменной удаляется.
|
||||
|
||||
<img src="variable-change.svg">
|
||||
|
||||
Можно объявить две переменные и копировать данные из одной в другую:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var hello = 'Hello world!';
|
||||
|
||||
var message;
|
||||
|
||||
*!*
|
||||
// скопировали значение
|
||||
message = hello;
|
||||
*/!*
|
||||
|
||||
alert(hello); // Hello world!
|
||||
alert(message); // Hello world!
|
||||
```
|
||||
|
||||
[smart]
|
||||
Существуют [функциональные](http://ru.wikipedia.org/wiki/%D0%AF%D0%B7%D1%8B%D0%BA_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) языки программирования, в которых значение переменной менять нельзя. Например, [Scala](http://www.scala-lang.org/) или [Erlang](http://www.erlang.org/).
|
||||
|
||||
В таких языках положил один раз значение в коробку -- и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить -- изволь создать новую коробку (объявить новую переменную), повторное использование невозможно.
|
||||
|
||||
С виду -- не очень удобно, но, как ни странно, и на таких языках вполне можно успешно программировать. Более того, оказывается, что в ряде областей, например в распараллеливании вычислений, они имеют преимущества. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора.
|
||||
[/smart]
|
||||
|
||||
## Имена переменных [#variable-naming]
|
||||
|
||||
На имя переменной в JavaScript наложены всего два ограничения.
|
||||
<ol>
|
||||
<li>Имя может состоять из: букв, цифр, символов `$` и `_`</li>
|
||||
<li>Первый символ не должен быть цифрой.</li>
|
||||
</ol>
|
||||
|
||||
Например:
|
||||
|
||||
```js
|
||||
var myName;
|
||||
var test123;
|
||||
```
|
||||
|
||||
**Что особенно интересно -- доллар `'$'` и знак подчеркивания `'_'` являются такими же обычными символами, как буквы:**
|
||||
|
||||
```js
|
||||
//+ run untrusted
|
||||
var $ = 1; // объявили переменную с именем '$'
|
||||
var _ = 2; // переменная с именем '_'
|
||||
|
||||
alert($ + _); // 3
|
||||
```
|
||||
|
||||
А такие переменные были бы неправильными:
|
||||
|
||||
```js
|
||||
var 1a; // начало не может быть цифрой
|
||||
|
||||
var my-name; // дефис '-' не является разрешенным символом
|
||||
```
|
||||
|
||||
[smart header="Регистр букв имеет значение"]
|
||||
Переменные `apple` и `AppLE` - две разные переменные.
|
||||
[/smart]
|
||||
|
||||
[smart header="Русские буквы допустимы, но не рекомендуются"]
|
||||
|
||||
В названии переменных можно использовать и русские буквы, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var имя = "Вася";
|
||||
alert(имя); // "Вася"
|
||||
```
|
||||
|
||||
Технически, ошибки здесь нет, но на практике сложилась традиция использовать в именах только английские буквы.
|
||||
[/smart]
|
||||
|
||||
[warn header="Зарезервированные имена"]
|
||||
|
||||
Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: `var, class, return, export` и др.
|
||||
|
||||
Например, такой пример выдаст синтаксическую ошибку:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var return = 5; // ошибка
|
||||
alert(return);
|
||||
```
|
||||
|
||||
[/warn]
|
||||
|
||||
|
||||
## Важность директивы var
|
||||
|
||||
В старом стандарте JavaScript разрешалось создавать переменную и без `var`, просто присвоив ей значение:
|
||||
|
||||
```js
|
||||
num = 5; // переменная num будет создана, если ее не было
|
||||
```
|
||||
|
||||
В режиме `"use strict"` так делать уже нельзя.
|
||||
|
||||
Следующий код выдаст ошибку:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
"use strict";
|
||||
|
||||
*!*
|
||||
num = 5; // error: num is not defined
|
||||
*/!*
|
||||
```
|
||||
|
||||
Обратим внимание, директиву `use strict` нужно ставить до кода, иначе она не сработает:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var something;
|
||||
|
||||
"use strict"; // слишком поздно
|
||||
|
||||
*!*
|
||||
num = 5; // ошибки не будет, так как строгий режим не активирован
|
||||
*/!*
|
||||
```
|
||||
|
||||
[warn header="Ошибка в IE8- без `var`"]
|
||||
Если же вы собираетесь поддерживать IE8-, то у меня для вас ещё одна причина всегда использовать `var`.
|
||||
|
||||
Следущий документ в IE8- ничего не выведет, будет ошибка:
|
||||
|
||||
```html
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
*!*
|
||||
test = 5; // здесь будет ошибка!
|
||||
*/!*
|
||||
alert(test); // не сработает
|
||||
</script>
|
||||
```
|
||||
|
||||
Это потому, что переменная `test` не объявлена через `var` и совпадает с `id` элемента `<div>`. Даже не спрашивайте почему -- это ошибка в браузере IE до версии 9.
|
||||
|
||||
Самое "забавное" -- то, что такая ошибка присвоения значений будет только в IE8- и только если на странице присутствует элемент с совпадающим с именем `id`.
|
||||
|
||||
Такие ошибки особенно "весело" исправлять и отлаживать.
|
||||
|
||||
Вывод простой -- всегда объявляем переменные через `var`, и сюрпризов не будет. Даже в старых IE.
|
||||
[/warn]
|
||||
|
||||
## Константы
|
||||
|
||||
*Константа* -- это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var COLOR_RED = "#F00";
|
||||
var COLOR_GREEN = "#0F0";
|
||||
var COLOR_BLUE = "#00F";
|
||||
var COLOR_ORANGE = "#FF7F00";
|
||||
|
||||
var color = COLOR_ORANGE;
|
||||
alert(color); // #FF7F00
|
||||
```
|
||||
|
||||
Технически, константа является обычной переменной, то есть её *можно* изменить. Но мы *договариваемся* этого не делать.
|
||||
|
||||
Зачем нужны константы? Почему бы просто не писать `var color = "#FF7F00"`?
|
||||
|
||||
<ol>
|
||||
<li>Во-первых, константа `COLOR_ORANGE` -- это понятное имя. По присвоению `var color="#FF7F00"` непонятно, что цвет -- оранжевый. Иными словами, константа `COLOR_ORANGE` является "понятным псевдонимом" для значения `#FF7F00`.</li>
|
||||
<li>Во-вторых, опечатка в строке, особенно такой сложной как `#FF7F00`, может быть не замечена, а в имени константы её допустить куда сложнее.</li>
|
||||
</ol>
|
||||
|
||||
**Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.**
|
||||
|
||||
## Итого
|
||||
|
||||
<ul>
|
||||
<li>В JavaScript можно объявлять переменные для хранения данных. Это делается при помощи `var`.</li>
|
||||
<li>Технически, можно просто записать значение и без объявления переменной, однако по ряду причин это не рекомендуется.</li>
|
||||
<li>Вместе с объявлением можно сразу присвоить значение: `var x = 10`.</li>
|
||||
<li>Переменные, которые названы `БОЛЬШИМИ_БУКВАМИ`, являются константами, то есть никогда не меняются. Как правило, они используются для удобства, чтобы было меньше ошибок.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
47
1-js/2-first-steps/5-variables/variable-change.svg
Normal file
47
1-js/2-first-steps/5-variables/variable-change.svg
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="253px" height="176px" viewBox="0 0 253 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Diagrams 2</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="variable-change" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<rect id="Rectangle-2" stroke="#979797" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(142.959003, 41.528366) rotate(47.000000) translate(-142.959003, -41.528366) " x="103" y="29" width="79.918006" height="25.0567324"></rect>
|
||||
<text id=""Hello!"" opacity="0.7" sketch:type="MSTextLayer" transform="translate(146.500000, 43.500000) rotate(47.000000) translate(-146.500000, -43.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
|
||||
<tspan x="122" y="49">"Hello!"</tspan>
|
||||
</text>
|
||||
<g id="trash62" sketch:type="MSLayerGroup" transform="translate(222.000000, 0.000000)" fill="#979797">
|
||||
<g id="Group" sketch:type="MSShapeGroup">
|
||||
<rect id="Rectangle-path" x="20.6666667" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
|
||||
<rect id="Rectangle-path" x="14.7619048" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
|
||||
<rect id="Rectangle-path" x="8.85714286" y="10.6296296" width="1.47619048" height="25.8148148"></rect>
|
||||
<path d="M25.0952381,6.07407407 L22.1428571,6.07407407 L22.1428571,3.03703704 C22.1428571,1.36666667 20.8142857,0 19.1904762,0 L11.8095238,0 C10.1857143,0 8.85714286,1.36666667 8.85714286,3.03703704 L8.85714286,6.07407407 L5.9047619,6.07407407 L0,6.07407407 L0,7.59259259 L2.95238095,7.59259259 L2.95238095,36.4444444 C2.95238095,39.0259259 4.87142857,41 7.38095238,41 L23.6190476,41 C26.1285714,41 28.047619,39.0259259 28.047619,36.4444444 L28.047619,7.59259259 L31,7.59259259 L31,6.07407407 L25.0952381,6.07407407 L25.0952381,6.07407407 Z M10.3333333,3.03703704 C10.3333333,2.12592593 10.9238095,1.51851852 11.8095238,1.51851852 L19.1904762,1.51851852 C20.0761905,1.51851852 20.6666667,2.12592593 20.6666667,3.03703704 L20.6666667,6.07407407 L10.3333333,6.07407407 L10.3333333,3.03703704 L10.3333333,3.03703704 Z M26.5714286,36.4444444 C26.5714286,38.1148148 25.2428571,39.4814815 23.6190476,39.4814815 L7.38095238,39.4814815 C5.75714286,39.4814815 4.42857143,38.1148148 4.42857143,36.4444444 L4.42857143,7.59259259 L26.5714286,7.59259259 L26.5714286,36.4444444 L26.5714286,36.4444444 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="left221-2" sketch:type="MSLayerGroup" transform="translate(192.401869, 23.588287) scale(-1, 1) rotate(-2.000000) translate(-192.401869, -23.588287) translate(155.931845, 9.197409)" fill="#979797">
|
||||
<path d="M30.2888412,8.13169869 L30.2888412,2.04595641 C30.2888412,1.48343299 29.9074863,0.974528918 29.3182523,0.751950009 C28.7290183,0.529371101 28.0453269,0.634584407 27.57924,1.02100612 L12.6611767,13.3658208 C12.339511,13.6321053 12.1566747,14.0030702 12.1566747,14.3907711 C12.1566747,14.7785786 12.339511,15.1495434 12.6611767,15.415828 L27.57924,27.7607493 C27.8829137,28.0125363 28.2799507,28.145039 28.6825798,28.145039 C28.8967804,28.145039 29.1132907,28.1071963 29.3182523,28.0296988 C29.9076079,27.8071199 30.2888412,27.2983224 30.2888412,26.7356924 L30.2888412,21.1354024 C31.6175657,21.1165343 33.6451775,21.0938287 35.802501,21.0938287 C37.792427,21.0938287 39.5378824,21.1126968 40.9895109,21.1497933 C48.9349919,21.3531843 58.2021466,26.6269613 58.2947804,26.6802609 C58.800255,26.970317 59.4474763,26.9888652 59.9717937,26.7260985 C60.4959895,26.4638647 60.809267,25.9663667 60.7816714,25.4375286 C60.0729372,11.8362304 36.5833242,8.72204447 30.2888412,8.13169869 L30.2888412,8.13169869 Z M41.0831173,18.3328056 C39.6006108,18.2946431 37.8240344,18.2753487 35.802501,18.2753487 C32.0474257,18.2753487 28.6784465,18.3428259 28.6447725,18.3434655 C27.7721664,18.3610544 27.0746164,18.9868976 27.0746164,19.7524923 L27.0746164,23.4683235 L16.1054057,14.3908777 L27.0746164,5.31353844 L27.0746164,9.41749696 C27.0746164,10.1579343 27.7290102,10.7723714 28.5718325,10.8233258 C28.83235,10.8392091 52.6405895,12.4104797 56.9260604,22.7161603 C53.2740738,20.9912804 46.9922337,18.4838565 41.0831173,18.3328056 L41.0831173,18.3328056 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
<g id="left221-3" sketch:type="MSLayerGroup" transform="translate(26.401869, 52.588287) scale(-1, 1) rotate(-44.000000) translate(-26.401869, -52.588287) translate(-10.068155, 38.197409)" fill="#979797">
|
||||
<path d="M30.2888412,8.13169869 L30.2888412,2.04595641 C30.2888412,1.48343299 29.9074863,0.974528918 29.3182523,0.751950009 C28.7290183,0.529371101 28.0453269,0.634584407 27.57924,1.02100612 L12.6611767,13.3658208 C12.339511,13.6321053 12.1566747,14.0030702 12.1566747,14.3907711 C12.1566747,14.7785786 12.339511,15.1495434 12.6611767,15.415828 L27.57924,27.7607493 C27.8829137,28.0125363 28.2799507,28.145039 28.6825798,28.145039 C28.8967804,28.145039 29.1132907,28.1071963 29.3182523,28.0296988 C29.9076079,27.8071199 30.2888412,27.2983224 30.2888412,26.7356924 L30.2888412,21.1354024 C31.6175657,21.1165343 33.6451775,21.0938287 35.802501,21.0938287 C37.792427,21.0938287 39.5378824,21.1126968 40.9895109,21.1497933 C48.9349919,21.3531843 58.2021466,26.6269613 58.2947804,26.6802609 C58.800255,26.970317 59.4474763,26.9888652 59.9717937,26.7260985 C60.4959895,26.4638647 60.809267,25.9663667 60.7816714,25.4375286 C60.0729372,11.8362304 36.5833242,8.72204447 30.2888412,8.13169869 L30.2888412,8.13169869 Z M41.0831173,18.3328056 C39.6006108,18.2946431 37.8240344,18.2753487 35.802501,18.2753487 C32.0474257,18.2753487 28.6784465,18.3428259 28.6447725,18.3434655 C27.7721664,18.3610544 27.0746164,18.9868976 27.0746164,19.7524923 L27.0746164,23.4683235 L16.1054057,14.3908777 L27.0746164,5.31353844 L27.0746164,9.41749696 C27.0746164,10.1579343 27.7290102,10.7723714 28.5718325,10.8233258 C28.83235,10.8392091 52.6405895,12.4104797 56.9260604,22.7161603 C53.2740738,20.9912804 46.9922337,18.4838565 41.0831173,18.3328056 L41.0831173,18.3328056 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
<path d="M44.5,117 L146.5,117" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M2.5,173.5 L44.5,117.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M133.5,172.5 L175.5,116.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M44.5,77 L176.5,77" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M2.5,133.5 L44.5,77.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M133.5,133.5 L175.5,77.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M44,117.5 L44,77.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(82.959003, 108.528366) rotate(47.000000) translate(-82.959003, -108.528366) " x="43" y="96" width="79.918006" height="25.0567324"></rect>
|
||||
<text id=""World!"" sketch:type="MSTextLayer" transform="translate(86.500000, 110.500000) rotate(47.000000) translate(-86.500000, -110.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
|
||||
<tspan x="59" y="116">"World!"</tspan>
|
||||
</text>
|
||||
<path d="M176,116 L176,77.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="1" y="134" width="133" height="40"></rect>
|
||||
<g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(38.000000, 147.000000)">
|
||||
<rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
|
||||
<circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
|
||||
<text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#373535">
|
||||
<tspan x="7" y="12">message</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
25
1-js/2-first-steps/5-variables/variable.svg
Normal file
25
1-js/2-first-steps/5-variables/variable.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="148px" height="128px" viewBox="0 0 148 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>variable</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="variable" sketch:type="MSArtboardGroup" transform="translate(-161.000000, -71.000000)">
|
||||
<g id="noun_1211_cc" sketch:type="MSLayerGroup" transform="translate(161.000000, 71.000000)">
|
||||
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#BCA68E" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#BCA68E" sketch:type="MSShapeGroup"></path>
|
||||
<g id="Rectangle-5-+-"World!"" transform="translate(15.000000, 0.000000)">
|
||||
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
|
||||
<text id=""Hello!"" sketch:type="MSTextLayer" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
|
||||
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#BCA68E" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
<text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
|
||||
<tspan x="178" y="176">Message</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue