初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript

HTML CSS Javascript スマフォサイトナビをクリックすると表示・非表示にする

<html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="apple-touch-icon" href="touch-icon.png"> </link></meta></meta></meta></head></html>

Javascript CSS3 ハンバーガーボタンを作成する

画像などは使わず、CSS3とjavascriptでハンバーガーボタンを作成してみます。 クリックすると×に変わります。 <body> <div class="item"> <button class="cmn-toggle-switch cmn-toggle-switch__htx"> <span>toggle menu</span> </button> </div> </body> </html> /* ============================================================================= DEMO STUFF ======…

jQuery ホバーした方向によってスクロールの方向も変わる

職業訓練の先生に教えてもらったサイトのjQueryの動きが カッコ良かったのでアナライズして余計な記述を削ぎ落として 分かりやすくシンプルに変更してみました。画像をホバーするとホバーした方向から画像にカバーがかかる エフェクトです。 デモはこちらに…

jQuery Frameworksでソート機能をつける

jQueryでソート機能をつけてみます。 とてもシンプルな記述でソートがつけられます。以前のデータの流用なのでFancyboxも適応しているものになります。 <html> <head> <meta charset="UTF-8"> <title>Fnacy Box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.fancybox.css"> </link></link></meta></head></html>

Javascript DOM(Document Object Model) 2

DOM DocumentオブジェクトによるHTML要素の操作 HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノー…

Javascript DOM(Document Object Model) 1

今後jQueryを学ぶ際に、より深く理解ができるよう密接な関係を持つDOMについて数日記述いたします。 DOMがわかるとjQueryが理解しやすくなるのでこれからjQueryを学ぼうと思っている方はDOMも勉強することをお勧めいたします。 DOMとは DOMとはDocument Obje…

Javascript ブラウザオブジェクトと主なメソッド

ブラウザオブジェクトとは、ブラウザに組み込まれているオブジェクトでブラウザ上の情報は、全てオベジェクトとして扱うことができます これらのオブジェクトを総称して「ブラウザオベジェクト」と呼びます。 《主なブラウザオブジェクト一覧》 種類説明 Win…

Javascript randomメソッド

先日記述したrandomメソッドを使用して ランダムな整数を生成する方法を記述します。 randomメソッドを使うと0~1の間の乱数を取得できます。 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド …

Javascript 確認テスト 解答

先日記述した確認テストの答えを記述します。 Javascript 確認テスト1 - 初心者のWEBデザイン Javascript 確認テスト1 - 初心者のWEBデザイン qustion1 Javascriptを作成される前の標準化された言語を答えなさい? ECMAscript qustion2 同一ディレクトリ内の…

Javascript Mathオブジェクト

Mathオブジェクト Mathとは「数学(Mathematics)」の意味。数値演算に便利なプロパティやメソッドが利用できるオブジェクトです。 Dateオブジェクトの様に前もってインスタンスを生成する必要はなく,スタティックメソッドである。 (インスタンスを生成しな…

Javascript 確認テスト1

Javascriptに慣れるには沢山記述するしかないとの事で練習問題を記述します。 後日答えをアップします。 // qustion' + i + ''); document.write('' + q[i-1] + ''); } // ]]>

Javascript Dateオブジェクト

Dateオブジェクト オブジェクトとはデータと処理をまとめたものです。【 new演算子】を使用し、新しいオブジェクトを作成する。生成されて利用可能になったオブジェクトのことを「インスタンス」と呼びます。 Dateオブジェクトは、日時データとそのデータを…

Javascript 組み込み関数

JavaScriptがすでに備えている関数 関数名説明 parseInt 文字列型の数字列を数値型(整数)に変換する parseFloat 文字列型の数字列を数値型(実数)に変換する isNaN 指定された値がNaNであるかどうか調べる encodeURIComponent 指定された文字列をURIエン…

Javascript 配列と連想配列の比較

配列と連想配列を比較する簡単な表を作成しましたので記載します。 配列名に 大文字の使用×○注意事項× 変数にキーを代入し参照する事も出来る。 var 変数 = キー; console.log(連想配列名[変数]); 配列と連想配列 配列連想配列 宣言方法 var 配列名 = [値1,…

Javascript 連想配列

連想配列 連想配列は、数値の代わりに任意の文字列をインデックスにすることで、各要素を区別しやすくすることができます 連想配列の場合、インデックスのことを【キー】と呼びます 全体の囲み方は、配列とは異なり【カールブラケット{ }】になります var 連…

Javascript 配列

要素の集合体 配列は変数の集まりによって構成され、各々の変数を【要素】と呼びます。 各要素を区別する為に【インデックス】と呼ばれる番号が割り当てられます。 配列を定義するには 変数と同じように【var】を使います。【ブラケット[ ]】で囲む事で配列…

Javascript 関数 引数 戻り値

関数について記述します。 関数はfunction文を使って定義します。 定義した関数を実行するには 定義した関数名を記述するだけでOKです。 逆に言えばfunction文で関数を定義しても、実行の記述をしなければ、何も起こらないのが関数です。 関数の定義 functio…

Javascript 画像置換 マウスオーバー・マウスアウト

Javascriptで簡単に画像置換をする方法を記述します。 モノクロ画像の上にマウスを乗せるとカラー画像にする方法になります。 写真加工・Javascriptを分けて記載していきます。 写真をトリミングする。モノクロ画像にする まず何でも良いので画像の素材を用…

Javascript 演算子 2

前回に引き続き演算子について記述していきます。 typeof演算子 【typeof演算子】を使うと、型を調べることができます。 型表示具体例注意点 数値型 number a = 123;b = -5; 負の値には【-】をつけます。 論理型 boolean a = true; b = false; 【true(真)…

Javascript 演算子 1

演算子 データに処理を加える記号を演算子と呼びます。 一方の、演算子によって処理されるデータはオペランド、演算子とオペランドの組み合わせのように、値を生成する文を式といいます。 算術演算子 一番シンプルで馴染みがある演算子です。 演算子読み仮名…

Javascript 変数 1

Javascriptを扱う上で大事な変数について記述します。 記述する順序が逆ですがif文より先に記述する内容です。 変数 【変数】は、数値や文字などを格納しておく【箱】のようなものです。 a = 2; 【a】という名前の変数に【2】という数値を入れました。 変数…

Javascript if文

Javascript if文 Javascriptを記述する上でif文という構文があります。 感覚的には記述方法こそ違うものの、Excel関数のIFに似ています。 もし条件を【a >10】と定義したなら、【True】。 それ以外(a < 10)なら【False】となります。 if(条件式){ 条件を…

Javascript 初心者のJavascript

Javascriptに初めて触れてました。 昨日から学校でJavascriptの授業が始まりました。 HTMLやCSSに初めて触れた時と同様に何が分からないのかも分からない状態です。 手探りで少しずつ情報を整理して徐々に慣れていきたいと思います。早速忘れないように初歩…

topへ戻る