+ 10

How do CSS and JavaScript run without being referenced in the HTML?

Let me rephrase my question: How do online interpreters for web development work? I've noticed it is not necessary to link to the CSS and JS for it to run in the Code Playground. I've even seen web codes including only 1 line, say, the canvas tag. Are there 3 separate files or the 3 panes' codes (HTML/CSS/JS) are just injected in 1 doc? How do they communicate with one another? Thanks 😊

html css javascript interpreter online link reference webcodes

13th Sep 2017, 10:01 AM

Pao

6 odpowiedzi

+ 7

Code playground did the background work. It's linked together in one html file. Just check out the ChromeDev tool, in console pane, you would notice its console.log lists the Html file output, right after you've clicked the Run button.

13th Sep 2017, 10:20 AM

Calviղ

+ 7

@Calvin awesome! thanks for sharing the code from the console output 😊👌 that was one of my doubts, where was the script placed, if in the head or body, that explains so many things! Now I'm just wondering how SoloLearn's interpreter actually parses the code from the 3 panes, if it injects a string into an iFrame or what 😅 Thanks again Calvin, I appreciate your kind help👍

14th Sep 2017, 4:31 AM

Pao

+ 4

Thank you guys (Retr0, Calvin & MSD) for your nice answers! 😊👌 @Calvin, I can't check it on my phone but that is an interesting approach. So are you saying the way they are linked together in one HTML file it's done on the client side? 😮

13th Sep 2017, 10:29 PM

Pao

+ 4

For example, if I run the following simple test page https://code.sololearn.com/WXKudbmEbVx4/?ref=app Sololearn would compile it into the following Html: <!DOCTYPE html> <html> <head> <title>Test</title> <style>body { margin: 0; padding: 0; }</style><script>alert('alert fom JS pane.')</script></head> <body> <p>This is test page</p> </body> </html> (I copied it from console output) This is the actual html code that would be rendered on the Output pane of Code Playground. The Html output also explains why we need to put window.onload function (in JS pane) in order to access Javascript DOM functions, since it put the script code into head tag.

14th Sep 2017, 3:32 AM

Calviղ

+ 2

my theory: whenever u create a web code the js and CSS files automatically gets referenced the SL app dosn't show it though (may be it happens in background)

13th Sep 2017, 10:15 AM

_Retr0/-

+ 2

in my opinion css and javascript are link to html at the time of execution and i think at the run time all source code are converted together in the .exe extension file where the code of executable file is save and then by clicking run this file is directly connect and produce the output i may be wrong ifbany mistake forgive me @Paola😊😊

13th Sep 2017, 11:45 AM

MsJ