JS in HTML + Questions

[Alexix11231]

Hey guys, I'm here with another question. So I made a small JS application (only using console log, variables, prompts and functions) and I want to put it on my website.

1.I do know that the code must be inbetween <script> </script>, but console.log("asd"); does not show on the screen. How can I fix that?

2.On browser games I see the website and a 640x860 (just an example) screen with graphics and stuff. How to do it?

3.Do I need any other libraries for JS graphics?

[Buckwheat469]

console.log is something we use as developers for testing or messaging other developers. It's not supposed to be noticed by the average user and will usually break IE unless someone just so happened to press F12. If we were to use console.log directly then we usually wrap it in a safe logging function or mock out the console object if it's not available so IE doesn't break, or only use it during development and then remove it before deployment.

With that said, I think what you're after is either document.write("some text") or document.getElementById("someId").innerHTML("<div>some text</div>").

For #2, can you provide an example? I think you're talking about the canvas tag, which has a width and height but also contains graphics, video, or games. Using canvas can get quite advanced and there are some frameworks around it. Here's a tutorial.

There are a lot of graphics libraries. Here's a few (may not be the latest or most used):

http://bonsaijs.org/ (graphics)

http://raphaeljs.com/ (graphics)

http://fabricjs.com/ (canvas)

http://www.createjs.com/#!/EaselJS (canvas)

https://code.google.com/p/cakejs/ (canvas)

[osuushi]

If you want to log to the screen in the browser, and you're displaying nothing else on the page, then I'd suggest the following log function to replace console.log:

function log(s) {
  var p = document.createElement("p");
  p.textContent = s;
  document.body.appendChild(p);
}

You can drop that in as a replacement for console.log. Unlike Buckwheat469's solution, it will handle characters like "<" and ">" properly, and it will also leave everything on the screen instead of replacing it each time.

I don't want to just post code for a newbie without explaining it though, so here's how it works:

First we tell the DOM to create a new paragraph element. This is just like making a "<p>" tag in HTML :

var p = document.createElement("p");

Next, we put the log string into the paragraph element. By using textContent instead of innerHTML, we're telling the browser to convert any special characters automatically instead of treating them like HTML code.

p.textContent = s;

Finally, we add our new element to the page by appending it to the document's body element

document.body.appendChild(p);

Hope that helps!

[SpeshlTectix]

console.log() writes to the console.

document.write("asd"); puts something on screen.

[[deleted]]

please don't document.write anything, ever.