JavaScriptでbaseを指定して相対URLを絶対URLに変換する - 葉っぱ日記
メモがわり。 baseとなるURLを指定して相対URLを絶対URLに変換するには、ChromeやFireofxではURLUtilsを用いて以下のように書くことで簡単に実現できる。 var absolute = (new URL( "foo", "http://example.jp/bar/baz" ) ).href; // http://example.jp/bar/foo IEではURLコンストラクタはサポートされていないが、IE9以上ではDOMParserやcreateHTMLDocumentを使って現在のDOMとは分離したdocumentを生成し、その中に<base>要素を用いてbase URLを指定し、そのdocument内で<a>要素を用いて相対URLを絶対URLに変換するという手段によって相対URLを絶対URLに変換可能である。 function getAbsoluteUrl(
脱jQuery Tips Advent Calendar 2015 - Adventar
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
npmのあまり知られてない機能 10選 - from scratch
なんか最近Twitterとか職場でも「npmの機能でそんなのあったんだ」って言われること多いので、説明していきます。 ちなみにタイトルにとりあえず10選って書いたけど、あんまりたくさん思いついてないのに、10選って書いてしまったので最後の方は微妙かもしれません。 1. npm installは npm i でも同じことができる まぁ単純なショートカットですね。isntallとかtypoしてても空気読んでくれるんですが、短いほうがいいよねってことで。 # npm installって書くのも $ npm install socket.io #npm i って書くのも同じ $ npm i socket.io # ちなみに --saveは -S, --save-devは -D にできる $ npm i socket.io -S $ npm i mocha -Dショートカット小ネタ。 2. npm
JSで切り替えたページにBackで戻れるようにする - Qiita
ページを読み込み直さずにJavaScriptでタブ切り替えやページャーで表示を変えた場合、そこからリンクをクリック等で別のページに遷移した後にブラウザのBackやhistory.backで戻って来ると、初期表示のページになってしまいます。 そこで、HTML5で導入されたhistory.replaceState()を使って現在の履歴を表示状態を含むものに書き換えて、Backで遷移直前の表示状態に戻れるようにします。 以下、jquery.pajinateを使ったページングがあるページを例に挙げます。 <div id="link-list"> <ul class="content"> <li><a href="path/detail/page1.html">リンク1</a></li> <li><a href="path/detail/page2.html">リンク2</a></li> ・・・ <
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
uupaa's pure JavaScript module pattern - latest log
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
同僚の外国人プログラマ観察記録 - rinu's blog
概要 1ヶ月くらい一緒にお仕事している外国人プログラマさんを観察した記録です。 スペック 性別: 男性 仕事内容: うちの会社のプログラマは、ざっくり JS 等のフロントエンドと、 Java 等のバックエンドエンジニアにわかれているのですが、彼はどちらもやっているようです。 好きな食べ物: はちみつ たまに、くまさんのようにはちみつを舐めていました。 性格 彼はめんどくさがり屋です。 同僚の Windows ユーザの手伝いをしている時、 "C:¥Program Files¥..." みたいなパスを打ちながら、「めんどくさい。 ああ めんどくさい」 と 100回くらいつぶやいていました。 (普段の彼の環境は mac なので /usr/local/bin) パスワードを覚えるのもめんどくさいので 1Password で管理しているようです。 PC スペック マシン: Macbook Pro メ
JavaScriptで、もう連想配列の最後のカンマに悩まない！(※追記あり) · DQNEO日記
末尾に要素を増やしたい、または減らしたいときに問題が起こります 例えば" c : 3 "の行を単純に削除するとバグるので削除したいときに、" b: 2,"のカンマを削除する必要があります。 また、" d : 4 "を追加したいときに、" c : 3 "の後にカンマを入れる必要があります。 これは面倒くさいですね。 (エンバグについてはjslintなどのツールで防げばよいという指摘があったので修正しました。） より良いやりかた var x = { a : 1, b : 2, c : 3, dummy : null } このように最後に "dummy : null" というダミーの要素を書いておきます。 こうすれば、プロパティa, b, cはどれもカンマ付きで平等になります。 ぜひ一度試してみてください。 (もしかして常識だったらすみません。あとこの手法は for in で走査したいときはよく
関数の引数を増やすことでバグを生み出してしまう事がある。 という話 - latest log
(ε・◇・)з いつも JavaScript のローレベルな話題をお届けしています～ (ε・◇・)з このブログは今日も平常運転です～ さて、引数を1つしか持たない単純な関数は不便なのでしょうか? 便利なのでしょうか? このエントリでは、 引数を1つしか持たない単機能な関数は、Array#map などのイテレータと相性が良い イテレータと組み合わせて使える関数に、うかつに引数を追加するとバグを生み出してしまう事がある という例をご紹介します。 引数を1つしか取らない関数にできること 引数を1つしか持たず、与えられた文字列の先頭を大文字化する関数(例: toUpper)は、Array#map などのイテレータと組み合わせる事でスッキリと記述する事ができます。 function toUpper(str) { // @param String: // @return String: return
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」（デブサミ2012）で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏～大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
第3回 JSONPでのクロスドメインアクセス | gihyo.jp
JSONPの動作原理 前回はAjaxに存在するセキュリティモデルであるSame-Originポリシーを紹介し、そのSame-Originポリシーを迂回する方法とセキュリティについて見てきました。また、回避する方法の1つめとしてリバースProxyを用いた方法を紹介しました。リバースProxyを用いた方法ではセキュリティ的な問題点もありましたが、そもそもProxyサーバを用意しなければならないため、この方法は手軽に使うことはできませんでした。 そこで考え出されたのがJSONP（JavaScript Object Notation with Padding）という方法です。 それではまず簡単にJSONPについて説明します。 Ajaxで使われるXMLHttpRequestオブジェクトには前回説明したとおりSame-Originポリシーがありクロスドメインアクセスはできません。一方、SCRIPTタグ
TogetterのまとめをHTML化する。そのためのブックマークレットも。 - このブログは証明できない。
調べ物してて、途中経過をTwitterでつぶやいてました。それをTogetterでまとめて、非公開にして、自分用のメモにしてました。でも、一部の人には見せたい。Togetterでは、そのようなアクセスコントロールはできません。そこで、TogetterでまとめたツイートをHTML化して、サーバーに置き、Basic認証をかけておきました。 その手順。 TogetterでHTML化したいまとめを開きます。つぶやき件数が多い場合は、下の方の「残りを読む」ボタンをクリックして、つぶやきを表示しておきます。そして、このブックマークレットを実行。 javascript:(function(){$('body').html($.map($('a[href*=status]'),function(a,i){return $(a).attr('href');}).join('<br />'));})(); い
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
window.onhashchangeが便利すぎる - TYAGE EMOTION
昨日の記事 http://d.hatena.ne.jp/da-yoshi/20100722/1279811055 に対してコメントいただきました。 http://d.hatena.ne.jp/da-yoshi/20100722/1279811055#c1279857804 window.onhashchangeというそのものズバリのイベントハンドラがあるのですね。 IE8については、HTML5だけではなく、XHTML1.0やHTML4.01の標準モードでも動作しました。Firefox3.6でもChrome5でもSafariでも動作しますね。これなら十分採用できます。ちょっと簡単なHTML書いてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo
JavaScript 1.8 では無名関数が書きやすくなる。 - IT戦記
以下のブログで JavaScript 1.8 の新文法が紹介されています。 http://ejohn.org/blog/javascript-18-progress/ MDC の資料 -> http://developer.mozilla.org/en/docs/New_in_JavaScript_1.8 その中でも無名関数についての新文法が楽しいので紹介します。 // 関数の中に文が一つでその評価値を return してるような関数は function(x) { return x * x } // 以下のように書ける function(x) x * x たとえば [1, 2, 3, 4, 5].filter(function(x) x < 3); // [1, 2] element.addEventListener('click', function(e) e.stopPropargat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
(0, eval)('this')とは何なのか - Qiita
get next power of two in javascript - latest log
【追記：2018 01/25】配列の連結(concat vs Array.prototype.push.apply) - Qiita
