「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
formに複数の送信ボタン - 徒書
１つのformで複数ボタンの配置 - masdoiの日記より。 １つのformで複数ボタンを作り、どのボタンが押されたのかをCGI側で判定したい場合があります。 ということでJavaScriptを使用したソースが例示されていたのですが、「複数ボタンを作り、どのボタンが押されたのかをCGI側で判定」という目的に適うものならば、以下のようにHTMLだけでごく簡単に実現できます。 <form action="" method="get"> <input type="submit" name="b1" value="button1"> <input type="submit" name="b2" value="button2"> </form> サンプルHTML サンプルのフォームは action="" method="get" としているので、ボタンを押すとHTMLファイル自身のURLにクエリ文
PerfumeのモーションデータをHTML5のCanvasで3Dっぽく動かした「Perfume x Canvas」
公式に配布されているデータを使ってPerfumeっぽい棒人間を踊らせまくっているのが「Perfume x Canvas」です。HTML5では「Canvas」というタグを使うことで、HTMLとJavaScriptだけでオブジェクト描画ができるようになっていますが、これを使って3Dっぽく動かしています。 「Perfumeのモーションデータ」というのがどういうものか、公式サイトに行くとムービーが流れるようになっています。 Perfume official global website(音量注意) http://www.perfume-global.com/ サイト左上にマウスカーソルを持って行くとメニューが表示され、その中の「ダウンロード」をクリックすると…… モーションデータのダウンロードページが表示されます。「You agree to our terms」の横のチェックボックスにチェックを入
世界のJavaScriptを読もう @ 2012
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
パーフェクトJavaScriptはガチ本。クソと言われる言語仕様をまとめあげた良書 - 三等兵
執筆した井上誠一郎氏ら共著者に敬服。お疲れさまでした。 パーフェクトJavaScript (PERFECT SERIES 4) 言語仕様のpart2(2〜7章)まで読みました。その後はパラパラっと流し読み。まずは言語仕様までの内容について雑感を述べます。 JSには既にサイ本と呼ばれるバイブルが存在しますが、サイ本は「仕様を淡々と解説している本」といった印象を持っています。対してパーフェクトJavaScriptは「仕様における用語を整理し、分かりやすくまとめて解説している本」といった印象でした。そして表紙がダサいです。ガラケーがのってます。サイ本に対してガラケー本といったところでしょうか。・・・って不名誉な名称だからやめとこうと思いましたが、パーフェクトJavaScriptと長いのでやっぱり使います。 対象読者 入門書ではないと「はじめに」で言い切っています。対象読者についてもそのページで言
さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料 - 川o・-・）＜2nd life
本日行われた Shibuya.js の発表資料をアップしました。 さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料 View more presentations from hotchpotch JS のテスティングフレームワークのおおざっぱな説明や JavaScript テストにおける問題、それについての解決方法の一つ、CUI でのテスト、Envjs、エンドツーエンドテストにおける JS / Ajax のテスト、終わりにちらっと Phantomjs の話があります。 スライドの最後にあるように、やはりまだコレだ！という JS のテスティングフレームワークは存在しなく、今後 JS のテストは『僕らが書きたいテスト』をどれだけ簡単に書ける・書く手法が確立されるかによって流行廃りは決まってくるんじゃないかなぁ、と思ってます。そのうちの一つがスライ
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
コア・JavaScript ( JavaScript. The Core. ) - oogattaの勉強日記
この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 "JavaScript. The Core." を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳できておりませんが、文中で参照されている Dmitry さんの ES3 シリーズも、読み応えのある（ ECMAScript3 の仕様の副読本としても読める）素晴らしい内容ですので、是非チャレンジしてみてください！（ご要望があれば訳します翻訳許可を頂いたので、この記事内で参照されている章から逐次翻訳を進めます！）。 ちなみに Dmitry さんは、計算機科学や数学にも明るい方でらっしゃいます。が、私は違います。極力
JavaScript関係のツールまとめてみた | Web scratch
最近使ってたりするJavaScript関係のツールまとめてみた。 主にWebサービスです。 Global is the new private JavaScriptライブラリの名前空間汚染をチェックするツール。 元々載ってるもの以外でも*Analyze your own scripts!*から調査したいライブラリを追加できる。 jsFiddle ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。 Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。 エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。 HTML5のコードを使うにはInfoからDTDを変更してから使う。 類似:MooShell Gist – GitHub gistです。コードスニペット共有サービスです。 Greasemonkey貼るときgist fill
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
素晴らしいjQueryチュートリアル集 – creamu
AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery jQueryを使ったアニメーションするメニュー » How to create tab with JavaScript シンプルなタブ切り替えコンテンツの作り方 » Animated Navigation with CSS & jQuery マウスオーバー時にくるっくるっと切り替わるかっこいいメニュー » 5 Sliding Content Techniques, Examples & jQuery How to’s 画像をスライドで切り替える超クールなテクニック » jQuery FAQs: Scroll To and Highlight Tutorial ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
41 JavaScript experts to follow on Twitter
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog