Is <!-- a valid comment delimiter in JavaScript - javascript

Is <!-- a valid comment delimiter in JavaScript?
var foo = 'foo'; <!-- Is this a valid single-line comment?

Yes, it apparently is.
This syntax was included to cater for browsers that do not support JavaScript, to avoid them rendering the code inside <script> tags. This was more important in the early days of the Web, when a large proportion of browsers did not support JavaScript.
Both <!-- and --> delimit single line comments.
<!-- this is treated as a single line comment
--> and this is treated as a single line comment
So you can write your script tags using the following syntax:
<script>
<!--
console.log('this is my code')
-->
</script>
Note that the Wikipedia page on JavaScript syntax does not mention this.

Yes it is - but its rare to see these days. Typically we see C single line and C++ multi-line style commenting used.
One-line comments with the HTML comment-opening sequence. Note that
the JavaScript interpreter ignores the closing characters of HTML
comments.
source : http://www.javascripter.net/faq/comments.htm

To give a bit of context, way back when Javascript and the <script> tag were new things, there was the danger that if you put a <script> element full of script on your page, some browsers that didn't know what it was would just show its contents on the page.
The solution was to define the Javascript language so that <!-- and --> are treated as single-line comments (the latter only when it occurs at the beginning of a line with the optional inclusion of whitespace and/or multiline JS comments). This way, the HTML renderer would see all of the script as a comment, and the JS interpreter would simply ignore these lines and process the rest.
So you could do this (and presumably still can):
<script type="text/javascript"><!--
document.write("<blink>HELP!!!! I'm using 1990's Javascript!!!</blink>")
--></script>

Related

How to use ~~satya~~ (strike) in pagedown js?

