You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています! 2015年度の JavaScript 研修は、Web アプリケーションの部品(モジュール)をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
今回の目標 読める+書ける=学べる 2時間ちょっとでいきなり書けるようになる訳はありませんが,書いてみないと覚えられないので,2時間かけて触ってみて独学できるようにします. 最初に,1+1=2の原理を覚える必要はないので,2=1+1でも 2=2*1 でも 2=1/2*4 でもいいので,やりたいことをやってみるのが一番です. やること jQueryセレクタをつかってみよう 要素をブン回してみよう スライドショーの動きを追ってみよう 開閉メニューの動きを追ってみよう やらないこと プログラムの基本(習うより慣れる) JavaScriptの構文(書きながら覚える) jQueryPluginの使い方(オプションをいじる以上のことをやろうと思うと難しい) thisなんてしりません $.eachなんてしりません 変数とかIFなんてわかりません jQueryを使えるようにする Downloading j
サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」 2011年01月20日- Embedded Help System サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」。 これはかなり便利かもしれません。クリックすると、その場でマウスポインタが現れ、アニメーションと吹き出しでサイトの使い方を教えてくれちゃいます。 普通は、こうして次にああして、と文書での説明になりますが、これだとビジュアルに視覚的に分かるということで非常に分かりやすいものが作れますね。 デモページで左カラムの「How to...」の下にあるメニューをクリックで確認してみましょう。 更に、アニメーションだけではなく、UIの上に、[ 1 ] [ 2 ] [
20 Useful jQuery Slider Tutorials - Web Design Blog ? DesignM.ag jQueryでスライダー実装関連のチュートリアル20。 実に様々なスライダーの実装チュートリアルが公開されており、チュートリアルをこなすというより、サンプルとして活用することが出来そうです。 この手のUI実装にまよったら参考にしてみるのもよさそう。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 なんでも埋め込めてマウスホイールでページ送りができるスライダー実装jQueryプラグイン「hash slider」 jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル 2つの要素を組み合わせたクールなスライダー実装jQueryプラグイン「dualSlider」
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
This shop will be powered by Are you the store owner? Log in here
オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。 jQueryといえば、先週末に1.4.3にバージョンアップしましたね。 Annotation Overlay Effect with jQuery デモページ [ad#ad-2] 実装 HTML HTMLはクリーンでシンプルです。元画像(image_wrap)とオーバーレイ画像(zoom_overlay)をdiv要素で内包します。 <div class="portfolio"> <div class="portfolio_item"> <div class="image_wrap"> <img src="images/website1
先週土曜日に、WCAFのイベントでセッションを担当しました。 ターゲットはWebデザイナーとマークアップエンジニアなので、比較的簡単な内容です。 セッション内容をそのまま加筆して記事にすることにします。では、以下、その内容。 jQueryの流行 jQueryは2005年に登場後、瞬く間に広まった、JavaScriptライブラリの雄です。 ひとつ、統計情報を見つけたので紹介します。 403 - Forbidden: Access is denied. この記事の上にある折れ線グラフをご覧ください。グラフにポイントし、右端に移動すると、緑色の線上に37.71%という吹き出しが表示されます。 このグラフはTop10,000サイト中、jQueryを採用しているサイトの割合を表していて、Top10,000サイト中、40%近くがjQueryを採用しているということになります。(統計結果が信用できるかど
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作:ノードの除去 木構造の操作:ノードの追加 木構造の操作:さまざまな機能 木構造の操作
「アコーディオンパネル UI」の完成画面。ラベル部分をクリックすると、下に隠れていたパネルが表示される(画像クリックでサンプルページを表示します) シンプルなアコーディオンを作ってみよう アコーディオンの基本動作から作ります。HTML/XHTML(以下、HTML)は次のとおりで、ラベル部分をdt要素、パネル部分をdd要素で記述する定義型リストで設定します。 ▼サンプル01(HTML部分) <dl> <dt>Step.1</dt> <dd><p>Lorem ...(中略)... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...(中略)... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...(中略)... imperdiet. </p></dd> </dl> デザインはCSS
jQueryのアコーディオン効果の使い方・作り方:CSSの書き方も分かるjQueryプラグイン実践活用法(2)(1/3 ページ) jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 コンテンツを展開/折りたたみするアコーディオン効果 連載第1回の「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」では、本連載を読むための基礎知識として、JavaScriptフレームワーク/ライブラリ「jQuery」「jQuery UI」について解説し、jQueryの拡張機能であるプラグインを作成する方法についても説明しました。jQuery、jQuery UIのプラ
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
プログラミング言語の文法をまとめた最速基礎文法マスターが流行っていますが、それだけだと物足りないので少し視点を変えてJavaScriptという言語の基礎となっている概念について簡単にまとめてみようと思います。(基礎文法についてはこちらを参照してください) (20010/2/4 記述ミス Typoなどを修正しました) JavaScriptの基本概念 JavaScriptの基本となる概念は次の二つです。 連鎖指向 全てがオブジェクト 連鎖指向はプロトタイプチェーンやクロージャ、全てがオブジェクトであるという性質は連想配列やプリミティブ型などの性質に関わってきます。 連鎖指向 JavaScriptでは変数、オブジェクト、メソッドなどのリソースの利用において鎖のようにリソースを定義や宣言できるポイントが連なり、一番近くの宣言や定義に基づいてリソースの内容が決定される、という仕組みが採用されています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く