JavaScripts and Meta Data

This section decribes implementations of Client Side Scripting and HTML head elements.

HTML head

The Head component implements the HTML head tag and is a container for all meta data components (data about data) HeadContent. The following list of PHP classes describe HTML meta data components:

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Head;
    4.  
    5. $head = (new Head("Foo Bar page", "utf-8"));
    6. $head->set(Link::stylesheet("sph/css/ion.rangeSlider.css"));
    7. $head->setBaseAddr('http://samiholck.com/', "_self");
    8. $head->set(Meta::author('Sami Holck'));
    9. $head->set(Meta::applicationName('FooBar'));
    10. $head->set(Meta::keywords(['foo', 'bar', 'foobar']));
    11. $head->printHtml();
    12.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1.     <title>Foo Bar page</title>
    2.     <meta charset="utf-8">
    3.     <link rel="stylesheet" href="sph&#x2F;css&#x2F;ion.rangeSlider.css" type="text&#x2F;css">
    4.     <base href="http&#x3A;&#x2F;&#x2F;samiholck.com&#x2F;" target="_self">
    5.     <meta name="author" content="Sami&#x20;Holck">
    6.     <meta name="application-name" content="FooBar">
    7.     <meta name="keywords" content="foo,&#x20;bar,&#x20;foobar">
    8. </head>
    Highlighted with GeSHi 1.0.9.1
YAML file
YAML Meta data example
  1. ## Meta data
  2. ---
  3. - meta:
  4.     charset: utf-8
  5. - meta:
  6.     http-equiv: X-UA-Compatible
  7.     content: IE=edge
  8. - meta:
  9.     name: viewport
  10.     content: width=device-width, initial-scale=1
  11. - title: SPHPlayground Framework
  12. - meta:
  13.     name: description
  14.     content: SPHPlayground web framework
  15. - meta:
  16.     name: author
  17.     content: Sami Holck
  18. - meta:
  19.     name: keywords
  20.     content: php, scss, css, css3, html, html5, JavaScript, js
  21. - meta:
  22.     name: robots
  23.     content: index, follow
  24. - meta:
  25.     name: mobile-web-app-capable
  26.     content: yes
  27. - meta:
  28.     name: apple-mobile-web-app-capable
  29.     content: yes
  30. - meta:
  31.     http-equiv: Expires
  32.     content: 0
  33. - meta:
  34.     http-equiv: Pragma
  35.     content: no-cache
  36. - meta:
  37.     http-equiv: Cache-Control
  38.     content: no-cache
  39. - meta:
  40.     http-equiv: imagetoolbar
  41.     content: no
  42. - meta:
  43.     http-equiv: x-dns-prefetch-control
  44.     content: off
  45. - meta:
  46.     http-equiv: apple-mobile-web-app-capable
  47.     content: yes
  48. - link:  
  49.     rel: apple-touch-icon
  50.     sizes: 180x180
  51.     href: "/apple-touch-icon.png"
  52. - link:  
  53.     rel: icon
  54.     type: image/png
  55.     sizes: 32x32
  56.     href: "/favicon-32x32.png"
  57. - link:  
  58.     rel: icon
  59.     type: "image/png"
  60.     sizes: 16x16
  61.     href: "/favicon-16x16.png"
  62. - link:
  63.     rel: manifest
  64.     href: '/site.webmanifest'
  65. - link:
  66.     rel: mask-icon
  67.     href: '/safari-pinned-tab.svg'
  68.     color: '#555555'
  69. - meta:
  70.     name: msapplication-TileColor
  71.     content: '#edd4cd'
  72. - meta:
  73.     name: msapplication-TileImage
  74.     content: '/mstile-144x144.png'
  75. - meta:
  76.     name: theme-color
  77.     content: '#ffffff'
  78.  
Highlighted with GeSHi 1.0.9.1
PHP array
PHP Meta data example
  1. $head[] = ["meta" => ["charset" => "utf-8"]];
  2. $head[] = ["meta" => ["http-equiv" => "X-UA-Compatible", "content" => "IE=edge"]];
  3. $head[] = ["meta" => ["name" => "viewport", "content" => "width=device-width, initial-scale=1"]];
  4. $head[] = ["title" => "SPHPlayground Framework"];
  5. $head[] = ["meta" => ["name" => "description", "content" => "SPHPlayground web framework"]];
  6. $head[] = ["meta" => ["name" => "author", "content" => "Sami Holck"]];
  7. $head[] = ["meta" => ["name" => "keywords", "content" => "php, scss, css, css3, html, html5, JavaScript, js"]];
  8. $head[] = ["meta" => ["name" => "robots", "content" => "index, follow"]];
  9. $head[] = ["meta" => ["name" => "mobile-web-app-capable", "content" => "yes"]];
  10. $head[] = ["meta" => ["name" => "apple-mobile-web-app-capable", "content" => "yes"]];
  11. $head[] = ["meta" => ["http-equiv" => "Expires", "content" => "0"]];
  12. $head[] = ["meta" => ["http-equiv" => "Pragma", "content" => "no-cache"]];
  13. $head[] = ["meta" => ["http-equiv" => "Cache-Control", "content" => "no-cache"]];
  14. $head[] = ["meta" => ["http-equiv" => "imagetoolbar", "content" => "no"]];
  15. $head[] = ["meta" => ["http-equiv" => "x-dns-prefetch-control", "content" => "off"]];
  16. $head[] = ["meta" => ["http-equiv" => "apple-mobile-web-app-capable", "content" => "yes"]];
  17. $head[] = ["link" => ["rel" => "apple-touch-icon", "sizes" => "180x180", "href" => "/apple-touch-icon.png"]];
  18. $head[] = ["link" => ["rel" => "icon", "type" => "image/png", "sizes" => "32x32", "href" => "/favicon-32x32.png"]];
  19. $head[] = ["link" => ["rel" => "icon", "type" => "image/png", "sizes" => "16x16", "href" => "/favicon-16x16.png"]];
  20. $head[] = ["link" => ["rel" => "manifest", "href" => "/site.webmanifest"]];
  21. $head[] = ["link" => ["rel" => "mask-icon", "href" => "/safari-pinned-tab.svg", "color" => "#555555"]];
  22. $head[] = ["meta" => ["name" => "msapplication-TileColor", "content" => "#edd4cd"]];
  23. $head[] = ["meta" => ["name" => "msapplication-TileImage", "content" => "/mstile-144x144.png"]];
  24. $head[] = ["meta" => ["name" => "theme-color", "content" => "#ffffff"]];
  25.  
