Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

⌬JavaScript

W3C 仕様書用、『目次階層Nice.js』作って見た

W3C の仕様書の「目次の階層が深い & 枝が多い」 ので、全体像が把握しづらい。。そこで、階層構造を把握しやすいように、show/hide 出来るjsを書いてみました。 W3C全ての仕様書で試してはいませんが、幾つか試した所、問題なくいけました。ですので、恐ら…

【引用】コールバック関数の分かりやすい説明

callback function-javascript is sexy.com- callback function-javascript is sexy.com- Understand JavaScript Callback Functions and Use Them march. 4 2013 (Learn JavaScript Higher-order Functions, aka Callback Functions) In JavaScript, functi…

プログラミングにおける、「ファーストクラス」の意味

Definition meaning of "First-class" in Programming WikiWikiWeb 先ずは、通常での "first class" の定義を見てみます。 Definition 「first class」 -Merriam Webster- meaning of "First-class" in Programming WikiWikiWeb/FirstClass First Class A la…

タッチデバイスで、「Drag-like Action」を実装してみた🌟

JS Bin on jsbin.com DOM イベントに関するTipsです。 タッチデバイスの場合、touchmove の Event type (Event Handler) が実装されているので 、ドラッグというよりは、タッチ&スワイプして、そのまま要素ブロックを移動させる実装の仕方になります。 そこ…

ECMAScript-5.1(2011) 骨子。備忘録

基礎的過ぎて飛ばしがちだけれど、本質的な理解に、すごく重要な箇所(私見w) ECMAScript 5.1 10 Executable Code and Execution Contexts 10.1 Types of Executable Code There are three types of ECMAScript executable code: Global code is source text …

StickyNav.js (snippet) 作ってみた🌟

JsBin デモ JS Bin on jsbin.com 因みにiPadからだと、embed版・jsbinページでもうまく表示されないと思うので、対処法を 開いた先の「全面表示ページ」では上手く作動します JavaScript "use strict"; var _ = console.log; var nav = document.querySelect…

Re:リクアニ + % (modulo: "割り算の余り"の算出操作記号)

[17.06.02: ページ下部jsコードの一部訂正] 表の補足説明 このデモで知りたかったこと / 分かる事 position: sticky リクアニ・メソッドのコールバックの argument(時間) を可視化してみました。 下中央に表示されている4桁の数字は、 windom.requestAnimati…

はてなブログの "もくじ" で『scroll to id アニメーション with jQuery』

