十七章第一回 MutationObserver — JavaScript初級者から中級者になろう — uhyohyo.net
十七章第一回 MutationObserverこのページの最終更新日：2017年11月30日 第十七章では、久しぶりにDOMの話題です。DOMは主に第一篇（第二章〜第十章）で詳しく紹介しました。第十二章のHTML5に関する内容は、これまでに紹介したDOMの内容を基礎としていました。というのも、第十二章で紹介したのはDOMを使ってHTMLの各機能を操作する方法、つまりDOMの枠組にHTML5を当てはめた結果です。実際、HTML5の仕様には、各要素の定義と同時にその要素のDOM定義も定められています。 DOMも数回のバージョンアップを経験しており、伝統的にDOMのバージョンはレベルと呼ばれています。レベルが高いほど、後に定めれた高度な内容となっています。今までDOMにはレベル1から3までありました。例えばgetElementByIdなど基礎的なものはレベル1で、第十章で紹介したXPath、また
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第二回 CSSの構造このページの最終更新日：2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
五章第一回 計算済みスタイル — JavaScript初級者から中級者になろう — uhyohyo.net
五章第一回 計算済みスタイルこのページの最終更新日：2017年8月20日 五章では、DOMの話に戻ってCSSの操作について詳しく解説していきます。CSSについては二章十一回で少し触れましたが、これはまだまだ序の口です。五章ではもっと詳しい中身についてやっていきます。 今回は、まずその初めとして、計算済みスタイルというものを取得することについて解説します。 まずは次のサンプルを見てみましょう。 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> p { background-color: yellow; } </style> </head> <body> <p>testtest</p> </body> </html> このサンプルで、p要素の背景は黄色です。それは当然、スタイルシートでp要素のba
三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net
三章第五回 イベントオブジェクトこのページの最終更新日：2017年11月13日 イベントオブジェクトというものが存在します。実は、イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。 イベントオブジェクトの取得では、そのイベントオブジェクトはどうすれば手に入るかというと、実は、addEventListenerで登録したイベントリスナの第1引数（最初の引数）に、イベントオブジェクトが渡されます。つまり、 <!doctype html> <html> <head> <title>test</title> </head> <body> <p>test</p> <script type="text/javascript"> var p = document.getElementsByTagName('p').item(0); var listener =
二章第十二回 フォームの操作 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第十二回 フォームの操作このページの最終更新日：2017年9月29日 フォームについての説明は、基礎第六回にもありましたね。今回はよりDOM的な観点からフォームについて振り返ります。 HTMLFormElementform要素のHTMLElementは、HTMLFormElementと呼ばれます。 このform要素ですが、今までと同様にgetElementByIdなどで取得することも可能ですが、実は専用のものもあります。 それは、documentが持つformsというプロパティで、これはHTMLCollectionです。例えば、 <!doctype html> <html> <head> <title>test</title> </head> <body> <form id="form1" action="?"> </form> <script type="text/javascrip
二章第六回 木構造の操作：さまざまな機能 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第六回 木構造の操作：さまざまな機能このページの最終更新日：2019年7月1日 前回、木構造の操作の基本を解説しました。他にもさまざまなメソッドがあるので、解説します。 getElementsByTagNamegetElementsByTagNameというメソッドがあります。これはdocumentやノードが持つメソッドです。これは引数に要素名を渡すと、その要素の一覧のNodeListを返します。NodeListについては、二章第三回を参照して下さい。NodeListの重要な特徴は、木構造の変化が反映されるという点です。つまり、getElementsByTagNameを呼び出してから木構造に追加された要素もNodeListに入るし、逆に木構造から除かれた要素はNodeListからも除かれます。 documentが持つgetElementsByTagNameを呼び出した場合、文書全てのノー
二章第五回 木構造の操作：ノードの追加 — JavaScript初級者から中級者になろう — uhyohyo.net
二章第五回 木構造の操作：ノードの追加このページの最終更新日：2017年10月5日 今回は、前回とは逆に新しいノードを子に追加するということを解説します。 ノードを作るまず、ノードを追加するには、追加するノードを新しく作る必要があります。その方法を解説します。 createElementcreateElementというメソッドがあります。これは、要素名を指定することで、新しいHTMLElementを作って返すメソッドです。これはdocumentが持つメソッドです。つまり、次のように呼び出します。 document.createElement('p')では、次のサンプルを見てください。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="aaaaa">t<strong>es</strong>t</p>
二章第三回 基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net
二章第三回 基本的な操作とテキストノードこのページの最終更新日：2017年11月10日 今回から、いよいよWebページにも多少動きが出てきます。 innerHTML前回、ちらっと「innerHTML」というプロパティが出てきました。これはHTMLElementが持っているプロパティです。 これは、要素の中身がHTMLで代入されているというものでした。 それでは、今度はそこに新しい中身を代入したらどうなるでしょう。なんと、実際に書きかわります。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="aaaaa">t<strong>es</strong>t</p> <script type="text/javascript"> var p = document.getElementById('aaaaa'
八章第三回 Rangeの活用とSelection — JavaScript初級者から中級者になろう — uhyohyo.net
八章第三回 Rangeの活用とSelectionこのページの最終更新日：2017年9月5日 Selectionとは前回でRangeの機能はだいたい解説しました。しかし、正直なところ、これをいつ使う機会があるのか分からないという人もいるかもしれません。しかし、Selectionというものを使うときにはRangeが大きく関わってきます。 それでは、このSelectionとは何なのでしょうか。 これは、ユーザーが選択した範囲を表すものです。皆さんもブラウザ上でテキストを選択するという操作をしたことがあると思います。これは範囲なので、ここでRangeが登場するわけです。 Selectionの取得Selectionは、Rangeとは違うオブジェクトです。Selectionを取得するには、window.getSelectionという関数を使います。引数はありません。 var selection = w
二章第二回 DOMとは — JavaScript初級者から中級者になろう — uhyohyo.net
二章第二回 DOMとはこのページの最終更新日：2017年10月4日 今回から、しばらく「DOM」について解説していきます。DOMとは、「Document Object Model」のことで、プログラムでHTML（やXML）を扱うための仕様です。（ブラウザ上で実行される）JavaScriptはこのDOMに対応していて、DOMの仕様にそってHTMLを操作することができます。 仕様書DOMには「仕様書」があります。「こういう操作をするにはこういうメソッドを使って、こういう場合にはこうこう……」といった具体的な方法が書いてあります。ここに書いてあることがDOMの全てだといえます。 仕様書はいくつもあります。例えば、一番初歩的なのはDOM Level 1という仕様書です。これは一番基本的な部分について記述してあります。実は、これを読んで理解できればこんなサイトを見る必要はありません。しかし、仕様書を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