Highlighted with GeSHi 1.0.9.1
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Head;
    4.  
    5. use Sphp\Stdlib\Parsers\ParseFactory;
    6.  
    7. echo HeadFactory::fromArray(ParseFactory::yaml()->fileToArray("manual/examples/Sphp/Html/Head/meta.yaml"));
    8.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1.     <meta charset="utf-8">
    2.     <meta http-equiv="X-UA-Compatible" content="IE&#x3D;edge">
    3.     <meta name="viewport" content="width&#x3D;device-width,&#x20;initial-scale&#x3D;1">
    4.     <title>SPHPlayground Framework</title>
    5.     <meta name="description" content="SPHPlayground&#x20;web&#x20;framework">
    6.     <meta name="author" content="Sami&#x20;Holck">
    7.     <meta name="keywords" content="php,&#x20;scss,&#x20;css,&#x20;css3,&#x20;html,&#x20;html5,&#x20;JavaScript,&#x20;js">
    8.     <meta name="robots" content="index,&#x20;follow">
    9.     <meta name="mobile-web-app-capable" content="yes">
    10.     <meta name="apple-mobile-web-app-capable" content="yes">
    11.     <meta http-equiv="Expires" content="0">
    12.     <meta http-equiv="Pragma" content="no-cache">
    13.     <meta http-equiv="Cache-Control" content="no-cache">
    14.     <meta http-equiv="imagetoolbar" content="no">
    15.     <meta http-equiv="x-dns-prefetch-control" content="off">
    16.     <meta http-equiv="apple-mobile-web-app-capable" content="yes">
    17.     <link rel="apple-touch-icon" sizes="180x180" href="&#x2F;apple-touch-icon.png">
    18.     <link rel="icon" type="image&#x2F;png" sizes="32x32" href="&#x2F;favicon-32x32.png">
    19.     <link rel="icon" type="image&#x2F;png" sizes="16x16" href="&#x2F;favicon-16x16.png">
    20.     <link rel="manifest" href="&#x2F;site.webmanifest">
    21.     <link rel="mask-icon" href="&#x2F;safari-pinned-tab.svg" color="&#x23;555555">
    22.     <meta name="msapplication-TileColor" content="&#x23;edd4cd">
    23.     <meta name="msapplication-TileImage" content="&#x2F;mstile-144x144.png">
    24.     <meta name="theme-color" content="&#x23;ffffff">
    25. </head>
    Highlighted with GeSHi 1.0.9.1

Client-side scripting using JavaScript containers

Script interface defines an HTML element for client-side scripting, usually JavaScript.

  • ScriptsContainer class implements a container for Script components
    • ScriptCode class implements an HTML element that contains client-side scripting statements
    • ScriptSrc class implements an HTML element that points to an external script file
  • Noscript class implements an HTML element for situations where there is no support for client-side scripting

NOTE!: The best practice of placing client side scripts is usually the end of the page, just inside the closing body tag. This guarantees that all of the DOM elements needed are already present on the page.

example1.js example2.js
JavaScript example code
  1. var $fname = "Sami",
  2.         $user = {};
  3. $user.fname = $fname;
  4. $user.lname = "Holck";
  5.  
  6. function printUser(user) {
  7.   document.write("<b>User:</b> " + user.fname + " " + user.lname + "<br>");
  8. }
  9. function alertUser(user) {
  10.   alert("User " + user.fname + " " + user.lname) + " is alerted!";
  11. }
  12. printUser($user);
  13.  
Highlighted with GeSHi 1.0.9.1
JavaScript example code
  1. var $user2 = {};
  2. $user2.fname = 'John';
  3. $user2.lname = "Doe";
  4.  
  5.  
  6. printUser($user2);
  7.  
  8.  
  9.  
Highlighted with GeSHi 1.0.9.1
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Scripts;
    4.  
    5. $script1 = new ScriptSrc("manual/snippets/example1.js");
    6. $script2 = new ScriptSrc("manual/snippets/example2.js");
    7. $script3 = new ScriptCode('alertUser($user);');
    8. $scriptsContainer = new ScriptsContainer();
    9.  
    10. $scriptsContainer->append($script1);
    11. $scriptsContainer->appendSrc("manual/snippets/example2.js");
    12. $scriptsContainer->appendCode('document.write(\'<button class="button" type="button" onclick="alertUser($user)">ALERT!</button>\')');
    13. $scriptsContainer->printHtml();
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <script src="manual&#x2F;snippets&#x2F;example1.js"></script>
    2. <script src="manual&#x2F;snippets&#x2F;example2.js"></script>
    3. <script>document.write('<button class="button" type="button" onclick="alertUser($user)">ALERT!</button>')</script>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

References: