[B! JavaScript] [2ページ] nemusgのブックマーク

アドレスバーのURLを書き換える - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

nemusg 2016/05/05

JavaScript

リンク

整数を指定桁数に合わせて0で埋めるスクリプト。 | Almondlab

PHP、JavaScript、ActionScriptそれぞれで、整数を指定桁数に合わせて0で埋めるスクリプトのメモです。いずれの場合も一つ目の引数に対象となる整数、二つ目の引数に桁数を渡しています。 JavaScriptとActionScriptは型指定の有無の違いだけで、同じスクリプトで動作します。 PHP <?php $result = convertNum(1234, 5);//01234 function convertNum($num, $figures) { $str = sprintf("%0".$figures."d", $num); return $str; } ?>

nemusg 2016/05/04

JavaScript

リンク

「JSオジサンに怒られない脱初心者JavaScript」に行ってきました - WEBデザイナー2年目

html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました！ javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話＋質問タイムって感じでした。一つずつ、つらつら書いていきます（※長文注意ですぞ！） 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。レビューでみているポイント「バグがない」という言葉の定義関数名のつけ方ステップアップするために必要なこと印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。な、なんじゃそりゃー！初耳です。

nemusg 2015/11/11

JavaScript

リンク

javascript基礎特定の数値までのカウントアップを実装する方法 – How to implement a count-up to the target num. | Stronghold Archive

javascript基礎特定の数値までのカウントアップを実装する方法 – How to implement a count-up to the target num. どうもこんばんは。今回のtipsは【javascript基礎特定の数値までのカウントアップを実装する方法】です。基礎編という事でjavascript版とjQuery版をのせておきます。動作に関しましてはデモをお確認いただければ幸いです。 javascript HTMLはjavascript、jQueryともに共通です。 HTML <p id="cup"></p> javascriptの場合 var num = 0; var tgt = 500; var speed = 10; setInterval(function(){ if(num <= tgt){ document.getElementById("cup").in

nemusg 2015/09/19

JavaScript

リンク

CountUp.js

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting w

nemusg 2015/09/18

リンク

jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ

MiniGrid -GitHub デモページ、アニメーションのデモレスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページパネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。

nemusg 2015/09/15

JavaScript

リンク

JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

nemusg 2015/09/14

JavaScript

リンク

Google流 JavaScript におけるクラス定義の実現方法

目次 2019年追記はじめにクラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーンプロパティ: prototype Google Closure 流のクラスの実現方法の概要クラスの宣言とコンストラクタの定義メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ親クラスのコンストラクタの呼び出しメソッドオーバーライドと親クラスのメソッドの呼び出し多重継承 abstract, interface inherits の実際のコード良くないクラス実現方法 ES6 のクラス 2019年追記この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを

nemusg 2015/08/10

JavaScript

リンク

JavaScriptでURLをちょっと賢く解読する。 CodingFirst

C言語、Perl、JavaScript、最近はPythonも。出来上がったものより、プログラムを書くことが好き。あと、スイーツ。ちょっと賢くURLデコードする。UTF-8限定だけど。 Googleの検索結果とかでURLに %E3%81%AD%E3%81%8E などと、 %xxな文字列になっている事があるが、 URIの規則を定める RFC 3986 では、URIにASCIIの非予約文字[1]以外の文字データを用いる場合には、「%xx」（xxは16進数）という形でコードを表記することが定められている。 URLエンコード - Wikipedia という事で、JavaScriptで元の文字に戻すには、decodeURIすればいい。 decodeURI('%E3%81%AD%E3%81%8E'); //=>'ねぎ' でもエラーに弱くて、例えば、 decodeURI('%E3%81%AD%E3%81

nemusg 2015/08/02

JavaScript

リンク

JavaScriptでSNSのカウンターを取得する | バシャログ。

どうもfujiharaです。連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、カウント数のみをJSONで取得する仕様に変更　についての実装方法を説明します。流れたいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。はてブ数の取得はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='

nemusg 2015/07/10

リンク

UserAgent を用いた IE11 の判別方法

（2015/01/04 Windows 10 Technical Preview の useragent を追記）（2013/10/22 jQuery プラグインでも判定できるようにしました。元記事はこちら。） Internet Explorer 11 から UserAgent 文字列が変更になるそうです（詳細はこちら）。その結果、今まで MSIE を使った Internet Explorer の判別が出来なくなります。これでは困るので、従来の IE も含めて IE であることを判別できる JavaScript を以下で記載します。 IE11 の UserAgent サンプル Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko Mozilla/5.0 (Windows NT 6.3; WOW64; Tr

nemusg 2015/07/09

リンク

画像にウォーターマークを付与出来るスクリプト・「watermark.js」 - かちびと.net

watermark.jsは画像にウォーターマーク（透かし）を付与出来るスクリプトです。画像の上にCSS等でレイヤーを重ねるのではなく、指定した画像に直接任意の画像やテキストを透かしとして加え、データURIスキームで出力されるので単純な右クリックによるダウンロードを防ぐだけなら割と便利なんじゃ無いかなぁと思います。本スクリプトは他ライブラリに依存せず、単独で動作します。ライセンスはMIT。 watermark.js

nemusg 2015/05/22

JavaScript

リンク

Chrome 43からcutおよびcopyコマンドが使えます - Qiita

Chrome 43から、選択されたテキストをクリップボードにコピーしたり切り取ったりする機能が利用可能になります。Chrome 拡張機能からは前から使うことができていましたが、Chrome 43からは普通のWebページからも利用することが可能です。HTML5Rockの更新情報にてアナウンスされていましたので、早速日本語訳してみました。ぜひご活用ください。原文: http://updates.html5rocks.com/2015/04/cut-and-copy-commands Cut and Copy Commands IE10やそれ以上のバージョンは、Document.execCommand()メソッド（ https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI

nemusg 2015/04/16

JavaScript

リンク

最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ

最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。

nemusg 2015/04/06

JavaScript

リンク

JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();

気になったら即調べるが吉、ということで。数値→文字列 var num = 123; // わかりやすい String(num); // "123" num.toString(10); // "123" // この用途では使ったこと無い num.toFixed() // "123" // なるほど num + ''; // "123" 文字列→数値 var str = '123'; // わかりやすい Number(str); // 123 parseInt(str, 10); // 123 parseFloat(str); // 123 // なるほど str - 0; // 123 str * 1; // 123 str / 1; // 123 // すっきりやけど知らん人は読めない +str; // 123 -(-str); // 123 ~~str; // 123 str&-1;

nemusg 2015/02/13

JavaScript

リンク

JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD

この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ

nemusg 2015/02/03

JavaScript

リンク

[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,

nemusg 2014/09/08

JavaScript

リンク

C3.js | D3-based reusable chart library

Comforta ble C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th

nemusg 2014/08/28

JavaScript

リンク

[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こうこんにちは、@yoheiMuneです。ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。目次ブラウザのレンダリングの仕組みこの章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]