Шпаргалка по библиотеке Jet

1.2.2017 23:41

Передача параметров с клиента на сервер

Что может быть значением параметра?

Html элементы, позволяющие получать значение по имени:

Получение данных из хранилищ клиента

Методы получения параметров с клиента

Обработка событий на клиенте

Гиперссылки перехода на новую страницу

Использование элемента <form>

Хранилища на стороне клиента

Дополнения

События на клиенте (html5)

Передача параметров с клиента на сервер

Что может быть значением параметра?

Пусть на сервер с клиента пришло значение параметра с именем name0. Это значение может быть:

значением элемента <input>, <textarea> или <select> у которого есть атрибут name="name0"
именем константы, передаваемой через вызов методов ajax(), url() и call()
ключом к данным в одном из локальных хранилищ на клиенте (аналог куки).

Внимание! Все три группы параметров находятся в едином пространстве имен. Если одному имени соответствует несколько значений, то все они будут переданы на сервер в виде общей последовательности.

Html элементы, позволяющие получать значение по имени:

Текстовое поле:

Hello, World!

<textarea name="textfield">Hello, World!</textarea>

Текстовая строка:

<input type="text" name="ФИО"/>

Радио-кнопки:

<input type="radio" name="cars" value="volvo"/>
<input type="radio" name="cars" value="audi"/>
<input type="radio" name="cars" checked="checked" value="лада"/>

Чекбоксы:

<input type="checkbox" name="singers" value="Adele"/>
<input type="checkbox" name="singers" value="Rihanna"/>
<input type="checkbox" name="singers" checked="checked" value="Глюкоза"/>

Выпадающие списки:

<select name="композиторы" class="param">
  <option value="Чайковский">Петр Ильич Чайковский</option>
  <option value="Бах">Иоган Себастьян Бах</option>
  <option value="Моцарт" selected="selected">Вольфганг Амадей Моцарт</option>
</select>

Получение данных из хранилищ клиента

Jet поддерживает на клиенте три хранилища:

p-хранилище – короткоживущая база данных, привязанная к конкретному окну или вкладке браузера. При перезагрузке той же страницы содержимое p-хранилища сохраняется (аналог sessionStorage в Javascript).
l-хранилище – долгоживущая база данных, привязанная к URL страницы. Аналог куки и localStorage в Javascript.
d-хранилище – база данных "хранимых выражений", которые динамически вычисляются в момент передачи данных на сервер.

Первая буква имен параметров (ключей) указывает на то, где сохраняются данные. Поэтому ключи должны начинаться с p, l или d. Данные сохраняются с помощью метода store библиотеки Jet.

Например, в следующем коде в момент загрузки страницы в d-хранилище сохраняется выражение, вычисляющее текущее значение скролла страницы. При нажатии кнопки на сервер передается динамически вычисленное значение скролла:

<div>
  #{jet/store("d.scroll", "$('body').scrollTop()")}

  <button 
      onclick=#jet/ajax('handlescroll, (), "!d.scroll")>
    Оправь scroll
  </button>
</div>

Восклицательный знак в селекторе говорит о том, что далее идет ключ к одному из клиентских хранилищ.

Сервер также может управлять содержимым хранилищ на клиенте – с помощью метода–инструкции assign/2. Например, вызов с клиента метода setscroll

use com/teacode/jet

def setscroll = jet/assign("d.scroll", "$('body').scrollTop()")

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

Методы получения параметров с клиента

