JQuery, JSON - Web Technologies I.tothzs/edu/webtech/... · 2018-09-03 · JQuery Plug–ins...
Transcript of JQuery, JSON - Web Technologies I.tothzs/edu/webtech/... · 2018-09-03 · JQuery Plug–ins...
JQuery, JSONWeb Technologies I.
Zsolt Tóth
University of Miskolc
2018
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 1 / 29
Introduction
Table of Contents
1 Introduction
2 JSONHierarchical Data ModelSyntaxApplications
3 JQuerySyntaxEvents, FunctionsPlug–ins
4 AJAXJQueryLayout
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 2 / 29
Introduction
N–Tier Architecture
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 3 / 29
Introduction
Client-Server Communication
ProtocolHTTP
VerbsStatus Codes
Content ?Challenges
Different platformsData formatsNetwork SecurityFirewall
Text basedHTTP XData formats
CSVXMLJSON
ProcessingJavaScriptJQuery
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 4 / 29
JSON Hierarchical Data Model
Table of Contents
1 Introduction
2 JSONHierarchical Data ModelSyntaxApplications
3 JQuerySyntaxEvents, FunctionsPlug–ins
4 AJAXJQueryLayout
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 5 / 29
JSON Hierarchical Data Model
Hierarchical Data Model
1960’sTree structure1-to-many relationshipXMLJSON
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 6 / 29
JSON Hierarchical Data Model
XML
eXtensible Markup LanguageData descriptiontext-basedtag
Schema definitionDTDXML Schema
+ Self contained+ Platform independent+ Readable+ Free, open standard
RSSAPI
SAXDOMJAXB
ApplicationsSOAP
- Huge- "slow" processing
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 7 / 29
JSON Syntax
JavaScript Object Notation
text-basedSelf containedDesigned for data transferLanguage independentJavaScript syntaxHierarchical Data Model
{"name " : " John Johnson " ," s t r e e t " : " Oslo West 555" ," age " : 3 3 ," phone " : "555 1234567"}
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 8 / 29
JSON Syntax
XML vs. JSON
XML+ Flexible+ Extendable+ Namespaces+ Readable+ XML Schema+ XPath, XSLT, XQuery- Long- "slow" processing
JSON+ Compact+ Simple+ Easy-to-learn+ "fast" processing- Simple syntax- Hard-to-read
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 9 / 29
JSON Syntax
Syntax
Name-Value pairscomma separated
ParenthesesNot tag
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 10 / 29
JSON Syntax
string
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 11 / 29
JSON Syntax
value
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 12 / 29
JSON Syntax
Number
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 13 / 29
JSON Syntax
Array
Array of valuesVarious types
Use brackets [, ]
comma separated
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 14 / 29
JSON Applications
Language Support
Many JSON LibrariesPlatform independent
JavaScripteval()
PHPPHP 5.2json
JavaJackson JSON Processororg.jsonjson–simplegoogle–gsonxjc, JAXB
C#fastJSONJSON.NET
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 15 / 29
JQuery Syntax
Table of Contents
1 Introduction
2 JSONHierarchical Data ModelSyntaxApplications
3 JQuerySyntaxEvents, FunctionsPlug–ins
4 AJAXJQueryLayout
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 16 / 29
JQuery Syntax
Syntax
JavaScript LibraryEasy-to-useEvent handlingAnimationsAJAXPlug–ins
$ functionCSS selectors
tag nameId #class .
"write less, do more"
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 17 / 29
JQuery Syntax
Usage
JavaScriptExternal filelinking
OnlineLocal file
$ ( t h i s ) . h ide ( ) ;$ ( " . t e s t " ) . h ide ( ) ;$ ( "# content " ) . html (" He l lo World ! " ) ;
< s c r i p t s rc =" jquery −1.10.2. min . j s " / >< s c r i p t s rc =" h t t p : / / a jax . aspnetcdn . com/ a jax / jQuery / jquery −1.10.2. min . j s " / >
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 18 / 29
JQuery Syntax
Selectors
tag name$("p")
Select all tag
Idid attribute$("#id")
Single node
Osztály alapúclass attribute$(".class")
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 19 / 29
JQuery Events, Functions
Events
Mouse Keyboard Form Documentclick keypress submit loaddbclick keydown change resizemouseenter keyup focus scrollmouseleave blur unload
$ ( " p " ) . c l i c k ( f u n c t i o n ( ) {$ ( t h i s ) . h ide ( ) ;
} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 20 / 29
JQuery Events, Functions
Functions
. operatorfunction()
function name()
html()html(content)text()css()
Effectshide()show()toggle(speed,callback)fadeIn()fadeOut()slide{Up,Down,Toggle}()animate()
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 21 / 29
JQuery Events, Functions
Callback
function as parameterC function pointerC# delegateGeneralizationUI Design
$ ( " but ton " ) . c l i c k (f u n c t i o n ( ) {
$ ( " p " ) . h ide ( " slow " ,f u n c t i o n ( ) {
a l e r t (" The paragraph i snow hidden " ) ;
} ) ;} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 22 / 29
JQuery Plug–ins
Plug–in
Plug–in repositoryLabels
uiformanimationinputsliderresponsiveeffect. . .
ExamplesSelectableUI Highlight EffectSliderDatepickerMenuSortableAutocompletePeity (chart)
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 23 / 29
AJAX JQuery
Table of Contents
1 Introduction
2 JSONHierarchical Data ModelSyntaxApplications
3 JQuerySyntaxEvents, FunctionsPlug–ins
4 AJAXJQueryLayout
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 24 / 29
AJAX JQuery
Asynchronous JavaScript And XML
Request dataAsynchronousDoes not require refreshPage refresh XData is processed at clientside
$ ( document ) . ready (f u n c t i o n ( ) {
$ ( " but ton " ) . c l i c k (f u n c t i o n ( ) {
$ ( "# d iv1 " ) . load (" demo_test . t x t " ) ;
} ) ;} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 25 / 29
AJAX JQuery
$.ajax
urlsettings
acceptsasynccomplete (function)contextdatasucccess (function). . .
$ . a jax ( {u r l : u r l ,data : data ,success : success ,dataType : dataType
} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 26 / 29
AJAX JQuery
Get
GET requestcalls $.ajax()Parameters
urldatasuccessdataType
xmljsonscripthtml
$ . get ( " a jax / t e s t . html " ,f u n c t i o n ( data ) {
$ ( " . r e s u l t " ) . html (data ) ;
} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 27 / 29
AJAX JQuery
Post
POST requestcalls $.ajax()Parameters
urldatasuccessdataType
xmljsonscripthtml
$ . post ( " a jax / t e s t . html " ,f u n c t i o n ( data ) {
$ ( " . r e s u l t " ) . html (data ) ;
} ) ;
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 28 / 29
AJAX Layout
Layout
div + CSSAJAXChange content with JSSingle pageFragments
elements div
appearance CSSnavigation link X
links other sites X
Zsolt Tóth (University of Miskolc) JQuery, JSON 2018 29 / 29