I'm using like below code
$('#convert').click(function(){
var message = $('#textarea').val();
var converter = new Markdown.Converter();
var output = converter.makeHtml(message);
console.log(output);
$('#show').html(output);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<textarea rows="10" cols="20" id="textarea"></textarea><br>
<input type="button" name="" value="submit" id="convert">
<div id="show"></div>
But ~~satya~~ was not working
How to make strike through work.
Markdown does not include support for strike-through in its syntax. Some implementations have added support as a non-standard addon, but the syntax varies across those (few) implementations. Without checking their docs, I do not know if pagedown offers such support, but I would assume not. In fact that would be my assumption for any Markdown implementation.
That said, the rules state:
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. ...
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
Therefore, the following Markdown:
<del>satya</del>
will result in the following rendered document:
satya

Make Vim correctly highlight script type="text/html"

How can I get Vim to correctly syntax-highlight in a situation such as this (used, e.g. with Knockout templates):
<script type="text/html" id="my-template">
<!-- This should be rendered as HTML -->
<div>Some template</div>
</script>
<script>
//This should be rendered as Javascript
var x = function() { return 3; }
</script>
The solution given here involves editing Vim's internal syntax file, which seems wrong, and it specifically looks for "text/javascript" which is no longer needed in <script> tags.
I assume the solution is some sort of syntax plugin I can keep in my .vim directory but am not familiar enough with Vim's syntax internals to figure it out.
(Note that this question and answer don't apply as I'm not using Ruby on Rails.)
Maybe this will help you: https://coderwall.com/p/vgk5-q/make-vim-play-nice-with-html-templates-inside-script-tags.
In case the link above is broken one day - put the following code into ~/.vim/after/syntax/html.vim:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/template[^>]*>+
\ end=+</script>+me=s-1 keepend
\ contains=#HTML,htmlScriptTag,#htmlPreproc
Somebody should write a plugin for that! ;)
First copy the vim's internal html syntax file to $HOME/.vim/syntax/html.vim so that you only change the behaviour for yourself not globally.
Then find the line starting syn region javaScript and replace it with two lines
syn region script_notype start=+<script>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
syn region script_jstype start=+<script[^>]*type="text/javascript"[^>]*>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
The first line is for plain <script> tab, the second for <script type="text/javascript">.
However, this won't cover a situation with <script> tag without type attribute having other attributes. This case should get javascript syntax but won't. I guess this is a minor problem.

Why does <!-- return undefined and not a syntax error?

The html comment tags <!-- & --> return undefined when run as a js command, I expected a syntax error. Why does this happen ?
I stumbled upon this in DoubleClick ... (the download link).
Because <script> was added to HTML as an afterthought, and at the time MANY browsers didn't acknowledge the existence of scripts, <!-- is actually a defined member of the Javascript language spec, and is treated as "start of comment".
Remember that by default, browsers ignore tags that they do not understand, so that
<tag_which_does_not_exist>hi there</tag_which_does_not_exist>
would actually display "hi there" in a browser. For script-unaware browsers, that'd mean they'd actuall display the JS code as text in the document. So..
<script>
<!--
alert('hi there');
// -->
</script>
would pop up a JS alert in script-aware browsers, and would be completely ignored by script-ignorant browsers.
Also note that --> is NOT valid Javascript, which is why it has to be entered as // -->. // is the other JS single-line comment, and it comments out the otherwise invalid --> html end-of-comment tag.

Showing text from resources.resx in JavaScript

This is example code in ASP.NET MVC 3 Razor:
#section header
{
<script type="text/javascript">
$(function() {
alert('#Resources.ExampleCompany');
});
</script>
}
<div>
<h1>#Resources.ExampleCompany</h1>
</div>
The code above this is just an example, but it also shows my problem with encoding. This variable #Resources.ExampleCompany is a file resources.resx with value ExampleCompany = "Twoja firma / Twój biznes"
In JavaScript, the alert shows the "Twoja firma / Twój biznes".
Why is character 'ó' '&#243'? What am I doing wrong?
In HTML tag, <h1>#Resources.ExampleCompany</h1> is displayed correctly.
UPDATE:
Mark Schultheiss wrote a good hint and my "ugly solution" is:
var companySample = "#Resources.ExampleCompany";
$('#temp').append(companySample);
alert($('#temp').text());
Now the character is ó and looks good, but this is still not answer to my issue.
According to HTML Encoding Strings - ASP.NET Web Forms VS Razor View Engine, the # syntax automatically HTML encodes and the solution is to use the Raw extension-method (e.g., #Html.Raw(Resources.ExampleCompany)) to decode the HTML. Try that and let us know if that works.
Some of this depends upon WHAT you do with the text.
For example, using the tags:
<div id='result'>empty</div>
<div id='other'>other</div>
And code (since you are using jQuery):
var whatitis="Twoja firma / Twój biznes";
var whatitisnow = unescape(whatitis);
alert(whatitis);
alert(whatitisnow);
$('#result').append(whatitis+" changed to:"+whatitisnow);
$('#other').text(whatitis+" changed to:"+whatitisnow);
In the browser, the "result" tag shows both correctly (as you desire) whereas the "other" shows it with the escaped character. And BOTH alerts show it with the escaped character.
See here for example: http://jsfiddle.net/MarkSchultheiss/uJtw3/.
I use following trick:
<script type="text/javascript">
$('<div/>').html("#Resources.ExampleCompany").text();
</script>
Maybe it will help.
UPDATE
I have tested this behavior of Razor more thoroughly and I've found that:
1.When the text is put as normal content of html then #Html.Raw method simply helps and writes char 'ó' without html encoding (not as: ó)
example:
<div> #Html.Raw("ó") </div>
example:
<script type="text/javascript">
var a = $('<div/>').html('#("ó")').text();// or var a = '#Html.Raw("ó")';
console.log(a); // it shows: ó
</script>
2.But if it is put inside html tags as attribute then Razor converts it to: ó and #Html.Raw doesn't help at all
example:
<meta name="description" content="#("ó")" />
Yo can fix it by putting the entire tag to Resource (as in that post) or to string (as in my example)
#("<meta name="description" content="ó" />")
So, sometimes somebody could have been little confused that the answers helps the others but not him.
I had similar issue, but in my case I was assigning a value from Resource to javascript variable. There was the same problem with letter ó encoding. Afterwards this variable was binded to a html object (precisely speaking by knockout binding). In my situation below code give a trick:
var label = '#Html.Raw(Resource.ResourceName)';

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.
From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?
To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first
As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.
<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.
i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')
Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)
Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.

Categories

Resources