web basics 2013-01-10
TRANSCRIPT
Webセミナー
基本
基本
フロントエンド コミュニケーション バックエンド
HTMLCSS
JavaScriptjQueryJSON
HTTP
On Web Connection
4Dタグ
WEB SEND FILE
基本
フロントエンド バックエンド
HTMLCSS
JavaScriptjQueryJSON
On Web Connection
4Dタグ
WEB SEND FILE
基本
フロントエンド バックエンド
基本
フロントエンド バックエンド
基本
フロントエンド バックエンド
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
レスポンス
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
ポート
基本
http://192.168.1.114:8080/hello.html
リクエスト
プロトコル
ホスト
ポート
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
レスポンス
リクエスト
基本
レスポンス
基本
レスポンス
基本
レスポンス
基本
レスポンス
基本
フロントエンド バックエンド
基本
バックエンド
基本
バックエンドスタティック（静）
基本
バックエンド
• 静的なコンテンツ
スタティック（静）
基本
バックエンド
• 静的なコンテンツ
• HTML
スタティック（静）
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
スタティック（静）
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静）
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静）
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
基本
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静） バックエンド
WEB START SERVERIf(OK=1) //successEnd if
基本
バックエンド
• 静的なコンテンツ
• HTML
• 画像
• リクエスト処理前に出力済
スタティック（静）
基本
バックエンドダイナミック（動）
基本
• 動的なコンテンツ
バックエンドダイナミック（動）
基本
• 動的なコンテンツ
• HTML
バックエンドダイナミック（動）
基本
• 動的なコンテンツ
• HTML
• 画像
バックエンドダイナミック（動）
基本
• 動的なコンテンツ
• HTML
• 画像
• リクエスト処理時に出力
バックエンドダイナミック（動）
基本
4Dタグ バックエンド
基本
4Dタグ バックエンド
• 4DTEXT
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML• 4DSCRIPT
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP
基本
4Dタグ バックエンド
• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<h1>ようこそ<!--#4DTEXT [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DTEXT vtUserName--></p>
<!--#4DTEXT myArray{7}-->
<!--#4DTEXT Current time-->
<!--#4DTEXT Records in selection([INVOICES])-->件のレコードがみつかりました。
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<h1>ようこそ<!--#4DHTML [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DHTML vtUserName--></p>
<!--#4DHTML myArray{7}-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<h1>ようこそ<!--#4DHTML [CONTACTS]FirstName--></h1>
<p>ユーザー名: <!--#4DHTML vtUserName--></p>
<!--#4DHTML myArray{7}-->
[Contacts]lastName:="<b>MIYAKO</b> Keisuke"
vtUserName:= "<font color=\"red\">MIYAKO</font>"
myArray{7}:="<a href=\"http://www.4d.com\">4D</a>"
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
公開メソッド
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--#4DSCRIPT/MethodName/Param-->
/Param
公開メソッド
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--#4DINCLUDE header/menu.html-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<div><!--4DIF (vNumRecords>0)--> <p><!--4DTEXT vNumRecords-->件みつかりました。</p><!--4DELSE--> <p>何もみつかりませんでした。</p><!--4DENDIF--></div>
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DELSEIF, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<div><!--4DIF (vNumRecords>0)--> <p><!--4DTEXT vNumRecords-->件みつかりました。</p><!--4DELSE--> <p>何もみつかりませんでした。</p><!--4DENDIF--></div>
<div><!--4DIF (Condition1)--> <!--4DINCLUDE menu1.html--><!--4DELSEIF (Condition2)--> <!--4DINCLUDE menu2.html--><!--4DELSEIF (Condition3)--> <!--4DINCLUDE menu3.html--><!--4DELSE--> <!--4DINCLUDE menu.html--><!--4DENDIF--></div>
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--4DLOOP (arrCities)--> <p><!--4DTEXT arrCities{arrCities}--></p><!--4DENDLOOP-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--4DLOOP (arrCities)--> <p><!--4DTEXT arrCities{arrCities}--></p><!--4DENDLOOP-->
<!--4DLOOP [CONTACTS]--> <p><!--4DTEXT [CONTACTS]firstName--></p><!--4DENDLOOP-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--4DLOOP (arrCities)--> <p><!--4DTEXT arrCities{arrCities}--></p><!--4DENDLOOP-->
<!--4DLOOP [CONTACTS]--> <p><!--4DTEXT [CONTACTS]firstName--></p><!--4DENDLOOP-->
<!--4DLOOP allowAction--> <p><!--4DTEXT actionResult--></p><!--4DENDLOOP-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--4DINCLUDE header.html--><!--4DBASE folder/--><!--4DINCLUDE subpage1.html--><!--4DINCLUDE subpage2.html--><!--4DINCLUDE subpage3.html--><!--4DBASE sub/--><!--4DINCLUDE subpage4.html--><!--4DINCLUDE subpage5.html--><!--4DINCLUDE subpage6.html--><!--4DBASE WEBFOLDER--><!--4DINCLUDE footer.html-->
基本
4Dタグ• 4DTEXT• 4DHTML• 4DSCRIPT• 4DINCLUDE• 4DIF, 4DELSE, 4DENDIF• 4DLOOP, 4DENDLOOP• 4DBASE
<!--4DINCLUDE header.html--><!--4DBASE folder/--><!--4DINCLUDE subpage1.html--><!--4DINCLUDE subpage2.html--><!--4DINCLUDE subpage3.html--><!--4DBASE sub/--><!--4DINCLUDE subpage4.html--><!--4DINCLUDE subpage5.html--><!--4DINCLUDE subpage6.html--><!--4DBASE WEBFOLDER--><!--4DINCLUDE footer.html-->
Webfolder/header.htmlWebfolder/folder/subpage1.htmlWebfolder/folder/subpage2.htmlWebfolder/folder/subpage3.htmlWebfolder/folder/sub/subpage4.htmlWebfolder/folder/sub/subpage5.htmlWebfolder/folder/sub/subpage6.htmlWebfolder/footer.html
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
.html
基本
Webクライアント コミュニケーション Webサーバー
http://192.168.1.114:8080/hello.html
リクエスト
.html
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114:8080
/hello.shtml リクエス
ト
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114:8080
/hello.shtml リクエス
ト.shtml
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
ファイル読み込み
4Dタグ処理
http://192.16
8.1.114:8080
/hello.shtml リクエス
ト.shtml
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114/4DA
CTION/myMe
thod/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114/4DA
CTION/myMe
thod/hello
リクエスト
/4DACTION/myMethod/hello
基本
Webクライアント コミュニケーション Webサーバー
メソッド実行
http://192.16
8.1.114/4DA
CTION/myMe
thod/hello
リクエスト
基本
Webクライアント コミュニケーション Webサーバー
メソッド実行
http://192.16
8.1.114/4DA
CTION/myMe
thod/hello
リクエスト
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
メソッド実行
4Dタグ処理
http://192.16
8.1.114/4DA
CTION/myMe
thod/hello
リクエスト
ファイル読み込み
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114/helloリクエスト
基本
Webクライアント コミュニケーション Webサーバー
http://192.16
8.1.114/helloリクエスト
/hello
基本
Webクライアント コミュニケーション Webサーバー
On Web Connection
http://192.16
8.1.114/helloリクエスト
基本
Webクライアント コミュニケーション Webサーバー
On Web Connection
http://192.16
8.1.114/helloリクエスト
WEB SEND FILE
基本
Webクライアント コミュニケーション Webサーバー
レスポンス
On Web Connection
4Dタグ処理
http://192.16
8.1.114/helloリクエスト
ファイル読み込み
WEB SEND FILE
基本
On Web Connection
基本
On Web Connection
基本
On Web Connection
• $1リクエスト
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP HEADER
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP BODY
WEB GET HTTP HEADER
WEB GET VARIABLES
基本
On Web Connection
• $1リクエスト
• $2 HTTPヘッダ＋ボディ（一部）
• $3 クライアントIPアドレス
• $4 サーバーIPアドレス
• $5 ユーザー名
• $6 パスワード
WEB GET HTTP BODY
WEB GET HTTP HEADER
WEB GET HTTP BODY PARTS
WEB GET VARIABLES
まとめ
基本
基本
• スタティック（静）
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
基本
• スタティック（静）
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
基本
• スタティック（静）
• HTML ページ
• images 画像
• css スタイル
• js スクリプト
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
基本
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• ダイナミック（動）
• HTML ページ
• images 画像
• json データ
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
•WEB GET VARIABLES
•WEB SEND FILE
•WEB GET HTTP HEADER
•WEB GET HTTP BODY
基本
• 4Dタグ
• On Web Connection
• .shtml
• 4DACTION
•WEB GET VARIABLES
•WEB SEND FILE
•WEB GET HTTP HEADER
•WEB GET HTTP BODY• WEB SEND TEXT
• WEB SEND BLOB
• WEB SEND RAW DATA
• WEB SEND HTTP REDIRECT
jQuery
jQuery
<script src="/js/jquery.js"></script><script> $(function(){! //$(document).ready(function()の短縮形 $.getJSON("/Contacts/data", function(data){! var contactsList = '<ul>';! ! ! ! ! ! $.each(data, function(index, value){! contactsList = contactsList + '<li uid="' + value.contactId + '">'; contactsList = contactsList + value.lastName; contactsList = contactsList + value.firstName + '</li>';! });! contactsList += '</ul>';! ! ! ! ! ! $("#contactList").html(contactsList);! ! ! }) });</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script><script> $(function(){! //$(document).ready(function()の短縮形 $.getJSON("/Contacts/data", function(data){! var contactsList = '<ul>';! ! ! ! ! ! $.each(data, function(index, value){! contactsList = contactsList + '<li uid="' + value.contactId + '">'; contactsList = contactsList + value.lastName; contactsList = contactsList + value.firstName + '</li>';! });! contactsList += '</ul>';! ! ! ! ! ! $("#contactList").html(contactsList);! ! ! }) });</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script><script> $(function(){! //$(document).ready(function()の短縮形 $.getJSON("/Contacts/data", function(data){! var contactsList = '<ul>';! ! ! ! ! ! $.each(data, function(index, value){! contactsList = contactsList + '<li uid="' + value.contactId + '">'; contactsList = contactsList + value.lastName; contactsList = contactsList + value.firstName + '</li>';! });! contactsList += '</ul>';! ! ! ! ! ! $("#contactList").html(contactsList);! ! ! }) });</script>!
WebFolder/Contacts/index.html
jQuery
<script src="/js/jquery.js"></script><script> $(function(){! //$(document).ready(function()の短縮形 $.getJSON("/Contacts/data", function(data){! var contactsList = '<ul>';! ! ! ! ! ! $.each(data, function(index, value){! contactsList = contactsList + '<li uid="' + value.contactId + '">'; contactsList = contactsList + value.lastName; contactsList = contactsList + value.firstName + '</li>';! });! contactsList += '</ul>';! ! ! ! ! ! $("#contactList").html(contactsList);! ! ! }) });</script>!
WebFolder/Contacts/index.html
jQuery
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of : ($request="/Contacts/data")
ALL RECORDS([Contacts]) $filePath:=Get 4D folder(Current Resources folder)+\ "json"+Folder separator+"contacts.html" WEB SEND FILE($filePath)
End case
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0) $0:=Replace string($0;"\\";"\\\\";*) $0:=Replace string($0;"\"";"\\\"";*) $0:=Replace string($0;"/";"\\/";*) $0:=Replace string($0;Char(Backspace);"\\b";*) $0:=Replace string($0;Char(FF ASCII code);"\\f";*) $0:=Replace string($0;"\n";"\\n";*) $0:=Replace string($0;"\r";"\\r";*) $0:=Replace string($0;"\t";"\\t";*) End if End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0) $0:=Replace string($0;"\\";"\\\\";*) $0:=Replace string($0;"\"";"\\\"";*) $0:=Replace string($0;"/";"\\/";*) $0:=Replace string($0;Char(Backspace);"\\b";*) $0:=Replace string($0;Char(FF ASCII code);"\\f";*) $0:=Replace string($0;"\n";"\\n";*) $0:=Replace string($0;"\r";"\\r";*) $0:=Replace string($0;"\t";"\\t";*) End if End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0) $0:=Replace string($0;"\\";"\\\\";*) $0:=Replace string($0;"\"";"\\\"";*) $0:=Replace string($0;"/";"\\/";*) $0:=Replace string($0;Char(Backspace);"\\b";*) $0:=Replace string($0;Char(FF ASCII code);"\\f";*) $0:=Replace string($0;"\n";"\\n";*) $0:=Replace string($0;"\r";"\\r";*) $0:=Replace string($0;"\t";"\\t";*) End if End if
w_escapeText
jQuery
C_TEXT($1;$0)
If (Count parameters>0)
$0:=$1
If (Length($0)#0) $0:=Replace string($0;"\\";"\\\\";*) $0:=Replace string($0;"\"";"\\\"";*) $0:=Replace string($0;"/";"\\/";*) $0:=Replace string($0;Char(Backspace);"\\b";*) $0:=Replace string($0;Char(FF ASCII code);"\\f";*) $0:=Replace string($0;"\n";"\\n";*) $0:=Replace string($0;"\r";"\\r";*) $0:=Replace string($0;"\t";"\\t";*) End if End if
w_escapeText
jQuery
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
jQuery
[<!--4DLOOP [Contacts]-->! {! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"! }<!--4DTEXT w_endOfArrayItem(->[Contacts])--><!--4DENDLOOP-->]
Resources/json/contacts.html
C_POINTER($1)C_TEXT($0)
If (Count parameters>0) If (Not(Nil($1))) If (Table(Table($1))=$1) If (Records in selection($1->)#Selected record number($1->)) $0:="," End if End if End if End if
w_endOfArrayItem
jQuery
C_POINTER($1)C_TEXT($0)
If (Count parameters>0) If (Not(Nil($1))) If (Table(Table($1))=$1) If (Records in selection($1->)#Selected record number($1->)) $0:="," End if End if End if End if
w_endOfArrayItem
jQuery
C_POINTER($1)C_TEXT($0)
If (Count parameters>0) If (Not(Nil($1))) If (Table(Table($1))=$1) If (Records in selection($1->)#Selected record number($1->)) $0:="," End if End if End if End if
w_endOfArrayItem
jQuery
C_POINTER($1)C_TEXT($0)
If (Count parameters>0) If (Not(Nil($1))) If (Table(Table($1))=$1) If (Records in selection($1->)#Selected record number($1->)) $0:="," End if End if End if End if
w_endOfArrayItem
jQuery
C_POINTER($1)C_TEXT($0)
If (Count parameters>0) If (Not(Nil($1))) If (Table(Table($1))=$1) If (Records in selection($1->)#Selected record number($1->)) $0:="," End if End if End if End if
w_endOfArrayItem
jQuery
jQuery
<script src="/js/jquery.js"></script><script> $(function(){! //$(document).ready(function()の短縮形 $.getJSON("/Contacts/data", function(data){! var contactsList = '<ul>';! ! ! ! ! ! $.each(data, function(index, value){! contactsList = contactsList + '<li uid="' + value.contactId + '">'; contactsList = contactsList + value.lastName; contactsList = contactsList + value.firstName + '</li>';! });! contactsList += '</ul>';! ! ! ! ! ! $("#contactList").html(contactsList);! ! ! }) });</script>!
WebFolder/Contacts/index.html
デバッグ
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
TRACE
デバッグ
フロントエンド バックエンド
TRACE
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
F12（開発者ツール）
デバッグ
フロントエンド バックエンド
F12（開発者ツール）
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
⌥⌘I（デベロッパーツール）
デバッグ
フロントエンド バックエンド
⌥⌘I（デベロッパーツール）
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
F12（Firebug）
デバッグ
フロントエンド バックエンド
F12（Firebug）
デバッグ
フロントエンド バックエンド
デバッグ
フロントエンド バックエンド
⌥⌘I（Webインスペクタ）
デバッグ
フロントエンド バックエンド
⌥⌘I（Webインスペクタ）
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
デバッグ
モバイル
C_BOOLEAN($0;$isMobile)
ARRAY TEXT($headerNames;0)ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)C_LONGINT($i)
$i:=Find in array($headerNames;"User-Agent")
If ($i#-1)
$userAgent:=$headerValues{$i}
$isMobile:=True Case of : (Position("iPhone";$userAgent)#0) : (Position("iPad";$userAgent)#0) : (Position("Android";$userAgent)#0) Else $isMobile:=False End case
End if
$0:=$isMobilew_isMobile
モバイル
C_BOOLEAN($0;$isMobile)
ARRAY TEXT($headerNames;0)ARRAY TEXT($headerValues;0)
WEB GET HTTP HEADER($headerNames;$headerValues)C_LONGINT($i)
$i:=Find in array($headerNames;"User-Agent")
If ($i#-1)
$userAgent:=$headerValues{$i}
$isMobile:=True Case of : (Position("iPhone";$userAgent)#0) : (Position("iPad";$userAgent)#0) : (Position("Android";$userAgent)#0) Else $isMobile:=False End case
End if
$0:=$isMobilew_isMobile
モバイル
モバイル
C_TEXT($1)
ARRAY LONGINT($pos;0)ARRAY LONGINT($len;0)
If (Match regex("((.+)\\.(.+))";$1;1;$pos;$len))
$fileName:=Substring($1;$pos{2};$len{2}) $fileType:=Substring($1;$pos{3};$len{3})
$filePath:=Get 4D folder(Current Resources folder)+\ $fileType+Folder separator+$fileName+".html"
WEB SEND FILE($filePath)
End if
モバイル
w_sendFile
モバイル
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
$isMobile:=w_isMobile
Case of : ($request="/Contacts/")
ALL RECORDS([Contacts])
If ($isMobile) w_sendFile ("contacts-mobile.html") Else w_sendFile ("contacts-desktop.html") End if
End case
モバイル
モバイル
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
<head>! <meta charset="utf-8" />! <meta name="viewport" content="width=device-width, initial-scale=1">! <title>Contacts</title>! <!--jQuery Mobile関連のスタイルシートです。-->! !! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />! <!--はじめにjQuery本体を読み込みます。-->! !! <script src="/js/jquery-1.8.2.min.js"></script>! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !! <script src="/js/jquery.mobile-1.2.0.min.js"></script></head>
Resources/html/contacts-mobile.html
jQuery Mobile
<head>! <meta charset="utf-8" />! <meta name="viewport" content="width=device-width, initial-scale=1">! <title>Contacts</title>! <!--jQuery Mobile関連のスタイルシートです。-->! !! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />! <!--はじめにjQuery本体を読み込みます。-->! !! <script src="/js/jquery-1.8.2.min.js"></script>! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !! <script src="/js/jquery.mobile-1.2.0.min.js"></script></head>
Resources/html/contacts-mobile.html
jQuery Mobile
<head>! <meta charset="utf-8" />! <meta name="viewport" content="width=device-width, initial-scale=1">! <title>Contacts</title>! <!--jQuery Mobile関連のスタイルシートです。-->! !! <link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.theme-1.2.0.min.css" />! <link rel="stylesheet" href="/css/jquery.mobile.structure-1.2.0.min.css" />! <!--はじめにjQuery本体を読み込みます。-->! !! <script src="/js/jquery-1.8.2.min.js"></script>! <!--つづけてjQuery Mobileを読み込みます。-->!! ! !! <script src="/js/jquery.mobile-1.2.0.min.js"></script></head>
Resources/html/contacts-mobile.html
jQuery Mobile
jQuery Mobile
jQuery Mobile
JSON
JSONhttp://ja.wikipedia.org/JSON
JSONhttp://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
JSONhttp://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
JSONhttp://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
JSONhttp://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
Inspired
JSONhttp://ja.wikipedia.org/JSON
• JavaScriptオブジェクトの表記法を応用したデータ形式
• JSON = JavaScript Object Notation
• JSON # JavaScript
『JSONは余計な脂肪を除いたXMLの代役』
ダグラス・クロックフォード http://www.json.org/fatfree.html
Inspired
JSONデータの例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONデータの例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列 数値
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONデータの例
文字列
ブール
数値
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
配列
JSONの特徴
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造 プログラミング言語に依存しない
標準テキスト 人間が理解
簡潔 （それでも豊かな表現力） 容易に解析
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造 プログラミング言語に依存しない
標準テキスト 人間が理解
簡潔 （それでも豊かな表現力） 容易に解析
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造 プログラミング言語に依存しない
標準テキスト 人間が理解
簡潔 （それでも豊かな表現力） 容易に解析
2
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造 プログラミング言語に依存しない
標準テキスト 人間が理解
簡潔 （それでも豊かな表現力） 容易に解析
2
3
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONの特徴JSON特性 メリット
軽量フォーマット HTTP経由に最適
汎用性の高いデータ型と構造 プログラミング言語に依存しない
標準テキスト 人間が理解
簡潔 （それでも豊かな表現力） 容易に解析
2
3
4
1
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
HTTPリクエスト
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
2
HTTPリクエスト
クエリの実行JSONの組み立て
クライアント サーバー
JSON転送の流れ
http://server.com/q?lastName=keisuke
1
2
3
HTTPリクエスト
クエリの実行JSONの組み立て
HTTPレスポンス
クライアント サーバー
JSON転送の流れ
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
http://server.com/q?lastName=keisuke
1
2
3
4
HTTPリクエスト
クエリの実行JSONの組み立て
JSONデータを解析
HTTPレスポンス
クライアント サーバー
JSON転送の流れ
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSONデータ型と4D
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
string ✔ テキスト
number ✔ 実数/整数
true/false ✔ ブール
null ✔
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
JSONデータ型と4DJSON型 構造体 値 4D型
object ✔
array ✔ 配列
値は構造体の中にだけ存在する
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
myArray
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
myArray
配列インデックス 値myArray[0] ➤ “Miyako”myArray[1] ➤ “Keisuke”myArray[2] ➤ “95015”myArray[3] ➤ 38myArray[4] ➤ true
JSON配列の例
[ “Miyako”, “Keisuke”, “95015”, 38, true ]
JSON配列の例
配列インデックス 値myArray{1} ➤ “Miyako”myArray{2} ➤ “Keisuke”myArray{3} ➤ “95015”myArray{4} ➤ “38”myArray{5} ➤ “true”
myArray
JSONオブジェクトの例
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
オブジェクト
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
キー
オブジェクト
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
値キー
オブジェクト
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
値キー
オブジェクト
{ “male” : true, “city” : “Tokyo”, “lastName” : “Miyako”, “age” : 38, “zip” : “95015”, “firstName” : “Keisuke”, “state” : “JP”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
値キー
順不問
オブジェクト
{ “male” : true, “city” : “Tokyo”, “lastName” : “Miyako”, “age” : 38, “zip” : “95015”, “firstName” : “Keisuke”, “state” : “JP”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
JSONオブジェクトの例
値キー
オブジェクトはキー/値ペア（連想配列）順不問
オブジェクト
{ “male” : true, “city” : “Tokyo”, “lastName” : “Miyako”, “age” : 38, “zip” : “95015”, “firstName” : “Keisuke”, “state” : “JP”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
オブジェクト表記{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
オブジェクト表記{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
myObject
オブジェクト表記
キー 値 myObject.firstName ➤ “Keisuke” myObject.lastName ➤ “Miyako” myObject.zip ➤ “95015” myObject.age ➤ 38
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “city” : “Tokyo”, “state” : “JP”, “zip” : “95015”, “age” : 38, “male” : true}
myObject
NestedObject
構造体は値
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
NestedObject
構造体は値
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
phone
NestedObject
構造体は値
キー 値phone.cell ➤ “734-555-1234”
phone.work ➤ “734-555-2468”
phone.home ➤ “734-555-1357”
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
phone
NestedObject
構造体は値
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
phone
NestedObject
構造体は値
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “phone” :
}phone
NestedObject
構造体は値
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “phone” :
}
contact
phone
NestedObject
構造体は値
キー 値 contact.phone.cell ➤ “734-555-1234”
contact.phone.work ➤ “734-555-2468”
contact.phone.home ➤ “734-555-1357”
{ “cell” : “734-555-1234”, “work” : “734-555-2468”, “home” : “734-555-1357”}
{ “firstName” : “Keisuke”, “lastName” : “Miyako”, “phone” :
}
contact
phone
構造体のネストネストできるものネストできるものネストできるもの
オブジェクト配列
構造体のネストネストできるものネストできるものネストできるもの
オブジェクト配列
オブジェクト 配列 値✔ ✔ ✔
✔ ✔ ✔
構造体のネストネストできるものネストできるものネストできるもの
オブジェクト配列
オブジェクト 配列 値✔ ✔ ✔
✔ ✔ ✔
構造体のネストネストできるものネストできるものネストできるもの
オブジェクト配列
オブジェクト 配列 値✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する
ネストできるものネストできるものネストできるもの
オブジェクト配列
オブジェクト 配列 値✔ ✔ ✔
✔ ✔ ✔
構造体のネスト
•ネストされた構造体は階層構造を形成する•階層数に制限はない
ネストできるものネストできるものネストできるもの
オブジェクト配列
オブジェクト 配列 値✔ ✔ ✔
✔ ✔ ✔
配列のネスト
[
[ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ]
]
配列のネストlineItem
[
[ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ]
]
配列のネストlineItem
lineItem[1][
[ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ]
]
配列のネストlineItem
lineItem[1][
[ 4, “Cape”, 699.00 ], [ 6, “Cowl”, 1195.00 ], [ 3, “Boots”, 395.00 ], [ 1, “Batwing”, 697199.00 ]
]lineItem[1][2]
オブジェクトのネスト
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
オブジェクトのネスト
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
オブジェクトのネストinvoice
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
オブジェクトのネスト
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
invoice.lineItem
invoice
オブジェクトのネスト
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
invoice
invoice.lineItem[1]
invoice.lineItem
オブジェクトのネスト
{ “number” : “37584”, “customerID” : “1690”, “customerName” : “Bruce Wayne”, “subtotal” : 708350.00, “salesTax” : 63751.50, “total” : 772101.50, “lineItem” : [ {“qty”:4, “desc”:”Cape”, “price”:699.00}, {“qty”:6, “desc”:”Cowl”, “price”:1195.00}, {“qty”:3, “desc”:”Boots”, “price”:395.00}, {“qty”:1, “desc”:”Batwing”, “price”:697199.00} ]}
invoice
invoice.lineItem[1]
invoice.lineItem[1].descinvoice.lineItem
function selectContact(ContactId){! $.getJSON('data', 'id='+ContactId, function(data){! ! ! $("#contactId").val(data.contactId);! $("#firstName").val(data.firstName);! $("#lastName").val(data.lastName);! $("#email").val(data.email);! $("#mobilePhone").val(data.mobilePhone);! ! ! })! return true;}
JSON
WebFolder/js/contact-mobile.js
function selectContact(ContactId){! $.getJSON('data', 'id='+ContactId, function(data){! ! ! $("#contactId").val(data.contactId);! $("#firstName").val(data.firstName);! $("#lastName").val(data.lastName);! $("#email").val(data.email);! $("#mobilePhone").val(data.mobilePhone);! ! ! })! return true;}
JSON
WebFolder/js/contact-mobile.js
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of : ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0) ARRAY TEXT($values;0) WEB GET VARIABLES($names;$values)
$i:=Find in array($names;"id")
If ($i#-1) QUERY([Contacts];[Contacts]id=$values{$i}) w_sendFile ("contact.json") End if
End case
JSON
On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of : ($request="/Contacts/data?id=@")
ARRAY TEXT($names;0) ARRAY TEXT($values;0) WEB GET VARIABLES($names;$values)
$i:=Find in array($names;"id")
If ($i#-1) QUERY([Contacts];[Contacts]id=$values{$i}) w_sendFile ("contact.json") End if
End case
JSON
On Web Connection
{! "contactId":"<!--4DTEXT w_escapeText([Contacts]id)-->",! "firstName":"<!--4DTEXT w_escapeText([Contacts]firstName)-->",! "lastName":"<!--4DTEXT w_escapeText([Contacts]lastName)-->",! "email":"<!--4DTEXT w_escapeText([Contacts]email)-->",! "mobilePhone":"<!--4DTEXT w_escapeText([Contacts]mobilePhone)-->"}
JSON
Resources/json/contact.html
function saveContact(){! $.post('data/update', $("#contactForm").serialize(), function(data){! ! loadContacts();! ! })}
JSON
WebFolder/js/contact-mobile.js
function saveContact(){! $.post('data/update', $("#contactForm").serialize(), function(data){! ! loadContacts();! ! })}
JSON
WebFolder/js/contact-mobile.js
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)ARRAY TEXT($headerValues;0)WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")$isPost:=False
If ($i#-1) $isPost:=($headerValues{$i}="POST") $i:=Find in array($headerNames;"X-METHOD-OVERRIDE") If ($i#-1) $isPost:=False End if End if
$0:=$isPost
まとめ
w_isPost
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)ARRAY TEXT($headerValues;0)WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")$isPost:=False
If ($i#-1) $isPost:=($headerValues{$i}="POST") $i:=Find in array($headerNames;"X-METHOD-OVERRIDE") If ($i#-1) $isPost:=False End if End if
$0:=$isPost
まとめ
w_isPost
C_BOOLEAN($0;$isPost)
ARRAY TEXT($headerNames;0)ARRAY TEXT($headerValues;0)WEB GET HTTP HEADER($headerNames;$headerValues)
C_LONGINT($i)
$i:=Find in array($headerNames;"X-METHOD")$isPost:=False
If ($i#-1) $isPost:=($headerValues{$i}="POST") $i:=Find in array($headerNames;"X-METHOD-OVERRIDE") If ($i#-1) $isPost:=False End if End if
$0:=$isPost
まとめ
w_isPost
C_TEXT($1;$2;$3;$4;$5;$6)
$request:=$1
Case of : ($request="/Contacts/")
Contacts_Send_page
: ($request="/Contacts/data")
Contacts_Send_all
: ($request="/Contacts/data?id=@")
Contacts_Send_1
: ($request="/Contacts/data/update")
Contacts_Update
End case
まとめ
On Web Connection
C_DATE($1;$date)C_TIME($2;$time)C_TEXT($0)
If (Count parameters>0) $date:=$1 If (Count parameters>1) $time:=$2 Else $time:=Current time End if Else $date:=Current date $time:=Current timeEnd if
$0:=String($date;ISO Date GMT;$time)
w_escapeDate
データオブジェクトの作成
C_DATE($1;$date)C_TIME($2;$time)C_TEXT($0)
If (Count parameters>0) $date:=$1 If (Count parameters>1) $time:=$2 Else $time:=Current time End if Else $date:=Current date $time:=Current timeEnd if
$0:=String($date;ISO Date GMT;$time)
w_escapeDate
データオブジェクトの作成
Webセミナー
終