タグ

ブックマーク / uhyohyo.net (6)

  • 十二章第三回 History API — JavaScript初級者から中級者になろう — uhyohyo.net

    十二章第三回 History APIこのページの最終更新日:2018年7月29日 次に紹介するのがHTML5 History APIです。Historyとは履歴のことです。履歴関係のことは、historyという名前のオブジェクトから利用可能です。 古典的な履歴操作実はこのhistory自体は昔からあって、いくつかメソッドを持っていました。 history.back(); 例えばhistory.backメソッドは、いわゆるブラウザの「戻る」ボタンと同じ動きです。 実際にやってみましょう。 このボタンは次のようにできています。 <input type="button" value="戻る" onclick="history.back()"> このボタンを押すと、ブラウザの「戻る」ボタンを押したときと同じように前のページに戻ります。 逆に「進む」はhistory.forward()です。他に、「

    十二章第三回 History API — JavaScript初級者から中級者になろう — uhyohyo.net
  • 十二章第四回 dataset — JavaScript初級者から中級者になろう — uhyohyo.net

    十二章第四回 datasetこのページの最終更新日:2019年7月1日 今回はちょっと息抜きで、簡単ですが便利なdatasetを紹介します。 HTML5には独自データ属性というものがあり、簡単にいうと、要素に好きな属性をつけられるというものです。 ただ、完全に自由に属性に名前をつけていては大変なので、data-という接頭辞をつけた属性を勝手に自分で作っていいことになっています。つまり、具体的には例えばこうです。 <div data-foo="hi"> この例ではdiv要素にdata-fooという独自データ属性がつけられています。 もちろん自分で勝手に作ったので、HTML的にはこの属性には何の意味もありません。じゃあ何に使うのかというと、そう、JavaScript側から利用できるのです。JavaScriptから読む用にHTML要素に付加的な情報をつけるのが独自データ属性の主な役割となります。

    十二章第四回 dataset — JavaScript初級者から中級者になろう — uhyohyo.net
  • 十三章第三回 Web Messaging — JavaScript初級者から中級者になろう — uhyohyo.net

    十三章第三回 Web Messagingこのページの最終更新日:2018年7月29日 第十三章のテーマは「通信」でしたね。次に紹介するのはWeb Messagingです。前回と前々回ではHTTP通信にかかわる機能を紹介しましたが、今回のこれはHTTP通信はしません。 それではどのような通信かというと、これはブラウジングコンテキスト間の通信です。 ブラウジングコンテキストとは何かというと、これはブラウザのタブの1つ1つのことです。つまりブラウジングコンテキストで通信するということは、複数のタブの間でデータをやりとりするということです。 ただし、ここでいう複数のタブというのは同じ人の、同じブラウザのタブです。Web Messagingはインターネット上を通信するものではなく、あくまで各個人のPCやスマートフォン等の中で、異なるタブの間でデータをやり取りできるということです。その意味では、前回ま

    十三章第三回 Web Messaging — JavaScript初級者から中級者になろう — uhyohyo.net
  • 十一章第一回 配列 — JavaScript初級者から中級者になろう — uhyohyo.net

    十一章第一回 配列このページの最終更新日:2019年7月1日 第十一章では、ECMAScript 5 (ES5)について解説します。 ES5は今ではごく当たり前に使われていますが、この講座を最初に書いたとき(2010年)は最新鋭のJavaScriptでした。そのような歴史的経緯から、これまでこの講座はES5の内容を積極的に紹介していませんでした。ES5より前のJavaScriptはES3と呼ばれますが、これまでの講座では基的にES3の範囲のJavaScriptを紹介してきたのです(実はゲッタとセッタだけES5の範疇にだいぶ踏み込んでいましたが)。 今回からはES5の内容に入ります。新しい内容を解説するとともに、これまで解説した内容についてもES5の新しい機能を携えて再訪していきます。その中でも、今回は配列について見ていきましょう。 配列といえばはるか昔に基礎第六回で解説しましたが、基礎の

    十一章第一回 配列 — JavaScript初級者から中級者になろう — uhyohyo.net
  • 一章第三回 配列のコピー — JavaScript初級者から中級者になろう — uhyohyo.net

    一章第三回 配列のコピーこのページの最終更新日:2017年6月2日 今回はオブジェクトの扱い方について、配列のコピーを例にとって説明します。前回説明したように、オブジェクトを正しく扱うにはその特徴を正しく理解する必要があります。今回は練習問題みたいなものなので、ぜひ理解して次に進んでください。 配列のコピーとは配列のコピーとは、読んで字のごとく、配列を複製することです。 しかし、前回解説した通り、配列のオブジェクトの一種なので、以下のようにしただけでは、結局同じ配列が複数の変数に入っている状況になります。 var a = [0,1,2,3,4]; b=a; a[5]=5; alert(a); alert(b);このコードでは、変数bにaを代入してからaを変更すると、bの中身も同じように変更されてしまっています。これは、aとbに入っているのが同じオブジェクトだからです。 そこで、ちゃんと別の

    一章第三回 配列のコピー — JavaScript初級者から中級者になろう — uhyohyo.net
  • 十二章第一回 classList — JavaScript初級者から中級者になろう — uhyohyo.net

    十二章第一回 classListこのページの最終更新日:2017年9月20日 この章のテーマはHTML5です。HTML5は新世代のHTMLで、2010年代に入ってから普及が始まりました。この講座を最初に書いた当時はHTML5は最先端の技術でしたが、何回かの改稿を経た今(2017年9月)となってはごく当たり前の技術となっています。 この章ではHTML5に関連する内容を解説します。というのも、HTML5の策定に伴ってHTML用のDOMにも新しくて便利な仕様が加えられました。 HTML5がよく分からないという人は、昔書いたHTML5講座も合わせて読むといいでしょう。 また、この章では、HTML5とは直接の関係が無いもののHTML5の時代に出現してきたような新しいAPIについても解説していきます。 さて、今回まず紹介するのはclassListです。これは非常に便利です。名前から想像がつくかもしれま

    十二章第一回 classList — JavaScript初級者から中級者になろう — uhyohyo.net
  • 1