JavaScript（ES6〜）の基本文法 - Qiita
この記事について 実務歴半年ほどのバックエンドエンジニアです。 Reactの学習を進めている中で、現在のJavaScriptの基本的な理解が足りていないと感じたので、振り返りも兼ねて基本的な文法をまとめていきます。 文法に関してはこちら「https://developer.mozilla.org/ja/docs/Web/JavaScript」にもしっかり記載されていますが、まずはこれからJavaScriptに触れていくといった方に向けた内容となります。 JavaScriptとは？ ブラウザ上で動作するプログラミング言語。 もともと、発表当初は「LiveScript」という名称だったが、当時非常に人気のあった言語として「Java」がありました。その人気にあやかって「JavaScript」と名称を改めたとされています。 言語としては全く別の独立したものであり、現在は「ECMAScript」とい
fetch API でも POST したい！ - Qiita
ちなみに fetch API は WHATWG HTML Living Standard で定義されていて、W3C HTML 5.1 でもなければ ECMAScript2017 でもないです。 2017年現在 Safari や IE では未サポートなので https://github.com/github/fetch などの polyfill を使うと良いです。 post (application/x-www-form-urlencoded) const obj = {hello: "world"}; const method = "POST"; const body = Object.keys(obj).map((key)=>key+"="+encodeURIComponent(obj[key])).join("&"); const headers = { 'Accept': 'appl
Implementing keepalive on Fetch API - Qiita
はじめまして、ひらのです。Blink 上でネットワーク関連の API (XHR, fetch API, WebSocket, …) の実装や、ローディング関連の実装を行っています。 本稿では、Fetch API における Request および RequestInit の keepalive プロパティの実装について解説します。このプロパティの実装は、Chromium のリソースローディングパスのかなりトリッキーな既存実装をいじる必要があり、また、Chromium のマルチプロセスアーキテクチャを意識することも必要なため、(いわゆる下位レイヤーですでに実装されているスイッチに配線するだけの実装と違い) 楽しい実装です。 リンク集 本稿では仕様の説明はほとんど行いません。以下を参照ください。 Fetch Spec (fetch, CORS) SendBeacon Content Securi
Navigator: sendBeacon() メソッド - Web API | MDN
HTML DOM APINavigatorインスタンスプロパティactiveVRDisplaysappCodeNameappNameappVersionbluetooth Experimental buildIDclipboardconnectioncontactscookieEnabledcredentialsdeviceMemorydoNotTrackgeolocationglobalPrivacyControlgpuhardwareConcurrencyhidinkkeyboardlanguagelanguageslockslogin Experimental maxTouchPointsmediaCapabilitiesmediaDevicesmediaSessionmimeTypes 非推奨 onLineoscpupdfViewerEnabledpermissionsplatfo
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
← 前回 連載 INDEX 次回 → イベントが発生した時のマウスの情報を取得するために、イベントオブジェクトはさまざまなプロパティを提供しています。本稿では、それらプロパティの挙動を、具体的なサンプルで以って確認していきます。 マウスポインターの座標情報を取得する イベントが発生した時のマウスポインター位置を取得するには、以下のようなプロパティを利用します。
問題だらけのshowModalDialog - atsukanrockのブログ
はじめに ブラウザ上でのJavaScriptに、showModalDialogというメソッドがある。MDCのリファレンス（MDC）の説明*1を引用すると、 指定された HTML 文書を含む モーダルダイアログボックスを生成し、表示します。 という機能を持つメソッドだ。しかしながらこのメソッド、私が今回経験したが、問題山積だ。結論から言うと、使うべきでない。 本エントリでは、私が今回発見したshowModalDialogの問題点を列挙し、このメソッドが必要になりそうな場合の代替案を示す。 問題点1：ダイアログ側でwindow.openerがundefined 確認ブラウザ Win XP SP3上のIE 6：該当 Win XP SP3上のSafari 4.0.4：非該当（showModalDialogを呼び出したwindowオブジェクトを取得可能） 詳細 showModalDialogで開かれ
知ってた？ jQueryのready()メソッドはもう書かなくていいらしい
jQueryのコードといえば、$(document).ready(function() {}で書くのがお決まり。でもそのコードの書き方はもう古いかもしれません。 jQueryでreadyメソッドはDOMが完全にロードされたタイミングでコードを実行するように実装されていました。このメソッドはすべてのDOM要素が利用可能になった時点で所定の関数を実行するので、要素へ確実にアクセスしたり操作したりできます。 jQuery 3.0がリリースされるまでは、次のように無名関数で使うのが一般的でした。 $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0での「ready()」メソッドの変更 jQuery 3.0のリリースまでは、readyメソッドを呼び出す方法はいくつかありました。 document要素
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
キーコード一覧 【JavaScript 動的サンプル】
キーコードは、イベントのwhichプロパティで取得できます。 取得できるイベントはkeydown、keyup、keypressです。ただし、イベントによって、発生タイミングや発生有無に違いががあります。 また、ブラウザによってコードが異なるキーもあるので、注意が必要です。
JavaScript Minifier & Compressor | Toptal®
Online JavaScript Minifier Tool and Compressor, with Fast and Simple API Access
applyとcallの使い方を丁寧に説明してみる - あと味
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは？ callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数（メソッド）を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
JavaScriptプログラミング講座【ドラッグアンドドロップについて】
<html> <body> <a id="aaa" href="http://example.com" >このリンクをドラッグ！！</a> <script type="text/javascript"> <!-- // ------------------------------------------------------------ // "aaa" という ID 属性のエレメントを取得する // ------------------------------------------------------------ var element = document.getElementById("aaa"); // ------------------------------------------------------------ // ドラッグ開始時に実行される関数 // ---
SELECT～OPTIONにIMG表示 - ぱぱろぐのこころぐ
Firefoxでは意図した通りに動いていますが、他は微妙。IEでは選択肢に画像が表示されません。Chromeでは画像は一切表示されません。 実は今まで知らなかったのですが、HTMLでは、素のままでは画像を選択する選択肢って作れないのですね。OPTION要素の中にIMGを置いてもまったく表示されないようで。これってどうしてできなくしてあるんだろ？セキュリティ的にも問題なさそうなんだけど。。。 対処法は、javascriptを使う必要がありますけれど、割と単純。 こんな感じ↓ 各選択肢をあらわすOPTION要素それぞれに背景画像を使えばよろしい（スタイルの指定でコチョコチョしますが）。 単一選択のドロップダウンリストの形式では、ドロップダウンが閉じた後は選択画像が表示されませんから、(SELECT要素の)onchangeで、選択されたOPTIONの背景画像をSELECT要素へ設定してやります。
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
JavaScript String の最大文字数
Google Contacts で問題になっている String の長さ制限に関して、詳しい値を知らなかったので調べてみました。 言語仕様としては定めていなくて、処理系依存のようです。Thunderbird 3.1.4 で簡単なプログラムを書いて試してみると、Mozilla (Gecko) は、2^27 < length < 2^28 文字のようです。 思ったより長いです。Mozilla は、2^15 < length < 2^16 文字だ、なんていうページを見つけたりしたのでちょっとあせっていたのですが。昔のページだったので、それから拡張されたということでしょうか。 Google Contactsの件は、また別の問題なのかなぁという気がしてきました。XMLの操作に使っているE4Xにも制限があるのかもしれません。ひとまずは、最初の方針通り、安全そうな数で区切る方向でいこうと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Navigator.sendBeacon() to pass header information
SecurityError：originのあるフレームがcross-origin frameにアクセスするのをブロックしました
ウィンドウのサイズを変えていないのに window.resize イベントが発生する | infoScoop開発者ブログ