KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#9「JavaScriptのダイアログとリンクについて学ぶ」

この記事をシェアする

やったこと

前回に引き続きJavaScriptをやっていきます。

と言っても、前回で基本的な書き方の部分は理解できたので、今回は実践で使用する動的挙動のあるメソッドを軽く確認しました。

主にダイアログとリンクです。この二つを実装するのにいろんな動的表現があるので、まずは基本を勉強してみました。

ダイアログ

確認

f:id:samuraikid520:20180203103440p:plain
ユーザーにOKかキャンセルか聞いて、その判断を基に処理を分岐させることができる。

//真偽を入れる変数の宣言
var flg; 

//真偽の代入
flg = confirm("文字列を追加していいですか?"); 

//真ならテストと言う文字列を追加
if (flg == true) document.write("<br>テスト"); 

入力

f:id:samuraikid520:20180203103457p:plain
ユーザーに入力を求めるダイアログ。これでパスワード管理とかもできる。

//入力文字を入れる変数
var box;  

//インプットボックスの表示&入力文字をboxに代入
box = prompt("名前を入力してください","");

//boxが空の場合の処理
if (box == "") box = "入力がありませんでした";

//出力
document.write("ようこそ、<b>" + box + "</b>さん!");

リンク

f:id:samuraikid520:20180203103515p:plain
リンク方法としてaタグを利用した方法もあるけど今回は、location.hrefというメソッドで実装する。

//リンクの作成
function jump(){
  if (confirm("トップページに戻りますか?")==true)
    //OKならTOPページにジャンプさせる
    location.href = "http://www.kimuson.com/";
}

上記の方法を応用して、選択のプルダウンからリンク先を選んで飛ばすこともできる。
ちなみにプルダウンのURLは配列として格納しておく。

//リンク先へジャンプさせる関数
function selectNavi(){ 	
   var num;
   //何番目のoptionが選択されたか調べる
   num = document.navi.contents.selectedIndex;
   //該当するリンク先へジャンプさせる
  location.href = jpURL[num];
}

戻る・進む・更新

ブラウザの使用に基づいて動作する。
そのため基本使用はブラウザに依存するため使用には注意が必要。

//戻る
  history.back();
//進む
  history.forward();
//更新
  location.reload();

まとめ

だいぶJavaScriptの書き方もわかってきたので、予定よりもだいぶ早いけど次回はデモサイトを作り始めようかと思う。

JavaScriptって表現方法がたくさんあるんだけど、一つ一つを勉強してるととっても時間かかるのと結構飽きるので、実際に作っていきながら学んでいく方がいい気がした。

なのでJavaScriptを集中的に勉強するのはここで終了!、さらにフロントエンドの総復習も終了する!

昔フロントエンド勉強してた時の感覚が戻ってきたので、次回から実際に作品作りを進めて行く。