Navigator: onLine プロパティ - Web API | MDN
HTML DOM APINavigatorインスタンスプロパティactiveVRDisplaysappCodeNameappNameappVersionbluetoothbuildIDclipboardconnectioncontactscookieEnabledcredentialsdeviceMemorydoNotTrackgeolocationglobalPrivacyControlgpuhardwareConcurrencyhidinkkeyboardlanguagelanguageslocksloginmaxTouchPointsmediaCapabilitiesmediaDevicesmediaSessionmimeTypesonLine oscpupdfViewerEnabledpermissionsplatformpluginspresentationproductprod
[Javascript] input要素(file)で、ディレクトリを丸ごと選択する - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はinputのfileタグで、ディレクトリを選択したり、その情報をJSで読み取ったりする方法をブログに書きたいと思います。 目次 inputのfileタグでディレクトリを指定可能にする 2017年2月現在ChromeとFirefox（バージョン50以上）で、<input type="file"/>でディレクトリ選択をすることができます。具体的には以下のようにwebkitdirectory属性を追加します。 <input id="file" type="file" name="upfile[]" webkitdirectory> これだけでディレクトリ選択ができるようになります、すごいですね。 Javascriptで内容を読み取る ディレクトリでファイル選択されたものは、以下のようにJSから読み取ることができます。 document.getElem
![[Javascript] input要素(file)で、ディレクトリを丸ごと選択する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bc3d4f6c03f1a1860052d0ff64147395a287d55/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F487.jpg)
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
分割代入 - JavaScript | MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 const [a, b] = array; const [a, , b] = array; const [a = aDefault, b] = array; const [a, b, ...rest] = array; const [a, , b, ...rest] = array; const [a, b, ...{ pop, push }] = array; const [a, b, ...[c, d]] = array; const { a, b } = obj; const { a: a1, b: b1 } = obj; const { a: a1 = aDefault,
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
CORS (Cross-Origin Resource Sharing) ってなに？
先日CORS(Cross-Origin Resource Sharing)でハマったので、今更だけど復習。Same Origin Policy(同一オリジンポリシー)について基本的なところから調べ直しました。 オリジンとは オリジン ＝ スキーム、ホスト、ポートの組み合わせ (※スキームによって微妙に違うこともある) http://www.exsample.com:80/index.htmlのURLを例にすると スキーム ＝ http:// ホスト ＝ www.exsample.com ポート ＝ 80 (ポート番号「80」は省略可なので普段見かけることは少ない) 同一オリジンポリシーとは TL;DR セキュリティを守るための重要な仕組み あるページを開いたときに、関連するリソース(JavaScript等)を同じオリジンからしか取得しない そうしないと個人情報の保護も外部からの攻撃にもガバ
CORSまとめ - Qiita
今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ
GAS＋Vue.jsでサーバレスなWebアプリ① - Qiita
function doGet(request) { var template = 'index'; return HtmlService.createTemplateFromFile(template).evaluate(); } <!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="utf-8"> <style> p { color: #4aac00; } </style> <!-- vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="vm"> <p>{{ message }}</p> </div> <script> var vm = new Vue({ el: "#vm", da
DOM Keyboardイベントで押されたキーを判別するにはkeyプロパティを使う - Qiita
エンターキー押下に反応するインタラクションを作りたいときなど、押されたキーを検出する話です。 入力文字列を検出する時はinputイベントを使います。 keyプロパティが推奨 keyプロパティがあります。 window.document.onkeydown = function(event){ if (event.key === 'Enter') console.log('hello Enter') } 詳しい仕様は以下を見てください。 DOM3 Eventsのキーイベント - JavaScriptで遊ぶよ - g:javascript UI Events (formerly DOM Level 3 Events) 主要なブラウザでサポート KeyboardEvent.key - Web APIs | MDN によるとと、2017/8/14日時点で Chrome Edge Firefox (
keyCode が deprecated になってた : (*x).b=z->a+y/c
◆ key と code が新しいもの ◆ code は物理的な押されたキーを取得 ◆ IE11 非対応 ◆ key は入力された文字を取得 ◆ Shift キーや CapsLock や NumLock 状態なども判断 ◆ IE11 も動くけどキーの呼び方が違うところが多々 じゃあキーを見分けるのに何を使えば良いのと思って調べてみました キーを見分けれそうなプロパティはいくつかあります keyCodecodekeywhichcharCodekeyIdentifier この中で keyCode, which, charCode, keyIdentifer は deprecated です keyIdentifer と charCodekeyIdentifer については Firefox と Chrome 両方ともに存在しません Chromodo 52 ではあったのでこの 1 年くらいのうちに消
JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎 - Qiita
JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎JavaScript 個人的に本とかネットで勉強していたものを、ここにまとめていたのですが、せっかくなのでQiitaにも投稿します。 間違いなどお気付きの点があればご指摘をお願いいたします。 JavaScript(以下JS) ES6 = ES2015 とする(呼び方多すぎ) 変数と定数の定義 基本的に const で定義するようにし、どうしても必要な時だけ let を使うと事故を減らせる var はES6で書けるのであればもう使わなくて良い let 変数を宣言する。宣言できるのは一度だけ 宣言時に初期化を行わなくてもエラーにはならない(中身はundefinedとなる) 値の再代入は可能だが、再宣言はエラーになる const 定数を宣言する。宣言と同時に必ず初期化する必要がある 値
innerText の注意点と、textContent のススメ – おかかウェブ
Node インターフェイスのプロパティ、Node.innerText と Node.textContent の違いについて検証します。 どちらも要素のテキスト部分を取得、更新するためのプロパティですが、細かい挙動が異なるため注意が必要です。 どのような違いがあるか 2つのプロパティの違いについて、MDN から引用します。 textContent の特徴 https://developer.mozilla.org/ja/docs/Web/API/Node/textContent 画面上に表示されていないテキストも取得する ブラウザごとの挙動の差異が小さい innerText の特徴 https://developer.mozilla.org/ja/docs/Web/API/Node/innerText 画面上に表示されているテキストのみを取得する ブラウザごとの挙動の差異が大きい 注意すべき
JavaScript おじさんが教える本当の Modern JavaScript 入門 1 - Qiita
一部修正しました Udemy で React コース公開してます。(絶対 Udemy の 1200 円割引価格にはしないので、このリンクから買ってもらうのが一番お互いに得です。) Udemy React + Redux コース 本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bundler による "module system" の活用。 ES2015+ や TypeScript といった "Compile to JS *1" の使用。それに伴う Babel によるトランスコンパイルツールの使用。 ESlint, Prettier といった集団開発における、ソース品質安定のためのツール の使用。 ここまでのツール
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など) - Qiita
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など)JavaScriptI18nl10nECMAScript ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。 JavaScriptで数値をカンマ区切りにしたいときにGoogleで検索してみると、正規表現を使っていたり、ループで回して3桁ごとにカンマ付ける実装を紹介する記事を多く見つけました。 しかし、それらは古い記事ということもあり、2018年現在は数値のフォーマットを実装する必要はありません。EcmaScriptで仕様策定されておりほとんどのブラウザやNode.jsで使える関数があるので紹介します。 今回紹介するコードの実行結果はすべてChromeでの結果になります
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
New in Chrome 74 | Blog | Chrome for Developers
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
Microsoft、Excelカスタム関数としてJavaScriptのサポートを発表
