テキスト入力欄の文字数をリアルタイム表示する方法 - JavaScript TIPSふぁくとりー
《2017年6月6日 3:00 PM 公開/更新》 テキスト入力欄の文字数をリアルタイム表示する方法 [入力フォーム] テキストエリアに入力された文字数をカウントして、JavaScriptでリアルタイムに画面上に表示する方法を解説。テキスト入力欄のvalueプロパティの中身を引数として受け取って、その文字数をカウントした結果を指定された要素に出力する関数を作ります。わりと簡単です。 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する 文字数カウンタ付きテキストフォームを作るHTML＋JavaScriptソース 複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する 少し汎用的な文字数カウンタを作るJavaScriptソース 備考 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する JavaScriptを使うと、テキストエリアなどの文字列入力フォー
サクラエディタ用JavaScript強調キーワード＆ヘルプファイル
強調キーワードとヘルプ 強調キーワードとはメソッドなどを色分け表示する機能のことで、シンタックスハイライトとも呼ばれます。 サクラエディタには JavaScript.kwd というファイルが同梱されていますが、少し古いので新しいファイルを作りました。 本ファイルは少し特殊な収録方法となっています。 上位のオブジェクトがある場合、それを含むものと含まないもの両方を収録しています。 例えば、Math.log は、Math.log と log の両方を収録しています。 log だけでなく Math.log も載せることで、Math の入力補完を行うと、Math にどういうプロパティやメソッドがあるか分かります。 また、log には console.log もあります。 同名のプロパティやメソッドは1つにまとめ、log のヘルプを見ると Math.log と console.log 両方の説明が表
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
JavaScriptでページ内の特定の位置に文字を出力する (JavaScript プログラミング)
JavaScriptでページ内の特定の位置に文字を出力するコードを紹介します。 概要 JavaScriptでページ内の特定の位置に文字を出力する場合には、出力する位置にIDを設定したタグを配置し、IDをキーにしてタグの要素を取得します。取得したオブジェクトのinnerText, innerHTMLプロパティに値を代入することで、ページ内の指定した位置に文字列等を出力できます。 IDからそのIDが設定されている要素を取得するには、document.getElementById()メソッドを利用します。 プログラム例 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html
Javascriptで音を鳴らす - yamblog
夏休みだし，javascriptでも勉強しようかと思ってゲームを作成中． （物理演算ブロック崩し みたいなの） そこで音を鳴らすのに苦労したので調査メモを残す． chromeとfirefoxで確認 方法1 divを使う 参考：Javascript play sound (wav, MP3, etc) in one line | Relentless Simplicity :: Bill Harding's Tech BlogRelentless Simplicity :: Bill Harding's Tech Blog 一番簡単で，大抵の場所で動く方法． htmlファイルに <div id="sound_element"></div> と記述し，javascriptから document.getElementById("sound_element").innerHTML= "<embed
JavaScript/ウィンドウ/自動でスクロールする - TAG index
メインウィンドウのソース <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(url){ window.open(url, "window_name", "width=300,height=200,scrollbars=yes"); } // --> </script> </head> <body> <p><a href="example_sub12.html" target="window_name" onClick="disp('example_sub12.html')">サブウィンドウを開く</a></p> </body> </html> サブウィンドウのソース <html> <head> <title>TAG index Webサイト</ti
jQueryで読み込んでから処理を開始 - Qiita
何で読み込み完了後に処理を行うのか。 ブラウザは、HTMLを読みながら基本的に上から順に処理していく。 なので、scriptが先に書かれていて、HTMLのパーツ(DOM要素という。<input type="text">とか)の読み込みが終わっていないと、エラーを出してしまう。 こんな感じ。 <html> <head> <script> document.testform.textbox.value="hoge"; </script> </head> <body> <form name="testform"> <input type="text" name="textbox" value="" /> </form> </body> </html> <html> <head> <script> window.onload = function () { document.testform.te
【YQL API利用】JavascriptでRSSを読み込んで表示する方法【2017年】
【YQL API利用】JavascriptでRSSを読み込んで表示する方法【2017年】投稿 : 2017-01-31更新 : 2019-03-17 追記：2019/03/17 2019/01に、YQL APIが終了したようです。この方式はもう使えません。 追記：2017/09/16 ・Yahoo!ニュース AOSSL対応によるURL変更のお知らせ ・Yahoo!ニュース - RSS yahooニュースのRSSが、2017/03頃から変更になったようなので、それに合わせて修正しました。 rssの中身（構造）は同じなので、RSSのURLを変更しただけです。 https://news.yahoo.co.jp/pickup/rss.xml サンプルでは、YahooニュースのRSSを読み込みます。javascriptの場合はjson形式のほうが簡単なので、xmlからjsonに変換してくれるサービス
YQLでブログのRSSをJSONで取得して、新着として表示する - 仙台 Ruby Vim JavaScript フリーランスプログラマ
YQL Consoleで取得したいブログのRSSを、SQLっぽい構文で入力して確認してみます。 このブログのRSSで確認してみました。JSONで欲しいので、JSONにチェックを入れて TESTをクリック。 あ、*ではなく、titleとlinkだけ取ってます。 query.results.itemで一覧を取得できてますね*1。 後はそれを使って表示するだけです。 <script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function makeWhatsNewLiElement(item) { return "<li><a href='"+ item.link + "'>" + item.title + "</a></li>";
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