(17.3.24追記)無駄をひとつ見つけました🌟 コードをシンプルにスマートに~((ノ")`ω´(ヾ) もう既出でしょうか。。 ページ内をジャンプする際の「jsスクロールアニメーション」を、はてなブログのもくじ用にカスタマイズしたものです。コードあまり綺麗ではありま…

【js/後半】window.requestAnimationFrame() を解説してみた🌟

On function parameterパラメーター(共数) と function argument引数(実述) requestAnimationFrame()のcallback function の parameterパラメーター(共数) では後半です。 invoke - 要請する(実行する) function - 関数 parameterパラメーター(共数) - パラ…

【js】pure JavaScipt で jQuery のToggleアニメーションを実現してみた

基礎編 応用編 基礎編 button1 list1-1 list1-2 list1-3 HTML <button id="btn1">button1</button> <ul id="list1"> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> </ul> CSS #list1 { transition: all .45s ease; } #btn1 { transition: all .2s; } JavaScript "use strict"; var _ = console.log; var btn1 = document.quer…

カラー・スペース(色空間)外観/ 変換方法 まとめ

Basic Color Conversion (theory) Color Conversion (source code -js -) Recommend article and Others Basic List of color spaces and their uses --Wikipedia.en -- https://en.m.wikipedia.org/wiki/List_of_color_spaces_and_their_uses Color Models:…

【js・備忘録】コンストラクター / プロトタイプ

Constructor ( function ) Prototype 国民的アニメ『サザエさん』の名前を使って、Constructor, prototype のコードを書いてみました( 現在学習中ですので、拙い部分もあるかと思います。ご注意下さい(*ฅ•̀ω•́ฅ*) あ、あとサザエさんの子供を、タラちゃん以…

【初学者向け】Chroma.js の使い方

code { font-size: inherit !important; } div[class*="cTitle"] { position: relative; display: table; top: 1em; left: .25em; border-radius: 14px; color: #fff; padding: 5px 16px; font-size: 20px; line-height: 20px; text-align: center; vertical…

iOS( iPad ) で "HTMLソースコード" を見る方法:: + 簡単コピー + スムーズ・スクロール

Apple ToolBox さんを参照 + カスタマイズしてみました🌟 http://appletoolbox.com/2014/03/how-to-view-webpage-html-source-codes-on-ipad-iphone-no-app-required/ javascript:(function(){ var a = window.open().document; a.write('<div></div>'); var b = a.body.a…

【js/前半】window.requestAnimationFrame()を解説してみた🌟

code { font-size: inherit !important; } li.title_s > code { font-size: inherit !important; font-weight: inherit !important; } .callback { font-style: italic !important; color: #ee6666 !important; } #compCode { position: relative; } #js1, #…

ColorWheel を作成中…::(っ`ω´c)::💦 + Chroma.js さんが秀逸過ぎる

Chroma.js Brian Grinsteadさんのコードを参照させて頂き、ColorWheelの仕組みを理解し、もう一度自分で作れるか一から自作中です✨ Colorwheel 1K - Brian Grinstead don't code today what you can't debug tomorrow: color wheel on Canvas jsコード自体は…

W3C 仕様書 --- 一覧リスト(HTML, CSS, DOM)

W3C 仕様書 --- 一覧リスト( HTML, CSS, DOM ) Documentation と Specification の違い Web Development系(HTML, CSS, DOM) の一次ソースである W3C の仕様書を一覧で観たくてリスト化してみました。全ては網羅できていません。それでも結構な量になった気が…

【js】この前のお休みに、気になっていた単語をどっぷり調べてみたよ🌟

不適切箇所 検出ツール ES Lintパ マルチプラットフォーム対応のjsコードに変換してくれるツール Bableパ 具体例 ES Lint 試してみた 【↓オンラインdemo↓】 【↓ 解説ページ(no-undef)】 [補足1] 「ソフトウェア」 と 「ソフトウェア・パッケージ 」の違い […

【js】getBoundingClientRect() がヤバ良い(初出は2008年⁉︎( ˙◊˙◞ )◞💡 )

element.getBoundingClientRect() ( i )Not スクロールイベント時 ( ii )スクロールイベント時 一次ソース その他の分かりやすい解説 getBoundingClientRect() の 対応ブラウザ 後日談 element.getBoundingClientRect() この method は、document内の指定し…

iPad 最強テキストエディタ アプリ、..\Textastic/..

これを最強と言わずして何を最強といおうか。 Textastic https://www.textasticapp.com 全部のせのです。入門者~中級者までをカバーできうる、和馬が選ぶ、2016年ベストのテキストエディタ アプリです 特徴 ●ほとんどの言語のコード・ハイライト機能 ●ブラウ…

【js】ムリやり#Box2(サイドバー) を記事内にねじ込んでみた結果w

はてなブログの記事ページを、他のTech系サイトの様なレイアウトにしてみては!? とふと思い立ち実行してみました。 ただ、はてなブログのHTMLの構造上、サイドバー(#box2)を記事内に入れるのは、CSSではレイアウト調整が面倒くさくなるだろうなと思い、JavaS…

【js】Clipboard.js テスト

.foo { position: absolute; top: 0; } Copy クリップボード.js ができるかテスト中~。ただいまテスト中です。 本文が短いと「bad request」になるので、テキストで埋めています。テキストで埋めています。 //

【js】沈黙を越えて。『スクロールナビ.js(はてブロ.ver)』。プロトタイプ

「もくじ」の表示のさせ方 実際のデモ画像 まだ完全ではありません。また、JavaScriptもゆえ、ムダ等多いと思いますが…::(っ`ω´c):: 何にせよ、出来た事がかなり嬉しい(つ´ω`c)✨✨♪ まだ「h3ハイライト」しかできませんが宜しければどうぞ 「設定」→「フッタ…

【js】JavaScript 備忘録(骨子系)

Return Value の type 日本語に翻訳するとしたら「返値 」という語がいい気がする。多分造語だけど。翻訳調べたらありましたw 調べて明確に理解したが、「return valueのタイプ」というのは そもそもJavaScriptの扱えるData Type と、密接に関連している。 …

John Resigさんの「JavaScript Ninja」買ってみた🌟

英語である事、"良い値段"である事から、凄く欲しいと思いながらも購入に踏み切れずにいました。、が⁉︎ ついに先日購入に踏み切りました(°∀° )/(°ω° )/(°Д° )/✨ Manning.pubさんから電子書籍版を購入しました [manning links] そして基本はタブレットで読む…

【jq】jQueryが最強すぎておらおどれーてる(′ʘ⌄ʘ‵)✨

jQueryとは、JavaScriptのライブラリです。 jquery.com 「ライブラリ」とは 「ライブラリ」 - e-Words IT用語辞典 sp.e-words.jp ... ITの分野では、ある特定の機能を持ったコンピュータプログラムを他のプログラムから呼び出して利用できるように部品化し、…

【js,jq】Qiitaにも実装されている"例の"便利なや~つ~『スクロール・ナビ.js』✨✨

ちょっと見つけにくかったけれど、探したらありましたよ~✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪♪ スクロールと同時に、ナビゲーションバー( もくじ )が出現し、その箇所になると対応部分がハイライトされる例のやつです。なんて呼べばいいか分かりませんw [追記 : シンプルに『ス…

【js】JavaScript とは??

[via GitHub - voodootikigod/logo.js: A community logo for JS / eu より] 「JavaScript」と言う時、その言葉が表しているものは、2つあります。 ❶ECMAScript-262 ❷JavaScript( Mozilla ) 多くの場合、❶を指していると考えて差し支えありません。 では、な…

【js】JavaScript の一次ソースがクッソ分かりやすい件

やはり、「一次ソースに当たる」事が非常に大切だと実感。 6thは600p超あって驚きましたがw 1thバージョンは120-130p程で、そちらから始めようかと思いますw 以前の記事でも「一次ソースに当たる事」について書いたけれど、コンピューター・サイエンスも全く…

【js, DOM】 一次ソース リファレンス をまとめてみた

JavaScript, HTML DOMの、oroperty, method の全てを一覧で見たくて、探しました。 HTML DOM において、JavaScriptが実行可能な property, method 全て DOM 4 - W3C https://www.w3.org/TR/dom/ Document Object Model (DOM) - W3C https://www.w3.org/DOM/ …

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️