Differences

This shows you the differences between two versions of the page.

--- tanszek:oktatas:techcomm:syntax_graphs [2024/10/07 16:44] – created knehez
+++ tanszek:oktatas:techcomm:syntax_graphs [2025/11/25 08:07] (current) – [Can we define JSON with BN formulas?] knehez
@@ Line 1: / Line 1: @@
 ==== Syntax Graphs ====
-Syntactic rules can also be modeled using graphs, for example in the following way:
+Syntactic rules can also be modeled using graphs, for example, in the following way:
 {{:tanszek:oktatas:techcomm:pasted:20241007-164044.png}}
@@ Line 11: / Line 11: @@
 {{:tanszek:oktatas:techcomm:pasted:20241007-164442.png}}
-Even if someone is unfamiliar with the PASCAL language, they would be able to declare syntactically correct variables based on the graph:
+Even if someone is unfamiliar with the PASCAL language, they would be able to declare syntactically correct variables using the graph:
-\[
+<code>
-\text{var age, weekdays : integer;}
+var age, weekdays : integer;
-\]
+var taxrate, netIncome : real;
-\[
+var choice, isready : boolean;
-\text{var taxrate, net\_income : real;}
+  initials, grade : char;
-\]
+  name, surname : string;
-\[
+</code>
-\text{var choice, isready : boolean;}
-\]
+This shows how graphical representations can help understand and construct syntactically correct structures in programming languages.
-\[
-\text{initials, grade : char;}
+=== 2. Example: Syntax Graph of the JSON (JavaScript Object Notation) Data Exchange Format with Examples ===
-\]
-\[
+The JSON format is very important in modern information technology. By looking at examples and the syntax graph, we can understand its structure.
-\text{name, surname : string;}
-\]
+=== Simple JSON Data ===
+<sxh json>
+{
+   {"title": "Poetry Collection", "author": "Name of the Poet"}
+}
+</sxh>
+This is an object that contains **name-value pairs** or **arrays**, combined in various ways. For example:
+<sxh json>
+{
+  "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }
+}
+</sxh>
+This example shows how JSON can be used to structure objects, where properties have values and methods. The syntax graph helps visualize the relationships between objects, arrays, and values.
+JSON object:
+{{:tanszek:oktatas:techcomm:pasted:20241007-164934.png}}
+JSON array:
+{{:tanszek:oktatas:techcomm:pasted:20241007-164944.png}}
+JSON types:
+{{:tanszek:oktatas:techcomm:pasted:20241007-165011.png}}
+JSON string:
+{{:tanszek:oktatas:techcomm:pasted:20241007-165025.png}}
+JSON number:
+For example: ''-0.123E+10'' or ''12.324''
+{{:tanszek:oktatas:techcomm:pasted:20241007-165120.png}}
+==== Can we define JSON with BN formulas? ====
+$$
+\begin{aligned}
+\langle json \rangle &::= \langle value \rangle \\[6pt]
+%
+\langle value \rangle &::=
+      \langle object \rangle
+    \mid \langle array \rangle
+    \mid \langle string \rangle
+    \mid \langle number \rangle
+    \mid \text{"true"}
+    \mid \text{"false"}
+    \mid \text{"null"} \\[10pt]
+%
+\langle object \rangle &::=
+    \text{"\{"}\, \{ \langle members \rangle \}_{0}^{1}\, \text{"\}"} \\[6pt]
+%
+\langle members \rangle &::=
+    \langle pair \rangle \{\, \text{","}\, \langle pair \rangle \}_{0}^{\infty} \\[6pt]
+%
+\langle pair \rangle &::=
+    \langle string \rangle\, \text{":"}\, \langle value \rangle \\[10pt]
+%
+\langle array \rangle &::=
+    \text{"["}\, \{ \langle elements \rangle \}_{0}^{1}\, \text{"]"} \\[6pt]
+%
+\langle elements \rangle &::=
+    \langle value \rangle \{\, \text{","}\, \langle value \rangle \}_{0}^{\infty} \\[10pt]
+%
+\langle string \rangle &::=
+    \text{"\""}\, \{ \langle character \rangle \}_{0}^{\infty}\, \text{"\""} \\[6pt]
+%
+\langle character \rangle &::=
+      \langle unescaped \rangle
+    \mid \text{"\textbackslash"}\, \langle escape \rangle \\[6pt]
+%
+\langle unescaped \rangle &::=
+    \text{any Unicode char, except
+    \{"\"", "\textbackslash", controls\}} \\[10pt]
+%
+\langle escape \rangle &::=
+      \text{"\""}
+    \mid \text{"\textbackslash"}
+    \mid \text{"/"}
+    \mid \text{"b"}
+    \mid \text{"f"}
+    \mid \text{"n"}
+    \mid \text{"r"}
+    \mid \text{"t"}
+    \mid \langle escape\_unicode \rangle \\[10pt]
+%
+\langle escape\_unicode \rangle &::=
+    \text{"u"}\, \{ \langle hex \rangle \}_{4}^{4} \\[10pt]
+%
+\langle number \rangle &::=
+    \langle int \rangle\,
+    \{ \langle frac \rangle \}_{0}^{1}\,
+    \{ \langle exp \rangle \}_{0}^{1} \\[8pt]
+%
+\langle int \rangle &::=
+      \text{"0"}
+    \mid \langle onenine \rangle \{ \langle digit \rangle \}_{0}^{\infty} \\[6pt]
+%
+\langle frac \rangle &::=
+    \text{"."} \{ \langle digit \rangle \}_{1}^{\infty} \\[6pt]
+%
+\langle exp \rangle &::=
+    (\text{"e"} \mid \text{"E"})\,
+    \{ \text{"+"} \mid \text{"-"} \}_{0}^{1}\,
+    \{ \langle digit \rangle \}_{1}^{\infty} \\[10pt]
+%
+\langle digit \rangle &::=
+    \text{"0"} \mid \langle onenine \rangle \\[6pt]
+%
+\langle onenine \rangle &::=
+    \text{"1"} \mid \text{"2"} \mid \text{"3"} \mid \text{"4"} \mid \text{"5"}
+    \mid \text{"6"} \mid \text{"7"} \mid \text{"8"} \mid \text{"9"}
+\end{aligned}
+$$
-This shows how graphical representations can help in understanding and constructing syntactically correct structures in programming languages.