はてなブックマーク

HOME JavaScript入門 サブウィンドウを表示する ここでは、JavaScriptでサブウィンドウを表示する方法について解説します。 HTMLでも別ウィンドウは出せますが、 JavaScriptを利用するとウィンドウの位置や大きさを指定できます。 何かと使い道の多いスクリプトですので、是非マスターして下さい。 普通にサブウィンドウを表示する サブウィンドウを表示するには、以下のように記述します。 window.open("URL","ウィンドウ名") 指定したウィンドウ名でサブウィンドウを表示させます ウィンドウ名は、HTMLのターゲット名と同じです。 同じウィンドウ名を指定すると、そのウィンドウに指定したページが表示されます。 ウィンドウ名を空にすると、target="_blank"と同じことになります。 サブウィンドウを開くサンプル HTMLに以下のように記述してみてください

HOME JavaScript入門 変数2，定数 前回は変数の宣言と単純な用い方を説明しました。 しかし「変数」という名の通り、変数の中身は変更可能です。 このページではその方法について見ていきます。 また、変数に対して定数というものも存在します。 こちらは中身が変わらないものを格納します。 定数については注意点もあるので、それらを踏まえて解説します。 変数の中身を変えてみる 変数に値（数字や文字）を入れるには、「=」を用いるということを話しました。 これは代入でした。数学のようにイコール（等しい）では無いので気をつけましょう。 ではHTMLのbody内に以下のように記入してみて下さい。 <script> var n; n = 1; document.write( n + "<br>" );  //結果は1 n = n + 2; document.write( n + "<br>" ); 

HOME JavaScript入門 for文 このページと次のページでは繰り返し文を解説していきます。 繰り返しはfor文とwhile文がありますが、このページではfor文を説明します。 for文は繰り返し回数が判っている場合に使います。 for文の記述の仕方 for文の書き方は以下のようになります。 for ( var i = 初期値 ; 繰り返し条件 ; i++ ){ 処理 } 条件を満たしている間、処理を繰り返します。 for文のカッコ内は３つの区分になっています。最初の区分は変数「i」を宣言して、初期値を代入しています。 繰り返し文では「i」を用いるのが一般的です。次の区分とは半角セミコロン「;」で区切ります。 2つ目の区分は繰り返し条件を指定します。「i」と数値を比較するような条件を記述します。そしてまた半角セミコロンで区切ります。 3つ目の区分は、iの値の増減を記述します。通常

HOME JavaScript入門 戻る・進む・更新ボタンを作る ここでは、ブラウザの戻る・進む・更新といったボタンと同じ機能を持ったボタンを、 JavaScriptで作ってみたいと思います。 特に「戻る」ボタンなどは、 色々な所からリンクされているページに使うと威力を発揮します。 「更新」ボタンはリンクなどで出てきたlocationを使いますが、 「戻る」と「進む」はhistoryというものを使います。 英語で「履歴」という意味ですね。 戻る・進む・更新ボタンの作り方 閲覧ページを戻ったり進んだり更新したりするスクリプトは以下のように記述します。 history.back() 一つ前のページに戻ります（ブラウザの戻るボタンと同じ） history.forward() 一つ先にページに進みます（ブラウザの進むボタンと同じ） location.relord() ページを更新します（ブラウザの

HOME JavaScript入門 confirm さて、ここからダイアログを使ったプログラムを組む練習をしてみましょう。 すでにalertは基礎編で出てきたので割愛します。 ここではconfirmというダイアログを使ってみます。 これはユーザーに選択を促すダイアログです。 上図のようなダイアログがでます。処理の前に確認を取ったりする時に使います。 confirmの使い方 確認ダイアログconfirmの使い方です。 confirm(質問文) 確認ダイアログ（ＯＫかキャンセルを選択）を出します。 ＯＫならtrue、キャンセルならfalseとなります。 以下のようにHTMLのbody内に書いてみましょう。 <script> var flg;　//真偽を入れる変数の宣言 flg = confirm("背景の色を変えてもいいですか？"); //真偽の代入 if (flg == true) docu

