HOME

説明 ◆動くJavaScript◆ HOMEページ内メニュー 

現在のブラウザのバージョン&フォント最小サイズ  ◇HTMLのドキュメントタイプ  ◇CSSの記述(接頭語)について  ◇JavaScriptのコピペの方法  ◇外部jsの作成方法  ◇画像の指定方法について  ◇著作権と再配布について  ◇GF作品について  ◇全ページ内参考リンク


動くJavaScript(うごくジャバスクリプト)は、コピーだけで動作するJavaScriptのサンプルを紹介するサイトです。

JavaScriptの変数には、グローバル変数とローカル変数があります
たとえば複数のJavaScriptを同じページで動作させる時、同じグローバル変数を使用すると、変数が上書きされて、1個のJavaScriptしか動作しません。
そのため同じ場合は、片方のグローバル変数を書き直したりするわけですが、いちいちチェックするのは大変です。
解決法の一つに、即時関数を使用して即時関数でJavaScriptを囲むことで、グローバル変数をローカル変数に変更する方法があります。
しかし、私がその方法を知ったのはつい最近で、現在少しずつ修正しています。
修正済みの分については、他のJavaScriptの邪魔をしたり邪魔をされたりせずに、動作すると思います。
もちろん同じグローバル変数以外にも、同じ id を使用すると、JavaScript は動作しません。
   
それぞれのコーナーごとに、
全件修正済みの場合は  全件グローバル変数を削除済み:2016/XX/XX 
個別の場合は、メニューのタイトルの前に 
それぞれのページには、●2016/XX/XX:即時関数で囲んで、グローバル変数を消しました。
と記述して、修正済みかどうかがわかるようにしています。    記:2016/01/24

「グローバル変数のみの修正分」は量が多いので、最終更新日のコーナーには掲載しません。

タグもスタイルシートもよくわからなくて、htmlもcssもほとんど解説用のサイトのコピペですませている方。
でも、ちょっとだけ画像を動かしてみたい方。
マウスを動かすとキラキラ星が降ったり、春には桜、秋には枯葉、冬には雪なんか降らせたり、写真やイラストをスライドショーさせたり、ひらひら蝶々を飛ばしてみたい方。

そんなふうに画像を動かすのはJavaScript(ジャバスクリプト)だっていうのはわかったけれど、jQuery(ジェイ・クエリー)って……?
ダウンロードとかプラグインとか、jQuery ってわけわからん。
コピペじゃだめかな……? コピペだけで動くJavaScriptはないのか?……、そんなふうに思っている方。

そんな方のために、いままで集めたフリーの動くJavaScript(ジャバスクリプト)のサンプルを公開します。
スライドショーやマウスストーカー、雪が降ったり泡が上ったり、画像がふわふわ浮いたりするJavaScriptで、インパクトのある楽しいページが作れます。
使用可能なら、どうぞお使い下さい。

by ディブ・アラジン・千田

jQueryは、JavaScriptファイル全部をダウンロードさせてるわけではありません。
もしもGoogleがダウンしたらどうするんだろって思う私は、心配性かもしれません。
↑↑以上、使いこなせない人間の負け惜しみ★

現在のブラウザのバージョン &フォント最小サイズ

自分で確認できるブラウザは下記の通りです。
これ以上でも以下でも、きちんと見えるかどうかは不明ですが、これらのブラウザなら見えます。(2014年4月現在)
  ●InternetExplorer 11
  ●Chrome 34.0 → 43.0 (2015年6月現在)
  ●Firefox 28.0 → 38.0 (2015年6月現在)
  ●Opera 20.0 → 30.0 (2015年6月現在)

■FirefoxではGIFアニメが正常に動作しないことがあります。(2014/09/24 付記)■
■ChromeとOperaには、「最小フォントサイズ」という設定項目があって、10px未満のフォントサイズは CSS で指定しても表示不能です。CreativeStyle を参考に設定を変更しても6pxまで。(2015/05/25 付記)■

HTMLのドキュメントタイプ

HTMLのタグのコピペ(笑)…もとい、記述でサイトを作る時、最初にするのがドキュメント宣言です。
なぜだか、上記のブラウザで動いて見えたものが、ドキュメント宣言を変えたことで動かなくなることもよくあります。
自分で確認した動くドキュメント宣言は下記の通りです。(2014年2月現在)
  ●<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  ●<!DOCTYPE html>
しかし今回<!DOCTYPE html>はHTML5の宣言であり、まだ完全普及でないこともあって、こっちだけ動作しない分に対しては、HTML5と表記して載せてあります。

ドキュメント宣言についての説明は、こちらの二つのサイトの説明をどうぞ。
TAG indexHTMLクイックリファレンス

CSS(スタイルシート)の記述・接頭語(ベンダープレフィックス)について

