Why is this Javascript printing my comments in the rendered HTML - javascript

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 -->.

Related

why this console.log() function doesn't work?

<!DOCTYPE html>
<html>
<head>
<title>LearnJS</title>
</head>
<body>
<script>
console.log('hello World\nThis is me');
alert("This is an \nalert.");
</script>
</body>
</html>
I have tried this code and run in TORCH borwser... The only output shown is alert But it doesn't display output of console.log...
What is the possible solution...
I have use
document.write('hello World\nThis is me');
But this code doesn't feed new line so i was supposed to use console.log...
It is working fine here :). Run Code Snippet
<!DOCTYPE html>
<html>
<head>
<title>LearnJS</title>
</head>
<body>
<script>
console.log('hello World\nThis is me on console');
alert("This is an \nalert.");
document.write("This is an document.write.");
</script>
</body>
</html>
Note:
developers use console.log() for logging useful information on browser console
document.write() modifies what user sees in the browser by adding additional content to DOM.
alert()'s are used to alert end users who access the web page on browser.
N.B If you're in confusion about How stackoverflow.com shows console.log() on a browser div. Then see here https://stackoverflow.com/a/20256785/1138192 it is kind of overriding the default behavior of console.log() to show the messages on browser div. Hope this helps :)
console.log() only displays in the developer console of the browser. It does not display on the web page itself.
Your code is not feeding a new line because \n only shows in the source code not on the page. To display a new line in HTML on the page you need to use a <br> tag or use other form of spacing.
So, instead of:
document.write('hello World\nThis is me');
You could use:
document.write('hello World<br>This is me');
However, rather than using document.write(), you may prefer to write to a specific element in the page. Below I give an element an id of data and then use the JavaScript code to write to this element.
<!DOCTYPE html>
<html>
<body>
<div id="data">You can put text here or leave it blank. It will be replaced.</div>
<script>
document.getElementById("data").innerHTML = "Hello world<br>This is me";
</script>
</body>
</html>
Notice also, I need to place the document.getElementByID("data") script after the div is created. If I place it before it will not be able to find it. The script code is therefore placed at the end of the <body> section. There are better ways to do this (such as placing JavaScript code in an external file and using defer), but for your purposes this should work quite well.

How can I get script after end of <html> tag

Have something like this:
<html>
<head></head>
<body></body>
</html>
<script id="ajaxify-data" type="application/json">
....
<script>
How can I get this script element?
All DOM functions like $("#ajaxify-data"), document.getElementByID("#ajaxify-data") dont work
P.S.: I saw this script on this site. But I can`t get it in the consolt? Is it possible?
Please, note that any element outside < /html > tag is not rendered, is not a valid logic to put any element of a webpage outside of what it is considered the end of a webpage. If you paste your code in https://validator.w3.org/#validate_by_input you will receive the error "document type does not allow element SCRIPT here".
So, it is fine if you put your SCRIPT right before the closing tag. A $(body).append() function will work.
I got it.
If you need to get the script after end of html tag. You only need to get this html by the ajax as a json and parce this one to with regular expression.
Its a bad but single way.

Why does Javascript ignore single line HTML Comments?

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>

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.

Simple jQuery .load Example Not Working

I'm sure this is a fairly basic question, but I'm relatively new to jQuery so was hoping someone might be able to help.
Basically, I need to load an HTML snippet into a page. This works fine when the snippet contains just HTML, but not when it contains a script.
I've stripped down my code to the bare minimum for clarity. This is index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
$('#banner').load('banner.html');
});
</script>
</body>
</html>
And banner.html contains just the following (as an example):
<h2>Subheading</h2>
<script>
document.write('Hello');
</script>
The script is executed, but for some reason it strips out the rest of the HTML in both index.html and banner.html (i.e. it just displays "Hello" and nothing else).
Any help greatly appreciated!
document.write after the page has load writes to the document, and at the same overwrites everything else currently in the document, that's why you end up with only the string "hello".
Just remove the document write :
<h2>Subheading</h2>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'hello';
</script>
that is becuase when banner.html is loaded .. the script inside banner.html get executed, which writes "hello" in your document(the document here is your entire index.html)
one way to understand this is by replacing certain content of banner.html rather than the whole document.
banner.html
<h2>Subheading</h2>
<div id="divID"></div>
<script>
$('#divID').html('hello'); //using jquery .. gets the element with id as divID and replace the HTML
</script>
here i am replacing just the div whose id is "divID" rather than replacing the enrite document

Categories

Resources