Это методы string/1, int/1, real/1:

  // чтение строк из выбранных элементов с именем 'name1
  fix stringValue = this.jet/string('name1) 

  // чтение целых чисел из выбранных элементов с именем 'name2
  fix intValue = this.jet/int('name2)

  // чтение вещественных чисел из выбранных элементов с именем 'name3
  fix realValue = this.jet/real('name3)

Обработка событий на клиенте

Обеспечивается группой методов ajax/1, ajax/2, ajax/3 библиотеки Jet. Событие нажатия кнопки:

<button 
  onclick=#jet/ajax('handle, map/m {'x to 115}, (".parm", "$cars", "!d.scroll"))
    >Нажать</button>

Нажатие данной кнопки инициирует вызов на сервере метода handle из пакета control. Методу handle в качестве параметров передаются:

константа x, равная 115
значения всех элементов класса parm (class="parm")
значения всех элементов с именем cars (name="cars")
оцененное хранимое выражение с ключом d.scroll.

События при редактировании текста:

<textarea id="textarea" name="text" 
   onblur=#jet/ajax("saveText", (), "#textarea")
     onkeyup=#jet/ajax('unsavedTextAlert)
       >Hello, World!</textarea>

При потере элементом фокуса вызывается метод saveText ("сохранить текст"), которому передается значение элемента с id="textarea", то есть сохраняемый текст.

При каждом отпускании кнопки клавиатуры вызывается метод unsavedTextAlert ("предупреждение о несохраненном тексте").

Гиперссылки перехода на новую страницу

Статическая гиперссылка (метод url()):

<a href=#jet/url('urlhandler, map/m {'key to 2})>Вызов callmethod</a>

Статическая гиперссылка подобна обычной html гиперссылке. Она позволяет пересылать на сервер только параметры-константы.

Динамическая гиперссылка (метод call()):

<a href=#jet/call('urlhandler, map/m {'x to 115}, (".parm","!d.scroll")))>Жми</a>

Динамическая гиперссылка позволяет передавать не сервер любые динамические параметры. Явное использование элемента <form> не требуется.

Переход по ссылке инициирует вызов на сервере метода urlhandler из пакета control. Методу urlhandler в качестве параметров передаются:

константа x, равная 115
значения всех элементов класса parm (class="parm")
оцененное хранимое выражение с ключом d.scroll.

Использование элемента `<form>`

<form action="formhandler">
  <input type="text" name="textstring"/>
  <input type="hidden" name="const" value="115"/>
  <input type="submit" value="Нажми"/>
</form>

При нажатии кнопки на сервере вызывается метод formhandler из пакета url.

В соответствии с правилами работы элемента <form> методу formhandler передаются значения элементов textstring и const.

Хранилища на стороне клиента

Три хранилища в браузере:

локальное (аналог Javascript хранилища localStorage),
страничное (аналог sessionStorage в Javascript),
база хранимых динамических выражений.

Используемое хранилище определяется по первой букве ключа:

l (например, l:const) – ключ локального хранилища
p (например, p:Const) – ключ страничного хранилища
d (например, d.scroll) – ключ базы хранимых выражений. Выражения динамически вычисляются (оцениваются) в момент их передачи на сервер.

Методы работы с хранилищами:

jet/store() – запоминает значения непосредственно в рамках html страницы. Пример: хранимое выражение, вычисляющее текущий скролл страницы:

<div>
  #jet/store("d.scroll", "$('body').scrollTop()")
  <a href=#jet/call('urlhandler, (), "!d.scroll")>Перейти</a>
</div>

jet/assign() – инструкция, изменяющая данные в хранилищах на клиенте в рамках реакции на события на клиенте. Пример: установление в локальной базе нового значения для ключа l:const:

def eventhandler = {
  ...
  jet/assign("l:const", 777)
}

Дополнения

События на клиенте (html5)

Атрибут Описание
Оконные события
onafterprint Script to be run after the document is printed
onbeforeprint Script to be run before the document is printed
onbeforeunload Script to be run when the document is about to be unloaded
onerror Script to be run when an error occurs
onhashchange Script to be run when there has been changes to the anchor part of the a URL
onload Fires after the page is finished loading
onmessage Script to be run when the message is triggered
onoffline Script to be run when the browser starts to work offline
ononline Script to be run when the browser starts to work online
onpagehide Script to be run when a user navigates away from a page
onpageshow Script to be run when a user navigates to a page
onpopstate Script to be run when the window's history changes
onresize Fires when the browser window is resized
onstorage Script to be run when a Web Storage area is updated
onunload Fires once a page has unloaded (or the browser window has been closed)
Form Events Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements
onblur Fires the moment that the element loses focus
onchange Fires the moment when the value of the element is changed
oncontextmenu Script to be run when a context menu is triggered
onfocus Fires the moment when the element gets focus
oninput Script to be run when an element gets user input
oninvalid Script to be run when an element is invalid
onreset Fires when the Reset button in a form is clicked
onsearch Fires when the user writes something in a search field (for input="search">)
onselect Fires after some text has been selected in an element
onsubmit Fires when a form is submitted
Keyboard Events
onkeydown Fires when a user is pressing a key
onkeypress Fires when a user presses a key
onkeyup Fires when a user releases a key
Mouse Events Events triggered by a mouse, or similar user actions:
onclick Fires on a mouse click on the element
ondblclick Fires on a mouse double-click on the element
ondrag Script to be run when an element is dragged
ondragend Script to be run at the end of a drag operation
ondragenter Script to be run when an element has been dragged to a valid drop target
ondragleave Script to be run when an element leaves a valid drop target
ondragover Script to be run when an element is being dragged over a valid drop target
ondragstart Script to be run at the start of a drag operation
ondrop Script to be run when dragged element is being dropped
onmousedown Fires when a mouse button is pressed down on an element
onmousemove Fires when the mouse pointer is moving while it is over an element
onmouseout Fires when the mouse pointer moves out of an element
onmouseover Fires when the mouse pointer moves over an element
onmouseup Fires when a mouse button is released over an element
onmousewheel Deprecated. Use the onwheel attribute instead
onscroll Script to be run when an element's scrollbar is being scrolled
onwheel Fires when the mouse wheel rolls up or down over an element
Clipboard Events
oncopy Fires when the user copies the content of an element
oncut Fires when the user cuts the content of an element
onpaste Fires when the user pastes some content in an element
Media Events Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).
onabort Script to be run on abort
oncanplay Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough Script to be run when a file can be played all the way to the end without pausing for buffering
oncuechange Script to be run when the cue changes in a <track> element
ondurationchange Script to be run when the length of the media changes
onemptied Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerror Script to be run when an error occurs when the file is being loaded
onloadeddata Script to be run when media data is loaded
onloadedmetadata Script to be run when meta data (like dimensions and duration) are loaded
onloadstart Script to be run just as the file begins to load before anything is actually loaded
onpause Script to be run when the media is paused either by the user or programmatically
onplay Script to be run when the media is ready to start playing
onplaying Script to be run when the media actually has started playing
onprogress Script to be run when the browser is in the process of getting the media data
onratechange Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onseeked Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalled Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspend Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange Script to be run each time the volume is changed which (includes setting the volume to "mute")
onwaiting Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)
onerror Fires when an error occurs while loading an external file
onshow Fires when a <menu> element is shown as a context menu
ontoggle Fires when the user opens or closes the <details> element

Атрибут	Описание
Оконные события
`onafterprint`	Script to be run after the document is printed
`onbeforeprint`	Script to be run before the document is printed
`onbeforeunload`	Script to be run when the document is about to be unloaded
`onerror`	Script to be run when an error occurs
`onhashchange`	Script to be run when there has been changes to the anchor part of the a URL
`onload`	Fires after the page is finished loading
`onmessage`	Script to be run when the message is triggered
`onoffline`	Script to be run when the browser starts to work offline
`ononline`	Script to be run when the browser starts to work online
`onpagehide`	Script to be run when a user navigates away from a page
`onpageshow`	Script to be run when a user navigates to a page
`onpopstate`	Script to be run when the window's history changes
`onresize`	Fires when the browser window is resized
`onstorage`	Script to be run when a Web Storage area is updated
`onunload`	Fires once a page has unloaded (or the browser window has been closed)
Form Events	Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements
`onblur`	Fires the moment that the element loses focus
`onchange`	Fires the moment when the value of the element is changed
`oncontextmenu`	Script to be run when a context menu is triggered
`onfocus`	Fires the moment when the element gets focus
`oninput`	Script to be run when an element gets user input
`oninvalid`	Script to be run when an element is invalid
`onreset`	Fires when the Reset button in a form is clicked
`onsearch`	Fires when the user writes something in a search field (for input="search">)
`onselect`	Fires after some text has been selected in an element
`onsubmit`	Fires when a form is submitted
Keyboard Events
`onkeydown`	Fires when a user is pressing a key
`onkeypress`	Fires when a user presses a key
`onkeyup`	Fires when a user releases a key
Mouse Events	Events triggered by a mouse, or similar user actions:
`onclick`	Fires on a mouse click on the element
`ondblclick`	Fires on a mouse double-click on the element
`ondrag`	Script to be run when an element is dragged
`ondragend`	Script to be run at the end of a drag operation
`ondragenter`	Script to be run when an element has been dragged to a valid drop target
`ondragleave`	Script to be run when an element leaves a valid drop target
`ondragover`	Script to be run when an element is being dragged over a valid drop target
`ondragstart`	Script to be run at the start of a drag operation
`ondrop`	Script to be run when dragged element is being dropped
`onmousedown`	Fires when a mouse button is pressed down on an element
`onmousemove`	Fires when the mouse pointer is moving while it is over an element
`onmouseout`	Fires when the mouse pointer moves out of an element
`onmouseover`	Fires when the mouse pointer moves over an element
`onmouseup`	Fires when a mouse button is released over an element
`onmousewheel`	Deprecated. Use the onwheel attribute instead
`onscroll`	Script to be run when an element's scrollbar is being scrolled
`onwheel`	Fires when the mouse wheel rolls up or down over an element
Clipboard Events
`oncopy`	Fires when the user copies the content of an element
`oncut`	Fires when the user cuts the content of an element
`onpaste`	Fires when the user pastes some content in an element
Media Events	Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).
`onabort`	Script to be run on abort
`oncanplay`	Script to be run when a file is ready to start playing (when it has buffered enough to begin)
`oncanplaythrough`	Script to be run when a file can be played all the way to the end without pausing for buffering
`oncuechange`	Script to be run when the cue changes in a <track> element
`ondurationchange`	Script to be run when the length of the media changes
`onemptied`	Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
`onended`	Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
`onerror`	Script to be run when an error occurs when the file is being loaded
`onloadeddata`	Script to be run when media data is loaded
`onloadedmetadata`	Script to be run when meta data (like dimensions and duration) are loaded
`onloadstart`	Script to be run just as the file begins to load before anything is actually loaded
`onpause`	Script to be run when the media is paused either by the user or programmatically
`onplay`	Script to be run when the media is ready to start playing
`onplaying`	Script to be run when the media actually has started playing
`onprogress`	Script to be run when the browser is in the process of getting the media data
`onratechange`	Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
`onseeked`	Script to be run when the seeking attribute is set to false indicating that seeking has ended
`onseeking`	Script to be run when the seeking attribute is set to true indicating that seeking is active
`onstalled`	Script to be run when the browser is unable to fetch the media data for whatever reason
`onsuspend`	Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
`ontimeupdate`	Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
`onvolumechange`	Script to be run each time the volume is changed which (includes setting the volume to "mute")
`onwaiting`	Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)
`onerror`	Fires when an error occurs while loading an external file
`onshow`	Fires when a <menu> element is shown as a context menu
`ontoggle`	Fires when the user opens or closes the <details> element

Шпаргалка по библиотеке Jet

Передача параметров с клиента на сервер

Что может быть значением параметра?

Html элементы, позволяющие получать значение по имени:

Получение данных из хранилищ клиента

Методы получения параметров с клиента

Обработка событий на клиенте

Гиперссылки перехода на новую страницу

Использование элемента <form>

Хранилища на стороне клиента

Дополнения

События на клиенте (html5)

Использование элемента `<form>`