CSS3を利用するために、-webkit-や -moz-等の接頭語(ベンダープレフィックス)の面倒な記述が必要になり、当サイトでもprefixfree.jsを使用したりアレコレ対応策をやっていました。
しかしさすがにもう接頭語(ベンダープレフィックス)は不要だろうというほんっとにはじめての HTML5の記事を発見。

これ以後はすっぱりと止め、標準記述のみにします。
古いブラウザでは動作しないかもしれませんが、セキュリティの面からもバージョンアップをお勧めします。(2015年6月23日現在)

JavaScriptのコピペの方法

ソースエリアには2種類あります。『すべて選択』の出し方だけ違いますが、その後は同じです。

■ボタンで開閉するソースエリアの場合(新)■
ソースエリアの中をどこでも左クリックすると、青いハイライト画面の『すべて選択』になります。 ←これはボタンの見本です。

■オレンジ色のソースエリアの場合(旧)■
使いたいJavaScriptのページ上に、ソースのエリアがあります。
そのソースの中ならどこでもいいので、マウスを置いて右クリック。すると、いろいろ表示がでます。
その中の『すべて選択』を選んで左クリック。青いハイライト画面になります。
◆◇◆ ブラウザによっては上記↑の方法では『すべて選択』が出ない時があります。
その場合は、ソースの上で一度左クリックしてから、キーボードの「Ctrl」と「A」を同時押下して下さい。
青いハイライト画面になります。◆◇◆

■その後のコピー、貼り付けの方法■ 青いハイライト画面になったら、右クリックして『コピー』。
そのソースを、自分のパソコンのメモ帳に貼り付けます。
そのメモ帳に好きなファイル名を付けて、拡張子txtをhtmlに変更して保存。
その後、画像ファイル名を自分の画像と変えて、動作するかどうかを確認して下さい。

JavaScriptの記述は、
<script type="text/javascript">
<!--
から
// -->
</script>
までです。

この表示は、</title>〜</head>の位置に書かれていたり、<body>〜</body>の位置に書かれていたりします。
メモ帳から自分のサイトのhtmlにコピペしなおす時には、貼り付ける位置を間違わないこと。
位置が違うと、動かない時があります。
そして<body>の中に<body onload="●●">とある時は、onload="●●"も必ず記述して下さい。

付記:最近では、できるだけ最後の方で記述する方が読み込みが速いとのデータがあります。
   もし動作可能なら、最後の方で。</body>直前で。
   特に当サイトでは document.write を多用してます。
   この document.write は読み込み完了まで、その記述から以降の読み込みをしません。
   だから一番下の</body>直前に配置することで、全体のページ表示が少しでも遅くなるのを防止して下さい。
付記:最近(2014/09/29現在)の記述では、<script>〜〜</script>と記述されることも多いようです。
   詳細はHTMLクイックリファレンスから。
付記 : 2015/02/05 ボタンクリックで開閉する、大きなテキストエリアで、全ソースを表示するようにしました。
付記 : 2015/09/12 開閉式を止め、最初から大きなテキストエリアで表示するようにしました。

 

外部js の作成方法

JavaScriptを、外部ファイルで指定する方法があります。
その外部ファイルを「外部js」といいます。
その簡単な作成方法を説明をします。詳しいことは、それぞれご自分で調べて下さい。

「外部js」を作成する時は、js分には
JavaScriptの外側の記述部分の
<script type="text/javascript">
<!--

// -->
</script>
は不要
になります。上記の外側部分を除いた、中身部分だけを記述します。
そしてその中身を、拡張子jsで保管します。「●●.js」という形式です。
その「外部js」を「html」で呼び出します。
「html」の「body」の中に
<script type="text/javascript" src="●●.js"></script>
と記述
して、JavaScriptを呼び出します。●●の部分は、お好みで名前を付けて下さい。

見本として、下記を参考にして下さい。
■通常の「html」の中に、全部のJavaScriptを記述した例 → マウスストーカー1-2■文字■虹色のキラキラ星 -2013年版改造
■別に「外部js」を作成して、それを「html」で呼び出した例 → マウスストーカー1-2■文字■外部js用虹色のキラキラ星 -2013年版改造
外部jsのメリットは、複数の「html」で簡単にJavaScriptを呼び出すことができる点です。
そして「html」をアップロードする時は、使用する「外部js」も、必ずアップロードして下さい。
(2017/05/16:記)

画像の指定方法

質問が多かったので、JavaScriptのソースの中での画像の指定方法を説明します。(2016/03/31:記)

基本として、
var ga=new Array();
ga[0]="a.jpg";
ga[1]="bb.gif";
ga[2]="cc1.png";

を簡略化した指定方法が、下記になります。上も下も同じ意味です。
var ga=["a.jpg","bb.gif","cc1.png"]; または var ga=['a.jpg','bb.gif','cc1.png'];

