Re: JavaScript in a PRE element of an HTML document

From	"Jukka K. Korpela" <jkorpela@cs.tut.fi>
Newsgroups	comp.lang.javascript
Subject	Re: JavaScript in a PRE element of an HTML document
Date	2014-03-09 17:05 +0200
Organization	A noiseless patient Spider
Message-ID	<lfi00o$4mi$1@dont-email.me> (permalink)
References	<JavaScript-20140308234930@ram.dialup.fu-berlin.de> <lfgsk3$hlv$1@dont-email.me> <teaching-frame-20140309152656@ram.dialup.fu-berlin.de>

Show all headers | View raw

2014-03-09 16:31, Stefan Ram wrote:

>>> var a = 5;
>>> document.writeln( a + 1 );
>>> document.writeln( a );
[...]
>    The above is intended to be a teaching example used to
>    explain JavaScript. In this specific case, the intention is
>    to show that the evaluation of »a + 1« does not change the
>    value of »a«.

Using console.log() for output would set a better example. You probably 
intend to show the output in an element on your page, so the user won't 
need to know how to look at the console log (though he should learn it).

>    I plan to use
>
> <!DOCTYPE HTML><html><head><title>T</title><meta charset="UTF-8"></head><body><pre><code><script>
> ...
> </script></code></pre></body>

This will cause the page to display

1
2

The <script> element will be parsed and executed, not displayed. To make 
it displayed, escape the "<" in its start and end tag as "&lt;".

An alternative to doing so is to use the <xmp> element, which works 
well, though it has been declared as outdated/deprecated/obsolete in 
HTML specs and drafts for about 20 years:

...<body><xmp><script>...</script></xmp></body>...

(Within <xmp>, no markup whatsoever is recognized, except the element's 
own end tag.)

>    as a general frame for such JavaScript teaching examples:
>    The frame will stay the same, while the JavaScript inserted
>    at »...« will change. But before I replicate this frame, I
>    would like to know whether it contains any major flaws from
>    an HTML5 POV.

A few ideas come to my mind. You could use <iframe> (or <frame>) that 
refers to a JavaScript file as such, a .js file containing only 
JavaScript code. The risk is that in some situations some odd browsers 
may start interpreting and executing the code, instead of just showing 
it, even if you serve it with Content-Type: text/plain.

A better idea might be to have an element on your page and just write 
content to it, using the innerText property, avoiding HTML parsing. This 
means that the pieces of code that you wish to show would appear  in a 
JavaScript array, rather than in separate files. Or you could have an 
array of objects, each containing some code, its sample output, and 
explanations.

>    »document.writeln« is intended to be used to make values
>    visible for JavaScript-teaching purposes, but will not be
>    recommended for real-life DOM-changing code.

I see, but generally, if you tell people to use X for some purpose and 
you yourself, in your presentation, use Y for that purpose, most people 
will use Y. That is, people learn from examples rather than 
explanations. There's some truth in the saying that a good tutorial is a 
collection of good examples, though it needs to have some prose to 
separate the examples, and to be casually consulted if the reader does 
not quite understand an example.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

Thread

Re: JavaScript in a PRE element of an HTML document "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-03-09 07:01 +0200
  Re: JavaScript in a PRE element of an HTML document "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-03-09 17:05 +0200
    Re: JavaScript in a PRE element of an HTML document Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-09 17:15 +0100
    Re: JavaScript in a PRE element of an HTML document "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-03-09 19:25 +0200
      Re: JavaScript in a PRE element of an HTML document "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-09 19:44 +0100
    Re: JavaScript in a PRE element of an HTML document Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-03-10 18:01 +0000
      Re: JavaScript in a PRE element of an HTML document "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-03-11 09:59 +0100
  Re: JavaScript in a PRE element of an HTML document Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-03-09 16:54 +0100
  Re: JavaScript in a PRE element of an HTML document Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-03-09 16:30 +0000
  Re: JavaScript in a PRE element of an HTML document Denis McMahon <denismfmcmahon@gmail.com> - 2014-03-09 22:16 +0000
    Re: JavaScript in a PRE element of an HTML document "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-03-10 07:30 +0200

csiph-web