javascript debugger

hisoka · March 6, 2015

when I run this little piece of code in mozilla firefox web console

var a = 12;document.write(a);

it gives this error : undefined

when I put the same code in notepad and save it as example.html then run it , it runs normally and gives me an 12 as an output .

1) I would like to know what is the cause of the error shown in mozilla firefox web console ?

2) how to avoid it so that I do not get the same error again when I run my little script in mozilla web console ? :)

davej · March 6, 2015

Stop using document.write. Instead use something like...

<!DOCTYPE html><head><meta charset="utf-8"><title>tab</title><script>window.onload = function(){  var a = 12;  document.getElementById('mydiv').innerHTML = a;}</script></head><body><div id="mydiv"></div></body></html>

...or put your script at the bottom of the body...

<!DOCTYPE html><head><meta charset="utf-8"><title>tab</title></head><body><div id="mydiv"></div><script>var a = 12;document.getElementById('mydiv').innerHTML = a;</script></body></html>

alexpnd · March 6, 2015

Have you tried instead console.log()?

---

www.introtojavascript.com

Edited March 6, 2015 by alexpnd

hisoka · March 6, 2015

"Have you tried instead console.log()?"

Now I tried it . it shows undefined and the output like this

undefined

12

hisoka · March 6, 2015

"Stop using document.write. Instead use something like..."

Could you confine yourself to my questions or you could not ?

these were my questions :

1) I would like to know what is the cause of the error shown in mozilla firefox web console ?

2) how to avoid it so that I do not get the same error again when I run my little script in mozilla web console ?

this was your answer :

"Stop using document.write. Instead use something like..."

look to my questions and look to your answer . Do they have something in common ? no absolutely not

So I would appreciate it if you answer me in relation to the questions I ask

and both of your codes did not work in mozilla firefox web console

justsomeguy · March 6, 2015

1) I would like to know what is the cause of the error shown in mozilla firefox web console ?

I doubt it's an error. Do you see a red message that indicates that certain code is a problem, or just the word "undefined"?

look to my questions and look to your answer . Do they have something in common ? no absolutely not

You would be surprised. document.write is widely regarded as something to be avoided, because it has side-effects that beginners don't realize.

and both of your codes did not work in mozilla firefox web console

They are complete web pages, not code to paste in the console.

davej · March 6, 2015

when I run this little piece of code in mozilla firefox web console

Javascript statements which modify the DOM make no sense outside of a document.

hisoka · March 7, 2015

"I doubt it's an error. Do you see a red message that indicates that certain code is a problem, or just the word "undefined"?I doubt it's an error. Do you see a red message that indicates that certain code is a problem, or just the word "undefined"?

I saw in red error : undefined

Now , I copied this code :

var a = 12;document.write(a);

and pasted it again , surprisingly , it worked and the browser show 12 as output . May be it has something to do with Mozilla version or a bug in mozilla firefox . I like mozilla firefox web console . It is a simple , sweet and instructive , flexible woman :)

hisoka · March 7, 2015

"Javascript statements which modify the DOM make no sense outside of a document."

Could you please explain this to me ? :)

davej · March 7, 2015

You aren't writing c code. You are writing Javascript code which modifies the document it is executing in. Consider the example below. When you click the button the entire document is destroyed. You can see this by using 'view source' before and after clicking the button.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = fnd;}</script></head><body><input type="button" id="btn1" value="Enter"/><hr/><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2012/04/doug-crockford-image.jpg" alt="dc"/><script>document.write("this text is inserted into the document");function fnd(){document.write("writing this text overwrites the entire document");}</script></body>    </html>

Note that I placed the function code near the end of the document -- but that did not prevent it from overwriting the entire document.

Ingolme · March 7, 2015

The reason the console shows "undefined" is because the return value of document.write() is undefined. That's not an error message, it just means that document.write() doesn't return anything.

hisoka · March 9, 2015

In order to understand the document.getElementById('btn1').onclick = fnd;

<!DOCTYPE html><html><body><head><title>w3school website</title></head><center><h1><font size="5" color="green">welcome to the w3school website</font></h1></center><p><b><big>we are here for your service. We do believe in the freedom of speech . our symbol is the horse as it represents the beauty , the prestige and the honor</big></b></p><img src = "http://i.nextmedia.com.au/Galleries/20110707030945_Horse21.jpg"><script>function show1(){document.getElementById("myform").innerHTML = show();}function show(){var a = document.forms["console"]["fname"].value;if(a == "" || a == null){alert("please enter a name ");return false ;}if(a!= "" || a!= null){document.body.style.backgroundColor="red";return false;}}</script><center><form name = "console" id="myform" onsubmit="show(); return false ;" ><input type= "text" name="fname" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form></center></body></html>

Edited March 9, 2015 by hisoka

hisoka · March 9, 2015

I have some questions :

why you use window.error?

window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;

???

why you put your java script code in different parts instead of putting it in one part <script> </script>???

what is the difference between :

this document.getElementById('btn1').onclick = fnd;

and this document.getElementById('btn1').innerHTML = fnd();

???

what does this mean Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d) ??

why you used :

window.onload ??

could you answer all these questions?

hisoka · March 10, 2015

"You aren't writing c code. You are writing JavaScript code which modifies the document it is executing in"

you wrote a script in which there is a visual content which was overwritten by a textual content through a function that was triggered by an event . all happened inside the script itself . So I cannot see what is new in this :)

in C or C++ you cannot overwrite a content by another content in the same code !!?

Edited March 10, 2015 by hisoka

davej · March 10, 2015

Even if C was modifying or overwriting a document it isn't normally modifying its own source document. What I was try to demonstrate is that document.write() has limited usefulness because it can only be used while the page is being rendered or it will destroy the entire document.

