Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Petra Kleislová
Člen
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petra Kleislová
Neaktivní uživatel: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
25.11.2017 10:25
Neaktivní uživatelský účet
Avatar
Petra Kleislová
Člen
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petra Kleislová
Neaktivní uživatel:25.11.2017 16:23

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

Nahoru Odpovědět
25.11.2017 16:23
Neaktivní uživatelský účet
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
25.11.2017 16:40
Avatar
Petra Kleislová
Člen
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?

<a href="???" target="ifr">Run</a>
<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
27.11.2017 12:05
Kuba je ajťák. Buď jako Kuba.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:14.3.2019 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.3.2019 16:51
Neaktivní uživatelský účet
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.