Javascript プログラミング

警告ダイアログを表示する方法【Javascript入門 #4】

 

みやちゃ

 

皆さんこんにちは、みやちゃです!

物理とプログラミングについて解説しています!

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています!

警告ダイアログの表示方法をご紹介致します。

今回は
  • alert()の使い方
この記事を読むと

警告ダイアログが表示できるようになります。

alert

alertメソッドを用いることで、以下のような警告ダイアログを表示することができます。

[OK]ボタンをクリックすることで、ダイアログが閉じられます。

ダイアログが表示されている間は他の操作をすることができません。

警告ダイアログの表示

jsファイルにコードを記述して警告ダイアログを表示する方法をご紹介します。

まずは、「js-sample.html」と「js-sample.js」の2つのファイルを用意します。

2つのファイルの作成とHTMLファイルにjsファイルを読み込む方法をこちらの記事で開設しているで、ぜひ参考にしてください。

それぞれのファイルの中身は以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javascript Practice</title>
  <link rel="stylesheet" href="js-sample.css">
</head>
<body>
  <div id="container">警告ダイアログ</div>
  <script type="text/javascript" src="js-sample.js" charset="utf-8"></script>
</body>
</html>

9行目のdivの文字列をクリックしたら警告ダイアログが表示されるようにします。

この時点でのブラウザでの見え方は以下のようになります。

「警告ダイアログ」という文字列が表示されています。

「警告ダイアログ」という文字列をクリックしたら、警告ダイアログが表示されるように、jsファイルを編集します。

jsファイルを以下のような内容にしてください。

var div = document.getElementById("container")

div.onclick = function(){
  alert("警告ダイアログ");
};

1行目のvarで「div」という変数の宣言をしています。

「div」の文字列をクリックすることで、警告ダイアログが表示されます。

まとめ

いかがでしたでしょうか?

今回は、警告ダイアログの表示の仕方について解説しました。

 

みやちゃ

 

ここまでご覧いただきありがとうございます!

こちら のUdemyの動画教材は、8時間で、

  • Dockerで仮想環境構築
  • Railsの基礎を解説しながら、アプリケーション開発
  • RSpecでテストを記述

まで解説しています。

Udemyの教材へ

Railsエンジニアとして働くために必要な、DockerとRSpecを同時に解説してくれています。

DockerとRSpecを使って作ったポートフォリオはかなり評価が高くなります。

ぜひ動画を見てみてはいかがでしょうか?

Udemyの教材へ

受講生は、5000人以上!です。

さらに、Udemyは、30日間の返金保証付きなので、いつでも返金できます。

たったの8時間でDocker、Rails、Rspecを学ぶ即戦力Railsエンジニア養成講座

© 2021 みやちゃのブログ Powered by AFFINGER5