JavaScript 再入門： JavaScript の class 構文はシンタックスシュガー
知ってるようで実は知らない JavaScript 。今回は、そんな JavaScript のオブジェクト指向の仕組みについてまとめてみました。 JavaScript のコンソールでの検証には、基本的に Mac 版 Safari 16.4 を使用していますが、適宜 Chrome や Edge のコンソールでも確認しています。 JavaScript の class 構文はシンタックスシュガー JavaScript はオブジェクト指向言語です。また、モダン JavaScript では、class 構文が使えます。ただし、 JavaScript の class 構文はいわゆるシンタックスシュガーと呼ばれるものです。 シンタックスシュガーとは英語で syntax sugar もしくは syntactic sugar、日本語訳は糖衣構文もしくは構文糖などと訳されます。 糖衣構文（とういこうぶん、英:
JavaScriptがiPhoneでのみ正常に動作しない
GitHub Pagesで以下のサイトを制作しました。 https://imaimai17468.github.io/Products/CreditsCounterforKNCT/ 正常な動作の場合、「特別学修」タブを開くと、一般の特別学修と専門系の特別学修のタブがあり、それを開くとその一覧表が表示されます。また、特別学修タブの下には教科一覧の表があります。 しかしスマホで見ると、特別学修タブを開いてもそこからほかのタブが表示されなかったり、その下の教科の一覧表が表示されないことがあります。 なぜスマホの場合のみ正常に機能しないのでしょうか？ 本来は、html上で <div class="tokubetu_hogehoge"></div> <div id="sikaku_hogehoge"></div> となっているところにjsでclass名やid名を読み取って表を展開するような仕組みにな
JavaScriptを使って要素をドラッグ＆ドロップで移動 | q-Az
ドラッグ＆ドロップで色々なものを移動させる UI が最近は多くなってきました。モバイルなどでも直感的でわかりやすいため色々な場面で利用されているように感じます。 この記事では要素をマウスによるドラッグ＆ドロップまたはスマホでのタッチイベントで動かせるように JavaScript コードを書いています。よく使われている技術なので有名なコードかもしれませんが、自分なりに考えてみました。ネイティブな JavaScript コードです。PC とモバイル一応対応済み。 使い方 .drag-and-drop のクラス名が付いた要素をドラッグ＆ドロップで移動できるようにします。複数あっても大丈夫なように書いたので .drag-and-drop はいくつあっても大丈夫です。 HTML例 <div class="drag-and-drop" id="red-box"></div> <div class="d
JavaScriptでユーザーエージェントを取得してMacを判別する
あまり使う機会はないかもしれませんが、Macでだけ表示が崩れてCSSを分けたいことがあったので、ユーザーエージェントを取得してMacを判別する方法を調べてみました。 サンプルコード 「Mac」と「OS」を含むユーザーエージェントで判別できるようです。 ただiPhoneやiPadも含まれてしまうので、それらは除外します。 var ua = navigator.userAgent.toLowerCase(); // Mac var isMac = ((ua.indexOf('mac') > -1) && (ua.indexOf('os') > -1)) && !((ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('windows') > -1)); // 使用例 if(isMac) { alert('
HTML5世代のJavaScriptからマウスイベントの扱い方、Pointer Events - ふろしき Blog
この記事は古くなっています。こちらを参照して下さい。 これまでマウスイベントの扱いは、以下のような記述方法でした。 var elem = document.getElementById("hoge"); if ( elem.addEventListener ) { // IE9以上/Firefox/Chrome elem.addEventListener("mousedown", fn); } else { // IE8以下向け下位互換対策 elem.attachEvent("onmousedown", fn); } } 上記はマウスが存在するという前提で成立していたもので、今後はマルチデバイス対応が求められる時代になります。 今のところはデスクトップ型向けとスマートデバイス型とでは、ユーザエージェントを使ってビューを切り替えるという方法が主流のようです。しかし今後は、Windows 8的
Lity - Lightweight, accessible and responsive lightbox
Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. Minified and gzipped, its total footprint weights about 3kB. It requires jQuery or Zepto (with the callbacks, deferred and data modules). Demos Image Inline Google Maps YouTube Vimeo URL Installation All ready-to-use files are located in the dist/ directory. Incl
navigator: platform プロパティ
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �-HView in English � y ��Always switch to English 非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。 ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らない
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
HTML5のCanvasを使ったお絵かきツールまとめ
昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。 いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。 イラストブック – 無料レンタルお絵かき掲示板 今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgent
jQuery – フォームの入力内容をブラウザを閉じても保持するGarlic.js
使い方は非常に簡単で、まず、headタグ内で jQuery と Garlic.js を読み込みます（ jQueryは、テーマで既に読み込まれている場合は不要です）。 くれぐれも、jQuery を先に読み込んでください。 ちなみに私がよく使うWordPressのテーマ「Cocoon」ですと、子テーマの tmp-userフォルダ内の head-insert.php にスクリプト部分のみ追記するだけです（jQueryの読み込みは不要です）。 <!doctype html> <html lang="ja"> <head> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4' id='jquery-core-js'></script> <script src='https:
10 年前に JavaScript で Flash Player を開発し買収された話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）されました。あまり出来ない体験であるのは間違いないので、Flash が終了を迎える今、改めて振り返ってみようと思います。 Flash Player の開発 今から 10 年前の 2010 年、ちょうど iPhone が普及し始めてきてガラケーのシェアが 8 割から 6 割くらいに落ちようとしていた時期に、私は Flash Player を JavaScript で実装していました。以前この
JavaScriptの代入において時々現れる、括弧で囲まれた変数名は何なのか
JavaScriptの全貌を知るには、人生は短すぎます。大まかに把握したと思っていても、少し時間が経つと、またわけのわからない構文が現れます。 特に最近増えてきた記法として、代入の左辺に、括弧が使われているというものがあります。今回は、これの正体を探ってみましょう。 括弧のついた代入たち JavaScriptにおいて、代入とは一般に以下のようなものを指します： const myNumber = 100; しかし、モダンなライブラリを使用していると、以下のようなサンプルコードを見かけることがあります： const [job] = client.exec(); また、Node.jsにおいて、以下のような構文を見かけることも増えてきました： const {SampleClass} = require('sample-lib'); どちらも少し不思議です。左辺の変数名が括弧（[]または{}）で括ら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
canvas-block-detector/isCanvasBlocked.js at master · johnozbay/canvas-block-detector
Is *onbeforeunload* cached on Safari (macOS)?
Sketchpad
スマホで2本指スクロールする方法
javascript-ローカルblob画像のURLをphpにアップロードします | yaoply.com
Blob
JQuery dRawr Example