HOME JavaScript入門 引数 このページでは、引数（ひきすう）について解説します。 引数を使うと、関数に様々な値を渡して、柔軟に活用することができます。 では実際にどのように引数を使うのか、見てみましょう。 引数を使ったサンプル 以下のサンプルでは、引数を使って関数に数字を渡しています。 関数内でそれを２乗して、計算結果を呼び出し元に返しています。 <script> function sqr(a){ return a + "の２乗は" + a*a + "です。"; } document.write( sqr(2) + "<br>" ); document.write( sqr(5) + "<br>" ); document.write( sqr(123)  + "<br>" ); </script> サンプル（別窓） サンプルページを見ると、2,5,123をそれぞれ2乗した計算

HOME JavaScript入門 関数，変数のスコープ JavaScriptの一連の命令は、関数という形にまとめておくと、繰り返し呼び出して使用することができます。 また、何かの計算をする命令を関数内に記述して、呼び出し元に計算結果を返したりします。 このページでは、関数について見ていきます。 また、関数の中と外で宣言された変数では、その使用できる範囲に違いが生じます。 この点も解説しておきます。 関数の記述方法 最初に、関数を記述する方法について掲載しておきます。 function 関数名(引数){処理} functionを使って関数を定義します。 関数名は任意に付けることができますが、 一般の命名規則では先頭は小文字にすることになっています。 引数は、次のページで解説します。 中括弧{}で囲った中に、一連の命令を記述していきます。 functionの後に半角スペースを入れて、関数名を

HOME JavaScript入門 インラインフレームのリンク設定 インラインフレームに表示するサイトURLを変更する方法について見ていきましょう。 JavaScriptを用いると、 インラインフレーム内のURLを自由に変更できます。 ただし他人のサイトを表示するのはご法度なので、 あくまで自分のサイト内のページに留めておきましょう。 インラインフレームのリンク変更のサンプル HTMLに、以下のように記入してみましょう。 <a href="JavaScript:ifr('https://pazru.net/puzzle/')">パズルの部屋へ</a> <br> <iframe src="https://pazru.net/" name="waku"></iframe> <script> function ifr(jpURL){ waku.location = jpURL; } </scri

このページでは、JavaScriptを記入する場所と記入の仕方について解説します。基本的には上図の４箇所に記入します。 ヘッダー内に HTMLのヘッダーに記入します。ここに書いたスクリプトは、body部分より前に読み込まれます。 先読みしておきたい画像や関数（処理を１まとめにしたもの）等を記入します。 body内に 何かを表示するようなスクリプトの場合、実際に表示する位置に記入します。 最近はbody最下部にJavaScriptを記述することが良いとされています。 タグ内に タグの中にイベントを組み込んで、そこに直接JavaScriptを記入できます。 関数を呼び出したり、簡単なスクリプトを記入します。 最近ではあまり使われなくなりました。 外部ファイルに 複数のWebページ内で同じ処理を行いたい場合は、外部ファイルにスクリプトを書いて、 それを各ページが読み込むようにします。 JavaS

