{"id":1205,"date":"2012-05-27T17:38:25","date_gmt":"2012-05-27T15:38:25","guid":{"rendered":"https:\/\/sgaul.de\/?p=1205"},"modified":"2014-03-13T21:34:49","modified_gmt":"2014-03-13T20:34:49","slug":"javascript-beispiele-anzeigen-und-ausfuhren","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2012\/05\/27\/javascript-beispiele-anzeigen-und-ausfuhren\/","title":{"rendered":"Javascript-Beispiele gleichzeitig anzeigen und ausf\u00fchren"},"content":{"rendered":"<p>Eine nette Technik, auf die <a href=\"http:\/\/christianheilmann.com\/2012\/05\/08\/demoing-and-displaying-javascript-at-the-same-time-using-css\/\">Christian Heilmann in seinem Blog<\/a> hinweist: Script-Elemente im HTML sind ganz normale Elemente, die nur durch ihre CSS-Display-Eigenschaft unsichtbar sind. \u00c4ndert man diese, kann man ein Script-Element als Beispielcode nehmen und gleichzeitig ausf\u00fchren.<!--more--><\/p>\n<h2>&lt;script style=&#8220;display:block;&#8220;&gt;<\/h2>\n<p>Erg\u00e4nzt man das Skript-Element um die passende Display-Eigenschaft, wird es sichtbar und trotzdem ausgef\u00fchrt:<\/p>\n<p><script style=\"display:block;font-family:monospace;\">\ndocument.ondblclick = function() { alert(\"Doppelklick\"); };\n<\/script><\/p>\n<p>Hier der Code dieses Beispiels:<\/p>\n<pre lang=\"html4strict\"><script style=\"display:block;font-family:monospace;\">\r\ndocument.ondblclick = function() { alert(\"Doppelklick\"); };\r\n<\/script><\/pre>\n<p>Das Javascript sollte nat\u00fcrlich auch funktionieren. Einfach mal doppelklicken&#8230;<\/p>\n<h2>Beschriftungen mit CSS-Pseudoelementen<\/h2>\n<p>Zudem l\u00e4sst sich eine Beschriftung wie \u201eQuellcode:\u201c dank der CSS-Pseudoelemente <code>:before<\/code> und <code>:after<\/code> ohne Eingriff in das Markup hinzuf\u00fcgen:<\/p>\n<pre lang=\"css\">script:before{\r\n  content: 'Quellcode:';\r\n}<\/pre>\n<p>Auf jeden Fall eine nette Idee. Sollte man dran denken, wenn man mal ein JS-Projekt dokumentiert.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine nette Technik, auf die Christian Heilmann in seinem Blog hinweist: Script-Elemente im HTML sind ganz normale Elemente, die nur durch ihre CSS-Display-Eigenschaft unsichtbar sind. \u00c4ndert man diese, kann man ein Script-Element als Beispielcode nehmen und gleichzeitig ausf\u00fchren.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[38,158,504],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1205"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=1205"}],"version-history":[{"count":13,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1205\/revisions"}],"predecessor-version":[{"id":2518,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1205\/revisions\/2518"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=1205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=1205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=1205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}