Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ - かもメモ
JavaScriptで変数を展開した文字列を作成する時、+で文字列連結をしていましたがES2015(ES6)からは``(バッククォート)で囲うテンプレート構文(Template literal)で書くことができるようです。 ※ IEやAndroidでは未対応なブラウザもあるようなので、WEBサイト制作とかの場合はまだバベる必要がありそうです。 ブラウザ実装状況: テンプレート文字列 - JavaScript | MDN テンプレート構文(Template literal)による文字列中での変数展開 var val = "JavaScript" // 今までのやり方 var str1 = "Hello " + val + "!" // => Hello JavaScript! // テンプレート構文 var str2 = `Hello ${val}!` // => Hello JavaScr
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
javascriptで1ヵ月前を計算するにはmoment.jsで！ | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
こんにちは。開発チームの阿部です。 moment.js を使用してこれまで手間の掛かっていた、日付の加算・減算・フォーマットの指定などを簡単に扱える事に感動しました！ Moment.jsの公式 最小のコードで理解しやすく一瞬で出来る日付計算 下記に2020/03/31 (閏年)から1か月前を取得するコードをmoment.jsで書きました。 コードがシンプルで一目で何をしたいのかが理解しやすいです！ 従来の方法で、実装すると結構大掛かりで検証が辛かった思い出があります。 <!DOCTYPE HTML> <html lang="ja"> <head> <title>moment js について</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script> //
![javascriptで1ヵ月前を計算するにはmoment.jsで！ | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7e7092b5821b5102d87529340b5133844d28ff0/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F07%2FUntitled.jpg)
Array.prototype.find() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Learn moreSee full compatibilityReport feedback find() は Array インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。 テスト関数を満たす値がない場合は、 undefined を返します。 配列内で見つかった要素のインデックスが必要な場合は、findIndex() を使用してください。 値のインデックスを検索する必要がある場合は、indexOf() を使用してください。(findIndex() と似ていますが、それぞれ
JavaScriptでスクロールバーの幅を調べる - #daiizメモ
ウェブページをデザインしていたところ、「スクロールバーの横幅」の値が欲しくなった。 検索してもすぐには見つからなかったので、ChromeのConsoleを開き、自分でwindowオブジェクト内を探しに行くことにした。「スクロールバーを含んだブラウザの横幅（①）」はwindow.innerWidthで得られることは知っていた。 結果 結局、「スクロールバーの横幅」を直接教えてくれるメソッドやプロパティは見つけられなかった。しかし、document.body.clientWidthを使って「スクロールバーを含まないブラウザの横幅（②）」を得ることに成功した。これにより、①と②の差をとることで「スクロールバーの横幅」を得られた。 まとめ プロパティ Live Demo*1 スクロールバーを含んだブラウザの横幅 window.innerWidth -- px スクロールバーを含まないブラウザの横幅
.pageX | JavaScript 日本語リファレンス | js STUDIO
ドキュメント全体の相対的なイベント発生場所の水平位置を返します。 文法 var pageX = event.pageX; pageX変数には、マウスイベント発火時の水平位置のピクセル数値が格納されます。 この値はドキュメント全体からの相対位置になります。 このプロパティは、ページの水平スクロールを考慮します。 例 <html> <head> <title>pageX\pageY & layerX\layerY example</title> <style type="text/css"> body { font-size: 12px; } #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border:
マウスイベントで取得されるカーソル座標パラメータの整理(offset, page, screen, client) - Qiita
はじめに もはや何番煎じかわかりませんが，jsのマウスイベントにて取得されるカーソル位置パラメータを図とサンプルを見ながら整理します．なぜ今さらこんな記事を書くかというとoffsetX,Yにて取得される値について長年勘違いしていたことが発覚したためです（恥ずかしい...）．そちらについては，こちらの記事を御覧ください， 図解でわかるカーソル座標パラメータ 例として，ページ中にあるid=containerの要素に対してマウスのイベントを付与した時を考えます．コードで書くなら例えば のような感じです． 得られるパラメータがそれぞれ表している値の意味を下図にのせました． event.offsetX / Y 要素内でのカーソル座標(マウスが載っているDOMの左上を原点とした座標)を取得． event.clientX / Y ブラウザウィンドウ内でのカーソル座標を取得．ウィンドウの左上が常に (0,
JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight)｜今村だけがよくわかるブログ
JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight) 私個人的なことですが、最近はjQueryやReactなどのライブラリを使わずに、JavaScriptでコードを書く勉強をしています。これがまた、ほとんど経験がないので難しい・・・ ところで「JavaScriptで特定の要素の幅や高さを取得して何かをしたい」という場面って結構あります。 特定の要素の幅や高さを取得する方法はいくつかありますが、今回は「clientWidth,clientHeight」を使う方法について書きました。 clientWidth,clientHeightを使って特定の要素の幅と高さを取得する方法例えば、div要素の幅と高さをJavaScriptで取得する場合は以下のように書きます。 html<div id="box">box</div>CSS#box{ wid
Null 合体演算子 (??) - JavaScript | MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationメタプログラミングJavaScript モジュール中級編Advanced JavaScript objectsA
JavaScriptメモ テーブルの列の幅をマウスで動的に変えてみる
ひょんな事からテーブルの列の幅をマウスで動的に変更することを考えたので、メモしとく事に。 なかなかややこしいと思ってたけど、HTML+JavaScriptを書いてみたところ、こんな感じでできた。 <head> <title>sampel</title> <script type="text/javascript"> <!-- var target = null; // クリックしたタグ // マウスボタンを押したとき function mousedown() { sx = event.x; // マウスボタンを押した位置を覚えておく } // マウスボタンを離したとき function mouseup() { // タグを取得していない場合は処理をスキップする if( target == null ) { return; } // 列の幅を変える ex = event.x; // 座標値を
Chart.jsでグラフを描画してみた - Qiita
1. はじめに Chart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。 公式ホームページ http://www.chartjs.org/ 今回は、特に使用頻度の高そうな、以下5種類グラフの描画方法を紹介します。 折れ線グラフ 棒グラフ 円グラフ レーダーチャート 散布図 2. 記述形式 基本的な記述形式を解説するために、サンプル(chart.html)を示します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <body> <h1>グラフ</h1> <canvas id="myChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7
String.prototype.padStart() | MDN
標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨; String.prototype.at()String.prototype.big() 非推奨; String.prototype.blink() 非推奨; String.prototype.bold() 非推奨; String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prot
【JavaScript】数値から文字列に変換する - Qiita
JavaScript を勉強することになったのでとりあえず FizzBuzz を書いてみることにしました。 FizzBuzz 関数内において、引数として受け取った値を Number 型から String 型に変換する必要が出てきた際に詰まりました。 そこで、Number 型から String 型への変換方法を調べてみた結果、色々見つかったので残しておくことにしました。 結論を先に書いておく。 Number 型の値をただ文字列に変換したいだけならば、String() で変換するのが一番いいと思う。 String(Number) ただ単純に Number 型のオブジェクト(以下、Number)を String 型のオブジェクトに変換するみたいです。 恐らくこれが最もオーソドックスな方法なのかな？と感じます。
Array - JavaScript | MDN
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 JavaScript では、配列はプリミティブではなく、主に次のような性質を持つ Array オブジェクトです。 JavaScript の配列はリサイズ可能であり、異なるデータ型を交ぜて格納することができます。（これらの性質が望ましくない場合は、代わりに型付き配列を使用してください）。 JavaS
JavaScript 文字列の長さ（バイト数）を取得する
JavaScriptで文字列の長さを取得します。 lengthstr.legnthで文字列の長さを取得できます。 var str = 'abcde'; console.log(str.legnth); // 5 var str2 = 'あいうえお'; console.log(str2.legnth); // 5 String.prototype.bytes = function () { return(encodeURIComponent(this).replace(/%../g,"x").length); } var str = 'abcde'; console.log(str.bytes()); // 5 var str2 = 'あいうえお'; console.log(str2.bytes()); // 15 String.prototype.bytes = function () {
アップロードの進捗状況が分かるプログレスバー付きのJavaScript製ファイルアップローダー - Yahho Uploader [ゼロと無限の間に]
下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに“crossdomain.xml”という名前で保存する。（参考：Flashのドメイン間のデータロード許可） ただし、YUIのファイルを自分のサーバからロードする場合は不要。<?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="ajax.googleapis.com" /> </cross-domain-policy> 後は下記の例を参考に、アップローダーを組み込む<!-- Yahho Uploaderを読み込む --> <script type="text/javascript" src="path/to/your/yahho-uploader.js"></script> <!-- Yahho Uploader設置の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript: 日付の加算・減算
ES2015の新機能: 関数の新しい書き方「arrow 関数」 - Qiita