HOME JavaScript入門 location.href（リンク） ここから、リンク関係のJavaScriptについて解説していきます。 まず始めは、普通にリンクを貼る方法です。 <a href="">と動作は同じです。 FORMのボタンにリンク指定したりする場合に使います。 location.hrefの記述 別ページに移動するには、以下のように記述します。 location.href="URL" 指定したURLへジャンプする <script> function jump(){ if (confirm("トップページに戻りますか？")==true) //OKならTOPページにジャンプさせる location.href = "https://www.pazru.net/"; } </script> <input type="button" name="link" value="TOPへ

HOME JavaScript入門 JavaScriptの外部ファイル このページではJavaScriptを外部ファイルで指定する方法について解説します。外部ファイルにソースを書いておくと複数のページから参照することができるので、良く使う関数などを記入しておくと非常に便利です。 外部ファイルの使用方法 外部ファイルを作成する 外部ファイルはJavaScript専用のファイルになります。 従って、HTMLの中にJavaScriptを埋め込む時に使った<script>～</script>を記入する必要はありません。 直接JavaScriptのソースを書いていきます。 外部ファイルを保存する時に、拡張子を.jsにします。 こうすることによって、JavaScript専用ファイルになります。 外部ファイルを読み込む 外部ファイルを読み込む場合、以下のように記述します。 <script type="t

HOME JavaScript入門 戻れないページ 今回は、ブラウザの「戻るボタン」 を押しても戻ることができないようにしてみたいと思います。この機能は検索エンジンなどで望まないページにアクセスされた時に、強制的に別ページへジャンプさせたりする時に使います。 今のページに戻れなくするには、ブラウザの履歴にURLを登録させないようにします。Ａタグやlocation.hrefを使うと現在のページが履歴に残るので、location.replace()というものを使います。 location.replace()のサンプル 以下のように使います。 location.replace(URL) 履歴を残さずに、カッコ内に指定したURLに移動します location.replace()の場合は、後ろの括弧内にジャンプ先を記入します。location.hrefは「=」で指定しますが、方法が違うので注意しまし

HOME JavaScript入門 ここでは、ビギナーの方を対象としたJavaScriptの解説を行っています。 JavaScriptは、Webページに組み込んでいろいろなアクションを起こすことができます。 是非JavaScriptを覚えて、一ランク上のWebページ作りに励んでみて下さい。 当サイトでは主に「初めてJavaScriptを触る人」、特にプログラム自体初めての方を対象にしています。 初めての方は様々な専門用語が出て来ると非常に難しく感じることがあるので、ここでは極力専門用語を使わないようにしています。 ここで書かれてあることをマスターしたなら、 後は色々なサイトでレベルを磨いていってください。 なお最初に断っておきますが、JavaScriptを理解するにはHTMLをある程度使える必要があります。 HTMLを十分使えない方は、まずそちらを勉強なさって下さい。 HTMLを理解してい

HOME JavaScript入門 アラート表示 このページでは、警告やメッセージを伝えるためのアラートダイアログを出す方法について見ていきます。 アラートは他人にメッセージを伝えるだけに用いるのではありません。 JavaScirptのプログラムを組んでいてエラーが出る場合に、 どこで間違っているのかチェックしていくのにも使えます。 アラートダイアログを出す まず最初に、アラートダイアログを出す方法を見ておきましょう。 alert(表示する内容) カッコ内の文字などをアラートダイアログで表示します。文字列の場合はクォーテーションで括る必要があります。 数値を表示したり、計算結果を表示させたり、数値と文字を繋いだりもできます。 文字列の場合は、ダブルクォーテーション「"」 若しくはシングルクォーテーション「'」で囲みます。 数字の場合はクォーテーションで囲みません。 他のプログラムの場合、数

更新日：2017.03.02 リクエストされたページが見つかりません！ ページが移動、または削除されました。 パズル関係コンテンツ ルービックキューブ攻略法 ルービックキューブを６面全部揃える方法について解説。 スピードキューブ攻略法 ルービックキューブを高速で揃えるための手順を覚える方法について解説。 パズルの部屋 Web上で遊べるパズル。 クロスワードやナンプレ等７つのパズルを楽しめます。 解説系コンテンツ JavaScript入門 ビギナーの方を対象としたJavaScriptの解説をしています。 JavaScript入門（HTML5編） ここではHTML5時代におけるJavaScriptを解説していきます。 ネットでパソコン教室 Windows、Word・Excelの使い方について図を交えて解説しています。 ホームページ作り！ 無料で手軽にホームページを作る方法を解説します。 松の剪

更新日：2017.03.02 リクエストされたページが見つかりません！ ページが移動、または削除されました。 パズル関係コンテンツ ルービックキューブ攻略法 ルービックキューブを６面全部揃える方法について解説。 スピードキューブ攻略法 ルービックキューブを高速で揃えるための手順を覚える方法について解説。 パズルの部屋 Web上で遊べるパズル。 クロスワードやナンプレ等７つのパズルを楽しめます。 解説系コンテンツ JavaScript入門 ビギナーの方を対象としたJavaScriptの解説をしています。 JavaScript入門（HTML5編） ここではHTML5時代におけるJavaScriptを解説していきます。 ネットでパソコン教室 Windows、Word・Excelの使い方について図を交えて解説しています。 ホームページ作り！ 無料で手軽にホームページを作る方法を解説します。 松の剪