タグ

JavaScriptとclassに関するmimosafaのブックマーク (5)

  • JavaScriptでスタイルの動的変更方法 - Qiita

    はじめに JavaScriptは動的サイトを作成することが可能である。今回はスタイルの変更方法を3つ紹介します。 class名を変更 DOM要素を取得してclassNameプロパティの値を変更する方法です。 下のソースコードにおけるid名fooのdiv要素がこちらの方法にあたります。 mouseoverイベントとmouseoutイベントを登録しておき、イベント発生時にstyle.cssで予め用意してあった.foo-beforeと.foo-afterを交換しています。 また別の方法としてclassListを使用する方法がありあます。 toggleメソッドはtoggle(clazz)のように記述し、class名にclazzが含まれていれば削除、含まれていなければ追加するものです。 他にもaddメソッドやremoveメソッド、containsメソッドが存在します。

    JavaScriptでスタイルの動的変更方法 - Qiita
  • Google流 JavaScript におけるクラス定義の実現方法

    目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを

  • PHPでのクラス定義とJavaScriptでのクラス定義を対比させてみた - Qiita

    はじめに前置き CakePHPなどでWebアプリケーションを書いてて、JavaScript側のコードが思ったように書けずに苦労するケースが割りとあるのかなと思ってます。 その要因となるものは色々あると思うのですが、考えられるものの1つとして、PHPでのクラス定義とJavaScriptでのクラス定義とがうまく対比できない所にあるのかなと思って、参考になる情報がないかググってみました。 PHPJavaScriptにおけるオブジェクト指向を比較するというスライドは情報はとてもまとまってるのですが、自分が探していたそれぞれの言語でのクラス定義の方法を対比させるようなコード例が出ておらず、しかたがないので自分でコードを書いて対比させて折角なのでドキュメントにまとめることにしました。 注意 JavaScriptでのクラス定義の方法は色々なアプローチがあると思うのですが、自分がなれ親しんでるCoffe

    PHPでのクラス定義とJavaScriptでのクラス定義を対比させてみた - Qiita
  • クラスの書き方と継承 - Qiita

    (2018/10/15編集)この内容すごいJSビギナーの時に書いたやつでして javascariptはclassやextends使えるので参考にしないほうがいいです。 とりあえずCompositeパターンで なんとなくいい感じで記述できてるような気がせんでもないが constructorとそれに付随する引数を取り入れたい… クラスの書き方 var Component= function(){}; (function(){ var _this_ = Component.prototype; ////プロパティ//// _this_.parent; _this_.name = "Component.prototype"; ////メソッド//// //for Leaf and Conmpsite _this_.operation = function(){ console.log(this.n

    クラスの書き方と継承 - Qiita
  • 1