質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

3043閲覧

codemirrorの使い方について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/06 10:54

編集2022/01/12 10:55

現在codemirrorを使ったシステムを作成しようと考えているのですが
codemirrorの使い方に困っています

codemirrorに入力された文字の正誤判定の条件文を仕込みたいのですが、
うまくできません
どこにどのように仕込めばいいでしょうか
よろしくお願いいたします

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Git Tutorial Level1</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css"/> <script src="sample1-2.js"></script> <link rel="stylesheet" href="sample1-1.css"> </head> <body> <div class="container"> <h1 style="text-align: center; font-size=500%">sample1-2</h1> <hr style="margin-left: auto; margin-right: auto;"> <div style="text-align: center;">これはcodemirror勉強用です。</p> <div id="textarea2"> <p><span id="text">./a.out</span>と入力しましょう。</p> <span id="intro"></span> </div> <p>&nbsp;</p> <div><textarea id="editor_js" rows="20" cols="60"></textarea></div> <script type="text/javascript"> CodeMirror.fromTextArea(document.getElementById("editor_js"), { lineNumbers: true}); </script> <br> <br> </div> </div> </body> </html>
<script> var i = 0, commands = [ 'text', 'text1', 'text2', 'text3' ]; var intro = [ "textの説明", "text1の説明", "text2の説明", "text3の説明" ]; $("#textarea1 textarea").keypress(function () { var lastLine = (this.value).substr((this.value).lastIndexOf("\n") + 1); if (lastLine == $("#text").text()) { $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう<br>'); $("#intro").html(commands[i] + 'の説明: ' + intro[i]); i++; } }).change();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

質問者さんの実現したいことはこのように行うことができると思います。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css"> 7 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script> 9 <style type="text/css"> 10 hr { 11 margin-left: auto; 12 margin-right: auto; 13 } 14 15 .box { 16 text-align: center; 17 } 18 19 .sample1-2 { 20 text-align: center; 21 font-size: 500% 22 } 23 </style> 24</head> 25<body> 26<div class="container"> 27 <h1 class="sample1-2">sample1-2</h1> 28 <hr> 29 <div class="box">これはcodemirror勉強用です。</div> 30 <div id="textarea1"> 31 <p><span id="text">./a.out</span>と入力しましょう。</p> 32 <span id="intro"></span> 33 </div> 34 <p>&nbsp;</p> 35 <label><textarea id="editor_js" rows="20" cols="60"></textarea></label> 36</div> 37<script> 38 $(document).ready(function () { 39 var i = 0, commands = [ 40 'text', 41 'text1', 42 'text2', 43 'text3' 44 ]; 45 var intro = [ 46 "textの説明", 47 "text1の説明", 48 "text2の説明", 49 "text3の説明" 50 ]; 51 52 $("#text").text(commands[i]); 53 $("#intro").text(intro[i]); 54 55 var editor = CodeMirror.fromTextArea(document.getElementById("editor_js"), { 56 lineNumbers: true 57 }); 58 59 editor.on("change", function () { 60 var text = []; 61 for (var j = 0; j < (editor.lastLine() + 1); j++) { 62 if (editor.getLine(j) === commands[i]) { 63 i = i + 1; 64 editor.setValue(""); 65 $("#text").text(commands[i]); 66 $("#intro").text(intro[i]); 67 } 68 } 69 }); 70 }); 71</script> 72</body> 73</html>

投稿2017/03/07 22:15

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問