+ 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 😊
6 Antworten
+ 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.
+ 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👍
+ 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? 😮
+ 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.
+ 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)
+ 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😊😊
Häufig solche Fragen?
Effizienter lernen, kostenlos:
