HTMLをJavaScriptから操作するときに用いる形式 DOM
Tweet Tweet前回は、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについてまとめた。ここでは、HTMLをJavaScriptから操作するときに用いる形式であるDOMについて解説する。 １ DOMとは DOM（Document Object Model）とは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPIである。DOMではHTMLドキュメントやXMLドキュメントをオブジェクトのツリー状の集合（DOMツリー）として取り扱う。DOMツリーの中の一つひとつのオブジェクトはノードと呼ばれる。 DOM Level 1 DOM Level 1にはCoreとHTMLの2つのモジュールから構成される。CoreはHTMLに限らない一般的なDOM操作についての仕様で、HTMLはHTML文書に特有のメソッドについての仕様である。 DOM Lev
開発、実行、デバッグ クライアントサイドJavaScriptとHTML
Tweet Tweet前回は、配列、JSON処理、日付処理、正規表現などJavaScriptのデータ処理についてまとめた。ここでは、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについて解説する。 １ クライアントサイドJavaScriptの重要性 Webアプリケーションの発達 インターネットの発展により複雑な機能を提供するWebページが作成されるようになった。これらのWebページは一般に単なる文書ではなくアプリケーションであるという意味からWebアプリケーションと称される。 Webアプリケーションの機能を実現するためには2つの場所で処理を実行する。すなわち、サーバサイドとクライアントサイド（Webブラウザ）である。サーバサイドの処理は、Java、Perl、Python、Ruby、SQLなどといった多様な言語で実装される。それに対してクライアントサイドの機能を
配列、JSON、日付、正規表現 JavaScriptのデータ処理
Tweet Tweet前回は、関数自体の演算と状態を持つ関数である関数とクロージャについてまとめた。ここでは、配列、JSON処理、日付処理、正規表現 JavaScriptのデータ処理について解説する。 １ 配列 配列は順序のある要素の集まりである。JavaScriptの配列の長さは可変である。なぜならJavaScriptの配列はオブジェクトだからである。 JavaScriptの配列 JavaScriptの配列はリテラル表記とnew式（後述）の2つの方法で生成できる。配列リテラルはブラケット（[]）の中に配列要素をカンマで区切って並べる。要素がない配列は長さゼロの配列である。要素には任意の値やオブジェクト参照を指定できる。 配列の要素アクセス 配列の要素のアクセスはブラケット演算子（[]演算子）で行う。[]内には添字の数値を書く。添字は0から始まる。要素のない添字を指定するとundefine
関数自体の演算と状態を持つ関数 関数とクロージャ
Tweet Tweet前回は、オブジェクト指向を支援する機能を提供するオブジェクト指向言語であるJavaScriptにおける変数とオブジェクトについてまとめた。ここでは、関数自体の演算である関数と状態を持つ関数であるクロージャについて解説する。 １ 関数宣言文と関数リテラル式 関数宣言文と関数リテラル式で関数を宣言できる。関数宣言文で宣言した関数は宣言より前に呼び出し可能である。 ２ 関数呼び出しの整理 関数呼び出しの分類は以下の通り。 メソッド呼び出し：レシーバオブジェクト経由での関数呼び出し（applyとcallの呼び出しも含む） コンストラクタ呼び出し：new式での関数呼び出し 関数呼び出し：上記2つ以外の関数呼び出し 関数宣言文の巻き上げ 関数宣言文で宣言した関数は、宣言した行より前のコードから呼べる。 ３ 引数とローカル変数 argumentsオブジェクト 関数内でargumen
オブジェクト指向言語JavaScript 変数とオブジェクト
Tweet Tweet前回は、JavaScriptの文法規則 文、式、演算子についてまとめた。ここでは、オブジェクト指向を支援する機能を提供するオブジェクト指向言語であるJavaScriptにおける変数とオブジェクトについて解説する。 １ 変数の宣言 変数の役割は値の格納やオブジェクトを名前で呼ぶことである。宣言しただけで何も代入していない変数の値はundefined値である。 ２ 変数と参照 変数が名前を付ける対象の代表はオブジェクトである。オブジェクトそれ自体には名前がなく、名なしのオブジェクトを名前で呼ぶために使うのが変数である。変数には基本型変数（値型変数）と参照型変数の区別がある。参照とは、オブジェクトの位置情報を指し示すモノと言える。 関数の引数（値渡し） 値渡し（call-by-value）とは、JavaScriptの代入演算は右辺から左辺への値のコピーと考えるといった規則の
JavaScriptの文法規則 文、式、演算子
Tweet Tweet前回は、５つの基本型とオブジェクト型 JavaScriptの型についてまとめた。ここでは、JavaScriptの文法規則 文、式、演算子について解説する。 １ 式と文の構造 JavaScriptのソースコードは文の集まりである。文は文と式から構成される。式は式と演算子から構成される。 式を最後まで分解すると、識別子（変数名や関数名）とリテラル値（数値や文字列の直接表記）と演算子（記号が予約語）になる。 ２ 予約語 予約語（reserved word）はECMAScript第5版は以下の5つに分解される。 キーワード：break、do、instanceofなど 将来の予約語：class、enum、extendsなど null：リテラル値 true：リテラル値 false：リテラル値 ３ 識別子 識別子は変数名や関数名など、開発者がプログラムの中で定義する単語である。識別
５つの基本型とオブジェクト型 JavaScriptの型
Tweet Tweet前回は、インタプリタ言語、動的型言語など JavaScript の言語仕様についてまとめた。ここでは、５つの基本型とオブジェクト型という合計6つの型がある JavaScript の型について解説する。 １ 型とは 型とは対象の特徴を決定づけるものである。JavaScriptには以下の5つの基本型がある。 文字列型 数値型 ブーリアン型 null型 undefined型 5つの基本型以外をオブジェクト型と呼ぶ。つまりJavaScriptの型は6種類に分類できる。なお、基本型のインスタンスを「値」と呼び、オブジェクト型のインスタンスをオブジェクトと呼ぶ。 型に関してJavaとの比較 型に関してJavaScriptとJavaの比較は以下の2つである。1つは動的型と静的型という視点、もう1つはクラスベースとプロトタイプベースの視点である。前者では、Javaのように変数に型のあ
HugeDomains.com
Captcha security check stack3.com is for sale Please prove you're not a robot View Price Processing
Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
html5j.org
html5jについて html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。私たちは、日本のWebクリエイター・エンジニアのスキル向上をお手伝いして、日本が世界のWebシーンをリードするような存在になることを心より願っています。 html5jの活動 html5jはWebクリエイター・エンジニアの皆さんに対し、「つながる」「学べる」「盛り上がる」を合言葉とし、以下の活動を行なっています。 html5jメーリングリスト Web開発に関する話題について質問したり、共有したりするためのメーリングリストです。また、勉強会の告知なども行なっています。 html5jメーリングリストに参加する （Googleグループに移動） 投稿ルール HTML5などの技術やWeb開発に関する話題であれば、どんな内容でも構いません。
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞ 斉藤 祐也（株式会社リッチメディア） Steven Wittens氏によるAcko.netのヘッダーアニメーション実装の解説、Node.jsをこれから始める人必見のチュートリアル、そしてPromises/A+の仕様を実装を通じて学べるチュートリアルなど、14日間のWeb開発最新ニュース合計18件を紹介します！ 注目ニュースピックアップ WebGL、CSS 3Dで最大のパフォーマンスと表現力を実現 — Acko.net 原題: Zero to Sixty in One Second Acko.netのSteven Wittens氏がWebにおける技術と表現力を最大限に発揮してくれた。 昨年1月にCSS3を使った3Dの表現の限界にチャレンジしたSteven。今年、Acko.netの13周年にあたって
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
機能だけをシンプルに実装できる jQueryを中心としたライブラリ
スタイル、AJAX、フォーム 実践クライアントサイドJavaScript
要素を取得しイベントハンドラを登録 イベントの取り扱い
High Performance Web Frontend 2013 秋
コロコロ公式サイト｜コロコロゲームクラフトブロック