خواندن ۲ دقیقه·۵ سال پیش

ساخت کد ادیتور با جاوا اسکریپت

سلام دوستای ویرگولی:)

امیدوارم حالتون خوب باشه

این گل تقدیم به شما?

امروز میخواهیم کد ادیتور با جاوا اسکریپت بسازیم

ایشوندجاوا اسکریپت هستن بهشون نیاز داریم:)

این کد ادیتور ساده اس ولی امکان اجرای هم زمان کد ها و ترکیب css, html, js را داراست

ابتدا سه تا فایل بسازید::

index.html

style.css

app.js

حالا باید کد هاشو وارد کنیم

این قطعه کد رو در فایل index.html بزارید::

<html>
  <head>
    <title>Code Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <textarea id="html" placeholder="HTML"></textarea>
    <textarea id="css" placeholder="CSS"></textarea>
    <textarea id="js" placeholder="JavaScript"></textarea>
    <iframe id="code"></iframe>

    <script type="text/javascript" src="app.js">
  </body>
</html>

کد های بالای برای هماهنگ کردنه:)

حالا کد های css رو در فایل style.css بزارید:::

body {
  text-align: center;
}

textarea {
  width: 32%;
  float: top;
  min-height: 250px;
  overflow: scroll;
  margin: auto;
  display: inline-block;
  background: #f4f4f9;
  outline: none;
  font-family: Courier, sans-serif;
  font-size: 14px;
}

iframe {
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;
}

کد های بالایی برای اندازه و مشخصات صفحه است..

برای کامل شدن حالا کد های جاوا اسکریپت رو در فایل app.js بگزارید::

function compile() {
  var html = document.getElementById("html");
  var css = document.getElementById("css");
  var js = document.getElementById("js");
  var code = document.getElementById("code").contentWindow.document;

  document.body. = function() {
    code.open();
    code.writeln(
      html.value +
        "<style>" +
        css.value +
        "</style>" +
        "" +
        js.value +
        ""
    );
    code.close();
  };
}

compile();

خب :)

حالا فایل ها رو در یه جا ذخیره کنید و فایل index.html رو با مرورگرباز کنید

اینم از پیش نمایش::

این کد ادیتور قابلیت save و open رو نداره به امید خدا به زودی کامل ترش میکنم :)

برای دانلود سورس کد کلیک کنید :)

این اموزش تمام شد !

متشکرم از شما:)

کد ادیتوراموزش جاوا اسکریپتجاوا اسکریپت

سیدمهدی

فیزیک ده ها فرمول دارد ، اما موفقیت فقط یک فرمول دارد :تلاش+امید 1385/6/16

شاید از این پست‌ها خوشتان بیاید

سیدمهدی

خواندن ۲ دقیقه·۵ سال پیش

ساخت کد ادیتور با جاوا اسکریپت

سلام دوستای ویرگولی:)

امیدوارم حالتون خوب باشه

این گل تقدیم به شما?

امروز میخواهیم کد ادیتور با جاوا اسکریپت بسازیم

این کد ادیتور ساده اس ولی امکان اجرای هم زمان کد ها و ترکیب css, html, js را داراست

ابتدا سه تا فایل بسازید::

index.html

style.css

app.js

حالا باید کد هاشو وارد کنیم

این قطعه کد رو در فایل index.html بزارید::

<html>
  <head>
    <title>Code Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <textarea id="html" placeholder="HTML"></textarea>
    <textarea id="css" placeholder="CSS"></textarea>
    <textarea id="js" placeholder="JavaScript"></textarea>
    <iframe id="code"></iframe>

    <script type="text/javascript" src="app.js">
  </body>
</html>

کد های بالای برای هماهنگ کردنه:)

حالا کد های css رو در فایل style.css بزارید:::

body {
  text-align: center;
}

textarea {
  width: 32%;
  float: top;
  min-height: 250px;
  overflow: scroll;
  margin: auto;
  display: inline-block;
  background: #f4f4f9;
  outline: none;
  font-family: Courier, sans-serif;
  font-size: 14px;
}

iframe {
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;
}

کد های بالایی برای اندازه و مشخصات صفحه است..

برای کامل شدن حالا کد های جاوا اسکریپت رو در فایل app.js بگزارید::

function compile() {
  var html = document.getElementById("html");
  var css = document.getElementById("css");
  var js = document.getElementById("js");
  var code = document.getElementById("code").contentWindow.document;

  document.body. = function() {
    code.open();
    code.writeln(
      html.value +
        "<style>" +
        css.value +
        "</style>" +
        "" +
        js.value +
        ""
    );
    code.close();
  };
}

compile();

خب :)

حالا فایل ها رو در یه جا ذخیره کنید و فایل index.html رو با مرورگرباز کنید

اینم از پیش نمایش::

این کد ادیتور قابلیت save و open رو نداره به امید خدا به زودی کامل ترش میکنم :)

برای دانلود سورس کد کلیک کنید :)

این اموزش تمام شد !

متشکرم از شما:)

کد ادیتوراموزش جاوا اسکریپتجاوا اسکریپت

سیدمهدی

فیزیک ده ها فرمول دارد ، اما موفقیت فقط یک فرمول دارد :تلاش+امید 1385/6/16

شاید از این پست‌ها خوشتان بیاید