タグ

tipsとjavascriptに関するsaladdaysのブックマーク (183)

  • 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~ - Qiita

    はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、当に、当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

    旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~ - Qiita
  • JavaScript 言語概要 - JavaScript | MDN

    JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ

    JavaScript 言語概要 - JavaScript | MDN
  • JavaScriptユーザエージェント判別・判定

    Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi

    JavaScriptユーザエージェント判別・判定
  • JavaScriptだけでファイルの保存機能を実装する

    こんばんは。ファガイです。日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザIE11FirefoxGoogleChromeにて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコードソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。 //

    JavaScriptだけでファイルの保存機能を実装する
  • 検索じゃ学べない! HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog

    HTMLファイ部のほんだです。 気づきTips! Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ

    検索じゃ学べない! HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
  • JavaScript ベストプラクティス Part 1 | POSTD

    ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ

  • JavaScriptを短く書くためのショートコード集

    Posted: 2014.12.25 / Category: javascript 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「~e」に続く数字で桁数を制御できます。 1e1 //10 1e2 //100 1e3 //1000 1e4 //10000 1e5 //100000 2の累乗はシフト演算子 2の累乗は左シフト演算子(<<)でできます。 200 << 1; //400 200 << 2; //800 200 << 3; //1600 逆は右シフト演算子(>>)です。 200 >> 1; //100 200 >> 2; //50 200 >> 3

    JavaScriptを短く書くためのショートコード集
  • フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ

    株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業(受託制作事業)につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日:2024年4月30日 biz@tsumikiinc.com

    フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
    saladdays
    saladdays 2014/11/28
    resizeやscrollイベントを間引く時に
  • Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita

    もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね?????while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね???????? そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね? 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe

    Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
  • 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法

    外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか? 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で

    外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
  • Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog

    Promiseは非同期処理をベースにした並列処理の実装方法の一種です。Promiseでは並列処理の各タスクが必ず1回実行されることが保証され、タスクとタスクからの結果を取得する処理を分離することできます。また、タスクの並列処理/直列処理をユーザーが自由に制御することができます。 ECMAScript Language Specification 6th EditionにPromiseが追加されたことから、しばらくの間JavaScriptの非同期処理に関する話題の中心はPromiseになると思われます。 Node.jsでも既にPromise対応したモジュールも多く、Promiseでのみ非同期処理を提供しているモジュールも存在します。Promiseを使用する機会は今後必然的に増えていくでしょう。 今回のエントリーでは、Node.jsでPromiseを使用する方法を説明します。コード例を中心に理

    Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog
  • 最強オブジェクト指向言語 JavaScript 再入門!

    この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方

    最強オブジェクト指向言語 JavaScript 再入門!
    saladdays
    saladdays 2014/08/17
    初めてJavaScriptと仲良くなれそうな気がした
  • Ember.jsの無限スクロールの改善 - ワザノバ | wazanova

    http://eviltrout.com/2014/01/04/hiding-offscreen-ember.html1 comment | 0 pointsDiscourseのRobin Wardが、Ember.jsで無限スクロールのパフォーマンスを改善させた取組みについて紹介しています。 Long Lived Applications Discourseは無限スクロールを多用している。投稿数の多いトピックを閲覧している際に、ブラウザのviewportの終わりに近づくと、サーバから非同期に新しい投稿が読込まれる。短いトピックについては、DOMにコンテンツを追加することはパフォーマンスの問題にはならない。最近のブラウザは、モバイルであっても、数百の投稿はレンダリングできる。しかし、数千件の投稿があるトピックを閲覧する時は、ブラウザの動きが不安定になり、クラッシュすることもあった。 Cloa

    saladdays
    saladdays 2014/08/07
    Autopagerize的な Tumblrがうまくやってる
  • Javascriptで前のページに戻るを実装 - Qiita

    Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

    Javascriptで前のページに戻るを実装 - Qiita
    saladdays
    saladdays 2014/07/09
    Chromeでhistory.back()がきかない
  • 【Visual Studio Code】1.0 GAリリース予定日、決定! - 好きな技術を好きと言える幸せ - AYA TOKURA BLOG - Site Home - MSDN Blogs

    In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...

    【Visual Studio Code】1.0 GAリリース予定日、決定! - 好きな技術を好きと言える幸せ - AYA TOKURA BLOG - Site Home - MSDN Blogs
  • 【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。

    JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの? モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',

    【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
  • JavaScriptテンプレートエンジンJsRender 基本のキ

    はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード

    saladdays
    saladdays 2013/08/20
    テンプレートエンジン
  • 狠狠色噜噜狠狠狠狠97,你懂的在线视频,亚洲AV制服丝袜日韩高清

    狠狠色噜噜狠狠狠狠97,你懂的在线视频,亚洲AV制服丝袜日韩高清,日免费三级片,久久综合给合久久国产免费,轻轻的挺进少妇的体内,美女销魂,av日韩av,日大乳高潮视频在线观看,亚洲一区高清

  • コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita

    このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか? 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら

    コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
  • JavaScript イディオム集

    JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 (7/3追記: twitter等で教えていただいた内容を追加しました) +v (数値化) var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります(例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります)。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v