This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback 一般的に言うと、関数とは外部 (再帰の場合は内部) から 呼び出す ことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体 (function body) と呼ばれる連続した文で構成されます。値を関数に渡すことができ、関数は値を返すことができます。 JavaScript に
When writing Node.js or JavaScript applications, you sometimes need to embed multi-line strings in your code. It may be a snippet of HTML, a fragment of textual template, a piece of XML (remember XML?), or code in another programming language. JavaScript has no built-in way of representing multi-line strings. If you need to embed a longer non-JavaScript text in your application the natural options
本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがあります。 こういう場面で、「どうやればいいのん」と悩む方は少なくないようです。 このような場合にはイベントハンドラの onerror を利用すると便利です。 エラーハンドリングしたい対象のコードより先に呼ばれる位置で、次のようなコードをぺいっと貼っ付けておきましょう。 そうそう、try-catch している場合には onerror に引っかからないので、そういった場合には個別に呼び出してください。 window.onerror = function(errorMsg, fileName, lineNumber) { var er
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
1000 100000 1000000 のような数値に対して、 1,000 100,000 1,000,000 のように、3桁ごとにカンマを挿入する方法を解説します。 正規表現による方法 数値を文字列に変換し、正規表現で置換します。 var num = 1234; String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ); // 1,234 Perlなどの後読みをサポートする正規表現ならば、 String( num ).replace( /(?<=\d)(?=(\d\d\d)+(?!\d))/g, ',' ); のようにも書けるのですが、JavaScriptは後読みをサポートしないため、前述のようにする必要があります。 whileループによる方法 whileループで置換をくり返す方法もあります。しかしグローバルマッチの置換で処理で
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
書いてみるっていうか、わけあってPrototypeやらJQueryが使えないので仕方なくスクラッチ。 eventオブジェクトから発生源のオブジェクトを取得したいのだけど、IEとFireFoxで挙動が違う。 困ったもんだ。 下記のような場合 ① 特定のタグAにclick時のイベントを設定 ② イベント内でタグAの情報を取得したい ■ポイント1 IEとFIREFOXのイベント登録時の表記方法が違う IE: .attachEvent('onclick', function() {}, false); FireFox : addEventListener('click', function() {}, false); ■ポイント2 IEとFIREFOXの発生源オブジェクトの取得方法が違う IE: .window.event.srcElement.id FireFox : e.target.id コ
ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。 .loadを使う サンプルでnews.htmlの中の#news要素を読み込ませます。 $(function(){ $("button").click(function(){ $(".load").load("news.html #news"); }); }); $("button").click(function(){ 要素buttonをクリックしたときに命令が行われます。 $(".load").load("news.html #news"); セレクタで選んだ.loadの部分に news.htmlの#newsを読み込ませて表示しています。 別ページにある部分を読み込ませたいという時にも使えますよ。 .ajaxを使う サーバーからのリクエストやレ
《2017年5月27日 5:00 PM 公開/更新》 任意の要素(ブロックなど)の背景色を動的に変更する方法 [装飾・内容変更] JavaScriptを使って任意の要素の背景色をJavaScriptで動的に変更したい場合は、document.getElementById(‘対象ID名’).style.backgroundColorなどの記述方法を使うと簡単です。ウェブページ内に存在するボックス(ブロックレベル要素)でもインライン要素でも、あらゆる要素の背景色を自由に変更可能です。なお、getElementByIdメソッドで装飾対象を特定する場合は、あらかじめHTML側の対象要素にid名を振っておく必要があります。 特定のボックスの背景色をJavaScriptで動的に変更する方法 ボックスの背景色をボタンで動的に変更するサンプル ボックスの背景色をボタンで動的に変更するサンプルのソース 特定
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
2010年01月11日22:30 JavaScript onsubmitやonclickで処理を中断させる方法(return false) よく、リンクで onclick とか、フォームで onsubmit とかするじゃないですか。それで、今回もこんな感じのことをやろうと思ったんです。 テキストが空だったら警告を出して処理を中断する テキストが空じゃなかったらアクションを実行する 「onsubmit の返り値が false なら submit の処理が中断されるだろう」と思ってさくっとこんな感じに書いてみました。いたってシンプルです。 <script type="text/javascript"> function blank_check() { if (document.getElementById('name').value == "") { alert("ﾆｭｳﾘｮｸｰヽ(ﾟ∀ﾟ)ﾉ
買ったまま長いことツンドクだった jQuery Cookbookを最近パラパラと読んでいます。 発行が2年前ということもあり、updateの速いjQueryの解説書としてはもうそろそろ 2nd Editonが出てもおかしくない時期(※)ですので今買うのはあまりお勧めしませんが、basic部分では十分役に立つ内容です。 ※ただし2013年1月5日時点ではまだ2nd editionはオライリの近刊予告リストにも入っていません。 パラパラとめくっているうちに、いくつか次のような変数宣言があるのに気が付きました。 var $element = … var $item = … JavaScriptで、$で始まる変数宣言というのをみた記憶がなかったので「アレッ」と思いました。 一瞬、著者が perlのコードと書き間違えたのではないかと思ったのですが、同書をよく読むと次のような一説がありました。 “…
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
はじめに かつては、テキストの汎用フォーマットといえばXMLでしたが 最近はJSONで良いのでは、という所が多くなってきている気がします。 忘れない為のサンプルコードです。 構文解析 「Msxml2.DOMDocument」オブジェクトから、load又はloadXMLメソッドでDOM化出来ます。 ノードの取り方は、XPath形式selectSingleNodeや、タグ名getElementsByTagNameなどで取得出来ます。 // XML var xml = "<?xml version='1.0'?>\r\n" + "<root>\r\n" + " <aaa attr='rtta'>111</aaa>\r\n" + " <bbb>\r\n" + " <ccc>222</ccc>\r\n" + " </bbb>\r\n" + " <bbb>\r\n" + " <ccc>333</ccc
HTMLページのテキストボックスの中に消去ボタンを設置するコードを紹介します。 概要 テキストボックス内にボタンがあり、クリックすると入力されている文字がクリアされるテキストボックスがあります。 この記事では、テキストボックス内に入力文字をクリアするボタンを配置する実装コードを紹介します。 実装方針 テキストボックスの右側に広いpaddingを設定し、paddingのエリアにクリアボタンを配置します。 クリアボタンは今回の実装ではdiv枠を利用しています。 実装例1 コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="ClearButtonInTextBox.css" rel="stylesheet" type="text/css" /> <script type="t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く