Why does Javascript ignore single line HTML Comments? - javascript

I just tried this code on my browser (Chrome 39, Windows 8) :-
<html>
<body>
<script>
<!--
document.write("<h1>Hello</h1>");
-->
</script>
</body>
</html>
This produces the Header text on the browser. But when I make a slight change- put the HTML comment stuff on a single line,
<html>
<body>
<script>
<!-- document.write("<h1>Hello</h1>"); -->
</script>
</body>
</html>
This doesn't display anything.
Why is it so? I don't think HTML comments are in the Javascript standards.
p.s. I know how to put javascript comments. I'm only wondering about this erratic behavior.

That's the way to hide javascript to browsers that don't recognize the script element. The first line is allways ignored: Hiding script data from user agents
Commenting scripts in JavaScript
The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and
ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the
current line. This is needed to hide the string "-->" from the
JavaScript parser.
<SCRIPT type="text/javascript">
<!-- to hide script contents from old browsers
function square(i) {
document.write("The call passed ", i ," to the function.","<BR>")
return i * i
}
document.write("The function returned ",square(5),".")
// end hiding contents from old browsers -->
</SCRIPT>

Related

HTML will not execute JavaScript functions

I am trying to get a very simple javascript project going, but I cannot get any function to execute. Here is a simple example. It is obviously just an example. I have tried everything I can think of to get the browser to recognize that I am trying to call a function that has been defined, but it never does anything but just display the text, rather than call anything. In the below example, I simply get a page with the text: "varTimesTwo(3);"
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
</script>
varTimesTwo(3);
</body>
</html>
your code is wrong, you have to place varTimesTwo(3); inside the script tag, like this:
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
varTimesTwo(3);
</script>
</body>
</html>
Keep all JavaScript code in the script tags, or better yet, in a file
separate from the html file using <script src="myjsfile.js"></script>
You can use document.write(string) to write a string to the document.
This string is treated as HTML so you need to use <p>text</p> or <br> to get line breaks.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
document.write("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
Alternatively, you can use window.alert(string) or simply alert(string) to pop up an alert box. But if you have turned off pop-ups in the browser, these will not pop up.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
alert("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
console.log(string) writes to the debugging console, which you can see on many browsers with either control-shift-J or F12.
The javascript debugging console is also useful for learning javascript without messing with input and output. Anything you type in the JS console is immediately executed, so you can define functions there and play with them without having to write additional code to write the output or read input.
Finally, these techniques are insufficient for most websites as they are actually used. Instead, what is done is to define an html container element and change the text or html that is inside. jQuery provides a browser-independent method of manipulating the document to change items on the page.

Adding JavaScript code with jQuery.html()

<!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var x="<script>alert('hello world');</script>";
$("#div_one").html(x);
});
</script>
</head>
<body>
<div id="div_one">
</div>
</body>
</html>
Why does this not work? I'd expect the JS code between the script tags to be interpreted and see an alert message ...
What I want to do:
I have written a set of functions that add and delete items from an array depending on the user input (JavaScript). Then, I have a function that draws() a ul-list of the items held in the array. Behind each item, I want to provide a remove link, which calls a JavaScript function that removes the item from the array and then calls drawList() to redraw the list.
If there weren't that security policy, I'd simply do it as in the code shown above.
That is some weird browser bug I believe. For some reason you can't have </script> inside the script block.
Change to
var x="<scr"+"ipt>alert('hello world');</scr"+"ipt>";
Example on jsFiddle
That is not a bug. The problem is here:
<script>
$(document).ready(function() {
var x="<script>alert('hello world');</script>";
$("#div_one").html(x);
});
</script>
The browser thinks the first <script> tag is associated with the </script> inside your code.
As you can see, the code is shown in the DOM instead of executing.
To further prove it, see this example:
http://jsfiddle.net/DerekL/Ah8Qz/
var x = $("<script>").html("alert('hello world');");
$("#div_one").append(x);
If you avoid the </script> closing tag, then there will be no problem because the HTML parser will ignore any open <script> tag inside <script>.
So to sum up,
Browsers does not have security in place to stop scripts being injected into your page.
This is no where near a browser bug.

Recognizing mobile numbers from web page

While developing chrome extension for detecting the mobile numbers, I have used javascript included in to the content script. For implementation I used this link for detection but using this javascript are also detecting from html attributes like
file 1
Since, 1234566780 is not a mobile numbers it get detected as a number. How can these html tags can be ignored while performing this replacing task. Is there any javascript function to ignore the HTML tags ?
I think this can be done by implementing the regex of
1. ignoring the characters start with "<" and end with ">"
here is html file,
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script>
$(document).ready(function () {
$('body').each(function () {
$(this).html($(this).html().replace(/(\d\d\d\d\d\d\d\d\d\d)/g, '$1'));
});
});
</script>
</head>
<body>Vignesh - 9427415949 file 1
</body>
</html>

Why is this Javascript printing my comments in the rendered HTML

I'm new to Javascript, as in just really getting started with it today. I'm testing some very basic code in the first chapter of a book and encountered a problem on the first example. I wrote the code in Notepad++, but even in that program my second line of commenting is black and not green. Why does the line right after </noscript> render?
The output to my browser is rendered as: Hello World! // Display a message dialog after the page has loaded.
<!DOCTYPE html>
<html>
<body>
<div id = "panel">
<script type = "text/javascript">
// Dynamically write a text string as the page loads.
document.write("Hello World!");
</script>
<noscript>Javascript is Not Enabled!</noscript>
// Display a message dialog after the page has loaded.
<body onload = " window.alert('Document Loaded!');">
</div>
</body>
</html>
That's because you're writing your comment not in a JavaScript part but in an HTML one.
Comments in HTML are like this :
<noscript>Javascript is Not Enabled!</noscript>
<!-- Display a message dialog after the page has loaded. -->
Note that you've put a body element inside the body, that's not good. You probably wanted this instead of the second body :
<script>
window.onload = function(){
alert('document loaded!');
};
</script>
<!-- This is a comment in HTML -->
/* This is a comment in Javascript */
Your comment are not between script tag. You can move it into an script tag or use the HTML comment just like #22kar said.
Also you need to put the parameter "onload" in the first body tag and remove the other one.
The reason the line you tried to comment out is rendered is because you have attempted to comment out the text with JavaScript comments.
The browser rendering html sees the two slashes (//) as part of the text, not as markup designating a comment.
The correct way to comment out something in html is with <!-- and -->.

Firebug won't break on breakpoint in startup JavaScript except in first script element

I can't get Firebug to stop on breakpoints that I set on JS within a <script> tag; i.e. JS that runs when the page is loaded.
unless the <script> is the 1st such tag on the page.
In the example below there are 3 script blocks. When this is loaded into the browser, I can set breakpoints on any of the executable lines in any block. However, execution will only stop on breadkpoints in the 1st script block.
Line numbers are green in the 1st block and grey in the others. Also, in the tab that displays the list of breakpoints, the breakpoint in the 1st script is labeled with the file name next to the enable/disable checkbox; The other breakpoints are labeled "undefined"
Any help would be appreciated. Thanks in advance.
<html>
<head>
<script type="text/javascript" >
var j = 4;
j=5;
</script>
<script type="text/javascript" >
j=137;
</script>
</head>
<body>
<script type="text/javascript" >
document.write( "j=" + j );
</script>
</body>
</html>
I had the same problem, and like you I was trying to figure out why firebug have this, imho, strange behavior. Actually I think it is a bug. But I also found a workaround that I hope could help.
You only need to wrap your code within an anonymous functions, then you can add again breakpoints.

Categories

Resources