それでは、画像がhtmlとは別のディレクトリにあったり、別のフォルダーに入っていたりする時の記述方法を説明します。
JavaScriptとは無関係に、その画像を表示する時はどうしますか?
画像のある場所によって、
<img src="a.jpg">とか<img src="image/bb.gif">とか<img src="../image/hana/cc1.png">とか記述して表示すると思います。
JavaScriptでの画像指定も、上記と全く同じです。
<img src="●">の赤字の部分を記述をします。
var ga=["a.jpg","image/bb.gif","../image/hana/cc1.png"];

さて、JavaScriptのソースの中には、下記のように画像指定の下に「myurl」が付いているモノもあります。
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
この項目は、画像指定が簡単にできるように付けたものです。
JavaScriptのソースの中で指定する複数の画像が、全部同じディレクトリやフォルダーに入っている時、その共通部分を記述します。

たとえば全部の画像が「htmlより上のディレクトリのimageというフォルダー」に入っていたら
var ga=["a.jpg","bb.gif","cc1.png"];
var myurl="../image/"; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

と記述します。
もちろん
var ga=["../image/a.jpg","../image/bb.gif","../image/cc1.png"];
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

と記述してもかまいません。
「var myurl="";」を利用しない時は、「var myurl="";」のまま残してください。削除するとエラーになります。

どうしても画像のディレクトリの位置がよく把握できない場合は、
「http://〜〜」を使用した絶対位置指定で指定することもできます。
var ga=["http://〜〜/a.jpg","http://〜〜/bb.gif","http://〜〜/cc1.png"];
その時も、画像の共通部分だけ「var myurl="http://〜〜/";」に記述し、違う部分だけvar ga=[〜〜]に記述することもできます。

著作権と再配布について

JavaScriptの記述の中には、//の後や、/*と*/の間にコメントが書いてあります。
実はこの部分は、JavaScriptを動かすためには全く必要のない部分です。削除しても動きます。

しかし!!!
この部分には、そのJavaScriptの著作権のある作成者の名前やサイトが書いてあります。英語でようわからんと思っても、英語でアレンジの方法が書いてあったりもします。
自分がわからんでも、アレンジ方法を理解できる人もいます。
作成者のサイトに行って、もっと素敵なJavaScriptを見つけることも可能です。
残念ながら、記載のサイトが閉鎖されてることも多いですが…。
中には、著作権のリンク部分を載せるのが必須というモノもあります。

苦労して作って下さったJavaScriptです。コメント部分は削除されませんよう。
よくわからないうちは、変更するのは、画像部分と色と数値だけにしましょう。

でもでも、、私の書いてる★ここからコピペ などの文は、慣れたら消して下さいね!

■再配布に付いて■
お問い合わせをいただきましたので、再配布に付いて。
当サイトの JavaScript は、再配布されてもかまいません。修正、改造なども自由です。
ただし、その場合は、JavaScript のソースの中に記述されているオリジナル原本作成者のサイト名等を、削除せずに再配布して下さい。
JavaScriptの著作権については、そもそもネットスケープ以外に存在するのか?という疑問もありますが、余人には作成不可能なユニークな素晴らしいJavaScriptを作成された「Kurt Grigg」や「Gerard Ferrandez」のような方もおられます。
どうか、オリジナル原本作成サイト名等は記述を残して下さい。

説明 ◆Gerard Ferrandez作品について◆

当サイトで紹介しているJavaScriptの中に、GF作品と書いてあるモノがあります。
これはGerard Ferrandez作品という意味です。

Gerard Ferrandezさんのサイトでは、アニメーションのような不思議な作品を、ソースとともに公開されています。
ベルギーの方らしいですが、DHTEUMEULEUという英語サイトです。
現在公開されている作品(2014年2月現在)は、ブラウザIEでは、IE11でも見ることはできないので、それ以外のブラウザで御覧下さい。不思議な世界にビックリします。

IEでも動作する、この方の古い作品は爺のホームページで閲覧できます。
しかしこちらのサイトでは、Outlook Expressのメール専用の雛形として使用するためにアレンジされていて、原本そのものではありません。

雛形用にアレンジされたものから、普通にサイトで使用できるように私が勝手に改造したものを、当サイトで公開しています。
それが、GF作品です。
動作がおかしければ、それは原作者のせいでもアレンジされている方のせいでもありません。
JavaScriptをよく知らないのに、勝手に改造している私の責任です。

でも、とってもユニークで面白い作品なんですよ!

説明 ◆全ページ内参考リンク◆

各JavaScriptの紹介ページの中に、役に立つ参考サイトのページへのリンクがあります。
あのリンクはどこのページにあったっけ?と思うこともあるので、このコーナーでまとめています。
うっかりもれているリンクもあるので、随時更新予定。






現在のブラウザのバージョン&フォント最小サイズ  ◇HTMLのドキュメントタイプ  ◇CSSの記述(接頭語)について  ◇JavaScriptのコピペの方法  ◇外部jsの作成方法  ◇画像の指定方法について  ◇著作権と再配布について  ◇GF作品について  ◇全ページ内参考リンク


TOP

END
Google ネット検索 サイト内検索
アクセスカウンター