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/ …

【js】僕は .scrollTopメソッドを愛しすぎているw

0 やはり、この動くのと同時に数字が変化するのが、単純ですが面白すぎて病みつきになりますww え、こんなので喜ぶなんてあなたも単純ですって?(๑≧∀≦)ฅ??← 一番下に、Javascriptのコードも載せておきます? Javascript document.addEventListener( "scroll", …

【js】記事内のリンクを別ウィンドウで開くようにする

やっとできた? 終わったらたった数行なんだけど、そこに辿り着くまでに結構時間がかかりまする::(っ`ω´c)::? まだまだJavascriptに慣れてない。これからちょっとづつ、試行錯誤&調べながらコード書きまくるぜ~((꜆꜄•௰•)꜆꜄꜆»シュシュシュッ Javascript var e = docume…

【js】JavaScriptで「show / hide 」を書いてみた

やっとできた⁉︎ ただ、多分余計な記述も多そうだけど一応upしときます。 後で自分の進歩も分かるので。 誰かの参考になる可能性は…低いですw 経緯 はてなブログできたテーマ制作の際に、エディタではてなブログの仮想環境を作っていて、「#box2 のアーカイブ…

【js引用】 なんじゃこりゃ~⊂⌒~⊃。Д。)⊃ パート2

これは絶対~ものにします!したいっ!!! 只今ソースDLして、css: Javascriptの骨子を解析中~(▭-▭ก)✧ Multi-Level Push Menu --- Codrops http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/ 毎回言っている気がしますがwそして毎度Codropsさ…

【js】"scripting language"の"scripting"って?

Javascript What is scripting?A script is program code that doesn’t need pre-processing (e.g. compiling) before being run. In the context of a Web browser, scripting usually refers to program code written in JavaScript that is executed by t…

Javascriptの、「外観している解説(英語も)」がまだ少ない模様( 超私見w)

Javascriptは、プログラミング言語の中では比較的「若い」方だからというのも関係ある気がする。 僕のゴッドバイブル←、W3Schoolsさんですら、HTMLやCSSの解説に比べると、少し分かりにくいような。。いや、まぁHTML,CSSより内容は複雑で項目数が多いという…

【JS引用】これめっちゃ面白い~✧⁺⸜(●˙▾˙●)⸝⁺✧

Interactive Map --- Codropes http://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/ いつもcodropsさんのデモは凄いのが多いですが、今回もさらに凄いんだな、これが(ˊo̶̶̷ᴗo̶̶̷`)✨♪ テキストを読み進め画面をスクロー…

【js】備忘録

骨子部分、重要だと思った箇所。。 DOM ( Document Object Model ) 文章物体化モデル -- htmlなどの文章(string)をobject(物体)として扱おうとする枠組み。フレーム。 [via]W3Schools.com [js] HTML DOM Method http://www.w3schools.com/js/js_htmldom_meth…

【js】「getElementById」 と「getElementsByClassName」 は紛らわしい??( ˙◊˙◞ )◞?

[16.11.29 : 間違い等訂正しました] 備忘録を兼ねて。 【注意点】 Idの方 ➜ Element ClassNameの方 ➜ Elements [via]W3Schools.com getElementById('' '') HTML DOM getElementById() Method http://www.w3schools.com/jsref/met_document_getelementbyid.as…

ソースコードハイライター..\Prism.js/..

やっとの思いで見つける&導入する事ができました。やっぱりJavascriptだったか✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) Prismjs.com http://prismjs.com/index.html 試しにコードを入力してみました★ プレビューで確認できました。嬉しい(´つヮ⊂)✨ #grad3-1 { height:300px; backgro…

【CSS/Javascript】只今丸パクリさせて頂いております|´-`)チラッ✨ Slide Nav Bar

Codrops.com [訂正: 17.03.07] CallMeNick.com さんです😅 「Codropsさんとデザイン似ているけど違うよ~」とこの後の記事で書いたのですが、自分が真っ先に間違ってたことに今気付きました…_:(´ཀ`」 ∠):_w http://callmenick.com/post/slide-and-push-menus-wi…

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️