JavaScript | replace()で複数の文字列を全て置き換える方法
JavaScriptのreplace()で複数の文字または文字列を全て一括で置き換える方法の紹介です。 指定の文字列をひとつ置き換える 最初に見つかった指定文字列または文字をひとつだけ置き換える場合は正規表現を使わずに実装可能です。 サンプルでは最初に見つかった「aaa」だけが「ccc」に置き換えられていることが確認できます。 let text = `aaa aaa aaa`; text = text.replace('aaa', 'ccc'); //ccc aaa aaa 指定の文字列を全て置き換える 特定の文字列または文字を全て置き換えるには正規表現と正規表現の「gオプション」を使った実装方法が簡単です。 正規表現では「gオプション」を指定することで対象の文字が複数回含まれている場合、その全てを置き換える事が可能です。 let text = `aaa aaa aaa`; text =
[JavaScript] 要素にclassを追加・削除する（classList） – コピペで使える JavaScript逆引きリファレンス
JavaScriptで、要素にclassを追加・削除するサンプルです。 サンプルソース 例）要素にclassを追加・削除する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function test(){ var obj = document.getElementById("dv1"); //要素に設定されているclassの一覧を取得する var list = obj.classList; console.log(list); //要素にclass="hoge"を追加する obj.classList.add("hoge"); console.log(obj.classList); //要素からclass="cs2"を削除する obj.classList.
Aタグでサブミットさせない方法 - OKWAVE
jQueryのイベントに引数を渡したい 例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか？ 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false
JavaScriptのconfirmメソッドで確認ダイアログを作成しよう！ - プロエンジニア
1. confirm メソッドの基本的な使い方 1.1. シンプルな確認ダイアログを表示する JavaScriptの「confirm メソッド」は、確認ダイアログを表示するメソッドです。ボタンをクリックすると確認メッセージと「OK」、「キャンセル」のボタンが表示されます。早速HTMLコードとJavascriptを記述してみましょう。 「confirm1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。 ●confirm1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Introduction to JavaScript</title> </head> <body> <h1>JavaScript のconfirm メソッド</h1> <p><bu
window.onloadとjQueryの$(document).ready等の比較
Comparison of window.onload and jQuery's $(document).ready B! 39 0 0 0 JavaScriptでページを読み込み後に何かを行いたいときは window.onload = function()を使ったり、jQueryを使っていれば $(document).ready(function())を使ったりしますが、 これらはちょっと違うものです。 特にjQuery無しで$(document).ready(function)的な事をするのが ちょっと面倒ですがその辺について。 window.onload $(document).ready jQuery無しで$(document).readyな呼び出しをする onload時に行う物を複数登録する 実行される順序 window.onload window.onloadメソッドはonlo
JavaScriptでディープコピーを実現するための最もシンプルな方法
var user = {name:"Bob", friends:["Alice", "Michael"]}; // deep copy var copiedUser = JSON.parse(JSON.stringify(user)); // Test copiedUser.friends.push("Charlie"); console.log(user); // -> {name:"Bob", friends:["Alice", "Michael"]} console.log(copiedUser); // -> {name:"Bob", friends:["Alice", "Michael", "Charlie"]} 非常に単純な話で、JSONオブジェクトはシリアライズ可能なので、シリアライズしてからデシリアライズすれば凄く簡単にオブジェクトのディープコピーが作れます。これは別の言語
input type="file" multiple で夢の複数ファイルをアップロード | kazumich.log
input type="file" multiple で夢の複数ファイルをアップロード a-blog cms でブログを書いていて面倒なのが複数の画像ファイルを並べたい時だと思う。これまでのHTMLというかINPUTタグ(type="file")では、1つのファイルしか選択する事ができなかったが、HTML5のフォームの拡張で複数ファイルの選択ができるようになったようだ。それがmultiple属性というヤツ。 今まではFlashというか.swfの機能を利用して複数のファイルをアップロードさせる機能を実現させるような事も出来ていましたが、変更する部分が多くなり実現が大変だろうという事で見送っていました。 SWFUpload News | SWFUpload SWFUpload v2.2.0 Demos 複数のファイルを選択する multiple 属性 いい時代になりましたね。HTML5で対応し
ファイル情報の取得－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] ファイル情報の取得 このページでは、読み込んだファイルのファイル名やサイズを取得する方法について見ていきます。 ファイル情報を読み込むサンプル ファイル情報のうちファイル名の取得方法は、最初のページで見ることができました。 サイズとファイル形式も同じようにして取得できます。 event.target.files[].name ファイル名を取得します。 event.target.files[].size ファイルサイズを取得します。単位はバイトです。 event.target.files[].type ファイルのMIMEタイプを取得します。 以下のサンプルでは、ファイル選択ボタンで選択したファイル（複数可）のファイル名・ファイルサイズ・ファイル形式を調べ、 divタグ内に書き出すようにしています。 ファイル情報を取得するサンプルスクリプト
JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！ | 自作PCテクニカルセンター
JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！2016年02月21日 [JavaScript] クライアントサイドで軽くユーザエージェント(UA)を判定したい時に JavaScriptを使うと便利ですが、これだ！という情報がヒットしないのでまとめてみました。 スクリプト上でwindow.navigator.userAgentを使うことでクライアントPCのブラウザを簡単に取得できます。 userAgent関数によるブラウザ判定 // ブラウザのUAを小文字で取得 var userAgent = window.navigator.userAgent.toLowerCase(); // 一般的なブラウザ判定 if (userAgent.indexOf('msie') != -1) { /* IE. */ return 'ie'; } else
JS：setInterval()やsetTimeout()で指定する関数に引数を渡す│JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
久しぶりにJavaScriptを書いていて少し迷ったところ。 setInterval()やsetTimeout()についてです。 var sample = setInterval( intervalEvent, 1000); 例えば上記のようなsetInterval関数で、 実行する関数「intervalEvent」に引数を渡したい場合、 var sample = setInterval( intervalEvent(data1), 1000); と普段通り書いても上手くいきません。 次のように書くことで引数を渡すことができます。 1.無名関数内で改めて関数実行 無名関数の中でなら普段通りの記述ができます。 var sample = setInterval( function(){ intervalEvent(data1); }, 1000); 2.文字列で指定 「'intervalEve
setTimeoutでループ処理をする
setTimeoutでループ処理をする書き方をよく忘れるのでメモ。 サンプルコード JavaScript var count = 1; function counter() { // 実行する処理 console.log(count); count += 1; // 3秒後にcounter() を実行 setTimeout(counter, 3000); } counter(); setTimeoutでループ処理のデモページ
JavascriptでURL文字列中のクエリパラメータを削除する - やったこと
GETメッセージのうしろにクエリパラメータとかが付きますよね。 「http://hogege.jp/check.php?age=98&weight=120&height=148」 みたいな感じで「？」の後ろに付くやつです。 このパラメータをJavascriptで削除する方法です。正規表現で文字列置換しています。 var url = "http://hogege.jp/check.php?age=98&weight=120&height=148" var new_url = url.replace(/\?.*$/,""); これで「？」以降の文字列が削られて「http://hogege.jp/check.php」になります。 以上。
クリックされたリストの子要素のカスタムデータ属性を取得する | DriftwoodJP
ID を付与した ul リストの子要素のクリックを検知し、data-* attributes を取得する。 <ul id='show'> <li> <a data-isbn='978-4-7741-4223-4' href=''>Apacheポケットリファレンス</a> </li> <li> <a data-isbn='978-4-7741-4076-6' href=''>3ステップでしっかり学ぶMySQL入門</a> </li> </ul> 'use strict' const list = document.getElementById('show'); list.addEventListener('click', show, false); function show(event) { let target = event.target; alert(target.getAttrib
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeError: google.visualization is undefined
javascript:アップロード前のサムネイル表示をした後、任意の画像を削除したいです。
JavaScriptのsetTimeout()でコールバック関数に引数を渡す
[JavaScript]色々なディープコピー - Qiita![[JavaScript]色々なディープコピー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/77874e95b4389aae0738f94f1895e4bc800cb485/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTM0Mjk0JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDg3MTY0MTYyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTU1ODNlNjhhN2YzNTdlZTE5NDExYWUxNDU4ODNlMTZl%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc38934cea2e7068cd97b149d982505df%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFOCU4OSVCMiVFMyU4MCU4NSVFMyU4MSVBQSVFMyU4MyU4NyVFMyU4MiVBMyVFMyU4MyVCQyVFMyU4MyU5NyVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWM4Y2ZmOTc4MjRlMjRjMTI4N2Q2MGE5YjA3MGU5ZjJj%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrbmhyX18mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02MjU4M2Y4ZDViY2M1MjdlZjYzNmIzMTU5MThhMGQ4Mw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Debab203840e13aa212783374a633a2c8)
Welcome to m-bsys.com
javascriptで新規タブ/ウィンドウを作成する時の罠 - Qiita
javascriptでクリックした要素のタグ名を取得する方法 - Qiita
