Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Avatar
Petra Kleislová:25.11.2017 10:08

Ahojte,
zajímalo by mě jak je naprogramované toto:

www.w3schools.com/js/tryit.asp?…

respektive obecně, jak lze naprogramovat, že do jednoho rámečku píšu kód: HTML, CSS a JavaScript a v rámečku vedle se koukám na výsedky své práce.
Je k tomu potřeba něco sofistikovanějšího než jen ten HTML, CSS a JavaScript?

 
Odpovědět 25.11.2017 10:08
Avatar
Jenkings
Redaktor
Avatar
Odpovídá na Petra Kleislová
Jenkings:25.11.2017 10:25

V zásadě je to velice jednoduché. Levá polovina je nějaký input nebo textarea doplněný/á syntax highlighterem který ti obarvuje kód, a pravá strana bude jen DIV. na input/textareu si napojíš na událost OnChange svou funkci, která prostě jen převezme text (podle typu to bude buď vlastnost .value nebo .innerHTML) a vložíš ho do vlastnosti .innerHTML toho pravého DIVu.

Nahoru Odpovědět  +1 25.11.2017 10:25
Největší časovou náročnost má výpočet časové náročnosti..
Avatar
Petra Kleislová:25.11.2017 13:05

Moc děkuji za odpověď!! Dopracovala jsem se k níže uvedenému kódu. Řeší to většinu toho, co jsem chtěla. Jediné, co se nerealizuje, je ten script. Mám na mysli, když napíšu script do té textarea. Šlo by to nějak pořešit?

<!DOCTYPE html>
<html>
<body>

<textarea id = "textarea">
<!DOCTYPE html>
<html>

<head>
<style>
p {color: red;}
</style>
</head>

<body>
<h1>Nadpis 1</h1>
<p id="odstavec">Od­stavec. Odstavec. Odstavec. Odstavec.</p>

<script>
document.getE­lementById("od­stavec").inner­HTML = "My First JavaScript";
</script>

</body>
</html>
</textarea>

<hr>
<button onclick=fce();>Run­</button>
<div id="demo"></div>

<script>
function fce(){
var x = document.getE­lementById("tex­tarea");
document.getE­lementById("de­mo").innerHTML = x.value;
}
</script>

</body>
</html>

 
Nahoru Odpovědět 25.11.2017 13:05
Avatar
Jenkings
Redaktor
Avatar
Odpovídá na Petra Kleislová
Jenkings:25.11.2017 16:23

mělo by to jít přes eval()

Nahoru Odpovědět 25.11.2017 16:23
Největší časovou náročnost má výpočet časové náročnosti..
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:25.11.2017 16:40

Když na to klikneš pravým tlačítkem a dáš inspect element zjistíš že to mají vkládaný jako iframe ve kterým normálně spustí celej kód co zadáš vlevo. eval() se vyhýbej obloukem.

 
Nahoru Odpovědět  +1 25.11.2017 16:40
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Alexej Haman
Petra Kleislová:26.11.2017 11:23

Nevím, jak pracovat s tím <iframe>. Co napsat do src? A co do href u odkazu?

Run
<textarea id = "textarea"> <h1>Nadpis 1</h1> </textarea>
<iframe src="???" name="ifr"></i­frame>

 
Nahoru Odpovědět 26.11.2017 11:23
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Petra Kleislová
Jakub Žák:27.11.2017 11:48

Spíš, než zadávat src, to chceš plnit Javascriptem z toho input. Takže src nezadáš, vytvoříš jen iframe, ve kterém nic nebude a potom tam přeneseš ten obsah.

<html>
<head>
        <title>
                IFrame
        </title>
</head>
<body>
        <textarea id="my-input">Paste code here.</textarea>
        <iframe></iframe>
        <script>
                function updateMyFrame(inputIdentifier) {
                        var frameBody = window.frames[0].document.body;
                        var myInput = document.getElementById(inputIdentifier);
                        if (frameBody && myInput) {
                                frameBody.innerHTML = myInput.value;
                                return true;
                        }
                        console.error("Input element or iframe not found.");
                        return false;
                }

                document.getElementById("my-input").addEventListener('change', function () {
                        updateMyFrame("my-input");
                });
        </script>
</body>
</html>
Nahoru Odpovědět 27.11.2017 11:48
Kuba je ajťák. Buď jako Kuba.
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Petra Kleislová
Jakub Žák:27.11.2017 12:05

Update, přišel jsem na chybu, kvůli které mi nešel naplnit iframe vybraný dle id a kvůli které jsem to přepisoval na window.frames[0]­.document.body.

<body>
        <textarea id="my-input">Paste code here.</textarea>
        <iframe id="my-frame"></iframe>
        <script>
                function updateMyFrame(frameIdentifier, inputIdentifier) {
                        var frame = document.getElementById(frameIdentifier);
                        var frameBody = frame.contentDocument.body;
                        var myInput = document.getElementById(inputIdentifier);
                        if (frameBody && myInput) {
                                frameBody.innerHTML = myInput.value;
                                return true;
                        }
                        console.error("Input element or iframe not found.");
                        return false;
                }

                document.getElementById("my-input").addEventListener('change', function () {
                        updateMyFrame("my-frame", "my-input");
                });
        </script>
</body>
Nahoru Odpovědět  +1 27.11.2017 12:05
Kuba je ajťák. Buď jako Kuba.
Avatar
Milan Turyna
Redaktor
Avatar
Milan Turyna:14. března 16:51

Co jsem se koukal na nějaké takovéto live editor preview nebo nevím jak se tomu říká tak jsem viděl tento kod:

<!doctype html>
<head>
        <title>Try It Live Editor</title>
        <link type="text/css" href="/Content/Style.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
                $(function()
                {
                        var code = $(window.opener.document).find("#" + window.location.hash.slice(1)).html().replace(/<br>/g, "\n").replace(/<\/?span.*?>/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, " ");
                        $("#txtTest").text(code);
                        UpdatePreview();
                });

                function UpdatePreview()
                {
                        $("#divTest").empty().html($("#txtTest").val());
                }
        </script>
        <style type="text/css">
                body {
                        margin: 0;
                        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
                        font-size: 1rem;
                        background-color: #808080;
                        background-image: none;
                }

                tr.header h1 {
                        margin: 10px;
                }

                td.container {
                        width: 50%;
                        padding: 10px;
                        background-color: #fff;
                }

                footer#editor-footer {
                        background-color: #eee;
                        font-style: italic;

                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        color: gray;
                }

                footer #footer-content {
                        margin: 5px 10px;
                }
        </style>
</head>
<body>
        <table border="0" cellspacing="0" cellpadding="0" width="100%" id="tblContainer">
                <tr style="background-color: #eee;" class="header">
                        <td style="width: 50%;"><h1 class="introHeader">Live Preview Editor</h1></td>
                        <td style="width: 50%;"><h1 class="introHeader">Your Result</h1></td>
                </tr>
                <tr>
                        <td valign="top" class="container"><textarea id="txtTest" style="min-height: 450px; width: 100%; margin-top:15px;" onchange="UpdatePreview();" onkeyup="UpdatePreview();"></textarea></td>
                        <td valign="top" class="container"><div id="divTest" style="margin: 15px 0 0 20px;"></div></td>
                </tr>
        </table>

        <footer id="editor-footer">
                <div id="footer-content">
                        Edit the code above and see a live preview of your changes
                </div>
        </footer>

</body>
</html>

nezkoušel jsem ho jenom jsem to viděl když jsem se podíval do sourcecode tak třeba pomůže

 
Nahoru Odpovědět 14. března 16:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.