ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

JavaScript

jQuery008 スクロールボタン

スクロールボタン ■考え方 とある酒屋さんのコンテンツを想定した場合 ・画面をローディング時、「offsetメソッドで高さを取得」し変数へ入れる。 ・クリックイベント時、animate({scrollTop: topOffset }で、取得した高さまで移動する。※注意として、ready…

jQuery001 セレクタ指定

セレクタ指定 jquery/1.12.4/jquery.min.jsあとで整理します。^:〜から始まる $:最後がvalueで終わる→[attribute$=’value’] gt:greater than attr:アターって読む。 ・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化 …

JavaScript008 画像マウスオーバー時にメイン画像を切り替える

画像マウスオーバー時にメイン画像を切り替える <script> function myChgPic(myPicURL){ document.getElementById('myBigImage').src = myPicURL; } function myRtnPic(rtnPicURL){ document.getElementById('myBigImage').src = rtnPicURL; } </script></head> <body> <div class="container"> <h1>サムネールにマウ</h1></div></body>…

JavaScript007 Imageオブジェクト

Imageオブジェクト 画像に関する情報を提供したり,画像を操作したりするオブジェクト。■使用例 JavaScript006 画像クリック時に順番にループするよう切り替える - ねこきっくぱんちのメモ帳■参考 Image() - Web APIs | MDN JavaScriptリファレンス - Image…

JavaScript006 画像クリック時に順番にループするよう切り替える

画像クリック時に順番にループするよう切り替える html <script> //配列準備 var Images = new Array(); Images[0] = new Image(); Images[0].src = "img/p1_300.jpg"; Images[1] = new Image(); Images[1].src = "img/p2_300.jpg"; Images[2] = new Image(); Image…

web015 コーディング規約 (個人)

コーディング規約 (個人) 悩まず迷わず効率的な開発ができるよう、 考えて決めた事に関するコーディング規約を記載していきます。 ※随時更新0.心得的なところ ・htmlは「文書構造」を作る。 ・htmlの文法及びアウトラインチェックが完了後、css記述にうつる…

JavaScript005 スキルレベルの確認

スキルレベルの確認 現在のレベル:1.6位(初学者) 次のレベル:2(ノーマル)■参考サイト JavaScriptの業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して JavaScript講座 | 無料オンライン学習・講座で資格取得・スキルアップするなら…

JavaScript004 インクリメンタル検索の実装(incsearch.js)

インクリメンタル検索の実装 隙を見て以下サイト参考にサンプル実装したい。(備忘) incsearch.js を利用して、インクリメンタルサーチを試してみる - Qiita

JavaScript003 Dateオブジェクト

■結果 ■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>Date();</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> </head> <body> <h1>日付を取得するプログラム</h1> <p><button onClick="getDate()">生成する</button></p> <h2 id="ans">"Answer will be r…</h2></body></html>

JavaScript002 掛算表を作成する

掛算表を作成する ■コード <style> html,body,h1,h2,h3,p,ul,li,img { margin: 0; padding: 10px; line-height: 1.0; font-size: 16px; font-family: 'Hiragino Kaku Gothic ProN','Meiryo',sans-serif; } li { list-style: none; } table{ border-collapse: collap…

JavaScript001 Mathオブジェクト

Mathオブジェクトの使用例 Mathオブジェクトは、数学的な操作を行うメソッドや、 円周率などの定数などのプロパティをもっている。Math.random(); [0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返します。 var r = Math.random(); console.log(r); // …