To answer your other questions it would be best if you simply modify my page and see what each item does.

Ingolme · March 10, 2015

I do question the need to have a window.onerror handler, since all that information is available in the Javascript console.

davej · March 10, 2015

For common little typo errors I never need to open the debugger.

justsomeguy · March 10, 2015

I never develop with the debugger closed. Do you remove that when you publish the site?

hisoka · March 10, 2015

"why you put your java script code in different parts instead of putting it in one part <script> </script>???"

When the <script> tag is used many times , the browser will execute the separated scripts one by one in order . Like cooking the first ingredient then once it is finished , going to the next until it is cooked then to the third.. The execution will be done in a different time . However when the separated scripts are gathered under one <script> , the execution will be simultaneous . Like putting all the ingredients together and cooking them in the same time. So logically , putting all the script under one <script> tag is better than using separated scripts for the sake of speed and efficiency and to avoid errors and for beauty too

<!DOCTYPE html><html><body><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = fnd;}document.write("this text is inserted into the document");function fnd(){document.write("writing this text overwrites the entire document");}</script><input type="button" id="btn1" value="Enter"/><hr/><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2012/04/doug-crockford-image.jpg" alt="dc"/></body> </html>

is the same as this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = fnd;}</script></head><body><input type="button" id="btn1" value="Enter"/><hr/><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2012/04/doug-crockford-image.jpg" alt="dc"/><script>document.write("this text is inserted into the document");function fnd(){document.write("writing this text overwrites the entire document");}</script></body> </html>

"what is the difference between :

this document.getElementById('btn1').onclick = fnd;

and this document.getElementById('btn1').innerHTML = fnd();

???"

this:

<!DOCTYPE html><html><body><script>function show1(){document.getElementById("myform").innerHTML ="sparta is destroyed";}</script><p id="myform">This is sparta</p><input type="button" value="Enter" onclick="show1();"></body> </html>

change the inner content of a html element

<!DOCTYPE html><html><body><script>function show1(){document.getElementById("myform").innerHTML =show();}function show(){document.write("sparta is destroyed");}</script><p id="myform" >this is sparta</p><input type="button" value="Enter" onclick="show1();"></body> </html>

the same but through a function

<!DOCTYPE html><html><body><script>function show1(){document.getElementById("myform").onclick =show();}function show(){document.write("sparta is destroyed");}</script><p id="myform" >this is sparta</p><input type="button" value="Enter" onclick="show1();"></body> </html>the same as the script above

"why you used :

window.onload ??"

this : window.onload = init is equal to this onclick="init();" both they call a function when the enter button is clicked

"what does this mean Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d) ??"

it shows an error if there is an error in a specific line or column of the script

hisoka · March 10, 2015

'use strict';

tells that the JavaScript should be executed in a strict mode . I call it "intolerant mode" .

in this link : http://www.w3schools.com/js/js_strict.asp

it is written

Using a variable (property or object) without declaring it, is not allowed:

"use strict";x = 3.14; // This will cause an error (if x has not been declared)

Deleting a variable, a function, or an argument, is not allowed.

"use strict";x = 3.14;delete x; // This will cause an error

Defining a property more than once, is not allowed:

"use strict";var x = {p1:10, p1:20}; // This will cause an error

Duplicating a parameter name is not allowed:

"use strict";function x(p1, p1) {}; // This will cause an error

The problem is when I put these same script in JavaScript editor or notepad save them as HTML then run them no errors are shown . Why ?

and how to make JavaScript strict show me the errors???

hisoka · March 10, 2015

Thank you Davej I learned many thing from your script . Please if I am wrong in all what I wrote or some of it then please correct me

davej · March 10, 2015

To invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements.

See...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Also for onerror to execute it must be in a script block or file that loads before the other code.

I would not leave the onerror block in the code for a serious website, but it can be helpful for something like a club website where the owners might create typos of their own.

justsomeguy · March 10, 2015

the same but through a function

No it's not, now you're using document.write. That's going to erase the page.

this : window.onload = init is equal to this onclick="init();" both they call a function when the enter button is clicked

No, one of them is a load handler and one of them is a click handler. Only one of them runs on click.

The problem is when I put these same script in JavaScript editor or notepad save them as HTML then run them no errors are shown . Why ?

Make sure you're invoking strict mode correctly and running it in a browser that supports it.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

hisoka · March 11, 2015

When I wrote this and this are the same or equal , I mean in their result not in themselves . Their result is the same but they are totally different . I will try to be more precise in the future and I hope I will succeed in being so . Please continue like this :Please correct me in every details . Please give me all what you know .. All .

I have some questions

1)

document.getElementById('btn1').onclick = fnd;window.onload = init;

fnd and init are both functions so why we did not write them like this

document.getElementById('btn1').onclick = fnd();window.onload = init();

??

2)

as for strict mode , I used both this and this :

use strict is in before any other statement inside the <script></script>

but nothing happened when I ran both scripts . No errors where shown

I have mozilla firefox version 36.0.1

any idea?

justsomeguy · March 11, 2015

Their result is the same but they are totally different

But the result is not the same. Using document.write has several side-effects that using innerHTML does not have.This line:window.onload = init;Tells it to assign the function init to the window.onload handler. This line:window.onload = init();Tells it to execute the function init and assign the return value of that function to the window.onload handler. If init does not return a function then that will be a problem.

but nothing happened when I ran both scripts . No errors where shown

Are you sure about that? The code you posted contains a syntax error, it wouldn't execute the code at all because of that. But it would show the syntax error.

javascript debugger

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in